Advertisement
Plugins

Mini Guide to Contact Form 7

by

Usually a website needs a contact form to communicate with the site owner. One of our favorites is Contact Form 7. Let's see what it can do!

Contact Form 7 is a free, simple and flexible (in WordPress this usually means there's a simple set-up for those who like it simple, and a lot of depth and complexity for people who like fiddling) contact form plugin by Takayuki Miyoshi. Some say that Contact Form 7 is one of the best form plugins for our favorite content management system. The plugin was last updated in February and has been downloaded 6,457,967 times in total (at the time of writing this article).

The plugin can handle multiple contact forms as well and supports AJAX submitting, CAPTCHA, Akismet spam filtering and file uploading. The latest version at the writing of this article is 3.1.1. The official website is ContactForm7.com. Download can be made from the WordPress Plugin Directory. Detailed documentation can be reached in the official docs.

After installing and activating you will find a dedicated menu item called "Contact" in the admin interface.


Form Code

Here is a simple form where you can order a cell phone. You can specify the brand, the color, and the payment method as well.

Main CF7 settings screen
<p>Product *<br /> [select* product "iPhone" "Samsung Galaxy S2" "htc Desire"] </p>

<p>Color *<br /> [select* color "black" "white" "grey"] </p>

<p>Name *<br /> [text* your-name] </p>

<p>Email *<br /> [email* your-email] </p>

<p>Preferred payment <br /> [radio paymethod "VISA" "MASTERCARD" "AMEX"]</p>

<p>[checkbox quickdelivery] Quick delivery (1 day)</p>

<p>[submit "Place order"]</p>

Insert Form Code

Use this snippet to import the complete form specified above to an arbitrary WordPress article or page.

[contact-form-7 id="38" title="cell-phone-ordering-form"]

Basic syntax

The tag syntax consists of type, name and value fields. With the asterisk it will become a mandatory element.

[type name values] for example: [radio paymethod "VISA" "MASTERCARD" "AMEX"]

Tag Types

Here is a list with all the tags you can use in your forms:

  • text fields (text, text*, email, email*, textarea and textarea*),
  • checkboxes, radio buttons and menus (checkbox, checkbox*, radio, select and select*),
  • file uploading and attachment (file and file*),
  • captcha (captchac and captchar),
  • quiz (quiz),
  • acceptance checkbox (acceptance),
  • submit button (submit).

Creating a Two Column Form

We can quickly create a form with the two column style, just use some HTML and CSS. The little secret is that we can combine HTML with the tag code.

<!-- TWO COLUMN FORM -->
<div class="clearfix">
	<div id="left">
		First name [text first-name] <br/>
		Email [email* your-email]
	</div>
	<div id="right">
		Last Name[text last-name] <br/>
		Phone[text your-phone]
	</div>
</div>

Subject [text* your-subject] <br/>
Message [textarea* your-message] <br/>
[submit "Send"]
<!-- /TWO COLUMN FORM -->

Here is the CSS code. Nothing fancy just very basic styling.

#left {
    width: 300px;
    float: left;
}

#right {
    width: 250px;
    float: left;
}

.clearfix:after {
	content:"\0020";
	display:block;
	height:0;
	clear:both;
	visibility:hidden;
	overflow:hidden;
}

.clearfix {
	display:block;
}

Advanced Syntax

The tag syntax can be more detailed as well. The options part specifies the behavior and appearance. Declaring options is not necessary but here is how you can do it. Note that in the following example we use the id and class properties. You can use CSS and JavaScript to extend your form.

[type name options values]

for example:
[radio paymethod id:paynow class:paythis "VISA" "MASTERCARD" "AMEX"]

Setting Up a Mail Template

In Contact Form 7 you can edit mail templates very easily. Text, HTML code, and form data can be combined in arbitrary ways. Note the form data with the brackets. Below is an example for the message body.

Dear [yourname],

You have just ordered a [product] product in [color] color!
Soon you will get an email with the link to where you can pay for your order.

---
Thanks for buying!
OurCompany LLC, www.ourcompany.com
Mail template settings

Here is a list of what else you can set via the admin panel:

  • basic header fields (to, from and subject)
  • message body
  • additional headers
  • file attachments
  • HTML mode

Adding CAPTCHA

The form plugin allows you to insert a CAPTCHA into your contact forms to prevent unwanted messages. Contact Form 7 uses Really Simple CAPTCHA as its CAPTCHA module. Before we begin you will have to install the Really Simple CAPTCHA plugin. Make sure your temporary folder for CAPTCHA files exists and is writable. Otherwise, the CAPTCHA can not be created.

For using CAPTCHA in your forms, you must use the captchac and captchar form tags. captchac means CAPTCHA-Challenge and it represents an <img /> element for a CAPTCHA image. captchar means CAPTCHA-Response and it represents an <input type="text" /> element for a response input field. A captchac tag must always be paired with a captchar tag with the same name. For example, tags shown below are valid:

