How to link custom web form to the inbound router

Modified on Tue, 9 Apr at 12:43 PM

TABLE OF CONTENTS

Step 1: Maintain custom webform mapping in Leadmonk
Step 2: Link external form to the inbound router
Step 3: Embed the router code in the webpage where the form is
Step 4.1: Webflow form
Step 4.2: Custom HTML Form
Here is how it will work

Step 1: Maintain custom webform 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 Webform mapping as Form type as shown below to connect a custom webform such as Webflow, Wix, Wordpress form.
Specify the form ID in the Form Mapped ID field. This is a case sensitive field. You get this form ID from the webform

You can easily find any webform ID as explained below:

Open the webpage containing the form in your web browser.
Right-click on the form and select View page source.
This will open the HTML code of the page.
Press Ctrl+F to open the search bar.
Type form id= into the search bar.
This will highlight the form ID field in the code.
Copy and paste the form ID into a Form Mapped ID field in Leadmonk.

Maintain mapping for each form field to the Leadmonk form parameter as shown below. Webform Field name is case sensitive. Once you maintain all field mappings, save the changes.

Step 2: 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 3: Embed the router code in the webpage where the form is

Copy the embed code from the router as shown below.

Step 4.1: Webflow form

Here are the steps to add the Leadmonk Router embed script in the page having the Webflow form:

Open the Webflow editor and navigate to the landing page where you want to embed the Leadmonk Router.
In the Sidebar, click Edit Page settings (wheel icon).
In the Page settings panel, scroll down to the Before </body> tag section.
Paste the Leadmonk Router embed script into the Before </body> tag section.
Click Verify to make sure that the code is valid.
Click Save in the slide-out's right-top corner.
Click Publish to publish your landing page.

The Leadmonk Router embed script will be executed when the landing page is loaded, and it will initialize the Leadmonk Router. The Leadmonk Router will then take care of processing the form data and routing it to the appropriate destination.

Step 4.2: Custom HTML Form

Leadmonk works seamlessly with your custom HTML forms.

To get started, paste the Leadmonk router embed script below your custom HTML form or just before the </body> tag on your landing page.

Here is how it will work

When a user submits the external 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.