For those users leveraging the third party form software LeadPages, this article is for you. Today we are going to be discussing how to integrate LeadPages forms with INBOX25.
Step 1- Activating 3rd party integrations within LeadPages
INBOX25’s integration with LeadPages works through their ability to connect to 3rd party HTML compliant forms. Before we begin the tutorial we’ll need to activate this feature within LeadPages by hovering over your Account Profile--->Integrations---> Other Copy/Paste.
Step 2 - Create LeadPages form fields
We’ll start this integration within LeadPages and assume you have built out and designed the landing page to your liking. LeadPages comes stock with a variety of templates, each focusing on a different call-to-action (CTA).
Once your landing page is designed, shift over to your landing page's CTA. The CTA is usually in the form of a button that when clicked will display the form fields from which your users can insert their information as noted in the below image. By default LeadPages will pre-insert three form fields for you (Name, Email, Phone). If you’d like you can add more, but for our purposes we will focus on those three.
These are the form fields that we will map back to INBOX25, therefore it is important you are happy with the order these form fields are placed in. Once you are happy with the form fields displayed on your LeadPages form, we can proceed onto step three.
Step 3 - Replicate LeadPages form fields within INBOX25
We’re now shifting over to INBOX25. To begin, navigate to Manage--->Landing Page Manager. From our landing page manager we’ll go ahead and create a new page.
If you haven’t caught on yet, we’re going to be replicating the form fields located within LeadPages now within INBOX25.
*Note - Remember, the order of the fields is important so ensure the order is identical within LeadPages as it is within INBOX25. If the order is not identical, your field mapping will not function correctly.
For our purposes we will be creating three fields (Name, Email & Phone) in the identical order as it’s displayed in LeadPages. You will NOT need to design any portion of your INBOX25 landing page as we are only concerned with the fields themselves.
Step 4 - Configuring your post submission response
Although LeadPages is hosting the form, the fields will eventually be replaced by INBOX25. This means that upon a successful form conversion you'll need to decide what action is taken within the INBOX25 landing page builder.
Upon submission the user can
- view a confirmation message
- re-direct to a web-page
- initiate a file download
Step 5 - Copying the INBOX25 form field source code
Once you have replicated your INBOX25 form fields and determined your post submission action, select to save and publish this form. Doing so will display the form code from which you will copy the code below the title “Form Source & Form Action”.
Step 6 - Insert INBOX25 field code into LeadPages
Traveling back to our LeadPages form, open up your CTA screen so your form fields are showing as noted in the screenshot below.
On the far left of your screen will display a menu titled “Integration settings”. This is the most important step in the process as we will be linking your LeadPages form with our INBOX25 form.
From the drop down titled “Integrate form with” select “other”.
Directly below, a box titled “HTML code” will appear. Paste the INBOX25 field code into this box. Finally select “Configure this form”.
Note**- You will only be able to paste INBOX25's code in once so ensure fields and formatting are final. Although LeadPages allow you to paste in new code, the old code will always take precedence. This WILL be your final chance to change the mapping.
Step 7 - Modify LeadPages fields
Don’t worry, all the heavy lifting is behind us and if you’ve come this far, maybe you’re willing to come a little further.
You’ll have noticed after configuring the form a few weird things have happened. If you had a default name field within your LeadPages form you’ll now have an extra “name” field and you’ll notice a series of numbers located within each field.
Although it may look bizarre, seeing this means you are on the right track.
Let's tackle the extra field first. If you are using a name field within LeadPages, you’ll probably have noticed that the name field consumes one box. Meaning you place your first and last name within the same box.
This is the opposite within INBOX25 as our default name form field has a separate box for first and last name. This means that LeadPages needs to account for the extra INBOX25 box by adding an additional box onto LeadPages. The extra box as viewed above is separating first and last name.
Below is the INBOX25 name form field with it's default two box display.
Note*- You’ll need to use our default INBOX25 name form field as this is the only field that will map back to SugarCRM’s name field. A single text field will not work correctly.
By default you’ll notice your form fields have field id’s located within them (ex. Field-1446576597-1). These are simply the field values from INBOX25 and removing them is quick and easy. Select your form field within the CTA. Doing so will open a menu on the far left allowing you to edit the text within the field.
When all said and done it should look something like this!
Step 8 - The home stretch
You've made it! The integration is complete. You can utilize your LeadPages form as a standalone form and all conversions will feed directly back to INBOX25 as if the form was our own.
Viewing the screenshot below, when Dennis completes this LeadPages form he will be created as a new lead inside of the INBOX25 platform. If your INBOX25 landing page is mapped to a SugarCRM module, the record will also be created in SugarCRM.