How to set up contact form 7 in WordPress. All fields (tags) of the form. Spam protection with Really Simple CAPTCHA

• All form fields (tags)
• How to make one of the fields mandatory: mail or phone
• Conditional Fields for Contact Form 7 addon
• Contact form 7 Custom validation addon

In the previous article, we got acquainted with the Contact Form 7 plugin and its settings. And here, all supported field types (form template tags) and the parameters of each of them, as well as styles (CSS classes) of form elements will be discussed in detail. This is unofficial documentation for all Contact Form 7 form template tags.

The field type determines the type of HTML form element: text, “radio”, “select”. The field type is indicated in the name of the form template tag.

An example of a text field tag and the HTML code it will output:

Also, each tag (field) has its own options (tag attributes). Tag options are specified after the title and field name. For example, let's add a class attribute for the previous text field:

Form template tag (field) syntax:

Tag (field) attributes

You can use the same attributes (options) in different form tags. Therefore, in order not to repeat the description of each attribute for each form field, we will place their description in a separate section.

Attributes that can only be applied to a specific form tag will be listed separately for each tag.

* The * immediately after the field type makes the field mandatory.
Example: id (line) Identifier name. css attribute id, used to design the field.
Example: id:foo class (line) Class name. css class attribute, used to design the field.
Example: class:bar
You can specify several classes: minlength and maxlength (number)

These are HTML5 attributes that limit the input of characters into a field, both by a lower threshold (minimum) and an upper threshold (maximum). The user will not be able to enter fewer characters (minlength) or more characters (maxlength) into the field than specified by these values.

For minlength , if the entered text is less than this value, the user will receive a "Field is too short" warning. And vice versa for maxlength .

Examples:
minlength:10 -
maxlength:90 -
both at once -

As a result, we get a text field that will issue a warning and the letter will not be sent if less than 10 or more than 140 characters are entered into it.

These parameters support the following field types: text, textarea, email, url, tel, quiz.

There is an old entry for these parameters:

The maxlength parameter explicitly takes precedence, so if you add maxlength:150 , then 140 will be rewritten to 150.

Size (number) The width of the text field, which is determined by the number of characters in a monospace font. Can be overridden in CSS styles using the width attribute.
Example: size:50 -
Default: 40 default (string/number)

Default field value.

Example: default:value.

If the user filling out the form is authorized, then by default you can substitute the value taken from his profile data. For example, if you specify the attribute default:user_email - , then the field will automatically be filled with the value - “email of the current user” who is viewing the form...

Other special fields of the default attribute:

default:post_meta- will get the value of the metafield whose key will be equal to the field name. For example: will display a form field whose value will be set to the value of the post metafield mymeta_key

default:get- will set the value of the GET parameter with the key equal to the field name: - http://example.com/?mykey=value

default:post- will set the value of the POST parameter with the key equal to the field name: - in POST we pass the data mykey=value.

default:shortcode_attr- will set the value of the shortcode attribute with the key equal to the field name. For example, the form template tag is: , then in the shortcode of the form itself, when called in the post content, we specify the mykey attribute: . Read more below.

Also, you need to add the wordpress shortcode attribute name to the whitelist (because wordpress strips out all unknown shortcode attributes...). This is done through a filter:

Add_filter("shortcode_atts_wpcf7", "my_shortcode_atts_wpcf7", 10, 3); function my_shortcode_atts_wpcf7($out, $pairs, $atts)( if(isset($atts["mykey"])) $out["mykey"] = $atts["mykey"]; return $out; )

For checkbox, radio and select:

• default:number - default:2- selects the second element of the list...
• default:number_number - default:2_3- selects the second and third element of the list (for multi-selects and checkboxes)...

Read more about default and its options, read at the end of the article.

Placeholder or watermark (line)

The text that will be shown in the placeholder attribute.

This option must be used at the end of all template tag options: and not

Can be used watermark instead of placeholder, this is a synonym (alias) of the attribute.

Akismet (line)

Spam protection. Requires the Akismet plugin installed and activated.

• akismet:author -
• akismet:author_email -
• akismet:author_url -

How it works? When sending data, the values ​​of the specified fields will be processed on the akismet server and if they do not pass the check, the letter will not be sent, and the user will see the error:

The message will disappear when you focus on any of the fields.

Form template tags (fields)

Below are all the plugin tags that you can use in your form template. These tags will become HTML input, textarea, and select elements.

Text fields include the following types: text, email, url, tel, textarea, and the count tag is closely related to text fields.

