Landkit update 1.10 turns code block into Chinese characters. 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
  7. Multi step forms

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.

7. Multi step forms

Install this plugin: https://wordpress.org/plugins/contact-form-7-multi-step-module/

  1. Create one page or post for each step in your multi-step form process. If you have 3 steps, create 3 pages/posts. You will need the urls to these when creating your forms.
  2. Create a Contact Form 7 form.
  3. Place your cursor at the end of the form.
  4. On the “Form” tab of the Contact Form 7 form, click on the button named “multistep”.
  5. In the popup, type in the current step and total steps in your multi-step process. For example, if this is the first form in a total of 3 forms, type in “1” for Current Step and “3” in Total Steps. If this is the last form in your process, type in “3” for current Step and “3” in Total Steps.
  6. The Next Page URL is the url that contains your next form. If this form is the last step, you can leave the URL field blank or fill it in to redirect the user to some other page.
  7. Click “Insert Tag”
  8. Save your completed form and place the form’s shortcode into the appropriate Page/Post you created in step 1.
  9. Repeat for each form in your multi-step form process.
  10. Only the final step will send an email. To include fields from your other forms simply enter the mail-tags from the other forms. For example if your first form has the field your-email you can include [your-email] in the Mail tab on the last form.