Customization of Contact Form 7 plugin

“Contact Form 7” is a very good plugin for adding a form submission facility to your viewers on WordPress powered blog. It can be on a separate “contact Us” page or an embedded form inside a post. You can have multiple instances in your blog/site.

It is very simple and easy to install and configure. In fact there is very little to be configured to make it work, except, of course if you want to customize it further to suit your requirement. This need may arise if you want to use the form for different purposes in your site.

The form script has in-built security and you can add CAPTCHA and Akismet spam filter. You can also let your viewers upload files – subject the settings that you fix.

The status of form processing is shown to the viewers on the form page through Ajax and it looks cool!

You can download the plugin from this page.

Customization:

Though the tags that you can use both in the form as well as the email that is sent to the admin after successful form submission can be selected from the form admin page. The error messages under different circumstances can also be edited to your satisfaction on the options page.

But the developer (Takayuki Miyoshi) has not furnished any detailed guide as how to use use different tags on the “Additional Settings” box on the website dedicated to this plugin. In fact the developer of the plugin has added many nifty features to the plugin but unfortunately he doesn’t find time to write a comprehensive users’ guide for enhancing the functionalities by the settings tags.

But he is kind enough to visit the support forum and provide tips.

For the sake of users of the Contact Form 7, I have tried to cull the following tips for customizing the plugin. These have been culled from the discussions in the forum as well as the old posts in the blog of the plugin developer, Mr. Takayuki Miyoshi

1. Additional headers:

   You can input any header lines into the field and you can insert any tags into any place in each header line, just like other Mail fields. Viz: CC, BCC etc like this:

   

2. After the form is submitted the viewer is able to see the response messages such as “Your message was sent successfully”, “Validation errors occurred.” etc. at the bottom of the form which is rendered through Ajax. This is the default behaviour. In some cases the location of the messages may fall below the first fold resulting in the viewer not being able to see the message unless he looks it up by scrolling the browser up. So you may like these messages to appear somewhere up so that it is not missed by the viewer.

   For shifting the message location, a tag [response] as the placeholder has been introduced. You can insert this [response] tag into any place of your choice in your form. You can use it multiple times in a form. If there is no [response] used, the response message is shown at the bottom of the form by default.

3. By default, the same page is shown after submission of the form. You can change this behaviour to take your viewer to a “Thank You” page for instance or any web page of your choice by inserting the following javascrpt code into the “Additional Settings” box (insert the URL of the page of your choice within the single quotes in parenthesis):

   on_sent_ok: “location.replace(‘http://yourdomain.com/thank-you/’);”

4. The same action hook “on_sent_ok” can be used for multiple action after the form is submitted successfully. The following is the description offered by the plugin author in respect of this enablement:
   

   Sometimes you might think of running custom codes after the form has been submitted. For example, you may wish to run Google Analytics’s tracking code for tracking their visitor’s usage of the contact form and counting it as conversions.

   The new JavaScript action hook would be useful in such a case. If you have a JavaScript code you wish to run after form submission is completed successfully, simply insert the code into the Additional Settings section (which is new in this version and is placed at the bottom of the admin panel) with preceding on_sent_ok keyword, like this:

   

   Note that you need to quote the codes properly; and the code must be in one line.

   To show you a more practical example, if you want to insert Google Analytics’s tracking function, enter it like this:

   on_sent_ok: "pageTracker._trackPageview('/funnel_G1/step1.html');"

5. By default, Contact Form 7 loads three JavaScript files — contact-form-7.js, jquery.form.js and jquery.js — into the header of each page. They are necessary for Ajax. If you want to disable such loading of these files in all pages and control it to load in select pages only, you can do that by first prevent their loading totally by inserting the following line in the wp-config.php file.

   define ('WPCF7_LOAD_JS', false );

   Then you may call these files to load in a particular file by inserting the following line in the relevant template ahead of the call to wp_head():

   wpcf7_enqueue_scripts();

   You may agree that the page loading will be slower if too many files are loaded through calls to them in the header. Hence, the plugin author has coded it in such a way that these files are loaded only in the footer. Say “Thanks” to him for this!

6. Now you can specify the file upload limit size in bits, kb and mb units like this:

   [file your-file limit:1048576]
   [file your-file limit:1024kb]
   [file your-file limit:1mb]

   (Note that you can’t use a decimal point in it (i.e., like this: [file your-file limit:1.5mb]) and it will be ignored if it exists.)

Tags: ajax, contact form, customization, form, how-to, javascript, performance, plugin, settings, tutorial, WordPress

4 Responses to “Customization of Contact Form 7 plugin”

1. James says:

   2010-02-10 at 6:25 pm

   Your rant is even more chaotic than the plugin author’s! LMAO!!!!!!!!!!!

   Reply
2. S.K says:

   2010-02-10 at 10:15 pm

   Sorry that I haven’t made things clear to you.

   But the plugin author has made a separate web site for this plugin. Hope he would be able to spend time on providing a comprehensive FAQ.

   Meanwhile if you come across any issue in using this plugin, please let me know so that I can also join you in finding a solution!

   Reply
3. Paul says:

   2011-06-13 at 4:01 pm

   Hi,

   I wonder if you have found a way to make required fields conditional? I have a request form where the user must first select a product from a drop-down list, and then they must select the version of the product. I would like to have different drop-down lists of versions, which are required for their respective product selections. Any ideas?

   Paul.

   Reply
4. Lita says:

   2012-05-07 at 6:20 pm

   Thank you for this useful post. You saved my day.

   Reply