There are two types of numeric fields: number and range. These are HTML5 fields, so older browsers do not support them, displaying a text field instead.

text

One line text field.

Supported options (attributes):

• class
• minlength And maxlength
• size
• placeholder
• default- you can use: user_login, user_first_name, user_last_name, user_nickname, user_display_name
• akismet:author

email

The field is intended for entering email.

Supported attributes:

• class
• minlength And maxlength
• size
• placeholder
• akismet:author_email
• default:user_email or default: [email protected]

url

Field for entering the Internet address (URL).

Supported attributes:

• class
• minlength And maxlength
• size
• placeholder
• akismet:author_url
• default:user_url or default:value

tel

Field for entering a phone number.

Supported attributes:

• class
• minlength And maxlength
• size
• placeholder

textarea

Field for entering multi-line text.

Supported attributes:

• class
• minlength And maxlength
• placeholder
• (cols)x(rows)- where cols is the width of the field in characters, and rows is the height of the field in lines of text. Has 3 formats: (cols)x(rows) , (cols)x and x(rows) .

For textarea, the field value can be specified in two ways:

2. Default text...

If the textarea contains html tags, then after submitting the form you may receive a 500 server error!

count (character counter)

The count tag allows you to set a counter when you want to show the user how many characters have been entered or how many characters are left until the maximum value (if the parameter is maxlength).

To activate the counter, you need to insert a counter tag into the form template indicating the name of the text field for which it will count characters.

The counter tag can be used anywhere in the form template.

For example, we have a text field for a message:

Then we do this:

The field is limited to a minimum of 10 and a maximum of 140 characters. In this case, the counter will show how many characters have been entered.

Sometimes it is more convenient to show how many characters are left to enter, because the user does not know about the maximum limit. To do this, you need to specify the down - option in the tag.

number

Field for entering a number. When the field has focus, values ​​can be changed by rotating the mouse wheel.

Supports attributes:

• class
• placeholder
• min
• max

range

Slider to select numbers in the specified range.

Supports attributes:

• class
• placeholder- are displayed only in browsers that do not support this type of field and display a text field instead.
• min- Sets the lower value for entering a number: min:20
• max- Sets the upper value for entering a number: min:100
• step- Sets the number change step for sliders and number input fields: min:5

checkbox and radio

• Radio buttons- These are switches that allow you to select only one option from several.
• Checkboxes- These are checkboxes that allow you to select several options at once.

Supported attributes:

• default- The default value of the field, for example default:2, means that when the field is displayed, the second answer option will already be selected. For checkboxes you can specify several values ​​like this default:1_2_3

  first_as_label- By default, the checkbox (radio button) comes first, and then its (her) inscription. By passing this parameter, you will swap them.

  use_label_element- Wraps a checkbox or radio button in a label, which allows you to select an element by clicking on its name.

  exclusive- By specifying this parameter, only 1 element can be selected from the checkbox. This functionality is based on JavaScript. Radio buttons do not support this option due to their specific nature.

  free_text- Allows you to add a text field to the last element. It becomes available for completion when the last element is selected and the user can supplement his answer.

• data- Gets a value from a sheet with countries of the world, for example data:countries .

China India San Marino

select

Allows you to select answer options from a drop-down list. Can be used in two ways:

Attributes:

• class
• default- default:2 or default:2_3_4
• multiple- Allows you to select multiple answer options
• include_blank- Add the line "- - -" as the first answer option
• first_as_label
• data
• items- answer options

Paragraph 1 Point 2 Point 3

date

Field for selecting a calendar date. This is an HTML5 type and is not supported by older browsers.

Attributes:

• class
• placeholder
• min- Lower value of a possible date, for example min:2016-01-01 . Relative date format is supported, for example today+10days , today-2weeks and so on.
• max- The upper value of a possible date, for example min:2017-01-01 . Relative date format is supported, just like min .
• step- Date change step in days, for example step:3 . If the lower value is 2016-01-01 and step 3, then the next step will display the date 2016-01-04 and so on.

When you insert a tag into a letter template, you will receive a date in the mail in the format YYYY-MM-DD (2016-12-25) - this is not clear. Therefore, you can specify a more visual template; to do this, use the construction [_format_(field name) "(date format)"]

[_format_your-date "D, d M y"]

reCAPTCHA (spam protection)

Contact Form 7, starting from version 4.3, in conjunction with the reCAPTCHA service, allows you to fight spam. To use reCAPTCHA you need to have a Google account, where you can get keys to use the service API.

To get these keys you need:

1. Go to reCAPTCHA admin panel.
2. Register a site.
3. Get a site key and a secret key (these are two different keys: there can be one site key, but there are many secret keys).