<!-- insert this into your CF7 form code -->
[captchac captcha-1] [captchar captcha-1]

Note that the names must match each other to function properly. Here captcha-1 is given.


Fixing Sending Errors

Failed to send your message. Please try later or contact administrator by other way.

If the server doesn't allow to send mail via sendmail(), you can use a plugin to send mail via SMTP. Both extensions are compatible with WordPress 3.2.1. These plugins can solve your problems:

Download and install your chosen plugin in WordPress. Enter the settings for your SMTP server on the Settings page.


Custom Event Messages

We can freely modify the messages shown on events.

Custom event messages

Even nicer, you can use HTML code in the input boxes! Try this (really it's an HTML one-liner, but broken down for clarity here):

Your message was successfully sent. Thank you!
<br/>
<img src="http://domain.com/yourpicture.jpg"/>

Multilanguage Support

Contact Form 7 displays forms in English by default, but it bundles 40+ language translations and you can even create a contact form in any language. To use Contact Form 7's admin interface in your own language set the WPLANG constant in your wp-config.php file.

// Change this line:
define ('WPLANG', 'ja');

Use Posted Form Data in Server Side Instead of Mailing

If you want something else than the default posting (sending in email), then you can use the code below.

add_action("wpcf7_before_send_mail", "wpcf7_do_something_else");

function wpcf7_do_something_else(&$wpcf7_data) {

    // Here is the variable where the data are stored!
    var_dump($wpcf7_data);

    // If you want to skip mailing the data, you can do it...
    $wpcf7_data->skip_mail = true;

}

Set Rights So Only Admins Can Modify Forms

To secure the editing options, use this code.

define('WPCF7_ADMIN_READ_CAPABILITY', 'manage_options');
define('WPCF7_ADMIN_READ_WRITE_CAPABILITY', 'manage_options');

Populating Fields Dynamically

The fact is, default values in Contact Form 7 are static. Say for example, you have a GET parameter that you want to use to populate the contact form. Then the solution is Contact Form 7 Dynamic Text Extension by Sevenspark. This plugin provides a new tag type and allows the dynamic generation of content. After installing and activating the plugin, Contact Form 7 will have two new types: the Dynamic Text Field and the Dynamic Hidden Field.


Summary

As you can see, this form plugin has a lot of potential and we only covered a small percentage of all the features. If you didn't find something here, dive into the docs on the official site. Don't be afraid to use it right now! Have fun!

Do you already use Contact Form 7 and have a tip to share with us? Or is there another contact form plugin for WordPress you'd recommend? Let us know in the comments!

Related Posts
  • Code
    Theme Development
    Custom Controls in the Theme CustomizerTheme customizer custom control 400
    In the last article, we explored the advanced controls available in the Theme Customizer, and how to implement them. We’re going to look at how to create our own custom control, allowing you to choose which Category of Posts are displayed on the home page. To get started, download version 0.6.0 of our Theme Customizer Example.Read More…
  • Web Design
    UX
    Walk Users Through Your Website With Bootstrap TourTour retina
    When you have a web application which requires some getting used to from your users, a walkthrough of the interface is in order. Creating a walkthrough directly on top of the interface makes things very clear, so that's what we're going to build, using Bootstrap Tour.Read More…
  • Code
    Creative Coding
    Using WordPress for Web Application Development: Features: EmailApplication foundation 400
    One of the major components of every web application is its ability to send email. Now this doesn't mean that each web application is its own mail client (though people do certainly create their own). Instead, I mean that applications normally send emails when a user signs up, a user modifies their password, when something in the system changes, or - more generally speaking - whenever something occurs for which the site owners want to notify the users.Read More…
  • Code
    Theme Development
    Creating a WordPress Theme From Static HTML: Creating Template FilesCreating wordpress theme from html 400
    In the first part of this series, I showed you how to prepare your HTML and CSS files for WordPress, ensuring the structure would work, the code was valid and that the correct classes were being used. In this tutorial you'll learn how to take your index.html file and split it up into a set of template files for use by WordPress.Read More…
  • Code
    PHP
    Sending Emails With Laravel 4 & GmailLaravel 4 auth retina preview
    Sending emails is crucial for any web application. Usually, an email is sent to notify the user of some kind of activity that has taken place on the site, for example, such as when updates have been made or when new friends have been found. In this short tutorial, I'll show you how to send emails with Gmail quickly from within a Laravel sample application by extending the functionality that we built in my last tutorial, Authentication With Laravel 4.Read More…
  • Web Design
    HTML/CSS
    Foundation for Beginners: Custom Forms and SwitchesFoundation form retina
    Following on from our look at buttons in Zurb's Foundation, let's now take a look at custom forms and switches. During this tutorial we're going to work on an exercise; a contact form which you can add to your projects or just play around with. Once we've built that, we'll move onto other form elements.Read More…