Infusionsoft web forms are incredibly powerful. With a bit of dragging and dropping you can build an attractive page to collect whatever information you need from your customers and leads.

Web forms aren’t perfect though. They are missing a crucial piece of any modern form: client-side validation. This type of validation occurs before your lead submits the form. For example, if you have a required email field but the user leaves it blank, the client-side validation would display an error message letting them know what is missing. This all happens without a page load and without clearing the form. You can even get more advanced, such as requiring a minimum number of characters to be entered in a field, or making sure they put a valid email address in the email field.

Luckily for us, it isn’t too hard to add validation into your form. This is a bit more advanced than some of our other tips, but feel free to leave a comment or email us if you need help.

For this tip we are going to use the extremely popular jQuery Validation plugin. It’s free and flexible, and works well with Infusionsoft web forms. You can validate just about anything, such as: postal codes, phone numbers, dates, URLs, and even VIN numbers. The documentation has a list of available validation methods.

To get started, you’ll need to add an HTML snippet to your web form and add some code to it. This code will add the validation functionality to your form, turn it on, and set the validation rules. For example:

<script src="https://ajax.aspnetcdn.com/ajax/jquery.validate/1.11.1/jquery.validate.min.js"></script>
<script src="https://ajax.aspnetcdn.com/ajax/jquery.validate/1.11.1/additional-methods.min.js"></script>
<script>
jQuery(document).ready(function() {
    jQuery(".infusion-form").validate({
        rules: {
            inf_field_FirstName: {
                required: true
            },
            inf_field_Email: {
                required: true,
                email: true
            }
        }
    });
});
</script>

In this example, I’m making a first name field required, an email field required, and making sure the email field contains an email address. If I didn’t make the email field required, the code would let it be blank or a valid email address. You can see this tip in action on our demo web form.

The only part you’ll need to change is in the rules section. This part outlines each field you want validated, and which validation methods (from the documentation, scroll down to List of built-in Validation methods) you want to use. To get the field name, open your web form in Chrome or Firefox, right click on the field you want, and choose Inspect element. A panel will appear at the bottom of the page with a bunch of HTML code and your field’s code highlighted. The field’s name is listed under id=”fieldname”, where fieldname is the name of the field. You can add as many fields as you want to the validation.

Next are the validation methods, separated by commas and located within curly braces. You can have multiple validation methods for each field, just like I did for the email field. There are a lot of validation rules that should cover just about anything you are looking to do. You can validate that the field contains a minimum or maximum number of words or characters. You make sure the field contains a valid credit card number, URL, or email address. You can even validate UK postcodes and phone numbers. Again, the documentation is going to be helpful here in finding out what methods are available.

Again, if you need a little extra help with this, feel free to reach out to me directly or through the comments section of our blog.