Quickstart

Introduction

This guide provides detailed instructions for integrating Melissa’s Express Entry service, an auto-complete address verification tool, with HubSpot.

Since HubSpot does not natively support the integration of external APIs within its forms, this solution utilizes a landing page that functions as a form. The landing page will collect address data through Melissa’s Express Entry service, automatically verifying and completing fields such as city, state, and postal code, while reducing manual entry by up to 50%. The data entered on the landing page will then be exported and imported into HubSpot form submissions, ensuring accurate and efficient data capture.

Requirements

• HubSpot account with landing page and form

• Access to Melissa’s Express Entry

Getting Started

Preparation

The preparation phase is divided into two key tasks: creating a landing page and creating a form. Both tasks require access to the Landing Pages and Forms sections within HubSpot.

Part 1: Creating a New Landing Page

1. Log into HubSpot

   Begin by logging into your HubSpot account. Navigate to the Content section in the main navigation menu.

2. Access Landing Pages

   From the left-hand panel, select Landing Pages under the Content menu.

3. Create a New Landing Page

   On the Landing Pages page, click the Create button (located in the top right corner of the page). This will initiate the landing page creation process.

4. Select Website and Name the Landing Page

   In the creation dialog, you will be prompted to select the website that the landing page will be associated with. Afterward, enter a descriptive and identifiable name for the landing page. Ensure that the name clearly reflects the purpose of the page for easy reference.

   This landing page will serve as a form and will be used to collect user submissions for HubSpot Forms.

Part 2: Creating a New Form

1. Navigate to Forms

   Once the landing page is created, move to the Marketing section in the left-hand navigation menu. Under Marketing, select Forms.

2. Create a New Form

   Similar to the landing page creation process, click on the Create Form button located in the top right corner.

3. Choose the Form Type

   HubSpot will offer different form creation options. For a simple, pre-populated form with predefined fields, select the Legacy Editor option. This allows you to create a form based on HubSpot’s default templates, streamlining the setup process.

4. Configure Form Fields

   Follow the guided steps provided by HubSpot to add the necessary fields for your form. Essential fields for your specific use case (to utilize Melissa Express Entry) include:

   • Street Address

   • City

   • State

   • Zip Code

   • Country

   These fields will enable you to capture the required data for integration with Melissa Express Entry on your landing page.

Creating HubSpot Landing Page

In this step, we will configure the HubSpot landing page created in Step 1 to display page like a form. The process involves removing the default content automatically populated by HubSpot and replacing it with the form fields you set up in Step 2.

1. Remove Default Content

   Navigate to the HubSpot landing page you created in Step 1. By default, HubSpot may have populated the landing page with pre-existing content. To begin, delete this default content to ensure that the page is empty and ready for your custom form.

2. Add a Rich Text Module

   Next, locate the left-side panel and click on the + (Add to Page) button. From the options available, search for Rich Text and drag it onto the landing page. This module will allow you to add custom HTML content.

3. Access the Source Code

   Click on the newly added Rich Text box to open its settings. In the top-right corner of the settings menu, look for the Advanced Options dropdown, and select Source Code. This will enable you to insert custom HTML code directly into the page.

4. Add the Custom Form HTML

   In the Source Code view, you can now input the HTML code for the form fields you created in Step 2. Below is an example HTML form code that corresponds to the fields you configured earlier for example. Ensure the input IDs and descriptions align with your form setup:

   <form>
     <h3>Example Form</h3>
     First Name <input id="firstName" type="text">
     Last Name <input id="lastName" type="text">
     Phone Number <input id="phoneNumber" type="text">
     Email <input id="email" type="text">
     Address Line 1 <input id="addressLine1" type="text"> <span id="suggestions"></span>
     Address Line 2 <input id="addressLine2" type="text">
     City <input id="city" type="text">
     State <input id="state" type="text">
     Zip Code <input id="zipCode" type="text">
     Country <input id="country" type="text">
     <button id="submitButton">SUBMIT</button>
   </form>
   

   Note

   You should modify the above HTML code to match the specific input IDs and field names from your form. Ensure that the input IDs are correctly mapped to your HubSpot form fields.

5. Implement Address Suggestions

   Particularly for the Address Line 1 field, keep the <span id="suggestions"></span> element active. This will be used later to integrate address suggestions from Melissa’s Express Entry, providing users with accurate address data as they type.

6. Save the Changes

   Once you’ve inserted and adjusted the HTML code to your satisfaction, be sure to save the changes. This will make the custom form live on the landing page, ready to collect user submissions.

Configuration

In this step, we will configure the backend functionality for the form set up in Step 3. This involves adding necessary code to the footer HTML of the landing page to enable the proper working of the form’s backend processes.

1. Accessing the Footer HTML Section

   To begin, navigate to the settings of the landing page you’re currently editing. Specifically, you need to access the Footer HTML section, where we will be integrating the backend code for the form functionalities. Follow these steps:

   • Open the landing page settings.

   • Go to the Advanced tab.

   • Locate the Footer HTML field.

2. Preparing the Code

   Before pasting the provided backend code into the Footer HTML, there are several important considerations to ensure everything works as expected:

   1. Check 3 Fields: The code provided below need to be updated in three different fields. Form information saved in Step 2 and Melissa Express Entry information need to be included.

   2. Customizing for Your Form: The code you are about to integrate is designed to work with the example form provided in Step 3. If your form differs from the example, you may need to modify the code to match your specific form fields (e.g., input IDs, field names, or validation logic).

   3. Review Dependencies: Ensure that any third-party integrations, such as Melissa Express Entry or other services, are properly set up and referenced within the code.

3. Adding the Code to the Footer HTML

   Once you have reviewed and prepared the code, you can proceed to paste it into the Footer HTML section. This will allow the form to perform necessary functions, such as processing submissions and interacting with the Melissa’s Express Entry services configured earlier. Ensure that the code is placed correctly, without interrupting other elements of the page.

4. Finalizing the Configuration

   After pasting the code and ensuring everything is configured, be sure to save the changes. Once saved, the landing page will be fully configured to handle form submissions with the necessary backend logic in place.

   Note

   It is highly recommended to conduct thorough testing after applying the configuration to confirm that the form functionalities are working seamlessly, especially for integrations with external services like Melissa’s Express Entry.

Finalizing Setup

Upon completing the configuration, proceed to save both the form and the associated landing page. After saving, you can publish the content to make it live. Once the landing page is published, conduct a thorough testing process to validate that the form submission is properly exported and imported into HubSpot. This ensures that the form is correctly integrated and functioning as intended. After successful testing and confirmation, the landing page will be fully set up and operational as a form, ready for use.