Browse by...
Home Resources Blog

By default, the only field in your sign up form that is compulsory is the email address. Everything else can be left blank, and the sign up will go through. Most of the time that’s fine (and makes it easy for people to sign up), but in some cases it is critical to collect other information.

This post explains one way to make sure that certain fields are filled in before the form can be submitted. We’ll be using the jQuery JavaScript library, because it saves a lot of time and makes it easy to get started.

Grab your subscribe form

Jump into your subscriber list page, and generate a signup form, if you don’t already have one set up. Here is a very basic example of what you’ll have:

.codeblock {
background: #ededed;

<form action="https://iamadesigner.c/" method="post" id="subForm">
<label for="name">Name:</label> <input type="text" name="cm-name" id="name" size="25" />
<label for="oooooo-oooooo">Email Address:</label> <input type="text" name="cm-oooooo-oooooo" id="oooooo-oooooo" size="25" />
<input type="submit" value="Subscribe" />

For the purpose of this post, I’m simply going to add validation to make name a required field, and also check that the email address field contains a well-formed email address.

You’ll firstly need to add the following lines into the head of the html page your form will be on. These lines grab jQuery and the validate plugin as well as calling the validate function on your subscribe form:

<script type="text/javascript" src=""></script>
<script type="text/javascript" src=""></script>
<script type="text/javascript">

Now add the required class to both your form elements as well as the email class to your email address form element such that your two form elements looks like this:

<form action="https://iamadesigner.c/" method="post" id="subForm">
<label for="name">Name:</label><input type="text" name="cm-name" id="name" size="25" class="required" />
<label for="oooooo-oooooo">Email Address:</label><input type="text" name="cm-oooooo-oooooo" id="oooooo-oooooo" size="25" class="required email" />
<input type="submit" value="Subscribe" />

That’s it! You now have a form which checks for an non-empty name and a well formed email address using jQuery, before it’s submitted to Campaign Monitor. You can see a live example of the form and try it out.

Styling the errors, and further customising

If you attempt to submit the form without entering values for either the name or email address, you will see error text appear next to the relevant field. If you view source at that point, you’ll see that there is an extra <label> element, with a class of “error“.

<label for="name" generated="true" class="error" style="display: inline; ">This field is required.</label>

Just add a style declaration for the error class to control how they appear. If you want to customise the logic which actually validates your input, you can do that by following the jQuery validate plugin API Documentation.

Anyway, that’s just a really simple way of adding client side validation to your Campaign Monitor subscribe forms. Hope it’s useful!

This blog provides general information and discussion about email marketing and related subjects. The content provided in this blog ("Content”), should not be construed as and is not intended to constitute financial, legal or tax advice. You should seek the advice of professionals prior to acting upon any information contained in the Content. All Content is provided strictly “as is” and we make no warranty or representation of any kind regarding the Content.
Straight to your inbox

Get the best email and digital marketing content delivered.

Join 250,000 in-the-know marketers and get the latest marketing tips, tactics, and news right in your inbox.


Get started with Campaign Monitor today.

With our powerful yet easy-to-use tools, it's never been easier to make an impact with email marketing.

Try it for free