This JavaScript function will add missing form IDs to Avada forms except for search forms.

1029038-avada-forms-ids-readme.js

/**
 * Add missing form IDs for conversion tracking.
 */
(function(){
  // Grab all the forms on the page.
  const formElts = document.querySelectorAll("form");

  // If no forms, bail.
  if (!formElts.length) return;
  
  // Convert form elements to an array so we can map over them.
  let formsArr = Array.from(formElts);
  
  formsArr.map((elt) => {
    try {
      // Skip search forms.
      if (elt.getAttribute("role") === "search") return;
            
      // If there's no ID, create one.
      if (!elt.hasAttribute("id")) {
        // Use the data-form-id from the parent div to be the form ID.
        let idText = elt.parentNode.getAttribute("data-form-id");
        // Set it.
        elt.setAttribute("id", idText);
      }
    } catch (e) {
      console.log("Something wrong happened when setting the form ID.");
    }
  });
})();

1029038-avada-forms-ids-readme.md

Add form IDs to Avada Forms

Unique form IDs are great necessary to have if you want to track conversions.

This JavaScript function will add missing form IDs to Avada forms except for search forms.

The algorithm will use the form's parent data-form-id value as the form's ID number. The data-form-id must be set for this code to work properly. This property/value is usually set in the <div></div> tags that wrap the form.

---

Live Demo

See the live demo on CodePen.

--

Usage

1. Copy the contents of the 1029038-avada-forms-ids-readme.js file.
2. Paste the contents in Avada > Options > Advanced > Code Fields > Space before </body>. This will place the code in the footer of the page. It will not work anywhere else.
3. Bring up a page that has an Avada form element that didn't have a form ID before.
4. Inspect the form element to confirm there is now an ID set that's equal to the data-form-id in the parent <div></div> tag above it.