Articles on: Working with OpnForm

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 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. Make sure to:
- Replace <FORM_SLUG> with your form slug
- Change the target url
<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: 17/06/2024

Was this article helpful?

Share your feedback

Cancel

Thank you!