As marketers we are always building and tweaking lead capture forms. Refining which and how much information to capture based on our percieved value of what we offer in return (whitepapers, free trials, etc.). Building lead capture forms in HTML is not particularly difficult, but unfortunatley HTML provides no standardized way to validate form fields (at least not until everyone is on HTML5 compliant browsers). Therefore, to enforce required fields on forms we must resort to JavaScript. Typically this requires the assistance of a JavaScript developer who must be re-engaged each time the form fields are tweaked. Not anymore.
One option would be to use a form builder that automatically generates (and possibly hosts) the web form including the validation logic to ensure that required fields are populated. This is a common solution, but ufortunately the layout and styling are typically restricted to pre-defined templates. Another option would be to use a complete validation framework like JQuery that includes custom error messages, custom field hints, and format validation for phone numbers, email addresses, etc. Unfortunately, the sophistication (and therefore complexity) of these solutions is overkill for JavaScript illiterates.
I wanted a simple solution that required only minimal knowledge of HTML and no knowledge of JavaScript. After many fruitless hours searching the web I decided to dust off my coding skills and build it myself.
First, let’s take a look at a sample web form that has been built using this technique:
How was this accomplished? Just cut and paste a single line at the top of the webpage that contains the form and then add class=”required” to each form field you wish to designate as required. That’s it. If you can cut and paste, you can now enforce requried fields on your web forms! Best of all, this technique is not limited to LoopFuse lead capture forms; you can use it for any web form. Just make sure that your form fields all have associated labels so that I know what to highlight when the value is missing.
