Unbounce Integration Guide

Please follow the instructions below to integrate form into Unbounce.

** We also have a Zapier integration which makes this process a bit easier. Click here to learn more:https://help.getleadforms.com/article/168-zapier-integration 

Update: Read our latest Unbounce integration guide here: https://getleadforms.com/blog/unbounce-multi-step-form/

Sections:

  1. Getting Started

  2. Install LeadForms Pixel

  3. Clickpop Setup (Open form with a button click)

  4. Embedded form Setup

Getting Started

NOTE: For form to be visible, you'll need to publish the page. The form may not appear while in preview mode.

We designed LeadForms so you can easily install the lead forms on any website with just one line of code. Not only does this make installation easy, but it also enables us to make changes and push updates to your form in real-time, without requiring you to modify any code.

How to Install the LeadForms Pixel

Add your pixel code to all pages between the "" and "" tags:

Adding to Unbounce:

1. Go to Settings > Script Manager

2. In Script Manager click “Add a Script”

3. Choose Custom Script, give the script a name then click “Add Script Details”

4. Then configure the script:

  1. Placement: Choose Head

  2. Included On: Choose where you want to include the script

  3. Copy and paste the Pixel into the code block

  4. Choose which pages you want the script to appear on

  5. Click Save and Publish Script

** End Script Install Instructions **

That’s all there is to it. Just following the instructions above enables LeadForms to work on your website. From this point forward, we will be able to push any new forms and/or changes straight to your site in real time.

You do not need to install any additional code on the pages, unless you want to enable the click-pop or embed functionality.

If the form does not appear, then check to make sure that the URL is added in the "target URL" of the LeadForms Dashboard.

Click-pop Instructions: How to open the LeadForms with a button

Many users take their forms one step further by enabling the forms to pop-up with the click of a button, link, or image. This is useful for when you’d like to create a “Get a Quote” CTA.

To open the forms with a click of a button, please follow the two steps below:

> Step 1. Button Class: Set your button class to = “leadforms-trigger-el”

> Step 2. Button URL: Then set your button URL to = #

Follow the two steps above for any button, image, or link that you wish to enable on a given page.

Enabling Click-pop in Unbounce:

1. Add a Button to Your Page

On your Unbounce Page, add a Custom button somewhere on your page.

2. Set Button Class

In the properties panel for the button, set your button class to the following:

<code>leadforms-trigger-el<br>

3. Button URL

Finally, set the button URL properties:

  • URL should be set to #

  • Open in same tab/window

  • To test the button, publish the page. The form may not work in preview mode.

Embedded Form Instructions: How to Embed a form Into Unbounce

  • Ensure form Mode is Set to Embedded: Go to the form inside of your Dashboard and ensure that the Display Mode is set to Embeddable. The form will not work as an embedded form if this option is set to "Popup"

  • Add Custom Code Block to Page: Inside of Unbounce, select the custom code block and drag it somewhere on the page.

  • Copy the Leadform Embed Code Below:

<code>
  <div id="leadforms-embd-form"></div><br>

Paste Embed Code Into The Unbounce Code Block and click Save

  • Publish the Unbounce Page: To see the form live, you'll need to publish the Unbounce page.

How to track conversions on the custom thank you page?

Add this javascript to your page:

Unbounce Pixel for External Conversion Tracking

<script type="text/javascript">
var _ubaq = _ubaq || [];
_ubaq.push(['trackGoal', 'convert']);

(function() {
var ub_script = document.createElement('script');
ub_script.type = 'text/javascript';
ub_script.src =
('https:' == document.location.protocol ? 'https://' : 'http://') +
'd3pkntwtp2ukl5.cloudfront.net/uba.js';
var s = document.getElementsByTagName('script')[0];
s.parentNode.insertBefore(ub_script, s);
}) ();

</script>

Still need help? Contact Us Contact Us