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>
4 Likes
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

1 Like
10

Hello is the above script still the best solution for pushing sign-up form data into the data layer?

11

hi @artur thanks for your help here. What is the best way to catch a click on a list element (when not using the action buttons for which the React version of the solution seems to be this one: Action Buttons - Update Records event listeners)?

thx, Stephan

12

Hey @artur - is the sign up script up to date? Or is there an updated one following the block update?

13

I don’t think so, if you have a link to the page pls share it so I can check and provide up to date version

14

Thanks for the quick response Artur.
Here’s the page I’m trying to send an event from:

Will the event recognise Gmail sign up?