> ## Documentation Index
> Fetch the complete documentation index at: https://developers.activeprospect.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Consent Tagging Example

export const TaggingSample = () => {
  const [tag, setTag] = useState("");
  const findElementWithRole = event => {
    return event.target.closest("[data-tf-element-role]");
  };
  const handleMouseOver = event => {
    const tfElement = findElementWithRole(event);
    if (tfElement === null) return;
    const tfElementType = tfElement.getAttribute("data-tf-element-role");
    tfElement.classList.add("consent-hilight");
    setTag(`Consent Tag: ${tfElementType}`);
  };
  const handleMouseOut = event => {
    const tfElement = findElementWithRole(event);
    if (tfElement === null) return;
    tfElement.classList.remove("consent-hilight");
  };
  const checkOneToOne = event => {
    event.preventDefault();
    const generalConsent = document.querySelector('#consent-check');
    const compAConsent = document.querySelector('#enum-1-consent-check');
    const compBConsent = document.querySelector('#enum-2-consent-check');
    const compCConsent = document.querySelector('#enum-3-consent-check');
    let answer = 'One to One Consent was not granted';
    const nameList = [];
    if (generalConsent?.checked) {
      if (compAConsent?.checked) nameList.push('Summit Ridge Roofing');
      if (compBConsent?.checked) nameList.push('Apex Roofing and Restoration');
      if (compCConsent?.checked) nameList.push("Smith Bro's Roofing Inc.");
      if (nameList.length === 1) {
        answer = `One to One Consent was granted for ${nameList[0]}`;
      } else if (nameList.length === 2) {
        answer = `One to One Consent was granted for ${nameList[0]} and ${nameList[1]}`;
      } else if (nameList.length === 3) {
        answer = `One to One consent was detected for advertisers ${nameList[0]}, ${nameList[1]}, and ${nameList[2]} . In addition this submission will return true for requests without an advertiser_name parameter.`;
      }
    }
    alert(answer);
  };
  return <div className="tfbody" id="test-form" onMouseOver={handleMouseOver} onMouseOut={handleMouseOut}>
      <form method="post" data-tf-element-role="offer" autoComplete="on" name="strongbad" action="https://app.leadconduit.com/flows/5d83f55475fe7fe5a5f957f8/sources/57768d274aab1d897484807e/submit?redir_url=http%3A%2F%2Factiveprospect.com">
        <fieldset>
          <legend>Contact Info</legend>
          <div style={{
    width: "100%"
  }}>
            <div className="form_field_hldr_hldr" data-tf-element-role="consent-grantor-name">
              <div className="form_field_hldr">
                <label htmlFor="firstName">First Name</label>
                <input type="text" name="first_name" id="firstName" placeholder="First name" required autoComplete="given-name" />
              </div>
              <div className="form_field_hldr">
                <label htmlFor="lastName">Last Name</label>
                <input type="text" name="last_name" id="lastName" placeholder="Last name" required autoComplete="family-name" />
              </div>
            </div>
            <div className="form_field_hldr_hldr">
              <div className="form_field_hldr">
                <label htmlFor="frmEmailA">Email</label>
                <input type="email" data-tf-element-role="consent-grantor-email" name="email" id="frmEmailA" placeholder="name@example.com" required autoComplete="email" />
              </div>
              <div className="form_field_hldr">
                <label htmlFor="frmPhoneNumA">Phone</label>
                <input type="tel" data-tf-element-role="consent-grantor-phone" name="phone" id="frmPhoneNumA" placeholder="+1-650-450-1212" required autoComplete="tel" />
              </div>
            </div>
          </div>
        </fieldset>
        <br />
        <div className="consent_copy">
          <div>
            <span className="indentpar">
              Choose companies to be contacted by:
            </span>
          </div>
          <div className="check-wrapper">
            <input id="enum-1-consent-check" type="checkbox" value="terms" data-tf-element-role="consent-opted-advertiser-input-1" className="indentpar" />
            <div className="indented" data-tf-element-role="consent-opted-advertiser-name-1">
              Summit Ridge Roofing
            </div>
          </div>
          <div className="check-wrapper">
            <input id="enum-2-consent-check" type="checkbox" value="terms" data-tf-element-role="consent-opted-advertiser-input-2" className="indentpar" />
            <div className="indented" data-tf-element-role="consent-opted-advertiser-name-2">
              Apex Roofing and Restoration
            </div>
          </div>
          <div className="check-wrapper">
            <input id="enum-3-consent-check" type="checkbox" value="terms" data-tf-element-role="consent-opted-advertiser-input-3" className="indentpar" />
            <div className="indented" data-tf-element-role="consent-opted-advertiser-name-3">
              Smith Bro's Roofing Inc.
            </div>
          </div>
          <br />
          <div className="check-wrapper">
            <input id="consent-check" type="checkbox" value="terms" data-tf-element-role="consent-opt-in" className="indentpar" />
            <div className="indented" data-tf-element-role="consent-language">
              By clicking{" "}
              <b data-tf-element-role="submit-text">Submit</b>{" "}
              below I expressly consent to the companies selected above to send
              marketing/promotional messages,{" "}
              <span data-tf-element-role="consent-grantor-waived-regulated-technologies">
                <span data-tf-element-role="contact-method">
                  including texts and calls
                </span>{" "}
                made using an automated telephone dialing system,
              </span>{" "}
              related to the product or service I am inquiring about to{" "}
              <span>the number provided above</span>.{" "}
              <span data-tf-element-role="consent-grantor-waived-purchase-condition">
                I understand that accepting this consent does not require me to
                obtain any good or service.
              </span>
            </div>
            <br />
            <div style={{
    textAlign: "right",
    display: "inline-block",
    width: "100%"
  }}>
              <button className="rounded-sm bg-gray-300 px-2.5 py-1 font-semibold text-black shadow-xs hover:bg-indigo-200" type="reset">Reset form</button>
              <button type="button" className="rounded-sm bg-gray-300 px-2.5 py-1 font-semibold text-black shadow-xs hover:bg-indigo-200 ml-2" onClick={checkOneToOne} data-tf-element-role="submit">
                Submit
              </button>
            </div>
          </div>
        </div>
      </form>
      <div id="consent_tag_target">{tag}</div>
    </div>;
};

Explore our interactive sample form below to see how consent tags are effectively implemented. As you hover over different sections, you'll see where each tag is applied. Complete the form and make your selections to experience how one-to-one consent is checked based on your inputs.

**View TrustedForm Consent Tag instructions and guide [here](/pages/trustedform/consent-tagging).**

<TaggingSample />