Simple Form

Forms must have a unique HTML id attribute set for tracking to work.

In the example code snippet below you can see that the form’s unique ID is set to “cme-custom-form-1” on line number 1.

<form action="/simple-form/" id="cme-custom-form-1" method="post">
  <fieldset>
    <h3>cme Custom Form 1</h3>
    <p>
      <label for="cme-custom-form-1-name">Name <abbr title="required">*</abbr></label>
      <input name="cme-custom-form-1-name" type="text" id="cme-custom-form-1-name" value="" required="required">
    </p>
    <p>
      <label for="cme-custom-form-1-message">Message <abbr title="required">*</abbr></label>
      <textarea name="cme-custom-form-1-message" cols="40" rows="7" id="cme-custom-form-1-message" required="required"></textarea>
    </p>
    <p>
      <input id="cme-custom-form-1-submit" type="submit" value="Go!" class="button" data-sending-label="Sending">
    </p>
  </fieldset>
</form>

Custom page exit event

Also, any navigation away from this page will send a custom exit intent event to GA.

// More reliable. Switch tabs as a simple test.
document.addEventListener('visibilitychange', function logData() {       
  if (document.visibilityState === 'hidden') {         
    const msg = 'visibilitychange: Can send stats to GA here too.';         
    alert(msg);         
    console.log(msg);         
    // sendBeachon can go here e.g., navigator.sendBeacon('/log', analyticsData);         
    // Call to gtag can also go here.         
    __gtagTracker('event', 'page-exit', {             
      'event_category': 'contact-page',  
      'event_action': 'exit-intent',  
      'event_label': 'contact-page-exit',   
      'value': 1         
    });       
  } 
});

---

Simple custom HTML form using custom JavaScript to send a conversion hit

This form sends a custom conversion event to GA using JavaScript.

It also will send an exit-intent event to GA if there’s anything in the name field when a visitor tries to leave the page. Give it a try with your Omnibug debugger visible at the same time.

Contact Us – Custom Conversion Test

Name *

Message *

/** Let's add event listener to try
     sending a custom conversion event. */ 
(function () {   
  let btnElt = document.getElementById("simple-test-form-btn");   
  if (!btnElt) return; // If no button bail.   
  btnElt.addEventListener("click", function (event) {     
    console.log("Sending custom conversion event to GA.");    
    /* Here, we use the gtag.js API. */
    gtag('event', 'conversion', {
       'event_category': 'form',
       'event_label': 'simple-test-form-custom-conversion',
       'value': 1
    });
  });
})();

Simple custom HTML form with default tracking (no custom code) and hidden field for document.referrer

This form is tracked using default tracking attributes.

See the code block below for the custom JavaScript that sets the hidden field.

cme Custom Form 1

Name *

Message *

(function(){
   if (!document.URL.includes("simple-form")) return;
   try {
       document.querySelector("#referrer").setAttribute("value", document.referrer);
   } catch (error) {
     console.error(There was an error setting the hidden field. Check the ID attribute in the hidden field. ${error});
   }
 })()

Simple custom HTML form with no custom code for tracking and no form ID

This form is not tracked because there’s no unique ID set.

cme Custom Form 2 (no form ID)

Name *

Message *