CONVERT EXISTING EMAIL SIGN UP FORMS TO PARDOT FORMS

How to convert an existing email sign up form built using the Luminate Online API to a Pardot form on your website.

One of the options Pardot provides for embedded forms is called a Form Handler. A Form Handler functions as a sort of infrastructure to code into any type of HTML form on your website. It enables you to fully customize the look and feel of your form, including using a third-party form tool in some circumstances.

This method uses an email sign up for built with the Luminate Online API as an example, but the general principals apply to most types of HTML forms.

Prepare a Pardot Form Handler

Create a New Form Handler

Login to Pardot and navigate to Marketing > Forms > Form Handlers
Create a new Form Handler
Assign it to a relevant Folder, Campaign and custom Tracker Domain (if applicable).
Set Success and Error locations
Add Completion Actions, such as adding the submitter to a list or sending a confirmation email
Add Form Fields, such as Email and ZIP (NOTE: Follow steps in next subsection to map fields)
Save

Map Form Handler Fields to HTML Form Fields

NOTE ON FIELD NAMES: In this example, the input field name is cons_email, which is used for syncing data into Luminate Online via their API. In Pardot, this input field's name can stay the same, because the form handler provides a tool to map the web form's input field names to corresponding Pardot fields. The data in those Pardot fields will then be synced to corresponding Salesforce fields through the Pardot-Salesforce connector.

The Pardot Form Handler allows you to use the form fields already coded on your website through a form mapping tool.
During Form Handler setup, click the pencil icon to edit the form fields added to your Form Handler.
External Field Name uses the entry in the name="" parameter of your <input> field.

<input id="in_page_email" class="text-input text-input--long " type="email" name="cons_email" placeholder="Email" required="">

Prospect Field is a drop-down selection field for fields available one the Prospect's record in Pardot.
Data Format sets the type of data to expect from the form and should match the entry in the type="" parameter of your <input> field.
Save

Modify Existing Form's Code

HTML forms use the <form> tag with an action="https://" parameter to set the data submission location. The action parameter is the first item to modify, followed up with field IDs.

Set Form Action URL

Copy your existing forms's HTML code and paste into your text/code editor.
When viewing your saved Form Handler, click on the Edit form handler button to view the base <form> tag with associated action paraemter.
Copy the URL inside the parentheses of the action parameter (ex. http://go.pardot.com/l/123456/2020-01-01/3jp)

<form class="homepage-join__form luminateApi blackbaud-form form__wrapper success-message__hide" method="POST" action="http://go.pardot.com/l/123456/2020-07-27/3jp" data-luminateapi="{&quot;callback&quot;: &quot;quickSignupCallback&quot;, &quot;requiresAuth&quot;: &quot;true&quot;}" _lpchecked="1">

Clean up any Luminate API scripts and extraneous code. Double check classes, such as luminateApi in this example, are not controlling styling before removing.

<form class="homepage-join__form luminateApi blackbaud-form form__wrapper success-message__hide" method="POST" action="http://go.pardot.com/l/123456//3jp" data-luminateapi="{&quot;callback&quot;: &quot;quickSignupCallback&quot;, &quot;requiresAuth&quot;: &quot;true&quot;}" _lpchecked="1">

Clean Up Unneeded Form Fields and API-Related Code

The following code example has any code crossed out that can be removed from form.

NOTE: Always double check styles and related scripts located elsewhere as well. Scripts used for the Luminate API are no longer needed and can be removed from the site.