Contact Forms
Building contact forms using Contact Form 7 Plug-in
Home page for Contact Form 7
Setup
To enable the use of forms, you must first enable the plug-in. From your WP Dashboard, choose the Plugins link in the dashboard navigation (Blue arrow below). Click the Activate link under the Contact Form 7 plugin (Red arrow below).
Creating a Form
You now have a new WP Dashboard menu item to edit or change the settings of a contact form.
Title Section
Adding a new form
To create a new form, click the red “Add New” link.
To change the name of the form, click the title and rename.
Editing Existing
You will see a list of forms across the top of the Contact Form 7 page listed horizontally. Click on the title of each to edit. To remove a form, choose the red “Delete” link in the title section.
Form Section
There are two sections to the Form area. The left side HTML Editor and the Tag Generator.
In the left side HTML Editor section, you can add HTML code to format your form. Use the Generate Tag area to have the plugin help you create the code you need to add in the left side HTML Editor area. The default form has Name, Email, Subject, and Message. You may add or remove as needed. To remove a section highlight and remove from the left side HTML Editor area.
Adding new form tags using Generate Tag
There are several types of form elements you may wish to add:
- Text Field – One line text input field
- Email Field – One line email input field
- Text Area – Multi-line text input area
- Drop-down menu – A drop-down list of options
- Checkboxes – A list of options with checkboxes – able to select multiple options
- Radio Buttons – A list of options – only able to select one option from the list
- Acceptance – Must check the box before submit button is available
- Quiz – Must answer the question correctly before the form may be submitted
- File upload – option to allow files to be sent as an attachment
- Submit – button to submit the form
Once you have selected the appropriate tag from the Generate Tag drop-down menu and entered the options, copy/paste the tag code (Red Arrow below) to the left side editor (Green Arrow below) for use. You may want to use a little HTML code to help format the form element on the page. In this example, I added the text “Choose a color” between a <p> and ending </p> tag and also a line break tag <br /> for formatting.
Mail Section
The mail section contains the information that will be mailed to the address you specify.
The default set of form elements show in this section. Enter the name of the form tag in brackets. eg: [Color] to add the drop-down from the example above.
- To: Add the address you wish the contact form information to be mail to. For multiples, separate addresses with commas.
- From: This can be generated from the form or from a static address. Form information should be in brackets. eg: [email]
- Subject: It is sometimes useful to preface your subject with some text. eg: WordPress Form Submission: [subject]
- File attachments: If you are accepting files in your form, enter the field(s) here.
- Message body: Edit as you see fit.
Message Section
The message section contains the web page feedback your users will receive when they click the submit button. Edit each section as you see fit.
