How to Make Your Fields Required with Custom HTML OptinMonster Campaigns

Do you want to add required fields to your Custom HTML campaign form in the OptinMonster builder? In this walkthrough, you will learn how you can make your campaign form fields required with just a few steps.

Before you begin: This feature is for Advanced Users. Due to the custom nature of a Custom HTML implementation, at this time we do not provide support for this feature.
Note: This documentation is presuming you are using the Custom HTML integration option and you have already read the Custom HTML integration documentation. In addition, this guide presumes you have at least a basic understanding of how HTML, CSS, and JavaScript works.

OPTION 1: Use HTML5’s Required Attribute

By far, the easiest solution is to add the attribute required to the end of your input text field, like the following:

<input type="email" placeholder="Enter your email here..." required />

In XHTML, attribute minimization is forbidden, and the required attribute must be defined as required="required". So, the same code as above could also be written as:

<input type="email" placeholder="Enter your email here..." required="required" />

Browser Support

The numbers in the table specify the first browser version that fully supports the attribute.

Attribute Chrome Internet Explorer Firefox Safari Opera
required 5.0 10.0 4.0 5.0 9.6

What does this mean? This means that the simple solution of adding the required will help you with a lot of your customers and is the easiest solution to implement. If you aren’t too comfortable with coding, then this is your safer option.

If you want a more comprehensive solution, then in addition to adding the required attribute above (why not add the required attribute, it takes only a few seconds), you can also add some JavaScript and CSS.

OPTION 2: Use Javascript to Check Fields

Assuming you have already added the required attribute in Option 1 above, in this option, you will need to add some Custom HTML, CSS, and JavaScript.

Note: For the fields to work as expected, it is important that your Input Field’s Types are appropriate to the data you are collecting as the types will be utilized to take advantage of the web browser’s built-in data-type validation. This means the input field collecting the email address should have the type of email and the submission of the form should be handled by the input type of submit, etc.

To accomplish the form validation to ensure all the fields are filled out, we will update the initial form by disabling the submit button until all fields are properly filled out.

In addition, we will also make sure your form provides an error message if a web visitor attempts to press the submit button before properly filling out the fields.

To begin, let’s presume your initial form embed code in the Custom HTML integration area looks something like the following, which includes the conversion classom-trigger-conversion:

	<input type="text" id='subscriber-name' placeholder="Please Enter Your Name" required />
	<input type="email" id='subscriber-email' placeholder="Please Enter your Email Address" required />
	<input type="submit" id='subscriber-submit-button' class="om-trigger-conversion" value="Subscribe" />

Add Form Code

With the above code as starting point, the following steps will show you how the code can be updated to work as expected.

Step 1 – Add Necessary HTML to the Form

The HTML added will create a div where a customized error message can be displayed.

To begin, go the Custom HTML area, located in the Integration panel. You should see your Custom HTML form code already present there.

Therefore, if you start with the example form given above, you will create a div with the ID of errorAlert, which will be a sibling element above the submit input.

	<input type="text" id='subscriber-name' placeholder="Please Enter Your Name" required />
	<input type="email" id='subscriber-email' placeholder="Please Enter your Email Address" required />
    <!-- The errorAlert div shows the error message if inputs are invalid and someone attempts to submit. -->

<div id="errorAlert">You need to first correct your invalid inputs before you can submit.</div>

    <input type="submit" id='subscriber-submit-button' class="om-trigger-conversion" value="Subscribe" />

Add Error Element

At this point, the necessary HTML element is in place. Next is the required CSS.

Step 2 – Add Necessary CSS to the Form

An HTML element can have both explicit classes (where you add a customized name to the element), and also hidden classes called pseudo-classes. These pseudo-classes will be utilized below.

Go to the Custom CSS area of your campaign, located under the Display Settings panel, and you can paste the example code shown below.

The first line of CSS targets the #errorAlert div you created in the first step. hides the error div, but also styles it If you would like, you can initially remove the display: none; so that you can see how the errorAlert is styled.

The second line of CSS targets inputs that have an invalid pseudo-state, which means it looks to see if it matches the browser’s built-in regex conditions for those input types. If the input is not valid, it will outline the field in red.

The third line of CSS targets inputs with the pseudo-state of placeholder-shown, to return the input appearance to a default type of appearance when the form first shows or if a user erases an input.

The fourth line of CSS targets the submit-button and prohibits pointer events from occurring if the submit button is disabled. This prohibits a mouse from interacting with the button in any way.

/* Required CSS for Validation Begins Here */
html div#om-{{id}} .{{ns}}-FieldsElement--content #errorAlert {
    font-style: italic;
    text-align: center;
    color: red;
    font-size: .8em;
    margin: 10px;
    display: none;

html div#om-{{id}} .{{ns}}-FieldsElement--content input:invalid {
    border: 2px solid red;

html div#om-{{id}} .{{ns}}-FieldsElement--content input:placeholder-shown {
    border-style: inset;
    border: 1px lightgray solid;

html div#om-{{id}} .{{ns}}-FieldsElement--content input:disabled {
    pointer-events: none;
/* Required CSS for Validation Ends Here */		

Add Custom CSS

After you have added the necessary CSS, you need to go back to the Custom HTML area, located under the Integration panel.

Step 3 – Add Necessary JavaScript to the Form

In the Custom HTML area below the form, we will add some JavaScript to achieve two things: (1) To check if the input fields are valid or not, and thereby enable or disable the submit button respectively, and (2) if there are invalid inputs to then show an error.

Once again, the code example below presumes you have used the IDs given in the examples above, and that you have the conversion class added to your submit button.

Add JavaScript Validation

That’s great! Now, your campaign will force a web visitor to correctly and fully fill out your Custom HTML form.

Did you know you can use WordPress shortcodes on your campaign? See our guide on how to use WordPress shortcodes with OptinMonster.


Q: How can I edit my Error Message Text?

A: This text content is located in the div itself. You can go to the Custom HTML area, find your errorAlert div, and change the text within the div.

Q: How can I edit my Error Message Styles?

A: If you have followed the examples given above, then your Error Message should display within a div with the ID of errorAlert. Therefore you could add custom CSS with something like the following:

html div#om-{{id}} #errorAlert {
	color: red;
	font-size: 12px;
	font-weight: bold;