Due to the fact that the Contact Form 7 plugin is very widely used wordPress usersit became necessary to write detailed guide  over it. This article discusses Contact Form 7 settings, implementation methods, and answers to frequently asked questions about using a plugin.

In order to add the Contact Form 7 form to the right place, you need to copy the insert code to the page or post section. This is done very simply:



  Each contact form has its own short tag, such as [contact-form-7 id = "71" title = "(! LANG: Contact Form 1"] . Чтобы вставить контактную форму в свой пост, скопируйте шорткод и вставьте его в содержание поста.!}

  If your form is not displayed and gives a contact-form-7 404 error "Not Found"

The code is a sign that the contact form specified by the shortcode cannot be found. Make sure you use the correct insert code. Try to repeat pasting by copying the necessary code again.

  How to add or edit a field to change the appearance of a Contact Form 7?

To add a field, add a tag to form  text box, completely change or edit the form you need to go to the settings and set the parameters you need.

  Each tag has a strict syntax, supporting several options. Learning syntax can be difficult, but you can easily make a custom tag using a tag generator instead. Click the tag button and after formatting, click " Create Tag.  You can also read the topic in a separate article.

  Internal settings of the Contact Form 7 form.

In each form, the following settings are available:

• Customize form template;
• Letter;
• Notifications when submitting a form.

In these settings you can carry out the necessary manipulations with the tags of the input form, adjust the form of the letter that the user will receive, the notification settings when sending letters.

Producing all contact Form 7 internal settingsyou will receive an edited embed code that you will embed in the desired area on the site.

  How to specify or change the subject of the message?

Just change the “Subject” field in the “Letter” section. To do this, go to the desired settings menu and change the standard tag to your name.

  How to install an answering machine to Contact Form 7?

In order to install an answering machine, which will be triggered after the first letter has been successfully sent, go to the “Letter, go down settings” section and put a tick next to “Letter 2.” After the appearance of the form, adjust the criteria you need, by analogy with the "Letter 1".

  Mail that arrives through the contact form of the Contact Form 7 plugin shows “WordPress” as the sender's name. How to change this?

The sender's address consists of the address email  the sender and the sender’s secondary name. WordPress assigns “WordPress” as the sender name if the parameter is not formatted. If you want to use a different name so that “WordPress” no longer appears as the name of the sender, you must explicitly enter the name of the sender in the “From:” field in the “letter” section:

  Can I place a contact form outside the post?

Yes. You can place a contact form in a text widget. we have already considered. All you need is to create a widget and place the shortcode of the desired shape in it.

  How to insert a contact form in the template file?

You can insert a shortcode directly into the theme of the template, for this you will need to use the do_shortcode () function. This can be done using the following line:

  Error message "Failed to send message". Contact Form does not send letters. What's wrong?

There are usually several reasons for this message:

• The first actual cause may be a mail server, with a ban on sending mail form. In this case, the error message will be surrounded by a red line. Contact the server administrator for a solution.
• Second possible cause  is that the submission form is under suspicion of spam. In this case, the error message will be surrounded by an orange line.

  The message of the reply “Your message was sent successfully”, but the letter does not reach.

If a message is displayed in a green border, this means that the PHP function for sending mail has certainly been successfully completed. So, if you cannot receive mail, then it is quite possible that the mail has been stolen or deleted.

If you can check the log of your mail server, it may give you some clues. A spam filter often causes problems of this kind.

  The contact form redirects to the 404 error page after sending.

This issue is caused by a combination of two configuration errors. First, AJAX JavaScript does not work on your contact form. Due to this problem, your contact form is forced to redirect after sending. Secondly, your contact form uses inaccessible words in the input field names. This issue confuses WordPress, which results in 404 (“Not Found”) errors.

Hello, friends!

In this article, I will show how the quality form is made. feedback  WordPress using the plugin Contact form 7.

This form is really high quality, as it is very easy to use and has the functionality that is not available when creating, for example, the function of attaching a file when sending a message.

In addition, it is made easier nowhere. However, I propose to go straight to its implementation without any philosophical arguments about the importance of the contact form on the site, and even more so personal blog.

Make a feedback form using the Contact form 7 plugin

First install the plugin, downloading it from the official page. Then proceed to the process of creating the form.

