Contact Form

This guide is an introduction to the Contact Form 7 plugin for WordPress. Basic knowledge of WordPress administration is required. With various examples, this tutorial explains how to display a form on your page, and how to customize your forms and mail.

DISPLAYING A FORM #

Let’s start with displaying a form on your page. First, open the ‘Contact’ > ‘Contact Forms’ menu on your WordPress administration panel. You can manage multiple contact forms there.

Screenshot of Contact Form 7's Admin Screen

Just after installing the Contact Form 7 plugin, you’ll see a default form named “Contact form 1”, and a code like this:
contact-form-7 id="1234" title="Contact form 1"


Copy this code. Then, open the edit menu of the page (‘Pages’ > ‘Edit’) into which you wish to place the contact form. A popular practice is creating a page named “Contact” for the contact form page. Paste the code you copied into the contents of the page.

Now your contact form setup is complete. Visitors to your site can now find the form and start submitting messages to you.

Next, let’s see how you can customize your form and mail content.

 

ADMIN SCREEN #

Screenshot image of the editor screen 1

Title of this contact form (❶). This title is just a label for a contact form and is used only for administrative purposes. You can use any title you like, e.g. “Job Application Form,” “Form for Event 2014/02/14″ and so on.

Shortcode for this contact form (❷). Copy this code and paste it into your post, page or text widget content where you want to place this contact form.

You can save, duplicate or delete this contact form here (❸).

FORM TAB #

Screenshot image of the editor screen 2

Form editing field (❷). You can customize form content here using HTML and form-tags. Line breaks and blank lines in this field are automatically formatted with <br /> and <p> HTML tags.

Tag generators (❶). By using these tag generators, you can generate form-tags without knowledge of them.

For more about form-tags, see How Tags Work.

#

MAIL TAB #

Screenshot image of the editor screen 3

You can edit a mail template for mail that is to be sent as a result of a form submission. You can use mail-tags in these fields.

Mail(2) template, which is an additional mail template that can have different contents from the primary Mail template, is also available.

For more information, see Setting Up Mail.

MESSAGES TAB #

Screenshot image of the editor screen 4

You can edit messages that are used for various situations, including “Validation errors occurred,” “Please fill in the required field,” etc.

Note that only plain text is available here. HTML tags and entities are not allowed to use in the message fields.

For more information, see Editing Messages.

#

ADDITIONAL SETTINGS TAB #

Screenshot image of the editor screen 5

You can add customization code snippets here. For details, see Additional Settings

 

CUSTOMIZING MAIL #

Contact Form 7 allows you to edit mail templates very flexibly. You are able to edit not only the message body, but also message header fields. And you can manage HTML mail as well. In this article, I’ll show you the settings for each field and explain how to set up your mail with these settings.

FIELDS IN THE MAIL TAB PANEL #

You can edit mail templates in the Mail tab panel.

Screenshot image of the mail tab

BASIC HEADER FIELDS (TOFROM AND SUBJECT) #

These are basic and necessary message header fields; and you can embed mail-tags anywhere in these fields.

ADDITIONAL HEADERS #

You can insert additional message header fields here, such as Cc and Bcc. There should be one field per line. You can embed mail-tags anywhere in these fields.

MESSAGE BODY #

This is the message body; you can embed mail-tags anywhere in this field.

If you check Exclude lines with blank mail-tags from output box, lines including mail-tags that have empty values will be excluded from the message body of the actual mail output.

By default, plain text is used for the message body. To use HTML, check Use HTML content type box.

FILE ATTACHMENTS #

If you attach uploaded files to this mail, put mail-tags for the uploaded files into this field. You can also attach files from the server (local file attachment).

MAIL (2) #

Mail (2) is an additional mail template. It is often used as an autoresponder, but you can use it for any purpose. Mail (2) is sent only when the primary Mail has been sent successfully.

 

FILE UPLOADING AND ATTACHMENT #

In this post, I will explain the file uploading and attachment feature of Contact Form 7. With this feature, you can allow your users to upload their files via your form, and then an email with attachments of the files is sent to you.

