How to add TrustedForm Consent Tags to your LeadsHook Decision Trees

  • Von

https://developers.activeprospect.com/docs/trustedform/consent-tagging

Please see the video below:

Script used in the video: (Add in your form node script)

<script>
  console.log("JavaScript script added and initialized.");

  // Function to process the elements and add attributes
  function processFormElements(elements) {
    console.log("Executing processFormElements function.");

    elements.forEach((elementConfig) => {
      const { selector, attributes } = elementConfig;

      console.log(`Processing selector: ${selector}`);
      const elements = document.querySelectorAll(selector);

      if (elements.length === 0) {
        console.warn(`No elements found for selector: ${selector}`);
      } else {
        elements.forEach((element, index) => {
          console.log(`Targeting element ${index + 1} for selector: ${selector}`, element);
          for (const [key, value] of Object.entries(attributes)) {
            element.setAttribute(key, value);
            console.log(`Added attribute: ${key}="${value}" to element`, element);
          }
        });
      }
    });

    console.log("Finished processing all elements.");
  }

  // Centralized list of elements and attributes
  const formElements = [
    {
      selector: 'div#dt-container.dt-container', // Target div with specific id and class
      attributes: {
        'data-tf-element-role': 'offer'
      }
    },
    {
      selector: 'div.form-consent-field-container.consent-section', // Target consent section div
      attributes: {
        'data-tf-element-role': 'consent-opt-in'
      }
    },
    {
      selector: 'input[name="first_name"]', // Target input for first name
      attributes: {
        'data-tf-element-role': 'consent-grantor-name'
      }
    },
    {
      selector: 'input[name="phone_number"]', // Target input for phone number
      attributes: {
        'data-tf-element-role': 'consent-grantor-phone'
      }
    }
    // Add more elements here as needed
  ];

  // Ensure the script runs regardless of when it is loaded
  if (document.readyState === "loading") {
    console.log("DOM is still loading. Waiting for DOMContentLoaded event.");
    document.addEventListener("DOMContentLoaded", () => {
      processFormElements(formElements);
    });
  } else {
    console.log("DOM is already loaded. Running processFormElements immediately.");
    processFormElements(formElements);
  }
</script>
Tagged: