Capturing leads from forms in an iframe

Guide overview

Summary:
This guide details how to capture leads from forms embedded in an iframe by adding the TrustedForm Certify script and explains the key differences in certificates generated from iframe-based forms versus those created directly on the page.

Learning objectives:

• Learn how to correctly embed the TrustedForm Certify script within an iframe.
• Understand how to verify that a certificate is generated and captured by the script running in an iframe.
• Recognize the key differences in metadata and URL details between iframe-based certificates and direct-page certificates.

Quick start workflow

1. Sign up / Log in
2. Configure basic settings
3. Embed the TrustedForm Certify script in the iframe form
4. Test certificate generation and capture
5. Review differences between iframe and direct-page certificates

Step‑by‑step instructions

Step 1. Add the TrustedForm Certify Script to your iframe form

• Goal:
  Ensure that the TrustedForm Certify script is loaded within the iframe so that all consumer interactions are correctly captured and the certificate URL is injected into the form.

• Context:
  When a form is embedded in an iframe, the TrustedForm script must be placed inside the iframe’s HTML document rather than on the parent page. This guarantees that the certificate URL and metadata are generated solely from the iframe context, isolating the lead capture event.

Instructions:

1. Open the HTML template or file that constructs the content of your iframe.
2. Insert the TrustedForm Certify JavaScript snippet just before the closing tag within the iframe’s HTML.
3. Ensure that the script configuration specifies the correct hidden field name—by default, “xxTrustedFormCertUrl”—that will capture the certificate URL.
4. Save your changes and reload the iframe page in your browser.

Expected result:
Using browser developer tools (e.g., Inspect Element), you should see that the iframe’s HTML contains a hidden input field (for example, <input type="hidden" name="xxTrustedFormCertUrl" ...>) populated with a URL starting with “https://cert.trustedform.com/”.

Step 2. Test certificate generation and capture

• Goal:
  Confirm that the TrustedForm Certificate is generated within the iframe by submitting the form and ensuring the certificate URL is captured in the hidden field.

• Context:
  After embedding the script, the TrustedForm Certify process runs in the background to generate a unique certificate URL based solely on the iframe’s content. Testing the form submission verifies that the iframe produces the expected certificate data.

Instructions:

1. Load the web page that hosts your iframe-based form.
2. Fill out the form fields within the iframe and submit the form.
3. Using the browser’s developer tools, inspect the submitted form data to confirm that the hidden field contains a certificate URL starting with “https://cert.trustedform.com/”.
4. Optionally, open the certificate URL in a new tab to check its details such as timestamps, browser information, and recorded user interactions.

Expected result:
The hidden field in the submitted form displays a valid TrustedForm Certificate URL that documents the consumer’s interaction within the iframe. Opening the URL should reveal certificate details that confirm the session was captured exclusively inside the iframe.

Step 3. Understand differences between iframe and direct-page certificates

• Goal:
  Identify the differences in data captured by certificates generated from an iframe versus those from a form rendered directly on a webpage.

• Context:
  TrustedForm captures user activity based on where its script is deployed. In an iframe, only interactions and metadata within that contained document are recorded, whereas a direct-page implementation captures the full webpage context—including the parent page URL and broader interaction data.

Key differences:

• Captured URL:

  • iFrame form certificates:
    The certificate URL reflects only the iframe’s document URL, excluding any parent page information.
  • Direct-page certificates:
    The certificate includes the complete URL of the hosting page, providing full context for the lead generation event.

• User interactions and metadata:

  • iFrame form certificates:
    Only interactions within the iframe are recorded, which can result in limited metadata (e.g., lack of parent frame context).
  • Direct-page certificates:
    Captures interactions across the entire page, resulting in richer contextual metadata.

• Domain verification and data integrity:

  • iFrame form certificates:
    The certificate is associated with the iframe’s domain. It is essential to verify that this domain is approved in your TrustedForm account.
  • Direct-page certificates:
    The certificate is tied directly to the verified domain of the host page, often ensuring a more robust connection between the lead and its source.

Expected result:
When comparing certificates from an iframe-based form and a direct-page form, you will notice that the iframe certificate is more narrowly focused on in-frame events and URL, while the direct-page certificate provides complete contextual information.

Note:

• Websites that use iframes should create separate TrustedForm Certificates, one for the parent page and another for the iframe content. This ensures that both user interactions on the parent page and those within the embedded frame are independently captured and verifiable. Each script instance will generate its own certificate, reflecting the respective frame context in which it runs.

• Considerations for retaining certificates created in iframes:

  • In the case of a javascript snippet or app included in an iframe, the resulting TrustedForm Certificate URL will have to be captured with lead and consent information, and externally retained by API, LeadConduit, or a partner application.

Validate your setup

To ensure your integration is correctly configured:

• Use the browser’s “Inspect Element” tool within the iframe to verify the presence of the hidden TrustedForm Certificate field (e.g., “xxTrustedFormCertUrl”).
• Submit a test lead and confirm that the hidden field contains a certificate URL beginning with “https://cert.trustedform.com/”.
• Optionally, open the certificate URL to review detailed metadata and session information.
• Compare these results with a certificate generated on a full page to understand the differences in captured data.

Troubleshooting

Frequently Asked Questions (FAQ)

What if there are no options to add any JavaScript to the iframe?

TrustedForm can only be loaded using the TrustedForm script. In many cases, when added, the TrustedForm embedded javascript will work just fine and you can map the resulting xxtrustedformcerturl field to a field in your resulting lead. If custom JavaScript is not allowed, that platform is likely incompatible with TrustedForm.

Do I need to add the TrustedForm script to both the parent page and the iframe?

No. For forms embedded in an iframe, the TrustedForm Certify script must be placed within the HTML of the iframe only. This ensures that the certificate captures only the iframe’s data.

Why does the certificate URL from an iframe-based form only reflect the iframe’s URL?

Since the script runs within the iframe, it only captures interactions and metadata related to that iframe. Direct-page certificates are generated from the full page and include the parent URL and additional context.

How can I verify that the certificate data is captured correctly?

Use your browser’s developer tools to inspect the hidden field and monitor the network requests. You can also open the certificate URL to review its detailed metadata and ensure it aligns with the interactions recorded within the iframe.

Glossary