How to Track Conversions when Using a Custom HTML Form

OptinMonster allows you to use any Email Service Provider or fully customize your campaign forms using our Custom HTML Campaign Form integration option. Now you can easily set cookies and track conversions when using a custom html form.

Add Conversion Class

There is a special class that you can use to notify OptinMonster that a conversion has happened. All you need to do is add the class om-trigger-conversion to the custom html form’s submit button.

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

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.

Want to control how long until the campaign appears again? See how to control the cookie duration for your campaigns!


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 campaign 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 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 you will want to call om{{id}}.Analytics.conversion(); before any sort of redirect you are processing.

Q: If I’m using form validation, how do I make sure conversion are only tracked once the form has submitted successfully?

A: If your custom code has form validation then you may want to make sure conversions are sent when the form is submitted successfully as opposed to when the submit button is clicked.

In that case, remove ‘om-trigger-conversion’ from the button and instead add a JavaScript callback function for when your script successfully submits. In this function, call om{{id}}.Analytics.conversion(); to track a 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='' class='om-trigger-alt-conversion'>Check out OptinMonster!</a>

This class will not set cookies as well, including not setting any global cookies, etc.