To set up, two steps are needed: 1) Add file uploading fields in your form, 2) Set up your mail settings to attach the uploaded files. The two steps will be explained in the rest of this post.

#

ADDING FILE UPLOADING FIELDS IN YOUR FORM #

Like for other types of form fields, Contact Form 7 provides form-tags for file uploading fields (<input type="file"> in HTML): file and file*file* is a required field and requires the user to upload a file.

Available options for file and file*
OPTION EXAMPLES DESCRIPTION
id:(id) id:foo id attribute value of the input element.
class:(class) class:bar class attribute value of the input element. To set two or more classes, you can use multiple class: option, like [file your-file class:y2008 class:m01 class:d01].
filetypes:(filetypes) filetypes:gif|png|jpg|jpeg Acceptable file types. List the file extensions after filetypes:, and separate them with ‘|’ (pipe) character when you set multiple file types.
limit:(num) limit:1048576
limit:1024kb
limit:1mb
Limit the max file size acceptable. You can use kb (kilo byte) or mb (mega byte) suffix optionally. If you omit suffix, the number means bytes. 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.

Example:

[file your-file filetypes:pdf|txt limit:2mb]

Contact Form 7 applies default restrictions for file type and file size when you do not set the filetypes: and limit: (file size) options explicitly. Default acceptable file types (extensions) are: jpgjpegpnggifpdfdocdocxpptpptxodtavioggm4amovmp3mp4mpgwav, and wmv. Default acceptable file size is 1 MB (1048576 bytes).

#

SETTING UP FILE ATTACHMENTS WITH A MAIL #

To attach the uploaded files to the mail, put mail-tags corresponding to form-tags for file uploading fields into File Attachments field in the Mail tab like shown below:

Screenshot of File Attachment field
Screenshot of File Attachment field

In this example, the form-tag for the file uploading field is:

[file your-file filetypes:pdf]

Therefore, the corresponding mail-tag to this is:

[your-file]

Note that what you put in the File Attachments field is [your-file] (mail-tag), not [file your-file filetypes:pdf] (this is not a mail-tag but a form-tag).

If you have multiple files uploaded and want to attach them into an email, simply line the mail-tags up in the File Attachments field like this:

[your-file][your-another-file]


LOCAL FILE ATTACHMENT #

Contact Form 7 supports local file attachment. You can put local file paths in the File Attachments field and those files will be attached to the email as well as uploaded files.

Put a file path per line. When the path is not an absolute path, it will be treated as a relative path to the wp-content directory.

For security reasons, specifying files outside of the wp-content directory for email attachments is not allowed, so place the files in the wp-content or its subdirectory.

Example:

[your-file][your-another-file]
uploads/2013/08/08/boringguide.pdf

#

HOW YOUR UPLOADED FILES ARE MANAGED #

After a user uploads a file through your contact form, Contact Form 7 checks to see if: 1.) Any PHP errors have occurred; 2.) the file type and file size are valid; and then, if the check turns out okay, Contact Form 7 moves the uploaded file to a temporary folder. At this point, Contact Form 7 attaches the file to the mail and sends it. After these procedures, Contact Form 7 then removes the file from the temporary folder.

The location of the temporary folder is wp-content/uploads/wpcf7_uploads by default. It may differ if you have changed upload path setting from wp-content/uploads.

This folder is created automatically, but sometimes it can fail. The most possible reason for this is that the parent folder doesn’t have sufficient writing permissions. In such cases, you can change the permissions or create a folder manually.

You can also change the path of the temporary folder by setting the WPCF7_UPLOADS_TMP_DIR constant in your wp-config.php like this:

define( 'WPCF7_UPLOADS_TMP_DIR', '/your/file/path' );

If WPCF7_UPLOADS_TMP_DIR is defined, this directory is used as the temporary folder instead.

Make certain your temporary folder for uploaded files exists and is writable. Otherwise, all file uploading will fail.

Powered by BetterDocs