saikit.ca

There is only one contact form plug-in for Wordpress that works perfectly under every website design. The contact form plug-in that I am referring to is Contact Form 7 by Takayuki Miyoshi.

Simple Interface that makes Sense

To create a form in the web 1.0 days, you would have to build at least 3 pages: the form page, the script and the redirected page. With Contact Form 7, all 3 components are displayed in one single window so that you can modify them all at once.

There are three sections that you need to modify in Contact Form 7 to get your form up and running:

1. Create the form that the users see
2. Create the mail that gets sent to you
3. Configure the messages and Additional Settings

---

1. Create the Form that the Users See

This section lets you define the fields that the user needs to fill out.

You can use basic HTML for the form section. The form fields will be surrounded by square brackets “[  ]“. Within the square brackets, you will have to define the form type, the field name and additional criteria.

For example:

[text your-name 20/]

Form type: text
Field name: your-name
Additional criteria: length = 20

This above shortcode will create a textbox field with the name “you-name” and it will be 20 characters long. Keep in mind that the name is very important and is probably the reason why Contact Form 7 is so powerful. The name (a.k.a tags) you created can be called in the e-mail message in the next section.

---

2. Create the Mail that gets Sent to you

When a user signs up on your website, you want the captured information to be mailed to the webmaster. This is the section that you use to define the mail message.

From the mail header, you have five options.

To: the email that you want to send the email to when the user clicks on the submit button
From: the email that will be displayed as the “sender” for the email that you will be receiving.
Subject: the subject of the email that you will be receiving.
Additional Headers: you can put in CC: and BCC: in here.
File attachments: attach a file to the email message that you will be receiving

In the Message body, you can define the email that you will get.

From the above example, if you put the tag [your-name] in the email body, you will receive the value that the user put in the textbox field in your email. Tags can be used anywhere in the mail section

You can also modify the message body to accept HTML.

You can create a second email to send to the user if you’d like.

---

3. Configure the Messages and the Additional Settings

After the user clicks on the submit buttons, they will receive a message. There are many options here that you can use to define the proper message for the proper situation.

On top of that, you can use the Additional Settings textbox to define additional actions that will happen when the user submits the form.

(Note: You must quote the line properly. Only one line is allowed)

See http://ideasilo.wordpress.com/2009/05/31/contact-form-7-1-10/ for more information

Redirect to a Different Landing Page

For example, you can use additional settings to redirect the user to a different landing page. In other words, after the user submits the form, they will be redirected to a Thank You page.

This can be done by adding this piece of code to the Additional Settings field:

on_sent_ok: “location.replace(‘http://www.saikit.ca’);”

Use Contact Form 7 with Google Analytic

Another way of using the Additional Settings is to route the page that will be the landing page  of your Google Analytics goals.

on_sent_ok: “pageTracker._trackPageview(‘/funnel_G1/step1.html’);”

See http://www.google.com/support/googleanalytics/bin/answer.py?hl=en&answer=55514 for more information