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.

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.
   
   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.
   
3. You’ll be provided with a field to paste your custom HTML form code into.
   
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.

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.

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!

Troubleshooting

My campaign isn’t showing any conversions

To track conversions you’ll need to add the class om-trigger-conversion to your custom form’s submit field. 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 showing again until the cookie duration has elapsed.

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

Is there a way to track a conversion but not set cookies?

Yes, if you don’t want any cookies set for an alert (e.g. a floating bar that shows information) you will instead add the class om-trigger-alt-conversion. For example:

<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 (campaign or global).

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.

The form fields don’t appear like the campaign template’s default fields

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

The form doesn’t submit when I test my campaign

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.

How do I display the Success view

It’s not possible to show the Success view when using a custom HTML integration. This is because OptinMonster can’t override your custom form’s default action on submission to display the Success view.

My campaign isn’t closing automatically after submission

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!" />

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 */