Attributes:

• class
• theme- Widget color scheme. Can be dark or light (default).
• size- Widget size. Can be compact (compact) or normal (default).

Now in the form template use the tag.

Quiz (question-answer)

In this field, the user is asked a question and must answer it, otherwise the letter will not be sent. The field appeared when spam was fought using letter captchas (there was no reCAPTCHA yet). The use of letter captchas imposed restrictions both on the server (graphic libraries were required) and on the person (visual perception errors). This method solved these shortcomings.

Attributes:

• class
• size- Field size and length. One of the values ​​may be omitted.

What planet do you live on?

The example shows that the question and answer are separated by the sign | . The question and answer can be written in absolutely any way, for example mathematical:

You can specify several question-answer pairs; the question will be selected randomly each time the form is displayed:

For this field, you can specify the minlength and maxlength parameters:

When creating a quiz tag with multiple questions using a generator, write each question-answer pair on a new line.

hidden

Hidden field - not visible to the user. Can store valuable information. Information can be added using Javascript or created using the default option.

Attributes:

• class
• default- You can pass a parameter here that will be converted according to a specific rule. Read more in the attribute description (options at the beginning of the article).

submit

Button for sending form data (submit). When you click this button, all form data is sent to the server.

Attributes:

• class

You can specify the button text:

An example of using all supported parameters:

ajax-loader

Please note that the tag in which the download icon is loaded if you click on submit the form, it is added along with the submit button, or rather after it.

So, for example, if you replace the tag with a ready-made HTML button. This is sometimes needed when the button layout is not suitable. For example, if you want the submit button to look like this:

In this case we will lose the tag , because it is added via JS, after an element with the wpcf7-submit class - usually the standard submit button has such a class.

To get around this limitation, we can simply add this class to our button HTML code:

All. Now tag will be added and work as it should.

Or you can add a tag directly into the form template.

acceptance (I accept your terms)

You can only allow users to submit data if they accept certain terms.

Attributes:

• class
• invert- A parameter that creates a checkbox immediately with a checkbox, but in order to send the form to the user you need to remove it.
• default- Creates a checkbox with a checkbox by default if you specify on , example default:on , default is default:off .
• optional- the field becomes optional.

I allow you to use my name in comments.

I allow you to use my name in comments.

The field is a checkbox that is processed using JavaScript like this:

This.find(".wpcf7-acceptance").click(function() ( $(this).closest("form").wpcf7ToggleSubmit(); ));

Initially at the form submit button the attribute disabled="disabled" is present. Those. If the checkbox is not active, then the button to submit the form is also inactive, which means it cannot be submitted. When a checkbox is checked, the script removes this attribute and the button becomes active.

The logic of this field can be changed so that it will be checked only after an attempt to submit the form. To do this, insert the following code in the plugin settings tab "Advanced settings":

Acceptance_as_validation: on

So, if the user does not check the box, he will receive a notification:

file (upload files)

Using this field, you can allow users to attach their own files to the message.

Adding such functionality consists of two stages:

Stage 1 - adding fields for uploading files to the form

Attributes:

• filetypes- File type that is allowed for downloading, for example pdf, jpg and others (full list below), indicated through the separator | (straight line) if you need to specify multiple types.

• limit- Limit the downloaded file by size, for example: limit:1048576, limit:1024kb, limit:1mb. You can use kb (kilobytes) or mb (megabytes).

Accepted file types: jpg, jpeg, png, gif, pdf, doc, docx, ppt, pptx, odt, avi, ogg, m4a, mov, mp3, mp4, mpg, wav, and wmv.

Default max file size: 1 MB (1048576 bytes).

Stage 2 - adding a tag to the letter template

At stage 1, a field was created that has a name - your-file. Now we use a tag with this name in the letter template, but not in the usual “Letter body” field, but in the “Attached files” field.

In the "Attached files" field, insert only the tag with the field name from the form template.

• - Right
• - wrong

If there are several fields for uploading files, then in the “Attached files” field, list them one after another without any separators: .

Local attachments

Contact Form 7, starting with version 3.5, supports transferring local files to email. To do this, along with inserting tags into the file attachment field, you need to pass the path to your file:

/home/you/dir/dir/dir/fantasticpicture.jpg uploads/2013/08/08/boringguide.pdf

If a non-absolute path is specified, then a relative path from the wp-content folder will be considered.

File Upload Management

After a user uploads a file through a contact form, Contact Form 7 checks the following:

1. What PHP errors occurred;
2. File type and file size.

