How to link HubSpot form to Leadmonk Router

Modified on Fri, 12 Apr 2024 at 03:08 PM

TABLE OF CONTENTS

Step 1: HubSpot Form changes
Step 2: Maintain HubSpot form mapping in Leadmonk
Step 3: Link external form to the inbound router
Step 4: Embed the router code in the webpage where the form is
Here is how it will work

Leadmonk integrates with HubSpot forms. When a form is submitted on your website, Leadmonk instantly qualifies the lead, routes it to the right sales rep, and displays the booking page so your prospect can book a meeting - all in a matter of seconds.

Step 1: HubSpot Form changes

In HubSpot, navigate to the form that you would like to integrate with Leadmonk router.
Edit the form, and click on the Options tab.
In the What should happen after someone submits this form? section, choose Display a thank you message as shown below.
Update your HubSpot form changes.

Step 2: Maintain HubSpot form mapping in Leadmonk

To create an external custom web form mapping in Leadmonk, you will need to:

Go to the Router > Forms page.
Click the + Create new button.
Choose Hubspot form mapping as Form type as shown.
Specify the form ID in the Hubspot Form ID field. This is a case sensitive field. You get this form ID from the HubSpot Form.
Maintain mapping for each form field to the Leadmonk form parameter as shown below. Hubspot form field name is case sensitive. Once you maintain all field mappings, save the changes.

You can find form id in the embed code of HubSpot form in HubSpot as shown below.

You can also get the form ID from the website as well by following the below-mentioned steps:

Navigate to the webpage where your HubSpot form is embedded.
On the page, right-click and select "Inspect element."
Click on the "Element selector" in the developer panel.
With the selector selected, click on the first field on your HubSpot form on the page.
In your developer window, you'll find the HubSpot selector ID, in the format below:

<form id="hs-form-id-xxxxxxxx"></form>

The "xxxxxxxx" is the unique identifier for your HubSpot form. You can use this ID to identify the form in your HubSpot account or to reference it in your code.

Step 3: Link external form to the inbound router

As shown below, select the switch Use External form as inpur for router? and then select the form you created in the previous step. This form has the mapping details to the external form. This will allow you to use the data from the external form as input for the router. Save the changes.

Step 4: Embed the router code in the webpage where the form is

Copy the embed code from the router as shown below.

Once you've copied the router embed script, follow these steps to add it to your website:

Navigate to the webpage where you've embedded the HubSpot form.
Open your website's code editor or content management system (CMS).
Locate the HTML code for the webpage.
Find the closing </body> tag.
Paste the router embed script directly before the </body> tag.
Save and publish the changes to your webpage.

The router embed script should now be active and collecting data from your HubSpot form submissions.

Here is how it will work

When a user submits the HubSpot form, the data will be sent to the router.
The router will then use the mapping details in the form you created to map the data to the internal form.
The router will then process the internal form and take the appropriate action.

Below video shows how qualify, route and schedule meetings from the HubSpot form.