Using Contact Form 7

Contact Form 7 is a simple online data collection tool allowing site administrators to collect data directly from a page or post in WordPress. The tool is simple since it sends via email form data to a designated address. No data is stored centrally.

Creating a new form

  1. In the Dashboard, click the Contact menu item.
  2. Click the [Add New] button located just to the right of the "Contact Form 7" title.
  3. Click the "Enter title here" field to change the title of the form. This name will only be seen by administrators of the site.
  4. Click the blue [Save] button.

How the Form section works

The Form section is the blueprint for the form that the user will see. The form section consists of both HTML and Contact Form 7′s “tags”. The only HTML you will need to know is how to define a paragraph and how to use a line break, which can be copied and pasted from the default form fields that appear.

  • A paragraph begins with a <p> and ends with a </p>.
    Example: <p>This is my paragraph</p>
  • A line break makes the text or tag following it appear directly below the text before it.
    Example: <p>Top line<br>Line that will appear directly below the top line</p>

Tags are what Contact Form 7 uses to represent the different components of a form, such as a text field or a dropdown menu. A tag is designated by brackets wrapped around a type, name, and other attributes.

  • Example: [text my-text-field]

Email addresses must use the type "email" otherwise a person may enter an invalid address and the form will not be delivered. Contact Form 7 will alert you to this situation with the error message "this field has syntax errors."

  • Example: [email* your-email]

Labels add text/labels to the text fields or dowpdown menus of the form.  The label text should be contained within the <label> </label> code.

  • Example: <label> Additional Text [text text-124] </label>

Adding tags to a form

Tags are the name Contact Form 7 uses to identify the different types of fields in a form.

  1. In the Dashboard, click the Contact menu item.
  2. Click from the list the name of the form you want to edit or click the [Add New] button located just to the right of the "Contact Form" title.
  3. Common tags will appear as buttons along the top of the form.
    Contact Form 7 Tag Buttons
  4. Select the type of tag you would like to insert into the form.
  5. Fill in and check all of the desired fields and options that appear in the pop up window.
  6. You can cut, copy, or paste to move the new tag to a desired location within the form.
  7. Make sure that the tag is preceded by “<label>” and followed by “</label>” (without the quotes) and the desired text that should procede the tag.
  8. Here's an example of a text tag used to collect a visitor's first name:

    <label>First name
    [text first-name] </label>

  9. To add spam filtering to your form, place akismet options inside of your tags. For example, add the akismet:author option inside your [text first-name] tag to have akismet validate submissions. Other options are akismet:author_email and akismet:author_url to be used for the submitter's email and url fields, if applicable. Here is what a tag that uses akismet filtering would look like:

    [text first-name akismet:author]

How the Mail section works

The mail section is the template used for the email sent whenever a visitor hits the [Submit] button on a form. Whenever a tag is inserted into a field in the Mail section, it will be replaced with whatever the visitor entered into the field. Tag needs only include the name of the tag without any of the extra attributes.

  • For example, if a tag in the form section were [textarea my-text] the equivalent tag in the mail area would be entered as [my-text].
  1. In the To field, enter the email address(es) that you would like the form's results sent to. Multiple addresses can be used if separated by commas.
  2. In the From field, enter the email address from which you want this message sent. This should be a Lafayette address; if you do not have a specific one in mind then use Do not use an email collected in the form or you will see the warning "this email address does not belong to the same domain as the site." If you want to reply to the user who submitted the form, see below for adding a reply-to header.
  3. In the Subject field, enter the subject of the email.
  4. In the Additional headers field, you can enter any other headers that you would like included in the email (such as Cc or Bcc). If you want to be able to reply to the person who submitted the form then you would add that here.
    • For example: Reply-to: [your-name] <[your-email]>
  5. In the File attachments field, you can enter the tags of any files you have had the user upload (multiple file tags do not need to be separated by commas) to make them attachments of the email. A file tag inserted into the Message body box will be replaced with the name of the file.
  6. Checking the Use HTML content type will make Contact Form 7 interpret the text in Message body as HTML.
  7. In the Message body box, enter the body of the email. This is typically where the results of a form should be inserted via their tags.
  8. An additional email can be sent by checking the box next to Use mail (2) in the section below Mail.
  9. Click the white [Save] button at the bottom of the screen.

Customizing status messages

  1. If the status messages aren't already listed, click the Messages section heading to display the different status messages.
  2. Enter a different message for the status you wish to change from its default message.

File uploads

A handy feature of Contact Form 7 is it can allow your site visitors to attach a file or multiple files when completing a form. By default, Contact Form 7 accepts a number of file types up to 1MB in size. However, these settings can be changed to accept other file types up to maximum of 25MB.

The default acceptable file types include: jpg, jpeg, png, gif, pdf, doc, docx, ppt, pptx, odt, avi, ogg, m4a, mov, mp3, mp4, mpg, wav, and wmv.

Customizing the acceptable file types list

Enter the file types you want to accept separated by commas in the "Acceptable file types" field. It's important to know only the file types entered in the field will be accepted. They replace the default file types accepted rather than appended to it.

Changing the maximum allowable file size

Enter into the File size limit field the maximum file size up to 25MB. When entering the file size the file size label must also be included.

  • For example, enter 25mb when creating the file upload tag.

Inserting a form into a page or post

  1. In the Dashboard, click the Contact menu item.
  2. Click from the list the name of the form you want to insert into a page.
  3. Copy the text in the blue bar below the name of the form.
    • It should look similar to [contact-form-7 id="671" title="Registration"].
  4. Paste this text into the page or post where you would like the form to appear.

Copying and deleting forms

  1. In the Dashboard, click the Contact menu item.
  2. Click from the list the name of the form you want to copy or delete into a page or post.
  3. To copy the form, click the Copy link at the top-right corner of the screen. Copied forms will be exactly the same as the form copied with the exception of “_copy” being added to the end of the form's name.
  4. To delete the form, click the red Delete link at the top-right corner of the screen.

Complete Contact Form 7 documentation is available from the plugin author's website

Tech Lounge Hours

Monday - Thursday
12 - 7 p.m.
12 - 5 p.m.
4 - 7 p.m.