If the check is successful, then the plugin:

1. Moves the downloaded file to a temporary folder.
2. Attaches the file to the letter and sends it.
3. Deletes a file from a temporary folder.

By default, the folder with temporary files is located here: wp-content/uploads/wpcf7_uploads. May differ if the path to the uploads folder is changed.

The wpcf7_uploads folder is created automatically. But there are cases when this is not possible - the parent uploads folder does not have write permissions. Then you need:

1. Change the permissions of the uploads folder.
2. Create the wpcf7_uploads folder manually via ftp, etc.

Also, you can generally change the path to the temporary folder of the plugin. To do this, open the wp-config.php file in the root of the site and add the constant WPCF7_UPLOADS_TMP_DIR, in which specify the full path to the folder with temporary files:

Define("WPCF7_UPLOADS_TMP_DIR", "/your/file/path");

When specifying a custom path to a folder with temporary files, make sure that it exists and has write permissions (755). Otherwise, uploading files will not work, which means they will not be attached to the letter.

response

This is not a field, but a form tag that allows you to change the position of error messages and notifications when submitting a form. By default, notifications about form submissions or errors are displayed at the end of form fields.

To change this position, insert the tag in the place in the form template where notifications should be:

Your name (required) Your message

If you do not enter a name, the form will not be submitted and we will be notified of an error:

As you can see, in the form template we used a tag at the beginning and end of the code, which is why the plugin displayed the notification to us in two places.

Remember that all notifications supported by the plugin (success, spam, etc.) are subject to this rule.

Specialist. default attribute values

Getting default values ​​based on situation

Almost all fields can be given a default value via the default attribute. But what to do when you need to pass dynamic parameters? For example, using a GET request via a URL.

Dynamically retrieving parameters works based on the following tag options:

Default:get HTTP GET variables. The parameter key must match the name of the form field.

default:post HTTP POST variables. The parameter key must match the name of the form field.

default:post_meta The value of a custom field of the post in which the form is located. The custom field name must match the tag name.

default:user_(user field) We are talking about: default:user_email or default:user_nickname . A complete list of such values ​​is given in the following. point.

Example of a text field tag based on a GET request:

Let's say we have a contact page, let's access it with a GET parameter:

Http://example.com/contact/?your-name=Dmitry

As a result, the value of our field will be the machine "Dmitry".

Another example: passing UTM tags to a form

Default value from multiple sources

Also, you can pass several places where you would like to get the value:

We have specified two default value sources (the order determines the priority): first, the plugin tries to take the value from the address bar, if it is not there, then from a custom field of the record. If the value is in the address bar, then the value of the custom field is ignored.

ACF + CF7 without additional plugins

Let's say you created a field group for Posts that contains a text field with the key my-text-field . To display the saved value in this field, use the shortcode:

To do this, you need to use special default attribute values ​​for the authorized user. Let's consider all possible options:

• default:user_login- User login
• default:user_email- Email
• default:user_url- Website address
• default:user_first_name- Name
• default:user_last_name- Surname
• default:user_nickname- Nick
• default:user_display_name- Name displayed on the website
• default:user_description- Description (biography).
• default:user_*- where instead of * you can specify any value from the user data (see get_userdata()). If the original user data (key) does not start with user_ , then it needs to start with user_ . Let's say the user has a vk metafield and we need to indicate the value of this metafield here. Then we write like this: default:user_vk

Your name: Your email:

One more example

One of the registered users on the site decided to use the form. It is logical to immediately substitute his name in the “Name” field, because it is known. We use the default attribute:

Now, when an authorized user visits the page with the form, his display name (display_name) will be automatically entered in the your-name field. And if an unauthorized user visits the same page, he will see the “Enter your name” placeholder.

Getting default values ​​through the attributes of the main CF7 shortcode

Sometimes it may be necessary to use a value from a shortcode attribute as the default parameter for a field.

In this case, you need to use the default:shortcode_attr tag option, which “tells” the plugin to get the value of the shortcode attribute of the same name (with the field name) as the default value.

Now, let's add an attribute with the field name and the desired value to the plugin shortcode. The specified value will be substituted into the default value of the form field of the same name:

However, that's not all! As we know, for any shortcode in WordPress it is given a white list of attributes that can be used in it. In this case, WP knows nothing about our new contact-form-7 shortcode attribute, so it needs to be added to the white list. This is done through the plugin hook:

