How to Connect OptinMonster with any Custom HTML Form

Aside from our native Email Service Provider integrations, OptinMonster allows you to integrate with all other email service providers as long as they provide custom HTML form code (most of them do). Follow this step by step guide on how to connect OptinMonster with any email service provider using our custom HTML form.

  1. Custom HTML Integration
  2. Paste the Custom HTML Form Code
  3. Tracking Conversions (optional)
  4. Examples
  5. FAQs
Note: Templated optins and the Use of JavaScript. If your Email Service Provider only provides you with a form that includes JavaScript, please try to remove those JavaScript elements when possible (as we’ll demonstrate below), as it will minimize the risk of errors when loading. That said, if your form is JavaScript dependent, it should work fine without any problems.

Step 1 – Custom HTML Integration

In the optin builder, select the Integrations tab to view the Integrations panel.

Select the Integrations tab in the optin builder to begin connecting your Email Service Provider to OptinMonster.

If this is your first time connecting an integration to your optin you’ll see a “New Integration” item in the Integrations panel of the builder. Select that to begin configuring your custom HTML form integration.

Select the New Integration item to begin connecting your Email Provider to OptinMonster.

Next, select Custom HTML from the Email Provider dropdown.

Select the Email Provider from the dropdown list to begin connecting them to your OptinMonster optin.

Step 2 – Paste the Custom HTML Form Code

You’ll be provided with a textarea field to paste your form code into. Make sure to remove all unnecessary HTML markup, inline CSS and scripts from your form code; only keeping the input fields and form tags.

Add your custom form code to the provided field when using the Custom HTML integration option.

Step 3 – Tracking Conversions (optional)

When using a Custom HTML integration, conversions are not automatically tracked until you add the class om-trigger-conversion to the submit button for your form. For example:

<input type="submit" class="om-trigger-conversion" value="Submit" />

Adding this class will also set a cookie for the optin if you’ve a Success Cookie Duration value in the Setup panel for your optin.


Examples

The following are two examples of HTML Forms that have been edited down to their bare necessities and the om-trigger-conversion class added to the submit button:

Sample AWeber HTML Form

<form action="http://www.aweber.com/scripts/addlead.pl" method="post">

<div style="display: none;">
        <input name="meta_web_form_id" type="hidden" value="0000000000" />
        <input name="meta_split_id" type="hidden" value="" />
        <input name="listname" type="hidden" value="default0000000" />
        <input id="redirect_123" name="redirect" type="hidden" value="http://www.aweber.com/thankyou.htm" />
        <input name="meta_adtracking" type="hidden" value="My_Web_Form" />
        <input name="meta_message" type="hidden" value="1" />
        <input name="meta_required" type="hidden" value="name,email" />
        <input name="meta_tooltip" type="hidden" value="" />
    </div>

    <input class="text" tabindex="500" name="name" type="text" value="" placeholder="Your name" />
    <input class="email" tabindex="501" name="email" type="text" value="" placeholder="Your email" />
    <input class="submit om-trigger-conversion" tabindex="502" name="submit" type="submit" value="Submit" />

</form>

Sample MailChimp HTML Form

<form action="//username.us4.list-manage.com/subscribe/post?u=a;as4aoiha890160985&amp;id=000c123456" method="post" novalidate>
    <input type="email" value="" name="EMAIL" class="email" placeholder="Email address" tabindex="601" />
    <input type="text" value="" name="FNAME" class="first-name" placeholder="First name" tabindex="602" />
    <input type="text" value="" name="LNAME" class="last-name" placeholder="Last name" tabindex="603" />

    <!-- real people should not fill this in and expect good things - do not remove this or risk form bot signups-->
    <div style="position: absolute; left: -5000px;">
        <input type="text" name="b_a73cf6b8c3f0557df47242b8b_040c127434" tabindex="-1" value="" />
    </div>

    <input type="submit" value="Subscribe" name="subscribe" class="submit om-trigger-conversion" />

</form>

Sample OntraPort HTML Form

