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.

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:

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.

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.