.png)
How to Add a LeadForm to Your Site
GetLeadForms works with all major website and landing page builders. In the documentation below, we'll show you how to get the LeadForm setup on WordPress. *If you are using Webflow, please scroll down for a video with those directions** The directions are relatively the same across most website and landing page builders.
Step 1: Configuration
Configuration consists of two steps:
1. Add your pixel script to WordPress
First, you'll need to add your Pixel Script to the header section of your site or landing page.
For WordPress: 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.
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:Let's explore setup options for all three.
Option #1 - Embedding your LeadForm right into the page
- 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><!-- 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="#">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>