<form action="https://forms.ontraport.com/v2.4/form_processor.php?" method="post" accept-charset="UTF-8">
  <input name="firstname" type="text" required value="" placeholder="First Name" />
  <input name="email" type="email" required value="" placeholder="Best Email" />
  <input type="submit" name="submit-button" class="submit om-trigger-conversion" value="Subscribe Now"/>

  <!--- Hidden input fields, required for the proper submission of your form -->
  <div style="display:none;">
    <input name="afft_" type="hidden" value=""/>
    <input name="aff_" type="hidden" value=""/>
    <input name="sess_" type="hidden" value=""/>
    <input name="ref_" type="hidden" value=""/>
    <input name="own_" type="hidden" value=""/>
    <input name="oprid" type="hidden" value=""/>
    <input name="contact_id" type="hidden" value=""/>
    <input name="utm_source" type="hidden" value=""/>
    <input name="utm_medium" type="hidden" value=""/>
    <input name="utm_term" type="hidden" value=""/>
    <input name="utm_content" type="hidden" value=""/>
    <input name="utm_campaign" type="hidden" value=""/>
    <input name="referral_page" type="hidden" value=""/>
    <input name="uid" type="hidden" value="a2c987ggt12"/>
  </div>

</form>

Important: you may need to add some custom CSS to make your form fields display in the way expected of the template you’ve chosen.

NOTE: When using the Custom HTML Optin Form integration option, the Success Message and Redirect URL settings in the Configuration panel of the optin builder will not be functional with your custom form. You’ll need to specify a redirect url through your Email Service Provider Account settings.

That’s all, you have successfully connected OptinMonster to your email service provider using our Custom HTML Optin Form integration. You can now proceed to design beautiful optins.


FAQs

Q: Are conversions automatically tracked when using a Custom HTML integration?

A: No! If you’ve connected Google Analytics to your optin and want to track conversions with your custom form code you’ll need to add the class om-trigger-conversion to your form’s submit field before any conversions can be tracked. Adding this class will also set a cookie in the browser when the form is submitted (if you’ve configured Cookies) to prevent the optin from reappearing again until the cookie duration elapses.

For a full walk-through, see our documentation: How to Track Conversions when Using a Custom HTML Form


Q: My Custom HTML form’s fields don’t look anything like the Template’s default fields, why?

A: When using a Custom HTML integration you may need to add CSS to your optin to style the fields exactly as you desire. Depending on how your form code is structured the optin template’s styles may not be able to be inherited by your form fields.

For a walk-through of using the Custom CSS feature, see our documentation: How to Use OptinMonster’s Custom CSS Tool


Q: Why doesn’t my Custom HTML integration form submit when I test my optin?

A: Check that the <form> tag doesn’t contain the attribute target="_blank". Browsers have inconsistent support for this action (redirecting the visitor after form submission in a new tab/window), and many will block it altogether making it appear your form is somehow broken. If your form contains this simply remove it and check that your form then submits properly.


Q: I’ve specified a Redirect URL for my optin but it’s not working with my Custom HTML form.

A: The Redirect URL option will not be applied when using a Custom HTML integration because OptinMonster cannot override your form code’s default action on form submission. To change the default action for your form code you’ll need to login to your Email Service Provider account and edit the form from there.


Q: How do I display the Success Message with my Custom HTML form?

A: Unfortunately this is not possible. OptinMonster cannot override your form code’s default action on form submission to display the Success Message.


Q: Why does my optin not close automatically after submission?

A: For most users, their form’s redirect action renders this a non-issue. However, if your code keeps the web visitor on the same page, then you will need to add an additional class to your input. You will need to add the om-trigger-close class.

What this means is your Submit input button will now have 2 custom classes: (1) the om-trigger-conversion to track a conversion when the button is pressed, and (2) the om-trigger-close to close the optin modal popup when the conversion data has been submitted.

Your input button could look something like the example below:

<input type="submit" class="om-trigger-conversion om-trigger-close" value="Sign me up!" />

Q: Why are my inline comments being wrapped by multi-line comments?

A: OptinMonster will wrap all inline comments into multi-line comments, which is necessary for OptinMonster’s proper handling and processing of the code involved.

Therefore, this:

 // Your Comments 

becomes this:

 /* // Your Comments */