Contact Form 7

[contact-form-7 id=”640″ title=”Contact form 1″]

To ITS: The plugin’s author has fairly extensive documentation on all of Contact Form 7′s functionality on his site: http://contactform7.com/docs/.  I’ve tried to summarize what I thought Lafayette users might need to do most often below.

Making a new form

  1. Click the Contact section to display your forms.
  2. Click the red Add new link towards the top of the page.
  3. Click the [Add New] button beneath “Use the default language (English)”.
  4. Click on the name (by default a new form will have “Untitled” as its name) to rename the form.
  5. 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 is made of 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.
    • A paragraph begins with a “<p>” and ends with a “</p>”.  Here’s an example: <p>This is my paragraph</p>
    • A line break makes the text or tag following it appear directly below the text before it.  Here’s an 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 the form (such as a text field or a dropdown menu).  A tag is designated by brackets around a type, name, and other attributes (“[text my-text-field]“).

Adding tags to your form

  1. Click the Contact section to display your forms.
  2. Click on the name of the form you want to edit at the top of the page.
  3. Click on the [Generate Tag] button.
  4. Select from the dropdown menu the type of tag you would like to insert into the form.
  5. Fill in/check all of the desired fields and options.
  6. Select the newly generated text in the brown bar, copy it, and paste it into the form where you would like the tag to appear.
  7. Make sure that the tag is preceded by “<p>” and followed by “</p>” (without the quotes).
  8. Here’s an example of a text tag:
  • <p>First name <br>
  • [text first-name] </p>

How the “Mail” section works

The mail section is the blueprint for the email that is sent whenever a user hits the [Submit] button on a form.  Whenever a tag is inserted into a field in the Mail section, it will be replaced with the result of the form’s input.  Also note that the tag needs only include the name of the tag (the second parameter of a tag), not any of the extra syntax (for example if a tag in the form section were [textarea my-text] the equivalent tag in the mail area would just be [my-text]).  The mail version of a tag can also be found when using the [Generate Tag] button in the green bar at the bottom of the panel.

  1. In the To field, enter the email address that you would like the form’s results sent to (multiple addresses can be used but must be separated by commas.)
  2. In the From field, enter the sender’s address of the email (the address that the results will appear to be sent from.)
  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).  Example: “Cc:abc123@email.com”.)
  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. Click the blue Show link next to Messages to display the different status messages.
  2. Above each message is a description of when the message will be displayed.
  3. To alter any message, just change the text in that message’s field.

File uploads

  1. By default, a file upload tag will allow the user to upload the following files: jpg, jpeg, png, gif, pdf, doc, docx, ppt, pptx, odt, avi, ogg, m4a, mov, mp3, mp4, mpg, wav, and wmv.  The types of files accepted can be changed in the Acceptable file types field when making the tag with the [Generate Tag] button.
  2. Also by default, a file upload tag will allow the user to upload a file up to 1MB in size.  The maximum file size can be changed in the File size limit field when making the tag with the [Generate Tag] button.  The tag will accept the number input in the size limit field as bytes unless you end the number with “mb” in which case the number input will be interpreted as megabytes.

Sticking a form into a page or post

  1. Click the Contact section to display your forms.
  2. Click on the name of the form you want to insert at the top of the page.
  3. Copy the text in the brown bar below the name of the form (it should be in a format similar to this: “[contact-form 404 “Not Found”].”
  4. Paste that text into the page or post where you would like the form to appear.

Copying and deleting forms

  1. Click the Contact section to display your forms.
  2. Click on the name of the form you want to copy or delete at the top of the page.
  3. To copy the form, click the green 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.

Leave a Reply

Your email address will not be published. Required fields are marked *