Need the perfect WordPress contact form template? Make sure you don't settle for second best.
Have you built a form from a template? Did you know a contact form template can get you up and running in minutes, all ready to receive your contact messages? Create your form and insert it on a page in two easy steps.
But is your online contact form your primary source of new customer inquiries? If so, it needs to be perfect. Anything less can negatively impact your business. Jessica wrote about a well-known company that lost millions of dollars a year due to one small flaw in a form. A simple contact form isn't always that simple!
Flexible contact form template for the win
Pre-packaged contact form templates often have a few sticking points. As a web designer, I know better than most that the "one size fits all" approach simply does not work. So any contact form template worth using MUST be flexible and 100% customizable to your unique requirements.
Formidable comes with a few form templates, and the contact form template is probably the simplest. But today I'm going to show you how to take a simple contact form template and modify it to fit your individual requirements, both in appearance and functionality.
Start your contact form from a template
First, go to the Formidable section of the WordPress dashboard and add a new form.
On the initial form builder page, before adding any fields, you'll find the option to load a template. The "Contact Us" form is the default option. Select this template and get to work personalizing it.
** Pro Tip ** If your form is sales focused or a point of first contact, keep it as simple as possible. Studies show that the longer the form, the fewer users will fill it out. Only ask for the information you need for the immediate request. You often only need a name, message field, and contact number or email address.
Forms aimed at existing customers (like tech support forms), or forms where there is a perceived value in giving additional information (like quotation calculators) can be longer without affecting response rates much.
For this example, I'm going to create the simplest of forms aimed at the initial contact with a potential customer. This form includes name, email address, contact number (optional), and a field for the message.
First, hover over the "Subject" field and "Website" field that were included in the contact form template. Click on the trash can icon that appears on the right to delete both of these fields.
Technically separate fields for first and last name isn't required, so in some circumstances the two can be combined. I'm going to keep the two fields separate for 2 reasons: first, the first name field will better personalize the response message, and second, matching up to MailChimp lists is easier with two separate fields.
Next, add a field for a phone number. This will not be a required field as many people don't like giving out their contact number immediately. But if the query is sales related, a phone call response is much more likely to make an immediate sale when compared to an email response.
Finally, because I already have other spam protection in place on my site and I want to keep my form as user friendly as possible, I'm going to remove the reCaptcha field.
Customize the contact form with a three-column layout
Now that the form fields are all setup, it's time to think about the layout. With my background in web design, I've learned to hate random white space on a page, so I want a layout that will be compact, easy on the eye, and fit in perfectly with my other page elements.
I love the "call me back" forms that you see more and more on modern websites because of this simplicity. A single line split into thirds, name - number - submit button. It's super sleek and looks great. But it's much harder to achieve this sleekness with a large "Your Message" paragraph text field. On many modern widescreen themes it just looks too big if you have this element full page width. I like to use sections to achieve a minimalist layout.
Add three section fields to your form. Set each of them to one third page width using the "frm_first frm_third" CSS layout class for the first section, and the "frm_third" layout class for the 2nd and 3rd sections. Remove the section titles and pop into the style settings. Set the section border to 0px so the sections can be used just to achieve a layout, without being visible.
Now that the three-column layout is ready, check the CSS layout class options for all the other fields. Remove anything already in there. Just leave them blank.
Next, drag the First Name and Last Name fields into the first section, the Contact Number and Email fields into the second section, and the Message field into the third section. Remove the descriptions below the name fields so that everything lines up neatly, and then adjust the Message field to be 4 lines high instead of the default 5. Now everything lines up evenly.
The final step is the submit button. Setting this to 100% width gives a symmetrical, minimalist feel that is nice and compact and easy to fit into a page design.
Make the most of your Contact Form Actions
Just because your contact form looks minimalist, doesn't mean the form actions need to be minimalist too! There are three main steps you can take to maximize the impact of your form and take the process of personalizing the contact form template to the max.
- Set your form redirect. Bring users to a page that displays a thank you message along with a selection of your latest products or special offers. Turbocharge your sales by including a time limited coupon code on this page too.
- Send an automatic, personalized thank you email. Instead of a boring "Thanks for your message - we'll get back to you" response, use a form action to say thank you. Use the first name field to personalize the subject line and text. Include details of special offers, useful information, and value added promotions in your message.
- Add the user to your MailChimp list using the MailChimp add-on. A highly qualified email list is one of the most valuable marketing resources you can have, so don't miss any opportunity to build your list!
More form templates to share
In addition to the form templates that come pre-packaged with Formidable, our team has also built a few custom form templates for download. We'd love to hear your suggestions for additional templates to add to this list.
Have you built contact forms that you're particularly proud of? Export them as XML files and share your amazing contact form templates with the Formidable Forms community. Our users always amaze us with their creations and provide constant inspiration for future projects!