Secrets and Tricks to Improve the Performance of your Forms

We recently saw a simple way to create contact forms in WordPress, using the famous contact form builder. This free plugin is easy to use, and it also gives you great flexibility when designing your contact forms. But what you can do with this plugin doesn’t end there. In fact, it hides a lot of secrets and tricks with which you can greatly improve the performance of your forms – today I present a list of just a few of them, which I am sure will be of great help to you.

1. Redirect your Visitors to a Thank you Page

Typically, Contact Form 7 uses AJAX to send contact requests every time someone fills out the form. This means that the page does not refresh or change, and your form will only show a confirmation message.

Although this makes installing the forms simpler, it is usually advisable to redirect your visitors to a thank you page, or confirmation. This is done for several reasons, but the most important of all is that thanks to it you can track goals in Google Analytics, and accurately measure who completes your forms.

Doing this in Contact Form 7 is actually very, very simple. Just open the form of your choice, and in the Additional Configuration field located in the lower area, add the following code:

on_sent_ok: “location =‘ URL ’;”

Just replace the URL with the full address of you thank you page (including http: //), and that will cause each time a visitor completes your form they will be transferred to that page.

2. Insert your forms in the side bars

We already talked at the time about how versatile Contact Form 7 is to insert forms everywhere, thanks to the use of WordPress shortcodes. With this plugin you can even add a form inside a sidebar, with just a couple of extra steps.

The first thing you need to do is download and install the Shortcodes in Sidebar Widgets plugin. This is an extremely simple plugin that will save you the trouble of adding the following line to your functions.php file:

add_filter (‘widget_text’, ‘do_shortcode’);

Whether you choose to use the plugin or insert this line of code in functions.php (just one is enough), you can use any shortcode in a text widget. Now you only have to copy and paste the Contact Form 7 shortcode as if you were going to insert it into the content of a page, and you will have a form in the sidebar of your site.

3. Save Contact Requests within WordPress

One of the biggest reasons Contact form 7 remains lightweight and easy to use is that it doesn’t save requests for its forms on your WordPress site. Every time someone fills in a form, it will be mailed to the address you want, but after that there will be no trace of the request.

If you use Contact form 7 for more than just a contact form, you will surely want to record each and every request that is filled out. For that, you can use the Contact Form DB plugin. This simple but powerful utility will create a new section in your administration panel, where all the information of the people who have filled out your forms will be saved.

This plugin will then allow you to export all the information to save and process it.

4. Use Shortcodes in the Form Editor

In the Contact Form 7 editor you can use HTML, which gives you great flexibility when creating structured forms. But what if you used shortcodes to add interactive elements to your WordPress form?

Although HTML allows you to style your forms in almost any way, you will still need to add the necessary CSS styles to make them look right. This can be difficult to maintain due to the large amount of code that you will have to write inside the text box.

The solution is in the shortcodes. With them you can greatly simplify the styling of your forms, since they will save you the work of using HTML and CSS. In addition, with them you can insert dynamic elements, such as tooltips or drop-down content.

Just add the following code to the functions.php file of your WordPress theme:

add_filter (‘wpcf7_form_elements’, ‘myfunction_wpcf7_form_elements’);

function myfunction_wpcf7_form_elements ($ form) {

$ form = do_shortcode ($ form);

return $ form;

}

This will allow you to use not only the Contact Form 7 tags, but any shortcodes that you have installed on your WordPress site. And if you don’t have a pack of shortcodes already, you can try using one that I have created.

5. Integrate your Forms with Akismet

If you have a WordPress site, there is no doubt that you have seen the Akismet plugin at some time. This service, created by the same company that develops WordPress, helps you filter all the spam that would otherwise flood your blog comments.

Contact forms are not exempt from this, but Contact Form 7 has the advantage of taking advantage of Akismet’s service to defend itself. Once you have it installed and activated, you can add the following attributes to the fields of your forms, and thus have them sent to Akismet’s servers:

akismet: author – validate a name on your form.

akismet: author_email – allows you to validate an email.

akismet: author_url – allows you to validate a URL.

You should bear in mind that Akismet is a service for validating comments, not contact forms. For this reason, these three attributes should be paired with the most similar fields you have – they are all optional, but the more data you provide to Akismet, the more accurate it will be.

6. Change the Position of the Validation Messages

One of the strengths of Contact Form 7 is that it allows you to validate the input of information, being able to make some fields required or have a particular format. If the validation fails when submitting a form, an error message will be displayed warning the user of this.

This message is displayed at the bottom of the form, which is not always the most elegant way to do it. If you’ve created a form with a large number of fields and styled it with columns and other details, you may want to move the site message.