How to Connect OptinMonster with any Custom HTML Form

In addition to our native Email Service Provider integrations, OptinMonster also makes it easy to connect with other Email Service Providers. Our Custom HTML integration option is perfect if you’re looking to use an Email Service Provider we don’t natively integrate with or add extra fields.

In this article, you’ll learn how to connect OptinMonster with any custom HTML form.

Get Started With OptinMonster Today!

BONUS: Done-For-You Campaign Setup ($297 value)
Our conversion experts will design 1 free campaign for you to get maximum results – absolutely FREE! Click here to get started →

Before You Start

Here are some things to know before you begin:

  • This article assumes you’ve already created a campaign in your account to add your custom HTML form to.
  • Custom forms don’t automatically track conversions when they are submitted. It’s important to add the required class to your custom form code as instructed in this guide.
  • In order to use the Custom HTML Integration, you must remove all other integrations from the campaign in the builder. When using Custom HTML integration, you will be responsible for handling any forms/data.
  • You may need to add custom CSS to style your custom form as desired. Custom HTML forms do not automatically inherit the campaign’s template styling.
  • Javascript-based forms are supported, however, a Javascript error in your form code may break your OptinMonster campaign. If that happens please be sure to reach out to support for assistance.
  • If you’re adding a custom HubSpot form or custom Marketo form be sure to follow our dedicated guide for the best results.
  • When using a custom HTML integration, the form actions cannot be set in the Design area of the campaign builder. It is also not possible to display the Success View of your campaign. You’ll need to specify a redirect URL or success message through your Email Service Provider Account settings when you create the form.

Connect a Custom HTML Form

To connect a custom HTML form to your OptinMonster campaign, follow these steps:

  1. From the Integrations view of the campaign builder, click Add New Integration.
    Monster Leads Add New Integration
    If you have previously connected any other integration to your campaign you’ll need to first delete all other integrations before adding a new one.
  2. Next, select Custom HTML from the Email Provider dropdown.
    If this option doesn’t appear in the dropdown list it indicates you still have another integration already connected to the campaign that needs to first be deleted. It’s not possible to connect a native integration and a custom HTML integration in the same campaign.
    Choose Custom HTML
  3. You’ll be provided with a field to paste your custom HTML form code into.
    Paste HTML Code
  4. (Optional, but important) 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 ensure a Success Cookie is set if configured for the campaign.

Track Conversions & Set Cookies

There are two options available for conversion tracking with a custom HTML form: adding a class to the submit button or using Javascript.

Whenever possible, you should use the Javascript method below on your form’s success callback so that the conversion is only accurately recorded when your form is successfully submitted.

Javascript

Use the following Javascript on your form’s success callback so that the conversion is only accurately recorded when your form is successfully submitted:

om{{id}}.Listeners.convert();

Button Class

There is a special class that you can use to notify OptinMonster that a conversion has happened and set cookies if they’ve been configured for your campaign.

Add the class om-trigger-conversion to your custom HTML form’s submit button. For example:


<form method="POST" src="http://www.example.com/form.php">
  <input type="text" placeholder="First Name" />
  <input type="email" placeholder="Email Address" />
  <input type="submit" class="om-trigger-conversion" value="Submit Now!" />
</form>

This lets us know that a conversion has taken place when the visitor selects the submit button in your custom HTML form, and also sets a cookie if you’ve specified a Cookie Duration value for your campaign.

Track Conversion Only

If you’d prefer to track conversions only, but not set any cookies, you can use the class om-trigger-alt-converion instead.

For example:

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

Success Actions

You can customize the success action for your custom HTML form to change the campaign view or close the campaign.

Change View

Use the following Javascript on your form’s success callback to change to the specific campaign view you’d like to display on submission:

Yes/No View
om{{id}}.changeView('yesno');
Optin View
om{{id}}.changeView('optin');
Success View
om{{id}}.changeView('success');

Close Campaign

Use the following Javascript on your form’s success callback to close the campaign on submission:

om{{id}}.startClose();

Alternatively, you can use the class om-trigger-close instead.

For example:

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

Form Validation

You may wish to validate the fields in your custom HTML form, but aren’t sure where to begin.

The following are some examples of how to validate a custom HTML form to help you get started.

These examples should not be used as-is, but rather edited to fit your particular needs.
Javascript Validation Example

The following code provides an example of Javascript validation for a custom HTML form:

Javascript Validation with AJAX Example

The following code provides an example of Javascript validation with AJAX for a custom HTML form:

If you’re serious about jumpstarting your website growth, then get started with OptinMonster today!

Get Started With OptinMonster Today!

BONUS: Done-For-You Campaign Setup ($297 value)
Our conversion experts will design 1 free campaign for you to get maximum results – absolutely FREE! Click here to get started →

FAQs

How can I make my custom form’s fields look styled?

When using a Custom HTML integration you may need to add CSS to your campaign 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 guide: How to Use OptinMonster’s Custom CSS Tool

My custom form is in an iFrame element, can I still track conversions?

At this time it’s not possible to track conversions if your form is within an iFrame element. This is a limitation of technology and not unique to OptinMonster.

If your Email Service Provider has a non-iFrame version of the form embed code you should use that instead and follow this guide to add the required class to track conversions and set cookies.

Troubleshooting

Why doesn’t my Custom HTML form with Javascript track conversions?

If your custom form is using Javascript on the submit event, then you’ll want to ensure that the last line of the Javascript submit code 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.

My form isn’t submitting

Check that the <form> tag in your custom HTML form code 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. This makes it appear your form is somehow broken. If your form contains this attribute you can safely remove it and check again that the form submits properly.

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

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

For example, this:

 // Your Comments 

becomes this:

 /* // Your Comments */