Welcome to part 2 of our 2 part contact form master series! Yesterday we went over contact form design 101 and looked at some pretty cool trends and effects you could use on your own forms. As promised, today’s post will take on the potential development challenges that you could be faced with when integrating contact forms on your website. We will also take a sneak peak at our soon to be launched new website’s contact form as a case study of what and what not to do!
Development Challenges
As cool as new trends might be and as much as contact forms are essential, implementing them doesn’t happen without its challenges. Issues could range from security risks and data organization and display, to form deployment. Let’s look at some of the most common challenges and how to solve them:
1. Admin display once Contact Form is submitted
What’s the point of a contact form if the information you get is so messy, you don’t even know what it all means? When it comes to forms, it’s not just what your visitors see and fill in that is important; the admin’s view of it matter too. It is crucial that the database layout is coded in such a way to ensure that the information is displayed as it was submitted – with clear fields, labels and contact information.
In order to avoid this issue, right at the start of the design and development, define the fields added to the form in order to have a back end version of the form with data that’s easy to manage and make sense of.
2. Multi-steps Forms
If possible, stick to single-page contact forms. Splitting them into multiple steps or multiple pages can be frustrating for users. A lot of times, they miss a crucial field or want to go back and edit something, which ends up resetting everything to question 1. I’m sure you’ll agree that’s not the best in terms of UX.
The exception of course is if you have an extremely long contact form of 20+ fields. In this case, cramming all fields into a single page would look daunting to anyone filling out the form, not to mention it likely messes up the website’s design too. If 20+ fields are unavoidable, group them in 2 or 3 manageable steps.
One of our latest projects made great use of a 2-step “Get a free quote” form. This form is a crucial lead generation tool for Expat Medicare’s business so it is the first thing users see when they arrive on their landing page through their PPC campaign.
In order to keep the design clean and not overwhelm people with too many questions, the form is split in 2. First step only asks for the type of insurance they are interested in and what their country of residence is. Only those who are interested in receiving a quote and fill those 2 fills will be taken to Step 2 where further personal information is required.
3. Information input and validation
The whole point of a contact form is to gather information from the website’s users. However, misunderstandings due to poor explanations or lack of feedback during field input can be a major cause of headaches for contact form administrators. For example, if the main form of contact with users after they submit the form is through a phone call, then it is crucial that at very least the country code is correct and the format of the number sequence is standard. To avoid missed opportunities with leads for Expat Medicare, we developed their contact form with inline validation to make sure their answers were as correct as possible and also implemented the jQuery International Telephone plugin to automatically add the country code in the right format (no parenthesis, no 00) in the phone input field. This will dramatically improve conversion rate.
4. Custom-developed forms
If you are using a content management system for your website, try to use their built-in contact form or already tested plugins. All CMS have them – WordPress has the powerful plug in Contact Form 7, Drupal has Webform, and so on. This way you don’t have to worry about anything but the design. If you choose to go the fully customized way, saving the database, email configuration and security could all be potential issues for young developers that will give you more trouble than they are worth. Don’t reinvent the wheel if it’s not necessary or if you cannot do it!
5. File uploads
The main issue with file uploads isn’t development related, but user-related. By allowing them to upload files, you run security risks if the files they upload are wired for example. Also, if the file size isn’t limited, you could encounter issues with server space down the line. If size and/or format are limited but not explained properly, you could also run into user experience issues and end up with highly frustrated visitors.
For all these reasons, if you really need to have file uploads you need to make sure that all limits on file size, format, file type, etc. are clearly specified to avoid any misunderstandings and frustrations. Our new contact form is a good example of file uploads done right. We have no format limitations but we do specify file size limits as soon as you click on drag and drop so that there are no misunderstandings or frustrations along the line.
![Drag and Drop ITC contact form]()
6. CAPTCHAS
6. CAPTCHASAs stated in the previous point, security issues are definitely a concern when it comes to receiving data through contact forms. However, in this day and age, using CAPTCHAS to try to prevent bots from spamming you is not the way to go about it. Not only do they ruin your design with their barely decipherable fonts and non-customizable color combinations, but they also the bane of users’ existence. Putting so much effort into having a flawless UX in the rest of the pages of your website cannot go to waste when we get to the contact form.
If spam is truly a major concern, the Honeypot method is a good alternative. Honeypot is a spam bot form protection that adds an invisible field that only bots can see, which if filled out, will return an error and the form won’t be submitted. Moreover, it has a timer that only allows forms that took 5 seconds or longer to fill to be submitted. Although it isn’t foolproof, it is a great way to keep bots away and users happy.
IT Consultis’ New Contact Form
As we are launching a brand new IT Consultis website this month, we recently had to go through the contact form design process ourselves. We couldn’t be happier with the result so we thought we’d share what we did in order to avoid all of the above-mentioned challenges and tick all of the design boxes.
To avoid major technical difficulties when creating and implementing the form, we used the Drupal module Webform.
The Webform module allows you to create all kinds of forms on Drupal and it’s great for organizing and displaying the data we acquire from the contact form. Once a message is submitted, it sends users an e-mail “receipt” that can be customized, as well as notifying the page admins that they have a new message. To Webform we added the a drag & drop upload element to allow users to upload and send files to us, which is extremely useful when potential clients want to send project briefs!
In terms of design, we ensured our contact page and form reflected and respected our visual identity to the last detail, which allowed the design and color scheme to merge seamlessly with the rest of the website. We kept the layout clean, simple and to the point with only 3 input fields – name, email and message – and a “Send” button, plus the added drag & drop file upload area.
As we previously mentioned, we think placeholders are great, which is why we decided to integrate them as the perfect complement to our clean and simple design.
We hope you like it when it’s finally launched! Leave us a comment and let us know what you think!