Syncing 10,000 leads/mo? Get a demo
Optin Monster logo
+
HTML Form logo

How to connect Optin Monster with HTML Form

Connect Optin Monster to HTML Form with LeadsBridge

Optin Monster » HTML Form

In this article, you'll learn how to set up the bridge and connect Optin Monster to HTML Form using LeadsBridge.

How to set up your bridge step-by-step tutorial

Before you start

  1. Head over to the left sidebar and click on Bridges
  2. You'll be taken to the Bridges section of your account
  3. Click on the Add New button
  4. You'll be taken to the first step of the bridge creation

Step 1: Bridge's Main information

  1. Choose a name for your bridge (this will only be visible inside LeadsBridge)
  2. You may add labels to help you identify your bridge later
  3. Choose Optin Monster as the source for your bridge
  4. Choose HTML Form as the destination
  5. Click on the Next button

Step 2: Setup your Optin Monster source

You may send lead's information from Optin Monster to LeadsBridge through the Webhook feature.

Copy the Webhook address that you see in this step and set this endpoint as the data receiver inside your Optin Monster settings.

How to setup the webhook on Optin Monster

To integrate with Optin Monster you'll need to copy the Webhook URL received by LeadsBridge into Optin Monster.
The image below shows you how to do that:


Before proceeding

One last thing before proceeding to the next step is to send a test lead from Optin Monster. This will allow us to recognize the attributes you'd like to pass along and offer them as presets in the next steps of the setup.

  1. Please make sure the LeadsBridge screen is saying "Waiting for New Lead...", it means that we're ready to receive your test data
  2. Go to Optin Monster
  3. Submit a test lead
  4. Once done go back to LeadsBridge and verify that your test was sent successfully
  5. You should see the information processed correctly by the app
  6. Click on the Next button

Step 3: Setup your HTML Form destination

  1. Type in the integration's name in the dedicated field
  2. Enter HTML Form code to connect HTML Form with LeadsBridge
  3. If your CRM has the feature called Web-To-Form or HTML form, to embed HTML code inside a web page, you only need to copy and paste the HTML code into LeadsBridge as a new custom HTML Form integration.

    An HTML Form code is something that typically starts with <form> and ends with </form>. Pay attention that the attribute "action" should be specified inside the tag form.

    Learn more about HTML forms here:( OPEN LINK)
  4. If you don't have the form code but you have an opt-in form online, you may copy its code by following these steps:

    1. Open your opt-in form page.
    2. Hover the form.
    3. Right-click to open the contextual menu.
    4. Click on "Inspect" the open the dev tool.
    5. Position at the form action line.
    6. Right-click and "Edit as HTML".
    7. Copy the form code.

  5. "Encoding", "Timeout", "Success Patterns" and "Failure Patterns" can be left with their default values, you don't need to set them in most cases. If you'd like to know more, please read the common questions below.
  6. Click on the Next button
  7. You'll now be able to select the destination segment to send your leads to
  8. You may choose to receive an email receipt for each incoming lead.
    • Type the address(es) where you'd like to receive the receipt
    • You may also modify the Subject line of the email
  9. Click on the Next button

Step 4: Fields Mapping

Here you'll be able to map your source information with your destination fields.

You'll see a field name with the destination integration's logo at the top, this indicates the name of the field on HTML Form.

Underneath there's a box where you may add the information you'd like to send.

  • Check each of the HTML Form fields available
  • Match the information you wish to pass along from Optin Monster
  • You may type the information manually and pass them as a static value
  • Use the functions to customize information like reformatting dates and times or modifying text, phone numbers and so on
  • You may also leave blank the box of a field's information you don't want to send through

Custom Fields

  1. If you'd like to add more fields, just look at the bottom of the page
  2. Head over the "Don't find a CRM custom field?" box
  3. Select the field you'd like to add from the dropdown list
  4. Click the Add Custom Field button
  5. The field will appear above
  6. Add the desired information, as you did with the other ones

Once accomplished your desired outcome, just click Next and head to the last step.

Step 5: Test

In this final step, you'll be able to send a lead from LeadsBridge to test if the configuration works properly.

  1. To create a new test lead, fill in the required information when prompted
  2. Click Test Now
  3. To test with a real lead, switch the toogle to "Test with existing lead".
  4. Click Sync Now along the lead you'd like to send
  5. If you did everything right the button will turn green, meaning your lead was synced successfully and the integration is ready
  6. Click Finish to save your settings and turn active your bridge

That's all! Congratulations.

You'll be redirected to the bridges section of your account with a green success message at the top right of the page and your bridge will now be active.

Have you got some questions?

You may want to take a look at the common questions on the respective integration's documentation.

If you have any other questions, or need help to configure your bridge from Optin Monster to HTML Form with LeadsBridge, do not hesitate to contact our Support!