Add_filter("shortcode_atts_wpcf7", "custom_shortcode_atts_wpcf7", 10, 3); function custom_shortcode_atts_wpcf7($out, $pairs, $atts) ( if(isset($atts["myemail"])) $out["myemail"] = $atts["myemail"]; return $out; )

This code is inserted into functions.php.

Now, when you visit a page with a form, the email field will be filled in with the value [email protected].

Hi all. Somehow, I have too much energy and I decided to write another article today, which will be dedicated to one of the WordPress plugins. Quite an interesting and functional plugin, it copes with its responsibilities 100% and I have not yet found a better way to provide feedback.

I don’t want to bore you for a long time, I think you already understand what will be discussed in the article. And so, today we will understand and configure Contact Form 7 plugin for WordPress, namely create a feedback form.

I sat for a long time and thought about what the disadvantages were in the plugin and nothing came to mind, but this creation has a lot of advantages.

Pros of the Contact Form 7 plugin.

1. Clear and easy to configure. A person who encounters this plugin for the first time will be able to figure it out without any problems.
2. Creation of a large number of different forms and integration of them into the site.
3. The form is inserted using a shortcode onto the page and anywhere on the site. It is very comfortable.
4. Support for Russian and other languages.
5. Support for Ajax requests.
6. Spam protection using a text question or captcha. For captcha you will need to additionally install Really Simple CAPTCHA.
7. Customizing the appearance of the form using css styles.
8. Integration with the Akismet service to protect against spam.

On our website you can see and use such a form if you click on the “Contact us” menu item, a window will pop up where you can see a clear example.

Let's begin!

First, we need to download this plugin. You can from our server here is the link - >or from the official website here is the link -> Download from the official website .

After downloading, you need to install it on . I won’t describe how to install, I think you should know this process from A to Z. We downloaded it, installed it, now we go directly to the software itself to figure it out and configure it.

Setting up the Contact Form 7 plugin and creating a feedback form.

Now that you have downloaded and installed everything as needed, go to the WordPress admin panel and find the item Contact Form 7, click on it and we are taken to the page for adding a new form.

Creating a form.

In order to create a new form, you need to click on “ Add new”, then select the language (Russian by default) and click “Add new”. After all the steps you have taken, you should have a picture like this:

The form has been created, now we will customize it to suit your needs and first give it a name. In my case I will call “ Test form”, you name it as you want and then click “Save”. Now you can see the shortcode that will need to be inserted into the code of the site where this form will be displayed.

We'll need the code a little later, since we need to set up the form first. Let's go to the form template and customize it.

On the right is the drop-down list “ Generate tag”, if you expand it, you can see many fields that are added to the form.

"Generate tag" field

On the left you can see the fields that have already been added to the form.

As an example, let's make a simple form that will have a name, email, phone number, a text question to protect against spam, a message and a send button.

Starts.

Making a text field for the name. In the “Generate tag” drop-down list, select “ Text field" We tick the required field, give it a name in my case “NAME” and assign it an id so that the field can be designed using css styles. I got id=”name”. Below you can see the text “ Copy this code and paste it into the form template on the left" Take this code and copy it into the form template, as in the picture:

For mail (e-mail) we do the same; for a phone, select from the “Generate tag” list, field “ Phone number” and we also do it by analogy.

To configure the message, select “ Text field” and we also do it by analogy with everything described above.

Now add the field " Question". To do this, select the item “ Question”, give it a name. In the Question|Answer field, you can ask different questions and answers, below the field is an example of a logical question, you can ask a text question, for example, “3rd month of the year?| March”, etc. We paste the code as before.

"Question" field

And the last thing we need is a “ Send”, you can leave the one in the template or in the “Generate tag” list, select “Send button”. The template is ready, click the “ Save”.

Let's check what we got, copy the shortcode and paste it onto the page or into any part of the code where necessary. I'll paste it into a test page.

Here's what I got:

You must have something similar.

Setting up form and message recipients

We go down a little below the form template and see the recipient settings.

1. Destination field. Enter the email address from which letters will be sent to visitors who fill out the form.
2. Sender field. Instead of<>, we substitute our shortcodes (the names that were given to the fields). You can view them above. In my case it will be<>.
3. Subject field. I always write a Feedback Form and indicate the website.
4. Letter template field. Here you can display whatever your heart desires. For our example, I make the From field:<>and details Phone: , Message ..
5. The remaining fields are empty.

Don't forget to save at the end.

If you go even lower, you can see the message settings. Everything here is in Russian, so you can edit it to suit your needs as you wish. I think you can figure it out for yourself

The form is ready, you can proceed to test it and see if the message arrives at the email address you specified.

