SOLVED FORM element: add custom action

How To
1

Hope that someone can help me with this. I’m no experienced coder. Client wants to add the following code:

dataLayer.push({“event”: “FormSubmit”});

after successful submitting. I’ve found “Custom” action, but can’t find a way to implement the code. It’s pretty urgent so any help is greatly appreciated.

2

I’ve tried with this function, but with no success:

function skript_za_gmt( $form ) {  
	echo
		'<script>
			dataLayer.push({"event": "FormSubmit"});
		</script>';
}
add_action( 'bricks/form/custom_action', 'skript_za_gmt', 10, 1 );

Please, can someone help with this? @timmse ?

3

The bricks/form/custom_action is only able to act on information from the server side after the form is submitted. Javascript won’t work here. What you probably want to do is add your javascript like this to the footer of your page. Or at least in a code block below your form:

(function() {
    // put your form element id below
    var form = document.getElementById("brxe-mysvdb");

    form.onsubmit = function() {
        dataLayer.push({"event": "FormSubmit"});
    };
   
})();
4

@cmstew Thanks for your support. Will try it. Thanks again.

5

@cmstew Code is working perfectly :slight_smile: Thanks!!!

1 Like
6

@cmstew In Contact Form 7, I use the following code to track the form submit event, I don’t know how to set it in Bricks Form, can you please help to fix this code? Thank you very much!

<script type="text/javascript">
    document.addEventListener( 'wpcf7mailsent', function( event ) {
        dataLayer.push({
          'event' : 'wpcf7successfulsubmit',
          'Leads-formID' : event.detail.contactFormId
        });
    }, false );
</script>
7

Hey,

You could probably do something like this:

(function() {
  document.querySelectorAll('.brxe-form').forEach(function(form){
    form.onsubmit = function(){
      dataLayer.push({
        'event' : 'brickssuccessfulsubmit',
        // Correction: This line had a semi-colon by accident instead of a comma
        'Leads-formID' : form.dataset.elementId,
      });
    };
  });
// Correction: This last line was missing before
})();
1 Like
8

@cmstew Thanks for your help! I will try it tomorrow, and report you the result.

9

@cmstew Hey friend, I have tried the code, but still not work. I don’t know what’s the trouble.
Anyway, thank you very much!

Here’s some setting image:

1
11438×924 75.8 KB

2
21338×1294 65.2 KB

3
31606×498 55 KB

4
41422×650 63.5 KB

In addition, I called the same form three times through the template in one page, I don’t know if the problem is here?

10

Hey,

Oops, There was a couple typos in the code above that I’ve now fixed. Try it again. If it still doesn’t work, here’s few thoughts:

  • Make sure the script I gave you is run in the footer
  • Make sure your google tag manager script loads before the script I gave you
1 Like
11

@cmstew Wow, it worked! Thank you so much for your helpful help! Have fun every day!