Form Whitelist

Ayesha Akhtar
Ayesha Akhtar
  • Updated

Feature Snapshot

Summary:
Form Whitelist is a configuration option in TrustedForm that restricts the injection of the hidden certificate URL field only to specific forms by using defined CSS selectors, ensuring that only the intended forms are modified by the script.

Key Benefits:

  • Provides precise control so that only designated lead capture forms are modified.
  • Prevents unwanted injection into non‑lead or extraneous forms, preserving page functionality.

Typical Use Cases:

  • Websites with multiple forms where only one (or a few) should capture the TrustedForm certificate.
  • Environments where non‑lead forms (e.g., search boxes or comment fields) must remain unaltered.
  • Platforms built with page builders or content management systems where targeted control over form behavior is required.

How the Form Whitelist works

By default, the TrustedForm Certify Web SDK injects a hidden field carrying the TrustedForm Certificate URL into every form on a page. When using Form Whitelist, you define a variable (commonly named “formId”) with a CSS selector that identifies the specific form(s) to target. The script then appends this selector as a query parameter (form_selector) to its API call so that only matching forms receive the hidden field. If no forms match the whitelist selector, the field is not injected.


Step‑by‑Step Instructions

  1. Declare a new variable:
    Edit your TrustedForm script to add a JavaScript variable (e.g., formId) that will hold your target selector.
    Example:
    var formId = 'hello';
    
  2. Specify the target selector:
    Set the value of formId to match the HTML attribute of your desired form. For instance, for a form with a name:
    <form name="hello">
    
    Or, for a class or ID:
    var formId = '.howdy';  // targets <form class="howdy">
    var formId = '#bonjour'; // targets <form id="bonjour">
    
  3. Target multiple forms (if required):
    Use a comma-separated list of selectors to modify multiple forms.
    Example:
    var formId = 'hello,.howdy,#bonjour';
    
  4. Update the API URL:
    Modify the line in your script that loads the TrustedForm JavaScript by appending the query parameter using the formId variable.
    Example:
    '://api.trustedform.com/trustedform.js?form_selector=' + escape(formId);
    
  5. Deploy your changes:
    Save the updated script and deploy it on your webpage so that TrustedForm only injects the certificate URL into the specified form(s).

Expected Result:
Only the form(s) that match your defined CSS selector (via the formId variable) will have the hidden TrustedForm Certificate URL field inserted; all other forms on the page remain untouched.


Validation & Monitoring (optional)

  • Test the Setup: Open the webpage in a browser and use the “Inspect” tool to check that the hidden certificate field (typically named xxTrustedFormCertUrl or as configured) appears only within the targeted form(s).

Best Practices

  • Ensure that the CSS selector in the formId variable exactly matches the form’s attribute (name, class, or ID) in the HTML.
  • When targeting multiple forms, double-check that the comma-separated list is free from typos or duplicates.
  • Regularly review and update your whitelist selectors if the webpage structure or form attributes change.
  • Verify that the script is placed within the body section of the page, or within the same iframe as the form, to ensure proper execution.

Troubleshooting

Symptom / Error Likely Cause Resolution
Hidden field not injected into any form The provided CSS selector does not match any form element Confirm that the selector (e.g., form name, class, or ID) is correctly defined and present in the HTML.
Hidden field injected into unintended forms The selector is too broad or ambiguous Refine the CSS selector to be more specific—use an ID selector instead of a class if possible.
No changes after modifying the script The updated script was not deployed or is cached Clear the browser cache and verify that the deployed script contains the new formId variable and parameter.

Frequently Asked Questions (FAQ)

Q: What is Form Whitelist?
A: Form Whitelist is a feature in TrustedForm that restricts the injection of the hidden certificate URL to only those forms that match a specified CSS selector, preventing the script from modifying every form on a page.

Q: Why should I use Form Whitelist?
A: Using a whitelist ensures that only the intended lead capture forms are modified, avoiding interference with other page elements and improving both data accuracy and page performance.

Q: How do I declare and use the whitelist?
A: You declare a JavaScript variable (commonly named formId) with a CSS selector (e.g., ‘hello’, ‘.howdy’, or ‘#bonjour’) and then append it as a query parameter (form_selector) to the API URL in the TrustedForm script.

Q: What happens if no forms match the whitelist selector?
A: If no targeted forms are found, the TrustedForm script will not inject the hidden field into any form, so it is critical to maintain an accurate whitelist.


Glossary

Term Definition
Form Whitelist A TrustedForm configuration setting that limits the injection of the hidden TrustedForm Certificate URL field to specific forms only.
CSS Selector A pattern used in CSS and JavaScript to select HTML elements by attributes such as name, class, or ID.
Certificate URL A unique URL generated by TrustedForm that serves as proof of the lead event and is injected into forms as a hidden field.

Was this article helpful?

0 out of 0 found this helpful

Comments

0 comments

Please sign in to leave a comment.