How to Make Your Fields Required with Custom HTML

Do you want to add required fields to your campaign form? Are you using a Custom HTML integration and want to make sure your web visitors fill out your form?

In this walkthrough, you will learn how you can make your 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
Not supported
9.6

As you can see in the table above, the required attribute doesn’t work on Safari at this time, which means it also will not work on iOS devices either.

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 to work on all devices, 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:

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

Form-Ready-for-Additions

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.

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

Error-Alert-is-added-above-the-Submit-Button

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 OPTIN panel, and you can paste the example code shown below, then update it according to our CSS guide for your particular campaign by using your campaign’s Slug and the appropriate namespace.

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-YOUR-OPTIN-SLUG .NAMESPACE-form #errorAlert {
    font-style: italic;
    text-align: center;
    color: red;
    font-size: .8em;
    margin: 10px;
    display: none;
}

html div#om-YOUR-OPTIN's-SLUG .NAMESPACE-form input:invalid {
    border: 2px solid red;
}

html div#om-YOUR-OPTIN's-SLUG .NAMESPACE-form input:placeholder-shown {
    border-style: inset;
    border: 1px lightgray solid;
}

html div#om-YOUR-OPTIN's-SLUG .NAMESPACE-form input:disabled {
    pointer-events: none;
}
/* Required CSS for Validation Ends Here */	

CSS-added-for-Custom-Fields-Optin

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, 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.

<script type="text/javascript">
    var form = document.querySelector('html div#om-YOUR-OPTIN's-SLUG .NAMESPACE-form');
    var errorAlert = document.querySelector("html div#om-YOUR-OPTIN's-SLUG .NAMESPACE-form #errorAlert");
    var formSubmitButton = document.querySelector("html div#om-YOUR-OPTIN's-SLUG .NAMESPACE-form input.om-trigger-conversion"); /* This variable is a flag to know if a user has attempted to submit at least once. */
    var attemptToSubmitAtLeastOnceFlag = false; /* This code hides the error field. */
    function fieldsCheck() {
        var lookForInvalidInputs = document.querySelectorAll('html div#om-YOUR-OPTIN's-SLUG .NAMESPACE-form :invalid'); /* Scan Form for All Inputs taht currently have a :placeholder-shown pseudo-class */
        var lookForInputsShowingPlaceholders = document.querySelectorAll('html div#om-YOUR-OPTIN's-SLUG .NAMESPACE-form :placeholder-shown'); /* If there are no "invalid" states OR Placeholder States, then the table will be 0 */
        if (lookForInvalidInputs.length > 0 || lookForInputsShowingPlaceholders.length > 0) { /* If the inputs are invalid, show the Error Message and Disable the Submit button */
            formSubmitButton.disabled = true;
            errorAlert.style.display = "block";
        } else { /* If the inputs are valid, remove the Error Message and Enable the Submit button */
            errorAlert.style.display = "none";
            formSubmitButton.disabled = false;
        }
    }
/* --------------------Event Listeners Below --------------------- */
/* As keys are pressed, check to see if the fields have been validated to allow input. If fields are valid, run 'fieldsCheck' function. The key down function will only display the Error Message after the user attempts to press the Submit Button once. */
    form.addEventListener("keydown", function() {
        if (attemptToSubmitAtLeastOnceFlag == true) {
            fieldsCheck();
        }
    });

    formSubmitButton.addEventListener("click", function() {
        attemptToSubmitAtLeastOnceFlag = true;
        fieldsCheck();
        formSubmitButton.click();
    });
</script>

JavaScript-Added-Below-the-Form

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

This works both on desktops, including Safari Web Browser
Error-Shows-on-Safari-Desktop

And on mobile devices

Error-Appears-for-iOS-Devices-too


FAQs

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-YOUR-OPTINs-SLUG #errorAlert {
	color: red;
	font-size: 12px;
	font-weight: bold;
}