Web forms for a blog are typical means of converting casual visitors into engaged contacts. Once readers have made the step of dropping you a few lines, they are most likely to come back. However, feeding people’s appetite for filling out forms can be a tricky task. Here are some easy tips for increasing conversion rates. Further on, you can find out how to create forms that suit each blog using the 123ContactForm plugin for WordPress.
5 PRO-CONVERSION tips:
- Simple layout, catchy design. Make the form simple by using the minimum number of fields and a one-column layout. If you plan on building a more complex form (e.g. a survey), it’s best to group fields into separate topic sections. Forms are powerful elements and their design should match the overall image of your blog. That’s because our vision usually sorts out the page elements that do not harmonize with the ensemble and ignores them. So leave grey aside and be creative. In terms of words, you can use humorous or teasing messages to spice up your forms.
- User-friendly validation. Fields that prompt for e-mail addresses or phone numbers should have some simple hints below, stating which the desired input format is. This may seem redundant, but mistakes may occur in rush. If your form doesn’t have an autofill option, users should be aware of what they should pay attention to. This kind of interactivity is a must for a contact form, as well as for an order form for WordPress or any other type of web form that requires user input.
- Non-alien CAPTCHA. Have you ever stood dazzled in front of a hieroglyphic CAPTCHA saying to yourself: “Gosh, I don’t have the keyboard for that”? Oh yes, so did we. There’s no reason in chasing away visitors by using an IQ test when a simple CAPTCHA will be equally successful in preventing spam. The even better solution is smart CAPTCHA, which only shows up when there is a sign that the form has been abused (e.g. multiple submissions from the same IP address).
- Efficient error handling. Another means of good interaction with users is optimized error handling. A friendly way to do it is by highlighting the fields that contain errors, so that one can notice easily what needs to be corrected.
- Custom “thank you” message. Even if this comes after the objective of having the form filled out has been reached, it’s best to send a warm message to users, thanking them for their time and announcing that your feedback on their message is on its way.
5 ANTI-CONVERSION practices to avoid:
- Design clutter. Without a powerful motivation, users would be distracted when faced with a cluttered form and they wouldn’t fill it out. Keep forms stylish, yet clean and simple.
- Typing stress. Bad questions are the ones that don’t go straight to the point and call for too much typing. Use simple statements and include radio buttons or Likert scales, if suitable.
- “Reset” button easily mistaken for the “Submit” one. There are few cases when a “Reset” button is necessary at all. Don’t use it when you don’t actually need it because, when hit accidentally, it will lead to users losing data and, naturally, giving up the form.
- No interactivity. Users need guidance. If they spend more than 5 seconds all alone wondering what to do next, the following step will be leaving your page. Of course, you don’t have to stuff the form with explanations. Use them with generosity, but also with purpose.
- No motivation. You have to point out why you’re asking users to fill out the form on your blog and/or what they will gain by doing this (even if it’s just a big Thank you).
How to build a highly customizable form using the 123ContactForm plugin for WordPress
123ContactForm is a WYSIWYG form generator that creates any kind of forms and surveys in 3 easy steps. No programming experience is required as a drag and drop form builder handles the entire process of form generating. Features of 123ContactForm include 3rd party apps integration (SalesForce, MailChimp, VerticalResponse, WebHook, iContact, Google Groups, Yahoo Groups), payment processing (integrations with PayPal,
Authorize.Net, Google Checkout). At any degree of complexity, your WordPress online form will blend perfectly with the image of your blog as 123ContactForm allows full CSS customization.
Let’s see the wizard in action!
Install the 123ContactForm plugin for WordPress:
1. Download the 123ContactForm plugin from the WordPress plugins directory.
2. Install the plugin to your WordPress database:
a. Unzip and move the folder 123contactform-for-wordpress to your wordpress/wp-content/plugins directory;
b. Visit your WordPress dashboard. In the Plugins tab, click on the Activate button for the plugin named 123ContactForm for WordPress.
Create your WordPress contact form:
1. Login/signup to www.123contactform.com.
2. In your Dashboard, go to Create New Form and choose Contact form.
3. Choose your fields (you can use the preexistent ones) and edit them to set the validation rules, label text and positioning etc.
4. Go to the next step – Form Settings. Here, you can customize the “thank you” page, choose the email address where notifications will be received and set the security options (anti-spam features include: CAPTCHA, smart CAPTCHA, password protection, country filter). This is also the step where you can customize the form theme or even the CSS code to style the form in any way you wish to.
5. The final step – Publish Form. To post the form on WordPress, choose the WordPress option in the menu on the left. It returns a line of code. In the Publish section, you can also opt for using SSL encryption for the data sent through your form.
6. Go to your WordPress editor (either in the visual or HTML mode) and paste the code in the place where you need the form to be displayed.
There is a second way of publishing forms on your WordPress page, which is particularly helpful if you have more than one form to embed, because it gives you access to all the forms at once, without having to copy the code for each one. This technique works as follows:
- Log in to 123ContactForm and go to your My Account section. Under Account Details, there is an API Key. The initial status of it is none. Press Create now. Copy the API Key that has been generated.
- Go to your WordPress dashboard and edit your post. Make sure you are in the Visual mode (not HTML). The 123ContactForm icon was added to your menu when you installed the plugin. Click on it, paste the API Key in the lightbox that appears and press Connect.
- Here, you can see a dropdown list containing all of the forms you have created with 123ContactForm. Choose the form that you want to publish and press Embed. You can edit the form at any time, to keep up with the updates in your blog design.
Authored by LAURA MOISEI
Being part of the team at 123 Contact Form, I enjoy keeping up with the latest trends in design, as well as with tech news, and share my discoveries.