New! We have a simpler method for adding validation to forms – view it here.
One of the more common questions we get asked is if you can make certain fields be required when people sign up to your list through a Campaign Monitor form.
We don’t have this functionality built in, mostly because you can create a much better experience for your visitors by taking care of that right there on your form page, rather than sending them off to a generic Campaign Monitor error page.
Most of you Campaign Monitor customers are smart cookies who have your own approach to error messages and server side scripting, and are happy to cook something up yourselves. However, sometimes it is just easier if you have something to start you off.
Adding validation to your form
The first step is to take your subscribe form, and add a CSS class to define which fields will be required. You could make as many as you like required, but remember that the less work people have to do, the more likely they are to sign up.
<form action="http://abcwidgets.cmail1.com/s/133578/" method="post" onsubmit="return validateForm(this);" class="list-form"> <ul><li> <label for="name">Name:</label> <input type="text" name="name" id="name" class="required" /></li> <li><label for="l133578-133578">Email:</label> <input type="text" name="cm-133578-133578" id="email" class="email required" /></li> <li><label for="cm-f-184432">Nickname:</label> <input type="text" name="cm-f-184432" id="Nickname" /></li> <li class="sub-button"><input type="submit" value="Subscribe" /></li> </ul> </form>
You can see I’ve added class=”required” to the text fields I want to make compulsory, and class=”email required”> in the case of the email address. I’ve also added an onsubmit parameter to the form tag, which will run our validation function when the submit button is clicked.
Without getting too far into details about exactly how the script works, here’s the outline:
- The function validateForm runs when the submit button is pressed
- We loop through all the elements, looking for the ones with a class of ‘required’ or ’email’
- When we find a required field, we check to see if it is empty, and if so, trigger an error and addan ‘error’ class to the field
- If the field is an email field, we also run a simple check to see if it looks like a valid email
- We return ‘true’, if all is well, and the form is sent, or ‘false’ if not, and the submit is cancelled
Note: I’ve only used alert messages here (and some CSS styling), which is not the ideal way to notify. You will probably want to write out an error message next to the problem field.
I’m also just notifying about one error at a time, which is fine for very small forms, but annoying for anything longer. If you have bigger forms, you’d want to create an array of the errors, and write them all out at once instead. A final note is that the script only deals with text fields – if you have dropdowns for example you need to modify your testing slightly.
That’s it! A very simple version of form validation to make sure people can’t leave key fields empty when signing up. Take it, and amend it to work for you or your clients.