Elementor Pro Forms tutorial

Capture Elementor Pro form leads in Google Sheets

Keep designing forms on the Elementor canvas and let LeadToSheet sync every submission - including webhook and popup form data - straight into your team's Google Sheet.

CMS: WordPress

Elementor Pro includes a built-in Form widget that lets you build and style forms directly on the page builder canvas with drag-and-drop field placement, actions after submit, and conditional field visibility. LeadToSheet adds a Google Sheets layer on top of those actions so you get a live spreadsheet of every lead without replacing your existing email, redirect, or webhook post-submission workflows.

Implementation checklist

  1. 1

    Load the LeadToSheet SDK site-wide

    Add the script tag to your WordPress footer through the theme, Elementor's Custom Code feature (Pro), or a header/footer plugin. The SDK needs to be present on every page where Elementor Pro forms render, including popup templates.

    LeadToSheet snippet

    <script>(function(w,d,s,u,k,e){if(w.__formsync){return}w.__formsync={q:[],k:k,endpoint:e};var js=d.createElement(s);js.src=u;js.async=1;js.onload=function(){w.__formsync.init&&w.__formsync.init({ clientKey:k })};d.head.appendChild(js);})(window,document,'script','https://www.leadtosheet.com/sdk.min.js','YOUR_CLIENT_KEY','https://www.leadtosheet.com/api/ingest');</script>
  2. 2

    Configure field IDs in the Form widget

    Select the Form widget on the Elementor canvas and set each field's ID to a clean identifier like `company_name` or `phone`. These IDs become your Google Sheets column headers via LeadToSheet.

    Tip: Elementor auto-generates IDs like `field_abc123` - replace them before your first real submission to avoid messy headers.

  3. 3

    Test from the live frontend, not the editor preview

    Elementor's in-editor preview does not execute form submission handlers. Publish or preview the page in a new tab and submit a test entry to confirm the row appears in your Google Sheet.

Customization ideas

  • Run LeadToSheet alongside Elementor's actions after submit

    You can keep Elementor's built-in email, redirect, webhook, and popup actions active. LeadToSheet operates independently at the browser level, so your existing post-submit workflow continues uninterrupted while the sheet gets a parallel copy.

  • Capture popup form submissions with full attribution

    Elementor Pro popup forms are injected into the DOM on trigger. LeadToSheet detects them automatically and records the triggering page URL, UTM parameters, and referrer so you know which page drove the popup conversion.

  • Segment by Elementor template or page

    The SDK automatically identifies different forms via fingerprinting. Create separate form connections in your LeadToSheet dashboard to route submissions from different Elementor templates or pages into separate Google Sheets for cleaner segmentation.

Troubleshooting

  • Popup form submissions not reaching the sheet

    Elementor popups inject the form DOM dynamically when triggered. If the LeadToSheet SDK loaded after the popup library initialised, the MutationObserver may miss the injection. Move the SDK script above Elementor's frontend scripts in your footer to resolve this.

  • Conditional fields appear as empty columns

    Elementor Pro hides conditional fields from the DOM when their conditions are not met. Submit test entries that activate every conditional branch during initial setup so all potential headers are created in your sheet.

  • Caching plugin strips the SDK script tag

    Aggressive HTML minification or script deferral by caching plugins like WP Rocket can prevent the SDK from loading. Add `www.leadtosheet.com` to your caching plugin's script exclusion list.

Frequently asked questions

Does LeadToSheet interfere with Elementor's built-in form email notifications?
No. LeadToSheet captures the submission at the browser level and does not modify Elementor's server-side actions. Your email notifications, redirects, and webhooks continue working as configured.
Can I capture forms from both Elementor Pro and third-party Elementor addons on the same site?
Yes. The SDK listens for standard HTML form submission events regardless of which Elementor addon generates the form markup. Each form is logged independently in your sheet.
Will the SDK work with Elementor's built-in A/B testing or landing page experiments?
Yes. Each form variant submits through the same browser event. LeadToSheet records the page URL so you can filter and compare conversion data across variants in your sheet.