WP 5.0. breaks page builder. See fix here

Okay
  Print

Contact Form 7 use case examples

Contents:

  1. Install and configure CF7
    1. Default form
    2. Inline Form
  2. Save form data in WP and export to CSV
  3. Redirect form to thank you page
  4. Conditional fields
  5. Check to agree before submit
  6. Pre-populate other forms with CF7 data

1. Install and configure CF7

download and install: https://wordpress.org/plugins/contact-form-7/

after activation, you will see this in your WP dashboard:

you'll have one pre-installed contact form; form editor looks like this:

first, you wand to edit the form code, in the editor field; there are many form field types to choose from; for more info read this: https://contactform7.com/text-fields/ and this: https://contactform7.com/checkboxes-radio-buttons-and-menus/

a. Default form

A standard form that looks like this on front end:

will have the following code:

<label> Your Name (required)
    [text* your-name placeholder "Name"] </label>
<label> Your Email (required)
    [email* your-email placeholder "Email"] </label>
<label> Subject
    [text your-subject placeholder "Subject"] </label>
<label> Your Message
    [textarea your-message placeholder "Message"] </label>
[submit "Send"]

To break it down, a field works like this:

- This is the form label. You can remove it and have the code like this:

[text* your-name placeholder "Name"]
[email* your-email placeholder "Email"]
[text your-subject placeholder "Subject"]
[textarea your-message placeholder "Message"]
[submit "Send"]

Which will output this form:

text* - This is the field type. * means the field is required.

your-name - The field ID. This will be used to store the data and send it to your email.

placeholder "Name" - Placeholder text. Remove this to get a form with no placeholders.

b. Inline Form

Inline forms usually look like this:

This layout is more suited for forms with fewer fields and without labels. Code looks like this:

<div class="row form-inline">
  <div class="col-md-12">
    [text* your-name placeholder "Name"]
  </div>
  <div class="col-md-12">
    [email* your-email placeholder "Email"]
  </div>
  [submit "Send"]
</div>

To configure the message you receive after the form has been submitted, go to mail tab:

To - enter your email here

From - [your-name] is the name user fills out in the form; note that IDs here need to be the same as in the form code; is the sending email, this can be set to any email@your-domain.com and the email address doesn't have to exist.

Other fields are self explanatory. See how field IDs are used here. Feel free to edit Message Body to your own, but make sure to include all IDs.

The Messages tab allows you to edit all success / error / validation messages.

To add the form on a page, just create a text block element and paste the form shortcode there:

Form will fill out its container width, so adding the text block element in a larger column will result in a wider form.


2. Save form data in WP and export to CSV

Install this plugin: https://wordpress.org/plugins/contact-form-cfdb7/

After each form submission, data will be saved as custom posts:


3. Redirect form to thank you page

Install this plugin: https://wordpress.org/plugins/wpcf7-redirect/

You will see a new tab on your form editor:

Use that for your thank you page info.


4. Conditional fields

Install this plugin: https://wordpress.org/plugins/cf7-conditional-fields/

Plugin documentation is actually very well made so please read that before using it.


5. Check to agree before submit

Add this to your form code, right above the submit button:

[acceptance your-consent] I consent to the conditions. [/acceptance]

For more info, read the documentation here: https://contactform7.com/acceptance-checkbox/


6. Pre-populate other forms with CF7 data

Install this plugin: https://wordpress.org/plugins/wpcf7-redirect/

Check "Pass fields as URL query parameters" and send the redirect page to your next form. Use the query parameters to pre-populate your next form.