Building Custom Forms in WordPress

Whether sent via email or stored in a database, for login, or a subscription to a newsletter, a form is an essential part of every website. For anyone just learning HTML, forms are where it starts to get tricky and PHP without forms wouldn’t be much of a language. The trouble with forms isn’t that they are inherently complicated. Their biggest problem is that they require a lot of grunt-work and are fiddly to boot. There is front-end validation to consider as well as data sanitisation and a poorly constructed form can open a site to all sorts of vulnerabilities. Luckily WordPress has a number of plugins to deal with just about any sort of form possible.

Form solutions in WordPress

As with any form it is important to assess what fields are needed. This is particularly true when dealing with WordPress form plugins. There are several well-known possibilities for form building in WordPress. The main difference between them is their pricing model.

Gravity formsGravity Forms is a paid plugin that gives you all the add-ons with the initial purchase which is $199.00 USD for developers license covering a year of support and updates. Gravity Forms is probably the most popular forms plugins and not without reason. It is well documented and is probably the easiest way to implement advanced forms.

Ninja FormsNinja Forms is an up and coming forms plugin that is relatively well documented and easy to extend. It follows the freemium pricing model meaning that there is a free version of the plugin (in the WordPress plugin repository and on Github) with paid add-ons. Although there are bundles available these add-ons can be quite costly. The developer bundle is $305.00 USD for 8 extensions on unlimited sites at the time of this writing, so it’s important to plan ahead to determine what is needed. I can attest to the developer friendliness of this plugin and they were very quick to respond to my questions despite my not having purchased any of the extensions.

Contact Form 7No list of WordPress form plugins would be complete without mention of Contact Form-7. This plugin has been around since 2007, is one of the most downloaded plugins in the WordPress repository and continues to be updated on a regular basis. It does have documentation and is completely free. While perhaps not the ideal choice for elaborate forms and payment gateways, it is one of the easiest to use contact form solutions and can be quite flexible.

Which solution to choose?

The best way to choose the solution you need is to try it out. Each of these plugins has its pros and cons. Luckily each of these three options provides a way to test out the form building process. Ninja forms and Contact Form 7 are both free and Gravity forms gives access to a demo site in which you can build your form. For the extensions Ninja forms offers a 30 satisfaction guaranteed policy as does Gravity forms.

General tips when building forms

When constructing a form it is very easy to overlook user experience. Just as users don’t generally like to read long articles, they are even less likely to want to fill out a long form. Reducing required fields often leads to better conversions. In cases where a great deal of information is needed, break down the form into manageable parts and always use appropriate spacing and readable typography.

Make sure that forms are semantic and accessible. It is particularly important to be able to tab through the form and tab space to select. Luckily this is the default behaviour in most browsers so you probably don’t have to do much as long as it is semantically written. The best way to test this is to try it yourself and it should only take a few minutes. When building custom forms in WordPress make sure any plugins that generate forms adhere to accessibility standards. All is not lost if they don’t as long as the plugin in question provides filters for modifying the form. Otherwise it may be something to bring to the attention of the plugin developer.

While testing forms is not the most entertaining experience, it really can’t be passed over. It helps to use WordPress form plugins as they have all been tested repeatedly but there is no substitute for testing forms especially from various mobile devices. There are few things more frustrating to a user than a form that doesn’t work properly.

Building Custom Forms from scratch

It is entirely possible to create one’s own form in plugins, or even to include them in a theme. Although this approach is more time consuming there is ultimately more control over the final outcome. However there are a few caveats. Make sure there is appropriate server side and client side validation for all input data. The WordPress Codex has useful core functions for validations data as does PHP itself. For an all-in-one solution to various server-side filters, my personal favourite is filter_var() documented here. Client side validation using javascript is not sufficient to secure a form but can provide a better user experience and is therefore worth the effort.

Building custom forms whether in WordPress or otherwise requires planning and testing. Using form plugins can make form creation much less painful but it is important to choose wisely in order to get the best value. It is not essential to use a forms plugin either. Home-made forms can be added to a site specific plugin or a the theme’s functions.php when appropriate.

Do you have preferences when in comes to building custom forms in WordPress?

Leave a Reply

Your email address will not be published.

Click to view allowed tags

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

This site uses Akismet to reduce spam. Learn how your comment data is processed.