Freeform - accessible and validated web forms

Welcome to the first episode of EE Surgery's screencasts. We hope these videos allow yo to build better Expression Engine websites.

Today we are covering contact forms with using a free module and a free extension. Really there is only one form module developed for ExpressionEngine and thats Solspaces's FreeForm. The benefit of FreeForm is that it doesn't solely send email, it stores that information in the database and has its own section within ExpressionEngine. This can be really useful to check up on enquiries as emails sometimes are not the most reliable method of communication. We say to most of our clients to look in the control panel weekly to check up if there are any possible contact submissions that may not have made it to their email account. Freeform is one of those modules that is in our default install folder.

Contact forms can also be enhanced with the use of Javascript validation. Whilst there are many different libraries and plugins available we use Jquery and the Jquery validation plugin on just about all out contact forms. Its also relatively straight forward to hand code raw javascript for a form, but if your site is using Jquery in other areas then this is probably the best method. * In an ideal world loading the Jquery library and the plugin solely for a form may be seen as heavy on file sizes.

Any contact form, comment form on the web is subject to spam. They are either looking to send spam emails hoping that a small percentage may just click the link and buy, or looking to manipulate search engine rankings with spammy back links. Up till recently we were using accessible captcha which is a pretty solid extension. It asks a question a human can answer easily for instance “What colour is grass?”. To anyone above 5 years old they can understand this but a spam robot cannot therefore denying that form submission. This worked well for us for a few years. However when thinking about UX and gaining as many contact form submissions as possible you want to make as few form fields as possible. The fewer the fields, the more enquiries you get, maybe not always but certainly on most websites. Its seen as a trade off between time and benefit from the users point of view. Less time spent submitting the form, more enquiries and submissions. So going on this logic the extra question field should be omitted. Over the last few years or so a new kind of strategy of spam prevention has been created. Its simple yet very clever. Spam bots will normally fill in all the fields in the form. By having a field thats not seen by users yet seen by robots, that field is filled in by the latter. The concept is called a Honey Pot and a few months ago a plugin was created for Expression Engine on that concept – Hon-ee Pot (EE2 only). Having used it for a few months and not a single spam submission in that time, its now our spam prevention of choice. With one less field for the user and 100% success spam prevention rate, its a no brainer.

1.) Freeform setup.

Install the module as per the instructions on the Solspace site. Once thats done you need to set up a template and the fields, again as per docs.

2.) HoneePot installation

Downoad and install the extension from Devot-ee or Git http://devot-ee.com/add-ons/hon-ee-pot-captcha/

3.) Onto the code

We generally try and get the form working first then use the progressive enhancement methodology to sprinkle on top the Javascript. Good Javascript and CSS comes from good HTML so lets build from there.

<code>
{exp:freeform:form
   collection="Contact Form"
   required="name|email|message"
   return="/thank-you"
   notify="name@domain.com"
   template="contact_form"
   class="contact-form"
}    </code>
Don't put anything here < /div> Your name: Your email address: Your message:

<br /><br />

<br />

{/exp:freeform:form}<br />

Good form accessibility amongst other things comes from the naming and matching of the label and form fields. The “for” within a label must match the “id” within the field, as seen above. You can test this is working by clicking on the label which should then insert the cursor into the matching form field.

At this stage test the form and make sure you get an email and its inserted into the FreeForm entries within the Expression Engine control panel.

4.) Style the web form with your own css not forgetting to hide the honeepot section from users

<code>
.screen-reader {
    display: none;
}
</code>

5.) Add Javascript

Embed Jquery < script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js">

Embed the Jquery validation plugin < script type="text/javascript" src="http://ajax.microsoft.com/ajax/jquery.validate/1.7/jquery.validate.pack.js">

6.) Config javascript plugin

<code>
$(function (){  
    $("#freeform").validate({
        success: function(label) {
                label.text("ok!").addClass("success");
        },    
        rules: {
            email: {
                email: true
            }
          }
    });
});
</code>

There are many options and things you can do with the validation plugin but unfortunately thats outwith the scope of this tutorial to go into great detail. The above codes adds a class to aid the user through the process when the field is successfully filled out out. The rule, looks for the email field and validates its an email field by looking for a “@” and a period.

Bonus points for

  • Conversion tracking in Google Analytics
  • CSS3 form embilishments
  • HTML5 validation