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>
5 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?

15

Is it still true for customizable form?

It seems these events are not triggered in my app

16

Hi @artur - Should this script work on pages that use the “Signup with side image” content block? The form I’m using doesn’t appear to have an ID or class I can use: https://app.coverdoc.ai/sign-up

17

@Ambar4, it should. Can you elaborate on what you are trying to achieve?

18

I’m trying to use Google Tag Manager to fire an event in GA4 when a user signs up via the Softr form. I’d like to use dataLayer.push for the “submit-form” event but the script doesn’t work for me when I use a custom code block in Softr on https://app.coverdoc.ai/sign-up

19

@artur I have a custom code that listens to different forms on different pages in the footer custom code. the code is meant to show a custom loading screen when a form is submitted and refresh the parent page when the form submission is successful, it works on the dev environment(app clone) but it doesn’t work in prod(user-visible) the code looks like this below:

<div id="loading-screen">
    <div class="ring">Loading
        <span id="sp"></span>
    </div>
</div>


<div id="loading-screen-n">
    <div class="ring">Connecting
        <span id="sp"></span>
    </div>
</div>

<style>

    
.ring
{
// some css
}
.ring:before
{
// some css
}
#sp
{
// some css
}
#sp:before
{
// some css
}
@keyframes animateC
{
// some css}
@keyframes animate
// some css
}
  
  #loading-screen,#loading-screen-n {
// some css
  }
</style>

<script>

const showLoadingScreen = (s) => {
    document.getElementById(s).style.display = 'block';
};

const hideLoadingScreen = (s) => {
    document.getElementById(s).style.display = 'none';
};

window.addEventListener('submit-form-metricform', () => {
    showLoadingScreen('loading-screen');
})
window.addEventListener('submit-form-success-metricform', () => {
    hideLoadingScreen('loading-screen')
    window.parent.location.reload();
});
window.addEventListener('submit-form-recommend', () => {
    showLoadingScreen('loading-screen');
})
window.addEventListener('submit-form-success-recommendform', () => {
    hideLoadingScreen('loading-screen')
    window.parent.location.reload();
})"
20

Hi,

For your use case, few things:
You point, in your script, to loading-screen, but in your html it is loading-screen-n (at least one of them). Would this come from there?

The event listener for a block should be nested in another event listener, to avoid bugs.

window.addEventListener('block-loaded-YOURBLOCK', () => {
	console.log('Block loaded');
});

Don’t forget to finish your script by </script>

Adding the code at page level would be better than running this all the time at app level (if this is the case, from what I understood)

21

@matthieu_chateau ok I tried adding the code at the page level, but then I feel it’s a selector thing because when i tried console logging something when the form is submitted it doesn’t show up in the console
here is a copy of my code

<script>
       document.addEventListener('DOMContentLoaded', function() {

    const currentPageURL = window.location.href;
    console.log("Page loaded")
    
    if(currentPageURL.includes("ad-filter-modal")){
        
        console.log("Modal Page loaded")
        
        const form1  = document.getElementById("metricform")
        
        form1.addEventListener('submit-form', () => {
            showLoadingScreen('loading-screen');
        })
        form1.addEventListener('submit-form-success', (e) => {
            hideLoadingScreen('loading-screen')
            window.parent.location.reload();
        });
       form1.addEventListener('submit-form-failure', (e) => {
            hideLoadingScreen('loading-screen')
        });
    }
})
</script>

@artur I will also want the details of custom events in softr to be published in the docs