After installing the plugin in the WordPress admin panel, a new item appears, which is called the same as the plugin - Contact form 7.

We can immediately add a new form by going to the "Add a new" item or edit an existing one that is created when the plug-in is installed.

She has the name "Contact Form 1". I propose to create a new form to see the whole process clearly. Then it will not be difficult to edit existing forms. Therefore, we click on the item "Add new" and get into the form editor, where you immediately need to select the language you need.

If you need Russian (by default), then click on the first button to add.

If you need another language, then select it from the list and continue to create the form.

Naturally, I am interested in the default option. Therefore, I click on the button "Add new" and get on the page with all the settings of the form.

First of all, we are interested in the form header. I recommend assigning a unique name to the form. This is necessary so that when creating new forms you are not confused. That you clearly know where some form and could edit the desired.

Since I will place the form on the page, I called it something like this - "Feedback form for the Contacts page".

As you can see, there are all the most necessary fields:

• name field;
• to enter e-mail;
• to enter the subject of the message;
• to enter the message itself;
• button to send.

With these fields, you can already place a feedback form on the site, but I suggest making another field, which in some cases is very useful and important. It all depends on the subject of the site. If it is a blog, then by all means it is necessary to make it.

This field is used to attach a file to the message. Imagine that you have a website theme like mine. Technical subjects where it is very difficult to understand the essence of the problem without any graphic data. In this case, it is better to interact with readers, it is necessary to give them the opportunity to explain their problems to the maximum, because the quality of your answer and help in general depends on it.

To implement this field, you first need to add another field to the standard template. We do this as follows. Copy the 2 penultimate lines, that is, the output code of the message field, and duplicate them. It should turn out as in the screenshot below.

Now you need to change the name of the field. Change the phrase "Message" to "Attach a file."

Further in the same code, you need to replace the second part of the "" with the code that will display the field for selecting a file from the computer. First you need to generate such a code. For this, there is a special tag generation function on the right of the form template. Click on it and select from the entire list the item "Send file".

The first code we replace earlier specified part  code in the form template.

The second part is inserted in the "Attached files" field, which is located in the "Addressee" block.

Now you can save the created form by clicking on the button at the top of the page to the right of the form name.

A code will appear under the name of the form, which will display a feedback form on the page. It also needs to be inserted into the page editor in text mode.

Create a new page. I will call her "Contacts". AT text editor  I place this code.

Now we can go to the page. Must see the contact form itself with all the fields. I did it and the form has the following form.

To do this, we fill in all the fields and for example, you can attach some kind of image file (picture).

After I filled out all the fields and clicked on the "Send" button to me without reloading the page, which is very good, it showed a message about the successful sending.

But is this really the case? Go to the mail and see that the message really came.

Going into it, we will see the content of the actual handling of data about the sender and the attached file.

The message has come. Also file attached. So they did everything right. If you also, you can sleep well. But I propose to do another action. It is necessary to check the functionality of the form to check for errors during the filling.

There are such feedback forms that incorrectly check the filling of the required fields. I accidentally forgot to enter the e-mail field and sent a message. The form wrote that the message was successfully sent, but in fact the appeal will not be delivered to the site owner. And we are waiting for an answer and waiting.

As a rule, this situation is common in OS forms, which are made using codes without a plug-in. In this case, if we do not fill in some required field, we will get an error and sign the required fields.

The form works great, which should have been done.

If there are any ambiguities, please watch my detailed video tutorial. It will be more clearly described everything.

At this point I finish this manual. In the next article I will show how to make a quality one. It will also check for errors during the filling, successfully deliver the letters and have a beautiful compact design.

This implementation is now on my blog. You can look at the page "Write to me".

If you want this form and yourself. Then live a new detailed material. I will say right away that it is done simply. All source codes I will give you. I will also make a detailed video lesson that will discourage all your questions.

At this I say goodbye. Write your comments, suggestions, ideas and everything your heart desires. See you later.

Regards, Konstantin Khmelev!

Flector 5

This is a plugin for creating contact forms. It is extremely popular (by download it is inferior only to plugins and) among users, as it successfully combines ease of use and the most powerful possibilities for setting up and designing contact forms. I will try to consider as much as possible all the possibilities of the plugin.

1 Unpack the archive.

