How to listen to Form Block events and add Custom Code (React version)

Custom Coding
#1

Currently there are three events associated with Form Block submission:

  • submit-form event is triggered before form submission.

  • submit-form-success event is triggered after successful form submission.

  • submit-form-failure event is triggered after unsuccessful form submission.

<script>
window.addEventListener('submit-form-form1', (e) => {
  // e.detail is an object with form field names and values
  console.log('form submit', e.detail);
  // form submit { "Full Name": "Softr", "Email": "info@softr.io" }
});

window.addEventListener('submit-form-success-form1', (e) => {
  // e.detail is an object with form field names and values
  console.log('form submit success', e.detail);
  // form submit success { "Full Name": "Softr", "Email": "info@softr.io" }
});

window.addEventListener('submit-form-failure-form1', (e) => {
  console.log('form submit failure', e.detail);
  // form submit failure 'Email field is required.'
});
</script>
3 Likes
API to update an element
My GPT results take time to return, how do you have a loading screen or loading widget to delay the results page?
#2

Is there a plan for getting this info into docs.softr.io? Or somewhere else?

1 Like
#3

Yes absolutely. Just wanted to share it here before it’s published anywhere else.

1 Like
#4

Does this support form blocks with names that include a hyphen? For example, if the block was called “form-1” in Softr Studio, would that work and if so what should the syntax be?

#5

@jstrauss hyphens should work as expected. Did you notice issues ?

#6

Hi @artur ,

I’m trying to use a signup from to push into GTM via datalayer and register an event (for google/facebook ads tracking etc.).

This code only seems to work on a customizable form block (but not a signup form). here is the code I am using:

<script>
window.addEventListener('submit-form-success-signup-form', (e) => {
  console.log('form submit success', e.detail);
  dataLayer.push ({
        'event' : 'FormSubmission'       
            });
});

</script>

I’ve looked everywhere for a solution but can’t seem to find anything.

Any ideas on pushing an event from a signup form into the data layer?

#7

I will be able to share a code for signup block tomorrow. Signup block is still to be updated by us to work with the above code. but I can help with old approach. Can you share a link ?

#9

@thegarty this should work

<script>
window.addEventListener('DOMContentLoaded', (event) => {
    $( "#sw-sign-up-submit-btn" ).click(function() {
        dataLayer.push ({'event' : 'FormSubmission'});
    });
});
</script>

Once the block is updated though this will need to be changed just FYI