Everything works fine for me, after clicking the “Submit” button, I see the message “ The message was sent successfully. Thank you. “You can test and see what errors the form will produce if you enter the data incorrectly.

As for css styles, they can be added to the main css file style.css. Using firebag, you can view the id and classes of fields and assign appropriate styles to them.

Contact Form 7 plugin for WordPress very functional, you can make a form of any complexity, I am sure you are convinced of this. I will end here, if some points are not completely clear, write in the comments and I will try to help you figure it out. Thank you.

Hi all. Somehow, I have too much energy and I decided to write another article today, which will be dedicated to one of the WordPress plugins. Quite an interesting and functional plugin, it copes with its responsibilities 100% and I have not yet found a better way to provide feedback.

I don’t want to bore you for a long time, I think you already understand what will be discussed in the article. And so, today we will understand and configure Contact Form 7 plugin for WordPress, namely create a feedback form.

I sat for a long time and thought about what the disadvantages were in the plugin and nothing came to mind, but this creation has a lot of advantages.

Pros of the Contact Form 7 plugin.

1. Clear and easy to configure. A person who encounters this plugin for the first time will be able to figure it out without any problems.
2. Creation of a large number of different forms and integration of them into the site.
3. The form is inserted using a shortcode onto the page and anywhere on the site. It is very comfortable.
4. Support for Russian and other languages.
5. Support for Ajax requests.
6. Spam protection using a text question or captcha. For captcha you will need to additionally install Really Simple CAPTCHA.
7. Customizing the appearance of the form using css styles.
8. Integration with the Akismet service to protect against spam.

On our website you can see and use such a form if you click on the “Contact us” menu item, a window will pop up where you can see a clear example.

Let's begin!

First, we need to download this plugin. You can from our server here is the link - >or from the official website here is the link -> Download from the official website .

After downloading, you need to install it on . I won’t describe how to install, I think you should know this process from A to Z. We downloaded it, installed it, now we go directly to the software itself to figure it out and configure it.

Setting up the Contact Form 7 plugin and creating a feedback form.

Now that you have downloaded and installed everything as needed, go to the WordPress admin panel and find the item Contact Form 7, click on it and we are taken to the page for adding a new form.

Creating a form.

In order to create a new form, you need to click on “ Add new”, then select the language (Russian by default) and click “Add new”. After all the steps you have taken, you should have a picture like this:

The form has been created, now we will customize it to suit your needs and first give it a name. In my case I will call “ Test form”, you name it as you want and then click “Save”. Now you can see the shortcode that will need to be inserted into the code of the site where this form will be displayed.

We'll need the code a little later, since we need to set up the form first. Let's go to the form template and customize it.

On the right is the drop-down list “ Generate tag”, if you expand it, you can see many fields that are added to the form.

"Generate tag" field

On the left you can see the fields that have already been added to the form.

As an example, let's make a simple form that will have a name, email, phone number, a text question to protect against spam, a message and a send button.

Starts.

Making a text field for the name. In the “Generate tag” drop-down list, select “ Text field" We tick the required field, give it a name in my case “NAME” and assign it an id so that the field can be designed using css styles. I got id=”name”. Below you can see the text “ Copy this code and paste it into the form template on the left" Take this code and copy it into the form template, as in the picture:

For mail (e-mail) we do the same; for a phone, select from the “Generate tag” list, field “ Phone number” and we also do it by analogy.

To configure the message, select “ Text field” and we also do it by analogy with everything described above.

Now add the field " Question". To do this, select the item “ Question”, give it a name. In the Question|Answer field, you can ask different questions and answers, below the field is an example of a logical question, you can ask a text question, for example, “3rd month of the year?| March”, etc. We paste the code as before.

"Question" field

And the last thing we need is a “ Send”, you can leave the one in the template or in the “Generate tag” list, select “Send button”. The template is ready, click the “ Save”.

Let's check what we got, copy the shortcode and paste it onto the page or into any part of the code where necessary. I'll paste it into a test page.

Here's what I got:

You must have something similar.

Setting up form and message recipients

We go down a little below the form template and see the recipient settings.

1. Destination field. Enter the email address from which letters will be sent to visitors who fill out the form.
2. Sender field. Instead of<>, we substitute our shortcodes (the names that were given to the fields). You can view them above. In my case it will be<>.
3. Subject field. I always write a Feedback Form and indicate the website.
4. Letter template field. Here you can display whatever your heart desires. For our example, I make the From field:<>and details Phone: , Message ..
5. The remaining fields are empty.

Don't forget to save at the end.

