How to Add Lead Capture Forms To WordPress | Step-by-Step Tutorial
Follow the steps below to add a LeadForm to WordPress
How to Embed and Configure LeadCapture.io Forms on WordPress
This guide will walk you through embedding your LeadCapture.io form on a WordPress page, setting up pop-ups, and using the onsite messaging feature to boost conversions. Whether you want your form to appear directly on the page, pop up on click, or trigger on exit, this guide covers all the steps you need.
Preparing Your Form in LeadCapture.io
Before embedding your form, ensure your LeadCapture.io form is fully set up:
- All form steps are created and connected.
- An entry step is set up (this ensures the form works correctly).
If you're unsure how to set up your form, refer to the LeadCapture.io documentation or contact support for assistance.
Option 1: Embedding the Form on a WordPress Page
- Go to your LeadCapture.io Settings and set the Form Mode to Embed. Click Save Changes.
- Click on the Publish option.
- Follow these steps to embed the form into your WordPress page:
- In the Pixel Script section, copy the script provided.
- Go to your WordPress page editor and paste this script where you want the form to appear (you can add this to the top, bottom, or header of the page).
- Choose your behavior options:
- Go to Step 2 in LeadCapture.io.
- Choose the appropriate code snippet based on your needs (either using
div
class ordiv
ID). - Paste the snippet where you want the form to appear on your page.
- Save your changes and check the WordPress page to ensure the form is displayed correctly.
Tip: Add the form snippet only once per page to avoid loading the form multiple times.
Option 2: Setting Up the Form to Pop Up on Click
- Go back to your LeadCapture.io Settings and set the Form Mode to All. This allows the form to be embedded and pop up when clicked.
- In the WordPress page editor, find the button where you want the form to pop up when clicked.
- Set the button’s target URL to a hash (
#
). - In LeadCapture.io, go to the Publish section and copy the LeadForms trigger class (e.g.,
leadforms-trigger-EL
). - Add this class to your button in WordPress, and save your changes.
- Test your form by clicking the button to see if the pop-up appears.
Option 3: Creating a Timed or Exit Intent Pop-Up
- In LeadCapture.io Settings, ensure the Form Mode is set to All.
- Go to Pop-Up Behavior settings.
- For a Timed Pop-Up:
- Set the desired delay time and frequency.
- You can also segment by device (e.g., desktop vs. mobile).
- For an Exit Intent Pop-Up:
- Simply enable the Exit Pop-Up switch.
- This will trigger the pop-up when users attempt to leave the page (e.g., moving their cursor to the top of the browser or clicking the back button on mobile).
- Save your settings and test the behavior on your page.
Option 4: Using the Onsite Messaging Feature
- In LeadCapture.io Settings, go to the Onsite Message section.
- Enable the onsite messaging by flipping the switch.
- Customize the message (e.g., "Get a Free Estimate" or "Request a Free Consultation").
- You can enable or disable the message on mobile devices.
- This message will appear in the bottom right corner of the page, prompting users to engage with your form.
Applying Onsite Messaging and Pop-Ups Across Multiple Pages
If you want the form, pop-up, or onsite messaging to appear on multiple pages, you can add the form script to the header section across all your pages.
- Use the Insert Header and Footer WordPress plugin, or manually add the code to your theme’s header.
- In LeadCapture.io, copy the Pixel Script.
- Paste it into the plugin or header section, then save.
Optional: Boosting Conversion Rates
To improve conversions, customize your onsite message to match the content of the page. For example, if you're on a termite control page, tailor the message to say, "Get a Free Termite Control Estimate." This small adjustment can significantly boost engagement.
Advanced: Using the Raw Code Feature
If you're using embedded forms and want to minimize load time, use the Raw Code Feature:
- Go to LeadCapture.io and click Generate Raw Code.
- Copy the code and paste it directly into your WordPress page.
- This will improve load times, but note that raw code lacks some dynamic features (refer to LeadCapture.io documentation for more details).