Integrating BriteForms with Pardot

Step 1

Create a BriteVerify account by visiting https://app.briteverify.com/users/sign_up 


Step 2

Once your account has been created, you will need to upgrade to BriteForms. This can be done by either logging into BriteVerify and either clicking the "Upgrade to BriteForms" button, or by going to "Account Settings" and choosing "Plans"  

The Upgrade Button

The Upgrade Button

Selecting the BriteForms plan

Selecting the BriteForms plan


Step 3

Once your account is created, click the ‘Forms’ tab and click on the ‘Trusted Domains’ button. 

Add the root URL for your Pardot pages.  You can find your URL by looking at an existing Landing Page in Pardot, or by creating a new one and looking at the first part of the "Vanity URL" 

Note: You will only need to put in the first part, this is the domain. Do not include anything after ".com"

Locating your URL for the trusted domain.

Locating your URL for the trusted domain.

Entering in your trusted domain


Step 4

Next click the ‘+ New Form’ button, name your form, and click ‘Create Form.’  Leave this open in a separate window as we will be coming back to this later.


Step 5

Log into Pardot and create a new Landing Page template. You can find the landing page templates under Marketing > Landing Pages > Layout Templates.

If you already have a template made, select it from the list and click "Edit Layout Template". If you have not yet created a template, click the "Add Layout Template" button on the upper right side of the screen. 

It is also worth mentioning here that if you have not created a form for your landing page you will need to do so first. This can be found in Marketing>Forms>New Form.

The "Add Layout Template" button

The "Add Layout Template" button

The Layout Templates list

The Layout Templates list

The Edit Layout Template Button

The Edit Layout Template Button


Step 6

After entering the Template Layout Editor, you will see an area where you can paste your code. 

The Code Editor Window

The Code Editor Window

We will need to use a custom version of the code here to allow BriteForms to recognize your input fields.

In a separate browser window open your Pardot email form, hover over the "Email" field and right click to select "Inspect Element".  (This is for the Google Chrome browser, for other browsers, please refer to their documentation on how to inspect an elements source code)

Inspecting the element

Inspecting the element

What we are looking for here is the string of numbers underneath the words "Label Class" for the email field. This is your element ID. In the example we are using it is 122772_401967pi_122772_401967

The form and code side by side (click to enlarge)

Double-click the numbers to highlight them so you can copy/paste the ID value

Double-click the numbers to highlight them so you can copy/paste the ID value

Next, we will need to add a little code to have BriteForms recognize the email field in your form. Simply add this line of code directly underneath the <script type='text/javascript'> line

var email=document.getElementById('YOUR FORM ID');
email.onchange=null;

Replace the text: YOUR FORM ID with the form ID you just copied. Your script should now look like this:

<!-- Put this just before the closing body tag -->
<script type='text/javascript'>
var email=document.getElementById('122772_398558pi_122772_398558');
email.onchange=null;
window.briteFormSettings = { 
    formKey: 'ENTER YOUR FORM KEY HERE',
    emailInput: email
};
</script>
<link href='//cdn.briteverify.com/bforms.css' rel='stylesheet' type='text/css'>
<script src='//cdn.briteverify.com/bforms.js' type='text/javascript'></script>

Step 7

Paste the code snippet from step 6 into the script editor window. You will be placing this right before the closing </body> tag.

The custom code pasted into the editor window

The custom code pasted into the editor window


Step 8

Click the "Create Layout Template" button under the script window. If you are editing an existing template, this will say "Save Layout Template"

Saving a new template

Saving a new template

Saving edits to an existing template

Saving edits to an existing template


Step 9

Now that your template is set up, you will need to create a landing page and assign the template that you have created.  

Go to Marketing > Landing Pages > Landing Pages and click the "Add Landing Page" button on the upper right side of the page to create a new landing page. 

adding a new landing page

adding a new landing page

Next, you will need to link the template we just created to your new landing page. After following steps 1 & 2 (Naming your page and selecting your form) in the Landing Page Wizard, you'll be asked to select the Page Template. Select the template we just created and click "Confirm and Save"

Selecting your landing page template

Selecting your landing page template

If you already have a landing page made and want to assign your new template to it, you will need to edit the landing page and select the proper template. 


Step 10

After you finish the steps to create your landing page, it's time to test it out. Click the "View Online" link. 

Viewing your completed landing page

Viewing your completed landing page

IMPORTANT!! By default your form is set to test mode. You will ONLY be able to test the following addresses:

This will allow you to develop and run BriteForms from your local machine without having to authorize any domains or worry about triggering BriteVerify's fraud tools and security countermeasures. In test mode you will need to use certain emails to simulate certain events. Submissions and Verifications will still be tracked but they will all be marked as test transactions and only appear in reporting when the form is in test mode. 

You must take your form out of test mode in order to validate anything other than the addresses shown above. You will do this in Step 12.

A properly working form

A properly working form


Step 11

Back to BriteForms, click on the ‘Forms’ tab then on the BriteForm you just created to view all your test analytics. 

The main forms screen

The main forms screen

This screen will provide valuable information about your form health once your form is turned live.

The Form Analytics Screen

The Form Analytics Screen


Step 12

When your form is ready to be turned live visit the BriteForms Form tab, click on your BriteForm and move the toggle switch at the top of your analytics page from Test to Live.

You really don't want to forget to do this step

You really don't want to forget to do this step

NOTE: All analytics observed during test mode will be reset to 0 when you turn your form live.