Track Google Analytics event for all fluent forms in your site

event-for-all-forms.js

(function($){    
    if(typeof gtag != 'function') {
      return;
    }
    var fluentForms = $('form.frm-fluent-form');
    fluentForms.each(function() {
      var $form = $(this);
      var formId = $form.attr('data-form_id');
      
      gtag('event', 'ViewForm', {
        'event_category': 'FluentForms',
        'event_label': 'View Form',
        'form_id': formId
      });
      
      $form.on('fluentform_submission_success', function() {
        
        gtag('event', 'FormSubmission', {
          'event_category': 'FluentForms',
          'event_label': 'Form Submitted',
          'form_id': formId
        });
        
      });
      
    });
    
  }(jQuery));

Hi @undfine,

I must add the following in Fluent Forms - contact form.
I add it as it is, in Fluent Forms custom JS, and the code it takes action, when the user access the page... but I need, the code, to send info, once users have successfully filled out the contact form.

dataLayer.push({
'event': 'Contact_Form'
});

Can you help me please?

Thank you

Regards

---

Hi @techjewel,

Thank you for this script. Because of the new GA4 events, I modified this to use standard/recommended dimensions. Although it's great to set up a loop for multiple forms, here is a simplified example for a single form, using Fluent Forms' "Custom CSS/JS" which already stores the form as a jQuery object = $form

if(typeof gtag != 'function') {
  return;
}
var form_id = $form.prop('id');
$form.on('fluentform_submission_success', function() {
    
    // GA4 event with recommended standard dimensions
    gtag('event', 'generate_lead', {
        'form_name': 'General Contact Form', // change this to a recognizable name for your form
        'form_id': form_id,
    });
});