WordPress Integration Guide

Follow the steps below to add a LeadForm to WordPress

Step 1: Configuration

Configuration consists of two steps:

Adding your pixel script to the header section of your page or website
Setting your Target URLs inside of GetLeadForms

1. Add your pixel script to WordPress

First, you'll need to add your Pixel Script to the header section of your WordPress site or landing page.

The Plugin Method:

Download the free Insert Headers and Footers Plugin and add it to your WordPress site if you don't already have this plugin or something like it:
Copy the pixel script below that's located in the "add to site" section of your dashboard

Paste the pixel in the Header section inside of the plugin.

So it should look something like this if you're using the Insert Headers and Footers Plugin:

Other Methods

Alternatively, you can install the pixel script through Google Tag Manager. Here's how:

https://help.getleadforms.com/article/171-how-to-integrate-your-leadform-with-google-tag-manager

Or you can add the script right to a specific landing page, if you only need the LeadForm to appear on the landing page itself.

2. Set Your Target URLs

Now that your pixel script is installed, let's add your Target URLs in the GetLeadForms platform. This indicates where you want the form to appear.

Go to Publish
Expand Target Pages
Add your URLs
- Always include https:// or http:// --if your site is in both https and http then you'll need to include both. Simply click +URL
- If your planning to have the form popup across multiple pages then click 'show on all subpages' - in fact, we always suggest doing this as a best practice
Add blocked pages if necessary (only necessary if you're using a pop-up form)

Step 2: Continued Setup Based on Your Behavior Options

Now that you have the pixel script installed and the target page(s) added, the next step is to follow some directions based on how you'd like the LeadForm to behavior. When it comes to behavior options, you have a three main choices:

Embedded right into the page
Popup across one or more pages (either timed or exit popup)
Click-popup, the form pops up with the click of a button

Let's explore setup options for all three.

Option #1 - Embedding your LeadForm right into the age

Ensure that the LeadForms Pixel is installed and working
Ensure that your display mode is set to embeddable inside of your account.

Copy the embed code below. This embed code indicates where the form will appear.

<div class="leadforms-embd-form"><!-- First form --></div>

Paste the embed code anywhere on your page and repeat for any page where you want the embedded form to appear

Inside of WordPress, Paste the embed code anywhere on your page. This will be different based on your theme. In most cases, you'll need to find some sort of custom HTML block to paste the code into. If you're using the standard WordPress editor then simply paste the embed code into the box like below and click "Publish"

Repeat for any page where you want the embedded form to appear

Option #2 - Set the form to popup

If you're planning to set the form as either a timed or exit popup, then there's no additional code to be added to your site. Simply go to settings and adjust your pop-up settings based on your preferences.

Option #3 - LeadForm With the Click of a Button

Locate the button that will trigger the form. You will need to update the button class and URL

Set the button class to: leadforms-trigger-el
Set the URL to: #

Example button code

<code><a href="#" class="leadforms-trigger-el">Get Fast FREE Quote</a> <style> .leadforms-trigger-el { box-shadow: 0px 0px 8px -2px #54a3f7; background-color:#2b8dfe; border-radius:3px; display:inline-block; cursor:pointer; color:#ffffff; font-family:Arial; font-size:20px; font-weight:bold; padding:19px 31px; text-decoration:none; } .leadforms-trigger-el:hover { background-color:#196ccc; } .leadforms-trigger-el:active { position:relative; top:1px; } </style><br>

Alternatively if you're having trouble editing the class of your button, then you can target the class from within the LeadForm builder by setting your custom class code

Troubleshooting when your form isn't working

If you have gone through all of the steps above and your LeadForm isn't working, please check out this guide which includes common reasons why the LeadForm isn't loading: https://help.getleadforms.com/article/104-form-is-not-working

You can also reach out to us at support@getleadforms.com and we will be happy to take a look.