If you go even lower, you can see the message settings. Everything here is in Russian, so you can edit it to suit your needs as you wish. I think you can figure it out for yourself

The form is ready, you can proceed to test it and see if the message arrives at the email address you specified.

Everything works fine for me, after clicking the “Submit” button, I see the message “ The message was sent successfully. Thank you. “You can test and see what errors the form will produce if you enter the data incorrectly.

As for css styles, they can be added to the main css file style.css. Using firebag, you can view the id and classes of fields and assign appropriate styles to them.

Contact Form 7 plugin for WordPress very functional, you can make a form of any complexity, I am sure you are convinced of this. I will end here, if some points are not completely clear, write in the comments and I will try to help you figure it out. Thank you.

Every website owner wants to have a contact form for sending messages from users and receiving them in their email. This is the so-called feedback form. That is, a visitor can send his letter to the webmaster directly from the site without opening his mailbox. The best plugin to implement this feature is Contact Form 7, which does not send emails. My article describes the correct Setting up the Contact Form 7 plugin so that everything works correctly.

How the Contact Form 7 plugin works

This form can be located on any page of your website (you just need to copy the line and paste it in the right place). The site visitor fills out the required fields (for example, his name, e-mail, message), and the plugin through one mailbox (let's call it "sender") sends a letter to another mailbox ( "recipient").

That is, you must register 2 mailboxes - sender and recipient. It is better to create the sender in Yandex mail, and the recipient is the official mailbox of your website.

For some time now, the Contact Form 7 plugin stopped working - it didn’t send emails, but just kept loading. I found a way out - installed another free plugin, WPForms Lite. It’s very easy to set up and doesn’t require installing additional plugins to set up sending messages, but I noticed that it doesn’t work with every email. I didn’t receive any letters on one, but on the other they are sent.

Setting up the Contact Form 7 plugin. Instructions

1) We register the sender mailbox on Yandex mail (any mailbox, no matter what, its name is not important for the plugin to work and will not be visible to visitors). It will serve as a transit point for letters.

2) Setting up the contact form of the Contact Form 7 plugin. Click "Change" and onwards "Form Template". Here is an example of how it should look with the required fields: username, email, message and the “send” button:

Your name (required)

Your email (required)

Message

3) Tab "Letter" is responsible for the appearance of the emails you receive.

To whom– recipient mailbox address

From whom – <адрес ящика отправитель>

Subject –

Body of the letter –

So, you receive a letter containing all the completed fields of the feedback form. This completes the configuration of the Contact Form 7 plugin..

Attention! In order for the Contact Form 7 plugin to send emails, you need to install another WP-Mail-SMTP plugin. It is he who will connect two email addresses, the sender and the recipient, and perform system functions for sending letters.

Setting up the WP-Mail-SMTP plugin. Instructions

From Email– sender mailbox address

From Name– for example, the name of your organization or your name

Mailer– function of sending letters. Select “Send all WordPress emails via SMTP”

SMTP Host– for Yandex mail smtp.yandex.ru

SMTP Port– for Yandex mail 465

Encryption– Use SSL encryption

Authentication– Yes: Use SMTP authentication

Username– login on your email sender

Password– password on your email sender

The setup is complete. Save your changes.

How to place a Contact Form 7 feedback form on a page

In the contact form settings, pay attention to the line at the top:

It needs to be copied and pasted on any page. All is ready.

Does not create any difficulties, especially according to my instructions. Everything works fine and emails are sent. I also suggest that you read the article about the best ones for WordPress. There you will find a lot of interesting things.

Contact Form 7 can manage multiple contact forms where you can flexibly customize form and mail content with fairly simple layout. Forms have built-in support for Ajax submission, CAPTCHA, Akismet spam filter and more.

Documentation and support

Screenshots

Installation

1. Upload the entire contact-form-7 folder to the /wp-content/plugins/ directory.
2. Activate the plugin from the Plugins page in your WordPress dashboard.

In the WordPress console menu, you will find the ‘Feedback’ tab.

To learn how to use the plugin correctly, you can visit its home page.

Reviews

I see a lot of people hating on this plugin because they"re using some unsupported version that is bundled in a theme, - all I can say from my own experience is that after using it for several years on many sites is a big thank you to the devs that keep it up to date and free for everyone. It"s extremely easy to set up and customize. Cheers!

Participants and developers

Contact Form 7 is an open source project. The following contributors contributed to the development of the plugin:

Participants

Changelog

For more information, see Releases.

5.1.6

• CSS: removes a style rule from the stylesheet that was unnecessary and conflicting with Twenty Twenty’s rules.
• REST API: retrieves the contact form ID explicitly from the route parameters.

