How to excute code after form validation within Google Tag Manager constrictions?

Question

I need to call a tracking code when a form is submit and after it is validated using Google Tag Manager. I do not have direct access to the site code. I can only execute script from Google Tag Manager.

I've searched the web for an answer, but I could not find something that worked.

I've tried:

jQuery('#formId').on('submit',function(){
    console.log('test');
})

But this prints "test" before the form validates the fields, so if I leave a field blank, it still prints "test".

I've tried different approaches that I found:

jQuery('#formId').on('submit',function(){
    if (jQuery('#formId').valid()){
     console.log('test');
    }
})

or

jQuery('#formId').on('submit',function(){
    if (jQuery(this).valid()){
     console.log('test');
    }
})

or

jQuery('#formId').on('submit',function(event){
    if (jQuery(event).valid()){
     console.log('test');
    }
})

But they all return VM914:2 Uncaught TypeError: jQuery(...).valid is not a function

How can I run a script from Google Tag Manager that runs on formsubmit after the form validation?

user_4855306 · Answer

you seem to be trying to use the jquery validate plugin, which is not native jquery. you can add it via a script tag:

but to use the valid function, you actually need to set validation rules ahead of time:

var form = jQuery('#formId');


form.validate() 
form.on('submit', function(event) {
  if (form.valid()) {
    consoel.log('good now')
  }
})

this will cause validation against any web native validation directives on the inputs in the form, if this is NOT using web native validation directive, (like it's using angular or some external lib), you'll need to manually define validation rules in your validate function or do something completely different... here are the docs: https://jqueryvalidation.org/

fair warning, the validate and valid functions actually do DOM manipulation and can override event listeners applied elsewhere, so tread carefully. You're doing this with your hands tied behind your back not just having access to the site code.

here's a stackblitz: https://stackblitz.com/edit/jquery-m7qkpy?file=index.html

if you can't add an external plugin, well then that changes a lot.

user_486382 · Answer

The given site (https://www.sportlink.com.br/a-melhor-grama-sintetica/) uses Wordpress.

The contact form in question has the class wpcf7. A web search indicated that the form and its validation logic is implemented by the Wordpress plugin Contact Form 7 (its JavaScript logic is currently available here, compressed by Autoptimize)

Fortunately, Confact Form 7 provides custom events to hook into their validation logic, which are documented here: https://contactform7.com/dom-events/.

Solution for your question:

jQuery('.wpcf7').on('wpcf7mailsent', function(event) {
    console.log('test');
});

Notes:

wpcf7submit was not sufficient in my tests, this fired even for invalid forms
in case of only one contact form, jQuery('.wpcf7') works also (so you don't need to know the #formid, if that's a problem)

How to excute code after form validation within Google Tag Manager constrictions?

2 Answers