WordPress. Contact form. Advanced Configuration

ContactForm 7 for WordPress allows you to flexibly design the form and mail. This tutorial is going to show you its structure and explain how it works. It assumes that you already have the Contact Form 7 plugin installed your WordPress website. Otherwise, please check How to create Contact Form in WordPress.

structure

To work on the forms, click the “Contact” button in the left side menu:

The next page consists of the following parts:

A list of existing forms+ an “Add new” option to add more forms to pages, posts or text widgets.

The current form title with the shortcode that adds the form to your page + the options to copy or delete the form. In brown it has the shortcode to copy and paste into your pages, posts etc to make them show the form.

The form itself + an option to generate and add tags to your form.

You do not need to worry about the rather complex syntax of the tags. You can use the “GenerateTag” tool to generate as many tags as you want. You’ll get a bunch of options to choose from regarding fields, like adding a drop-down menu, radio buttons, checkboxes, CAPTCHA, file upload, etc.  Just give your new field a name and fill in the choices suggested. Once you have done this, the tag will be generated automatically (in the box with the brown background). All you have to do is to copy the tag code to the form on the right.

Let’s take a closer look at the first tag of the standard form as an example:

  <p>Your  Name (required)<br />
  [text* your-name] </p>
  

This is the field where your visitor fills in his/her name. The -tags indicate that we have 1 paragraph, the -tag is a line break. This means that the input field itself will be on the second line. Since the first line, we only have text: Your name (required). You can easily change this text to something else like: Your Full Name (required). It doesn’t affect the field.

The second word in the tag is its name. The name of [text* your-name] is ‘your-name. This name is important as it is used later in your mail template. I.e.:

• text: indicates that this is a text-field.
• *: indicates that this field is required.
• your-name: is the name of the field.
• Mail settings (this is where you can change the email to receive messages though the form)
• Message body of the mail that you will receive after your site visitors submit the form.

Settings

Here go the settings for each field:

[A] Basic header fields (To, From and Subject):

These are basic and necessary message header fields and you can embed mail tags anywhere in these fields.

[B] Message body:

This is the message body, you can embed mail tags anywhere in this field.

[C] Additional headers:

You can insert additional message header fields here, such as Cc and Bcc. There should be one field per line. You can embed mail tags anywhere in these fields.

[D] File attachments:

If you attach uploaded files to this mail, put mail tags for the uploaded files into this field.

[E] Use of HTML:

By default, plain text is used for the message body. To use HTML, check this box.

[F] Mail (2):

Mail (2) is yet another mail section, except that this is a non-optional section. Mail (2) works in completely the same manner as Mail. To activate Mail (2), check the Use mail (2) checkbox.

You can edit mail templates in the ‘Mail’ field same as you did with the form template. You can use tags there as well, but note that tags for mail are different from those tags for forms.

Tags you can use in a mail template contain only one word in brackets and looks like [your-name].

Example

The two tags correspond with the same name. In mail, [your-name] will be replaced by the user’s input value, which is submitted through the corresponding form field, which, in this case, is [text* your-name].

The Messages that your visitors can see when they use the form (customizable, if you double click on them).

A field for some additional settings (where you can add a code to override some of the functions added above).

The Save button to save all your changes.

Feel free to check the detailed video tutorial below:

How to configure wordpress contact form

You can find more information about this plugin at:

• The plugin’s official page on WordPress.org
• The plugin’s official website