2 Copy the folder contact-form-7  at / wp-content / plugins /.

3 Go to the admin of the blog tab " Plugins"and activate the plugin.

When activated, the plugin creates a separate menu in the admin panel of the blog called "", and this also creates a default contact form, which you can see in " Contact Form 7 \\ Forms":

If you use the proposed "insertion code", then the form in the blog will be as follows:

Of course, the appearance of this contact form will depend on the styles used in your template, but in general it will look that way.

To display this simplest form, you only need a couple of minutes. And because of the ease of adding a contact form, many users love this plugin.

However, the plugin has a lot of opportunities to create advanced contact forms of any complexity. But let's start with a simple one, with creating your own form, which will only differ slightly from the default form built into the plugin. Click on the link "Add new":

This is the initial page for adding a form:

The plugin automatically determines the locale used in the blog, so there is no need to choose a language, just click on the "" button. After that, the form design page will appear. The first thing you need to do here is rename the form header:

The title does not matter, it is only necessary so that you yourself do not get confused in your own forms. Set the name of your form, clicked on the button " Save", received as a result of" insert code ":

Now you can paste the proposed code into any of your posts or page (in the "Text" mode, of course) to display the contact form in it. However, it will not differ from the default form, so we will continue to work with the form designer. On the right side of the constructor page is the " Generate tag"click on it will give:

For example, choose a phone number. This window will open:

Actually, here you can not change anything at all. Dimensions, classes, etc. are secondary options and in most cases they do not need to edit them. However, the "" option can be useful as a hint to visitors how exactly this field should be filled.

For example, set these values:

When displaying the contact form, the field will look like this:

When you click on this field, the text entered there will disappear, as it serves only as a hint to fill. But I missed the moment of adding the selected tag to the contact form itself. Here is the tag:

It is necessary to insert into the left part of the form constructor page, where the code of the contact form is located:

You need to create the form code manually, that is, arrange the headings, paragraph tags and line breaks yourself, something like this should turn out:

We save the form code and we end up with the following contact form:

Actually, in the same way you can easily add in a couple of minutes to your contact form any tag used by the plugin. I will not force you to manually try each tag, I will immediately give their conclusion:

1 Text field.

A plain text field can be used for a name, a theme, etc.

2 Email

Used only to enter an e-mail address.

3 URL.

4 Phone number.

Used only to enter a phone number (numbers and defisy).

5 Number (spinbox).

Used only to enter a number (can be used to indicate the age, the number of ordered items, etc.).

6 Number (slider).

It works incorrectly. To output this numeric slider, HTML5 is used, and this, firstly, means that this slider looks different in different browsers, and secondly, it still does not work properly. On the plug-in support forums, I saw solutions correcting the work of this tag, but they did not help me - I couldn’t force this slider to display any numbers. I recommend not to use this tag.

7 Date.

Used only for date entry.

8 Text field.

In the Russian translation, this tag also received the name "Text field", but in HTML terminology it is a textarea, which, in fact, means only an enlarged text field. Used to enter message text.

9 Drop-down menu.

Used to select an item (or several items) from the drop-down menu. It can be used for anything from the question of the color of the product ordered to the choice of the person’s gender.

10 Checkboxes.

Used to select one or more items from the options.

11 Radio buttons.

Used to select only one item from the options.

12 Acceptance.

Used to agree to the terms.

13 Question.

Used to answer the specified questions (the question is chosen randomly from the specified options). Basically, this tag is used as protection against spam. And if spam bots can easily answer the numerical question, then questions like "what planet do we live on?" they are not able to respond.

14 Captcha

Used to display a full captcha. To use this tag you need to install the Really Simple CAPTCHA plugin. Captcha is quite readable, and therefore it is easily penetrated by advanced spam bots like Hrumer.

15 Sending a file.

Used to send a file. You can specify the maximum size and formats of valid files.

16 Submit button.

Used to send contact form data. This is a required tag.

With tags used directly in the contact form, sorted out. Now let's look at how to get these same tags from the contact form to your email. Just below the code of the contact form in the designer is the template of the letter sent to you, and in it you must make the necessary changes. This is important, since incorrectly filling out this template will not allow you to find out exactly what the visitor wrote in your form. As an example, take the phone number tag. For example, in your contact form, it is inserted through the following code:

