How to trigger some code on form submission?

Sometimes it can be useful to run some custom code whenever a form gets submitted. Some example use cases:
- Redirect after submission to a certain page, with some custom URL parameters
- Track a submission event with an analytics tool
- And more

On every form submission, our application "post a message" that you can use to trigger some custom code. The emitted message looks like this:

{ "type": "form-submitted", "form": { "slug": "", "id": }, "submission_data": { "field_id": "field_value" } }

Where slug is the URL identifier of your form. For example, if your form URL is https://opnform.com/forms/notion-forms-contact , then your slug is notion-forms-contact. There are two ways to use this message.

If the form is not embedded

Then you can use the custom code feature like this:

<script>
window.addEventListener('message', function(event) {
   // Make sure that the event data has the type `form-submitted`
   if (event.data?.type !== 'form-submitted' ||  event.data?.form?.slug != <FORM_SLUG>) {
       return
   }    
   // Do something (redirect, track your own event, etc)
   // ...
});
</script>

If the form is embedded

If the form is embedded, you no longer need to use or add codes as it will automatically redirect of this is enabled.

How to redirect to another page after form submission?



Please contact us via the live chat if you need any help.

Updated on: 20/10/2024