Beginners Guide To Web Forms And WordPress Form Plugins
If you are serious about making money from your blog or website you’ll need some kind of form on your web presence. For those who have experience in web technologies and are more adept in handling HTML, CSS and Scripts the term ‘Form’ might sound pretty familiar, but it will be pertinent here to introduce it to those who are finding the term strange.
What are Web Forms?
Forms are collections of web elements that can have many purposes like requesting user feedback, adding users to subscriber or mailing lists, keeping touch with users via contact forms or complex forms which allow for ordering of products, asking for user’s payment, shipping and registration information etc.
The most common usage of forms that you might encounter across the web is the opt-in form which is used to build e-mailing lists by bloggers who are into making money online.
Depending on the complexity the forms used on a site can be one step or complex enough to be multistep with each step building on the previous one to complete the desired data collection process.
Forms can collect data, store it to a text file or to a database and depending on user choices it can also retrieve data from a file or a database located on the same or a remote server. All this is done by a script which does all the data collection, storage, retrieval and data processing.
Elements of a Web Form:
Depending on the usage and complexity a web might contain one or many of the following elements:
- Text Field: A Text field provides a text box in which the user can type alphanumeric information. By setting the width of the text field we can determine the size of this element that will be visible to the user. If we choose the text field type as password then the entered information will be visible as asterisks(*) to the user.
- Checkbox: Checkboxes allow the user to choose one or many from a given set of options. Each checkbox requires a name and a value.
- Radio Buttons: Radio buttons allow only one option to choose from a given set of choices.
- Drop-down lists: These allow users to choose from a list which drops down or expands on mouse click or hover depending on how the options are set for this form element. Users can be presented with option to select just one item or it can be a multiple select item list. Depending on the items in the list the list can have a scroll bar if the items in the list are large. The list can have a default value.
- Image Field: This field allows you to insert an image and attach a behavior to it.
- File Field: This field allows a user to upload a file to the server. When this field is clicked an option to choose a file appears and when the file is chosen it is uploaded.
- Fieldset: This is not any input or action field but it is basically a grouping of field which presents a group of fields as related to the user.
- Label: Every field has a label. A label can be compared like a name of a particular field.
- ID: Every form element has an id which is unique.
- Button: Every form has a button on clicking of which a script is called to attach a behavior to the form like resetting a form, submitting a form etc.
How to create web forms that really work:
Before deciding on creating a form it’s better to spend some time on brainstorming about the data you require and what is the most easiest way to get it from the user. The second part is creating the form is presenting the required fields in a format that is very usable and not too complex for the user even if it means breaking your form into two or three steps, rather than presenting a very long form.
Besides these basic steps there are other tips and techniques that have been tested over times by various web developers, usability experts and designers to improve the user interaction with the form and thereby act like a general checklist. Listed below are some points which every website owner should be aware so that he can get the maximum benefits out of the forms that he is using on his website for data collection or any other desired purpose:
- Validate the form elements: This is a thing that any website designer should not miss out on. Form validation means checking a particular form element for the data being entered – whether it is in the correct formats, or validates for a particular field etc. For example if a text field is being used asking for the name of the user it checks should be placed on the data entered so that a user is not able to enter any numeric or special character into that field. Similarly if a field is present in the form asking for a user’s email address the data entered by the user should be validated to be in a correct email format. This makes things easier for both the user as well as the website owner because the data is entered and stored in the correct format. Form validation can be done while the user is entering the data in a dynamic way or at the form submission level. In most cases doing it dynamically when the user is entering the data is a preferable way because it delivers a better user experience.
- Making the form accessible to users with disabilities: Don’t expect every visitor to your website to be in a perfect state. Spare some thought for those who are physically challenged. Design your forms so that these users can access them via screen readers or designated keys on keyboard or just by clicking the tab keys and navigating your form.
- Make the button look like buttons: If you are using images as buttons ensure that they have proper call to action like submit or click here to submit or something more favorable that tells the user explicitly that this button needs to be pressed or clicked in order to complete a task on the form. The images can change colors mouse is hovered on them, and buttons can change state. The most important thing is that a visitor should be clearly able to identify the action that has to be done in order to successfully complete the form filling process.
- Clearly label the required fields: How many times have you visited a form where you have entered some fields and pressed the submit button only to find that you’ve missed some of the required fields. Wouldn’t it have been useful had it been told to you upfront that a particular field cannot be left blank and is required in order to successfully fill the form? Don’t make this mistake while designing your form. Make sure that all the required fields are labeled properly ( by mentioning –required or using * in front of the label as the general convention goes).
- Minimize the number of fields: It’s OK that every department of your organization has its own priorities and wants the maximum amount of information that you can extract from your visitor but there could be a thing like – asking for too much, which can drastically affect your form fill-up rates and consequentially sabotage all your data collection efforts. There are studies and experts opinions which say that form fill-up rates drop as we increase the fields in the form. So try to keep the fields in the form to a minimal level. The fewer burdens you put on your visitor the more willing he or she will be to provide the data you want. For example while creating newsletter subscription forms, some website owners ask for first name, last name and the email address, some ask for first name and email addresses and there are some who are satisfied with just asking for the email of the visitor. A simple step like asking for a last name could decrease your newsletter subscription rates. The whole idea is to decrease the number of fields, there is no need for last name on an email newsletter subscription form when you have his first name for the sake of personalizing the newsletters you are going to send him.
- Use radio buttons when you want only one option to be selected: There are many instances where a visitor is presented with many check-boxes while there is only one option that he has to select. This can create a confusion for the visitor and wrong data collection at your end and greater form drop-off rates. When you want visitors to explicitly choose one of the given choices use radio buttons. This also means that if you want the users to choose multiple options do-not use radio buttons, use check-boxes instead.
- Always give a default option if you have one: This helps your visitor to fill forms faster and keeps the drop-off rates on long forms to a minimal level. For example if the majority of your visitors are from USA keep the default value of country selection drop-down list in your registration form to USA and its neighboring countries. If you are having an eCommerce site providing a product and the billing and shipping address are the same for the visitor allow him to fill the shipping form by just one click when he has entered his billing details.
- Avoid the problems of double-clicking: Over the years visitor behavior has adapted to double clicking on links. This often results in double clicking on submit button on your forms and other action elements. This can create problems for you in case you have not provided for built-in checks for such visitor actions. But the problems can be grave and land you into complex issues in a scenario when you are having an e-commerce website and the user clicks twice on your checkout button and he gets billed twice. It is always a good practice and many e-commerce providers do it while their checkout process is to clearly mention that only once click is required to check out. Doing this will be helpful for both your users and your website reputation.
Top WordPress Form Creation Plugins:
Besides Contact Form 7 which is one of the most popular Form plugin for WordPress there are few others which we would like you to check out just because of the awesome features and functionality they provide to a WordPress website owner. Listed below are some of the most popular WordPress plugins used to create forms:
- Breezing Forms: If you need a form builder that is powerful and flexible Breezing Forms could be the ultimate plugin for you. It can create complex forms which are responsive. This means that they adapt to your screen’s resolution and therefore are great for desktops, laptops and mobile devices. Just design once and forget the pain of adjusting them for various screens. Breezing form does it for you. Breezing forms come both as a free version and a pro version. Needless to say that pro version gives you more tools and power.
- Formidable Pro: This drag and drop form builder plugin for WordPress makes creating very complex forms a cakewalk even for beginners. Don’t know HTML, CSS and technical stuff? No problems – Formidable Pro allows you to create forms that give you granular control over who has access to what content on your website. You can use Formidable Pro to create FAQs, Listings, Classifieds, Polls, Surveys etc and display your form using shortcode anywhere in a post or a page.
- Gravity Forms: This plugin allows you to publish great looking forms in a matter of minutes. Just select the fields you want in your forms, configure the layout option and embed it in your site. The built in tools in Gravity Forms plugin allow you to do all this very easily.
- Form Maker: This modern and advanced tool for creating WordPress forms gives you a granular control over the design of your form right from the fonts to colors to the layout of the fields. All can be designed from within the plugin itself to match the look and feel of your website. No need for expert graphic designers or any technical know-how The Form Maker generates all the code and can generate simple to complex forms in a jiffy. The form maker plugin comes in a free and commercial version. Commercial version also allows you to add Google maps functionality to your forms and has lots of other great features.
- Fast Secure Contact Form: As the name says this plugin allows a website owner to add a secure contact form to a website in a fast way. The fast secure contact form will let the user send emails to a site’s admin, and also send a meeting request to talk over phone or video. The admin panel allows the webmaster to monitor and check the form submissions as well as create new forms.
Forms are an essential part of any website and there is little you can do with your WordPress website (in online marketing) unless you provide interactivity, opt-in forms, build email lists, get user feedback and simply provide a means to contact you. All these are done easily using forms and as you have learned from above, WordPress has great plugins to help you create wonderful forms with ease. So from now on there is no shying away from creating new opportunities to interact with your users and make more money just because you do not know how to build forms. Hope this post helps you make the most of your website. Comments and suggestions on the post are welcome.