5.1.5

• Config Validator: New test item for the unavailable_html_elements error.
• Config Validator: New test item for the attachments_overweight error.

5.1.4

• reCAPTCHA: Introducing the WPCF7_RECAPTCHA_SITEKEY and WPCF7_RECAPTCHA_SECRET constants.
• reCAPTCHA: Introducing the wpcf7_recaptcha_sitekey and wpcf7_recaptcha_secret filter hooks.
• Adding $status parameter to wpcf7_form_response_output filter.
• Generates a random code when the user is a registered user.
• Introducing WPCF7_ContactForm::unit_tag(), a public method that returns a unit tag.
• reCAPTCHA: issues a different message in the spam log in cases where the response token is empty.
• Consent flag: Support label_first option in form consent tag.

5.1.3

• Fixed a bug that resulted in the inability to deselect an option in the Mail tab.

5.1.2

• Constant Contact: Introduced contact list selector.
• Constant Contact: An additional setting, constant_contact, is introduced.
• reCAPTCHA: Introduced wpcf7_recaptcha_actions and wpcf7_recaptcha_threshold filter hooks.

5.1.1

• reCAPTCHA: Changes the response to empty response tokens.

5.1

• The integration module Constant Contact has been introduced.
• The reCAPTCHA module has been updated to support reCAPTCHA v3.
• Adds Dark Mode style rules.

5.0.5

• Fixed inconsistency issue between get_data_option() and get_default_option() in WPCF7_FormTag class.
• Suppresses PHP errors that occur when calling unlink().
• Introduced wpcf7_is_file_path_in_content_dir() to support the UPLOADS constant.

5.0.4

• Explicitly sets the power_type argument in the register_post_type() call to fix an issue with unauthorized privilege escalation.
• Local file attachment - it is prohibited to specify absolute paths to files located outside the wp-content directory.
• Configuration Validator - Adds a test element to detect incorrect attachment file settings.
• Fixed a bug in the JavaScript backwards compatibility feature for legacy browsers that do not support the HTML5 placeholder attribute.
• Consent checkbox - disables the do-not-store function of the form tag.

5.0.3

• CSS: Applying "not allowed" cursor style when hovering over submit buttons in inactive state.
• Consent flag: Overhaul of the tag generator user interface to encourage the use of better privacy options.
• Implementation of wpcf7_anonymize_ip_addr() function.
• Introduced consent_for:storage option for all form tag types.

5.0.2

• Added a "Privacy Notices" section to the readme.txt file.
• Updated content in the Information meta block.
• Use get_user_locale() instead of get_locale() where more appropriate.
• Consent flag: Resets the disabled status of submit buttons after successful application.

5.0.1

• Fixed incorrect use of _n().
• Configuration Check: Fixed incorrect number of warnings on the Advanced Options tab.
• Configuration check: Fixed incorrect handling of the [_site_admin_email] special email tag in the From header field.
• Acceptance checkbox: The specified class and id attributes were applied to the wrong HTML element.
• Configuration check: If there is an optional mail header for mailboxes such as Cc or Reply-To, but a possible empty value, an "Invalid mailbox syntax" error will be returned.
• Explicitly specify the fourth parameter to add_action() to avoid passing unintended parameter values.
• Check if the target directory is empty before deleting it.

5.0

• Additional settings: on_sent_ok and on_submit have been removed.
• New additional setting: skip_mail.
• Flamingo: The title of the incoming channel changes along with the title of the corresponding contact form.
• DOM events. The entire API response object is accessible through the event.detail.apiResponse property.
• HTML Mail: Adds language-related attributes to the HTML header.
• File Upload: Sets the accept attribute to the upload field.
• A new class WPCF7_MailTag has been introduced.
• Allows you to abort an attempt to send mail using the wpcf7_before_send_mail action hook. Additionally, you can set a custom status and message via an action interceptor.
• Acceptance checkbox: Allows you to specify conditions within the content portion of the form tag.
• Acceptance checkbox: Supports the optionality parameter.
• New special mail tags: [_site_title], [_site_description], [_site_url], [_site_admin_email], [_invalid_fields], [_user_login], [_user_email], [_user_url], [_user_first_name], [_user_last_name], [_user_nickname], and [_user_display_name].
• New filter hooks: wpcf7_upload_file_name, wpcf7_autop_or_not, wpcf7_posted_data_($type), and wpcf7_mail_tag_replaced_($type)
• New form-tag features: zero-controls-container and not-for-mail