This means that the following code should be inserted in the template of the sent letter:

The meaning, I think, is clear. In the code of the contact form , and in the letter only the name of this field . The plugin generates digital tag names like , but no one bothers you to use your names. And about the rest of the tags in the letter template - they are also formed according to the same principle - instead of   is used   etc.

Texts issued by the contact form can also be corrected in the form designer in the "Messages" section:

Plugin Frequently Asked Questions:

1 view error " ", how to fix?

This means that either the specified form has been deleted, or the title of the form is incorrectly specified (the title in the calling code is critical for calling the form).

2 In the letter I see tags like   instead of text, how to fix?

This means that the visitor has not filled this field. In this case, the tag is not replaced, but displayed as it is.

3 Are there any restrictions when choosing a name for the tag?

There is. If loop Wordpress  use the name "name", then you can not use it as a name for the tag. The best way  avoiding problems will be adding prefixes to names like the word "your". There will be no problems with the tag name.

4 Can I inform the visitor by email that his form has been received?

Can. Use the "Destination 2" option in the form designer:

This option can be used as an answering machine.

5 Can I send the completed form to multiple addresses?

Can. Use in the "Destination" field "":

Where [email protected]  Your additional email, to which a copy of the form filled in by the visitor will be sent (the "cc" command sends a hidden copy).

6 Is it possible to display a form not in a post or page?

Yes. Paste the form call code into the text widget.

7 Is it possible to display the form directly by code in the template files?

Yes. Use code like:

8 The form is not sent, an error is displayed in the red frame, how to fix it?

Contact your host, it is possible in PHP banned function call mail ().

9 When sending the form an error is displayed in the orange frame, how to fix it?

The orange frame signals spam. False spam protection can trigger caching plugins. Configure periodic caching of cache files in your cache plugin (24 hours is enough).

10 The field for entering email looks different than other fields in the form, how to fix it?

Plugin uses HTML5 code to enter email-address (   instead ), and such code is often not decorated in old templates. You need to make changes to styles.css  your template by adding the necessary code for the input selector there.

11 How to insert user-attached file into email?

Use for this special field "Attached files:"

Really deserves your attention. Unlike many other popular plugins, it does not force you to buy any Pro  version - all its features are available immediately. The popularity of the plug-in (over 19 million downloads) is well deserved - with all its functionality, it is extremely simple to set up and is available even for novice users of the engine. Wordpress.

But still remember - this is a plugin for creating contact forms, not a plugin for creating simple forms. With all its capabilities, it will not allow you to create an advanced form based on any conditions. Its main purpose is to create contact forms and no more. To create dynamic forms, record creation forms and the like, use plugins like Ninja Forms

Did you like the post? Subscribe to updates on or

Contact Form 7 plugin will help to organize feedback on your site.

You can download the Contact Form 7 plugin on the official WordPress site.

Download the Really Simple CAPTCHA plug-in on the official WordPress site.

We learned how to install and connect this plugin in the lesson ““, now let's look at the additional functions of the Contact Form 7 plugin. The form works correctly on monitors, tablets, phones and laptops. By the way, if you have a broken laptop, then there is a service where HP laptop repair is done.

After you have downloaded and activated the plugin, go to the settings of the plugin by going to the new section of the “Contacts” control panel.

Hover over the form name and select "Edit"

A window for changing form parameters will open.

Since the site can use not one, but several forms (the form for sending a message, the form for ordering a call, the form with personal data), so that there is no confusion about which form is responsible for what, you need to change the form name. To do this, click on the name of the form 1.

In block number 2 displays what will be displayed on the page in the form. First comes the text, the name of the field, followed by the code for this field. You can change the text to the one you need.

To add new fields to the form, click on the drop-down list No. 3 - “Generate tag” and select the required item from the drop-down list.

• Text field
• E-mail
• Phone number
• Number (spinbox)
• Number (slider)
• Text field
• Drop-down menu
• Checkboxes
• Radio buttons
• Acceptance
• Question
• Captcha
• Sending file
• Submit button

Tips and form fields by default are as follows: at the top of the tooltip, at the bottom of the element. If you want to arrange the description and the element in one line - remove after the text tag

. The whole block with the description and elements must be in one line and be inside the tag.

Text field