OM Documentation Integrations

How to Connect OptinMonster with any Custom HTML Form

Aside from our native Email Service Provider integrations, OptinMonster allows you to integrate with any other email service providers as long as they provide custom HTML form code, which most do provide. The Custom HTML integration option is perfect if you’re looking to further customize your optin form, add extra fields, or use an Email Service Provider we don’t natively integrate with. Follow this step by step guide to connect OptinMonster with any email service provider using our Custom HTML integration option.

  1. Custom HTML Integration
  2. Paste the Custom HTML Form Code
  3. Tracking Conversions (optional but recommended)
NOTE: OptinMonster supports Javascript-based forms. However, in some instances, a Javascript error in the custom form code can break your campaign. Be sure to follow this guide for details on how to work with Javascript-based forms, and reach out to our support team if you experience any issues implementing your custom form.

Step 1 – Custom HTML Integration

To start, in the Builder select the Integrations tab.

Integrations Tab

If this is your first time connecting an integration to your campaign you’ll see an Add New Integration item in the Integrations panel of the builder. Select that option to begin configuring your Custom HTML integration.

Add New Integration

Next, select Custom HTML from the Email Provider dropdown.

Choose Custom HTML

NOTE: Not finding the Custom HTML option? This is likely because you already have an integration set-up. To use Custom HTML, you need to delete pre-existing integrations. If you only have one integration set-up, go to the Email Provider dropdown and change it from your current integration to Custom HTML.

Step 2 – Paste the Custom HTML Form Code

You’ll be provided with a text area 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.

Paste HTML Code

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.

Step 3 – Tracking Conversions (optional but recommended)

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 custom form. For example:

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

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

Using a Custom HubSpot form? Follow our guide to add a custom HubSpot form to your campaign.

Examples

The following are a few 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>
NOTE: When using the Custom HTML integration option, the form actions cannot be applied in the Design panel. 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.

Want to view stats for your campaign? See how to connect your campaign to Google Analytics!

FAQs

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

A: No! If you’ve connected Google Analytics to your campaign and want to track conversions with your custom form code you’ll need to add the class om-trigger-conversion to your custom 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 campaign from reappearing again until the cookie duration has elapsed.

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 campaign 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 outright, making it appear your form is somehow broken. If your form contains this attribute you can remove it and check that your form then submits properly.

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

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

Q: Why does my campaign 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 submit 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 */
Q: Why doesn’t my Custom HTML with JavaScript allow the Tracking of Conversions?

A: If your custom code is using JavaScript on the submit event, then you need to make sure when possible that your last line on that submit JavaScript is:

return true;

EXCEPTION: If you are doing any sort of redirect if the submission is successful on your customized submission JavaScript code then there is nothing OptinMonster can do to track the conversion.

Q: Is there a way track a conversion but not track cookies and run the success event?

A: Yes, if you don’t want any cookies set for an alert such as a floating bar that shows information, you use Custom HTML. However, for tracking conversions this way, you will add the class om-trigger-alt-conversion. So a link could look like:

<a href='https://optinmonster.com' class='om-trigger-alt-conversion'>Check out OptinMonster!</a>

This class will also bypass the success function and not set cookies as well, including not setting any global cookies, etc.