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:


<form action="http://iamadesigner.c/send.com/t/r/s/oooooo/" 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" />
</form>

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="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.8/jquery.validate.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#subForm").validate();
});
</script>

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="http://iamadesigner.c/send.com/t/r/s/oooooo/" 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" />
</form>

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!

  • Nickolas Simard

    Three things came to my mind upon reading this:
    1. Great article, most useful for all people without javascript development skills.
    2. Is is ok to use THE domain name and keep it in the form’s action? Won’t Google grab it for its search result?
    3. There is a Typo around your email field’s class. There’s a “strong” tag wrapping it up.

    Keep up the good work!

  • Joel FIsher

    I’ve tried this and all of the other AJAX tutorials, however even with the code in place, I can’t get the form to NOT show the default Campaign Monitor page upon validation or submission?

    Seems like the same form action, etc. and I confirmed jQuery is loaded + the validation extension as well.

  • Joel Fisher

    Got it to work. JQuery wasn’t loading early enough.

  • Chris Pannell

    Great article James!
    All very clear and precise. I’ve been working increasingly with JQuery and the forms that we create for our clients.
    I’ve previously always modified a some JavaScript that we wrote here but this is 10 x easier!

  • Chris Pannell

    It appears as though JQuery have removed the https://www.campaignmonitor.com/assets/uploads/validation.js
    (http://dev.jquery.com/view/tru

    I cannot see a way of downloading it on their site either.

  • Ros Hodgekiss

    Hi Chris, link seems to work for me… Try again?

Want to improve your email marketing? Subscribe to get tips on improving your email marketing delivered to your inbox.
X

Join 200,000 companies around the world that use Campaign Monitor to run email marketing campaigns that deliver results for their business.

Get started for free