How to trigger some code on form submission?

Form passwords are only available to users with a Pro or an Team subscription.

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": "<FORM_SLUG>",
        "id": <FORM_ID>
    },
    "submission_data": {
        "field_id": "field_value"
    }
}

Where <FORM_SLUG> is the URL identifier of your form. For example, if your form URL is https://NoteForms.com/forms/notion-forms-contact, then your <FORM_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 can still use the custom code feature as described above, but you can also add some custom code to the page where the form is embedded. The iframe used to embed the form also emits the same event to the parent page. Therefore, you can use the same code as above on the page where the form is embedded. This is particularly useful to redirect to another page on form submission, even if the form is embedded.

An example

You can add this code to the form where the form is embedded to redirect after a form submission.

<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
   }    
   // Redirect
   window.location.href = "myurl.com"
});
</script>

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

Updated on: 08/10/2024