Tuesday’s Tip: Validate Infusionsoft forms BEFORE submission

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.

8 Comments

  1. Great article! Exactly what I needed now that we have recently started using Infusionsoft. I was wondering though, is there anyway to validate two separate forms on the same page? The footer form will not submit, because it registers it as a field for the sidebar form. I have them both enabled on this page http://thesleepapneainstitute.com/test/, but all the other pages I’m having to leave the newsletter form with our old CRM until we figure this problem out. Any suggestions you have on this issue would be helpful. Thanks!

    Reply
    • All you’d need to do is remove the infusion-form class from the form at the bottom of the page. That class is being used to apply the validation to the form, so any form that has infusion-form as the class will be validated, and any form without that class will not be validated.

      Reply
  2. Thank you for your fast response! I’m happy to have all my forms working with the validator!

    Reply
  3. This this work with a lead pages form?

    Reply
    • Hmm… You could probably modify this to work with LeadPages. It would definitely require some modification before it would work with LeadPages though.

      Reply
  4. Hi Jacob,

    Great idea! I have nested it within a WordPress page that contains an InfusionSoft form. All appears OK in the page source but the validation doesn’t run. Ideally, I am trying to avoid the redirect to InfusionSoft URL if the user makes incorrect entries and submits. Would love your input on this.

    Reply
  5. Hi,

    What about the validation of radio buttons and dropdown option of Infusionsoft form?

    Reply
  6. Hi ya’ll, we’re trying to prevent people from entering in their email address in the first name field.
    what rule would i create that would prevent the “@” symbol and/or “.” dot?

    Reply

Leave a Reply