From the drop-down list, select the element "Text field"

If any feature that you add is required, check the box 1 and do not forget to write it in the description.

You can add to the input field Additional information to make it easier to fill out the form. Check box 2 "Use as placeholder?" and enter a hint in the field next to it. When you fill out this field in the form, the tooltip text will disappear. Then follow the plugin prompts. The result is a field like this in the finished form:

Be sure to insert the code into the letter template, otherwise the data from this field will not be sent to the mail! This applies not only to text fields but also to any other elements.

Email

Used to pass the sender's mailbox address to the form

URL

Allows you to add a website address to the form.

Phone number

Only numbers can be entered in this field.

Number (spinbox)

A field where you can set the quantity of something, such as a product. The quantity is set with the up/down arrows.

the date

Inserts a calendar into the form with the option to select a date. For example, it is used to reserve rooms in a hotel. Arrival date, departure date.

Text field

Yes, don't be surprised 🙂 Another text field. This time, this field is large and allows you to write a lot of text in it. For example reviews, comments.

Drop-down menu

When there are many options for something and you need to select some item from a large list, for example, a list of cities, streets, goods.

The list must be placed in the Choice field, each item on a new line.

Checkboxes

A checkbox, or checkbox in developer jargon, is an element that creates a checkbox. This field has two states - checked or not. Multiple selection is possible. They are located only in a row, if you check the box "Make checkboxes mutually exclusive?" then only one option can be selected.

radio buttons

Switches (slang. radio buttons) are used when you need to select one single option from several proposed ones. By checking the box "Place label first, and then check-box?" the location of the label and the selection field changes, by default, first the selection, then the label.

Acceptance

confirmation of something. Assume an agreement to accept the conditions described above.

Question

This is the first line of defense against spam, the most elementary. In the setting, write some kind of question, you can use numbers, you can use letters or both, and indicate the correct answer. If the answer when filling out the form is correct, then the form will be submitted. Green indicates which part of this formula will be displayed on the site in front of the answer input field, red indicates the answer. The correct answer in the formula is written after the sign | (vertical bar)

Adds spam protection to the form.

Another plugin is required for this feature to work. Download, install, activate the plugin.

You can not change the settings, copy and paste 2 lines before the send button.

Sending a file

You can attach a file to the form for sending a message. In the settings you can specify maximum size in bytes, and allowed formats for uploading, e.g. .jpg .tiff .doc

submit button

Submitting the form. In the settings in the "Shortcut" section - you can give the name of the button (Send, reply, send 🙂)

Customizing the Appearance of Contact Form 7

Since plugins have update properties, changes appearance forms will be produced in the site theme style file style.css

The code is responsible for displaying the form, its fields and other elements:

Wpcf7 ( background-color:#ddd; ) /*form background color */ .wpcf7 input, .wpcf7 textarea( padding:5px; color:#1D1D1D; font-family:Arial, Helvetica, sans-serif; font-size: 16px; line-height: 20px; border: 1px solid #C7C7C7; box-shadow: inset 2px 2px 8px #F9F9F9; -webkit-transition: all 0.2s ease; -moz-transition: all 0.2s ease; -o-transition : all 0.2s ease; transition: all 0.2s ease; ) .wpcf7 .wpcf7-list-item( padding-left: 0; margin-left: 0; margin-right: 25px; ) .wpcf7 .wpcf7-list-item input( border: none; padding-left: 0; margin-left: 0; ) .wpcf7 select( outline: none; font-size:16px; font-family:Arial, Helvetica, sans-serif; ) .wpcf7 input: hover, .wpcf7 input:focus, .wpcf7 input:active, .wpcf7 textarea:hover, .wpcf7 textarea:focus, .wpcf7 textarea:active ( background: #FDFDFD; outline: none; )

What is here what.

.wpcf7 input, .wpcf7 textarea - input field style ( text field)

1. padding- sets the indent from the content to the border of the element. Here - the indent from the text entered in the field to the border of the field. The value is set in pixels to Xpx, where X is the number of pixels. Example: padding: 5px 3px 6px 8px;
2. color- text color.
3. font-family- input fields font.
4. font-size- font size
5. line-height- line height
6. border- frame around input field
7. box shadow block shadow. inset indicates that the shadow is internal. If you want an outer shadow, omit this value. The second and third values ​​of 2px 2px indicate the horizontal and vertical blending of the shadow, respectively. The fourth value, 8px, specifies the blur radius for the shadow. Fifth - #F9F9F9 - the color of the shadow.

Customizing the Contact Form 7 Button

Contact Form 7 Notification Style

It is responsible for reporting errors or successful submissions.

Wpcf7 .wpcf7-validation-errors( border:none; background-color:#246416; color:#fff; margin:0; padding:20px; -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; ) .wpcf7 .wpcf7-mail-sent-ok( -radius: 10px; border-radius: 10px; ) .wpcf7 .wpcf7-mail-sent-ng( border:none; background-color:#349622; margin:0; padding:20px; ; -moz-border-radius: 10px; border-radius: 10px; color: white; ) .wpcf7 span.wpcf7-not-valid-tip( border:none; background-color:#349622; padding:5px; padding- left: 5px; padding-right: 5px; border-radius:10px; width: 290px; color: white; /* Drop shadow */ -webkit-box-shadow: 3px 3px 3px rgba(0,0,0,0.3) ; -moz-box-shadow: 3px 3px 3px rgba(0,0,0,0.3); box-shadow: 3px 3px 3px rgba(0,0,0,0.3); )

And now, for convenience, the entire code with comments:

Wpcf7 ( background-color:#ddd; ) /*form background color */ .wpcf7 input, .wpcf7 textarea( /* This part of the code is responsible for style of input fields, text areas */ padding:5px; /* Sets padding from fields element before its content, you can put any value, for example 10px */ color:#1D1D1D; /* Text color in input fields */ font-family:Arial, Helvetica, sans-serif; /* Text font in input fields */ font -size:16px; /* Text size in input fields */ line-height: 20px; /* Line-height in input fields */ border: 1px solid #C7C7C7; /* Border around the fields.The first value is the width in pixels, the second - box style, third - its color */ box-shadow: inset 2px 2px 8px #F9F9F9; /* Box shadow 2px - x offset, 2px - y offset, 8px - shadow blur radius, #F9F9F9 - shadow color */ -webkit-transition: all 0.2s ease; -moz-transition: all 0.2s ease; -o-transition: all 0.2s ease; transition: all 0.2s ease; ) .wpcf7 .wpcf7-list- item( padding-left: 0; margin-left: 0; margin-right: 25px; ) .w pcf7 .wpcf7-list-item input( border: none; padding-left: 0; margin-left: 0; ) .wpcf7 select( outline: none; font-size:16px; font-family:Arial, Helvetica, sans-serif; ) .wpcf7 input:hover, .wpcf7 input:focus, .wpcf7 input:active, .wpcf7 textarea: hover, .wpcf7 textarea:focus, .wpcf7 textarea:active ( /* This part is responsible for the style of the input fields when hovering over them with the mouse pointer */ background: #FDFDFD; /* The background of the input field when hovering over it with the mouse pointer */ outline : none; /* Outer border of the text input field */ ) o-transition: 0; transition: 0; border: none; /* Border around the button */ position: relative; color: #fff; /* Text color */ text-transform: uppercase; /* Text transformation (uppercase means that the text on the button will be displayed capital letters) */ /* Round the corners of the button. The values ​​of the following three properties must be the same, as they are the same, only for different browsers*/ -webkit-border-radius: 6px; /* Round corners for Chrome */ -moz-border-radius: 6px; /* Round corners for Mozilla FireFox */ border-radius: 6px; /* Round corners for all other browsers, including mobile */ font-size: 14px; /* Button text size */ font-weight: bold; /* Text style (bold means bold) */ padding-top: 11px; /* Top padding from the edge of the element to its content */ padding-bottom: 10px; /* Padding from the bottom of the element to its content */ padding-left: 35px; /* Padding to the left of the element's edge to its content */ padding-right: 35px; /* Padding to the right from the edge of the element to its content */ /* gradient background - Gradient button background */ background-color: #000000; /* The background color of the button if the gradient is not supported by the browser */ /* In the following properties, the colors must be specified in the same way, as they are the same, only for different browsers. Let's take a look at the first property. The from(#676767), to(#3B3B3B) part means that we need to display a gradient, where from color #676767) there is a transition to color #3B3B3B */ background: -webkit-gradient(linear, left top, left bottom, from( #676767), to(#3B3B3B)); background: -moz-linear-gradient(top, #349622, #246416); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#349622", endColorstr="#246416"); -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#349622, endColorstr=#246416)"; /* Drop Shadow - The shadow of the button. Shadow color specified in RGBA */ -webkit-box-shadow: 0 2px 5px rgba(0,0,0,0.3); -moz-box-shadow: 0 2px 5px rgba(0,0,0,0.3); box-shadow: 0 2px 5px rgba(0,0,0,0.3); ) /* On hover - Style the button when hovering the mouse pointer. Everything is almost the same as in the previous block */ .wpcf7 input.wpcf7-submit:hover( cursor: pointer; text-decoration: none; background-color: #000000; background: -webkit-gradient(linear, left top, left bottom, from(#246416), to(#349622)); background: -moz-linear-gradient(top, #246416, #349622); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="# 246416", endColorstr="#349622"); -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#246416, endColorstr=#349622)"; ) /* On click - button style when clicking on it almost the same as in the previous block */ .wpcf7 input.wpcf7-submit:active( top: 1px; color: #d8c6e2; /* Button text color when clicked */ background-color: #000000; background : -webkit-gradient(linear, left top, left bottom, from(#FF0000), to(#246416)); background: -moz-linear-gradient(top, #FF0000, #246416); filter: progid:DXImageTransform .Microsoft.gradient(startColorstr="#FF0000", endColorstr="#246416"); -ms-filter: "progid:DXImag eTransform.Microsoft.gradient(startColorstr=#FF0000, endColorstr=#246416)"; -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none ) /* CF7 Messages - Style of messages about successful sending, errors, etc. */ .wpcf7 .wpcf7-validation-errors( /* Message style for validation errors */ border:none; /* Message block border */ background-color:#246416; /* Background */ color:#fff; /* Text color */ margin:0; /* Outer padding */ padding:20px; /* Inner padding */ /* Cross-browser corner rounding - the following 3 properties */ -webkit-border-radius: 10px; -moz-border -radius: 10px; border-radius: 10px; ) .wpcf7 .wpcf7-mail-sent-ok( /* Success message style */ border:none; /* Message block border */ background-color:#7ad33f; /* Background */ margin:0; /* Outer padding */ padding:20px; /* Inner padding */ /* Cross-browser corner rounding - the following 3 properties */ -webkit-border-radius: 10px; -moz- border-radius: 10px; border-radius: 10px; ).wpcf7 .wpcf7-mail-sent-ng( border:none; background-color:#349622; margin:0; padding:20px; -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; color: white; ) .wpcf7 span.wpcf7-not-valid-tip( border:none; backgrou nd-color:#349622; padding:5px; padding-left: 5px padding-right: 5px; border-radius:10px; width: 290px color:white; /* Drop shadow */ -webkit-box-shadow: 3px 3px 3px rgba(0,0,0,0. 3); -moz-box-shadow: 3px 3px 3px rgba(0,0,0,0.3); box-shadow: 3px 3px 3px rgba(0,0,0,0.3); ) .wpcf7-form .fleft( float: left; ) .wpcf7-form .mright20( margin-right: 20px; ) .wpcf7-form .mright40( margin-right: 40px; ) .wpcf7-form .clear( clear: both; )

A contact form is an essential attribute of most sites. This is why there are so many contact form plugins in the WordPress directory. One of the most popular is Contact Form 7. The plugin allows you to create forms of any kind; very flexible and easy to set up; has been developing for many years and contains many developments.

Creating and displaying contact forms

Creating forms in the admin

After installing the plugin, the menu item "Contact Form 7" will appear, through which you can create and delete forms.

The form in the picture was created automatically when the plugin was activated.

We use the default form, for this we will create a "Contact me" page and insert the shortcode of the form there.

Front of the site

Now let's save the article and see what our form looks like (using the Twenty Sixteen theme):

The picture shows the form after the sent letter (this is indicated by the notice at the bottom of the form).

Form customization (creating complex forms)

The example above shows how to insert a ready-made and very simple contact form. And now let's look at how to create a form more difficult. To do this, we will return to the admin panel, to the form manager and go to editing the default form.

In the upper field - the name of the form (it is visible only in the admin panel), indicate a name that is clear to you, for example: "Feedback about the site", "Job application form", "Form feedback" etc.

Below the title is a shortcode. We use it in records, to display the form.

And below are four tabs:

1. Form Template
2. Letter
3. Additional settings

Let's consider each tab separately.

Form Template

In this tab, you can customize the fields and appearance of the form. The workspace is the WP HTML editor. Only instead of the usual buttons, we see buttons for inserting different form fields.

Form layout

For layout, you can use html tags and plugin shortcodes. Shortcodes add form fields, and html tags allow you to create an arbitrary HTML structure. For example, our default form looks like this:

Your name (required) Your email (required) Topic Message

And when displayed in a post, it will turn into this HTML:

Shortcode syntax

Let's click on the "Text" button. A window opens where we can specify attributes for the text field. Specify and click "Insert tag".

The tag will later be converted into a text field with html code:

Shortcodes can be conveniently created using the shortcode constructor.

But the constructor does not allow you to change the shortcode (you can only create a shortcode there). There are two ways to change the shortcode:

1. delete and create a new one using the constructor.
2. study the syntax and fix the field shortcode manually.

With the designer, you will figure it out yourself.

And here we will analyze the syntax of the shortcode.

For example, consider a text field tag with additional options:

Text (required) Field type: text, select, password, number, etc. (in this case, a text field). Determines which form element our tag will be converted to, which means what kind of data it will accept. * An asterisk makes the field mandatory (the form will not be submitted and a notification will be displayed that the field must be completed). client-name (required) The name of the field is used as the name attribute in the input, and is also used when forming the template of the sent letter. id:my-id The id attribute on input with the value my-id. Used for decoration. class:my-class class attribute in input with value my-class. Used for decoration. placeholder "(!LANG:Enter a name" Использовать текст "Введите имя" как placeholder. !}

Follow the order of the tag attributes: first comes the field type, then its name, and only then additional options.

Field types

• Text fields: text , email , tel , url , textarea
• Numeric fields: number , range
• Date fields: date
• Checkboxes, radios, lists: checkbox , radio , select
• File upload field: file
• CAPTCHA: captchac and captchar
• Polls: quiz
• "Accept" field: acceptance
• Submit button: submit
• Custom field type

Letter Template

In the second tab, you can fine-tune the template (layout) and properties of the sent letter. In the fields of this tab, you can use special form field tags - this makes it possible to send the data specified in the form in the letter.

The tags consist of field names from the form template. For example, we have created a text field named: . Now you can use the tag in your email template. In the letter, instead of this tag, the value of the field entered by the user (full name) will be substituted.

Email headers:

To whom - email box where the email will be sent. You can specify as many boxes as you like separated by commas.

From - name and e-mail, from whom the letter came. Usually the server mail is indicated here (for example [email protected]).

You can specify any mail, but if the mail domain differs from the site domain, the form will not will be tested and will “swear” at this parameter, although letters will still be sent.

Subject - The title of the email. It will be clear from which form the data was sent. For example, the subject of the letter is "Error on the site", "Callback order" and so on. Choose a title to make it easier to work with received letters.

• Additional headers - Reply-To: is written here by default. The Reply-To header tells us that this email can be answered by clicking the "Reply" button in mail program, and the form tag is the name of the field from the template. The user-specified email will be inserted instead of this tag. You get something like Reply-To: [email protected].

Letter body

This is the next important part of this tab. Here is the text of the letter. In the text, we use all the same form tags (field names from the form template).

Let's analyze the default letter:

From:<>Subject: Message: -- Sent from the site Exploring the Contact Form 7 Plugin (http://test-wp.ru)

We had 4 fields that the user filled out. After sending the email, the tags will turn into values ​​and we will receive an email like this:

From: Dmitry Subject: Question about Contact Form 7 Message: Hello! I have a question about the Contact Form 7 plugin. How do I set it up? -- Sent from the site Exploring Contact Form 7 Plugin (http://test-wp.ru)

Optional fields in the body of the email

If the user does not fill in the field, but it is used in the body of the letter, then the body of the letter will be incomplete. For example, the body says Man from the city, but the user did not fill in the field, which means that in the letter we will receive Man from the city ... Such a line in the letter is superfluous. To remove this line from the email, check the box "Exclude output of lines with empty message tags". Note that this will only work when the field text and shortcode are on the same line.

Option "Use HTML-format of the letter". Allows you to use HTML tags in the body of the email. In this case, you can use a limited list HTML tags because not all mail clients or services can handle complex HTML markup correctly. You can use: tables, bulleted lists, boldness, paragraphs and so on. Search the web for more details.

Contact Form 7 allows you to send a letter to two addresses, and the settings for each letter are different. This can be useful when you need to send an email to the site administrator with complete information and a duplicate for the manager, which contains only order data.

Form submission notifications

In this tab, you can edit the messages that the form displays in a particular situation: when sending a letter successfully or unsuccessfully, or when errors occur.

Letter template tags do not work in these fields.

Additional settings

This tab is intended for advanced users and allows using JS code to expand the possibilities of the form. For example, hang events for analytics.

I will talk about the use of this functionality in a separate article.

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

How the Contact Form 7 Plugin Works

This form is located on any page of your site (you just need to copy the line and paste it into Right place). The site visitor fills in 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 site.

For some time now, the Contact Form 7 plugin has stopped working - it didn’t send letters, but simply twisted the download. I found a solution - I installed another free WPForms Lite plugin. It is very easy to set up, does not require the installation of additional plugins to configure the sending of messages, but I noticed that it does not work with every email. On one I did not receive letters, but on the other they are sent.

Setting up the Contact Form 7 plugin. Instructions

1) We register the sender box on Yandex mail (any, 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 transshipment point for letters.

2) Setting up the contact form of the Contact Form 7 plugin. Click "Change" and beyond "Form Template". Here's an example of what it should look like with the required fields: username, email, message, and a submit button:

Your name (required)

Your email (required)

Message

3) tab "Letter" is responsible for the appearance of the letters you receive.

To whom- mailbox address of the recipient

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

Topic –

Letter body –

So, you receive a letter where all the completed fields of the feedback form will be indicated. 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 link the two mail addresses of the sender and recipient and perform system functions for sending letters.

Setting up the WP-Mail-SMTP plugin. Instruction

From Email- mailbox address of the sender

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

mailer- the 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 mail sender

Password- password on your mail sender

Setup completed. Save your changes.

How to place a Contact Form 7 on a page

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

It must 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 for WordPress. There you will find a lot of interesting things.

Good afternoon dear blog readers. We continue the topic of feedback forms on WordPress. And since we are talking about them, I propose today to talk about the WP Contact Form 7 plugin. Next, I will tell you the step-by-step plugin setup, and also briefly describe the add-ons for this plugin.

Page navigation:

Description of WordPress Contact Form 7

2) Activate the Contact Form 7 plugin in the WordPress admin.

3) Go to the newly created tab as shown in the picture:

4) Click the "Add New" tab and specify the default form language, or select the desired one

5) Specify the name of the contact form and click save.

6) Now we have a shortcode that can already be copied and pasted into a post or sidebar in order to display the form - contact-form-7 id="1252" title="(!LANG:Form number 1" (надо взять в квадратные скобки как на рисунке).!}

7) This is how our form looks like:

Of course, it’s not very beautiful, but no one bothers to create your own styles or make your own form and insert inserts there.

How to display Contact Form 7 in an arbitrary place in the template

In paragraph 6 step by step setup I showed you how you can take the CF7 code shortcode and further described that this code can be displayed in a widget or in a post, page. In addition, I want to say that you can display Contact form 7 anywhere in the template. To do this, insert the following simple code:

That's all, if you did everything right, you will get the output of Contact Form 7 in an arbitrary place in the WordPress template.

Customizing Contact Form 7 Input Fields

Thanks to him, you will additionally have such boxes as:

Configuring reply-to response for contact form 7

AT new version plugin CF7 4.4 and higher, the developer recommends entering in the from field (here it is on the skin below)

the correct address that matches your domain. Seen from the skin, and this recommendation creates a problem:

How to make a response to the user from the mailer?

If you just click answer, then we will answer our own mail, in fact, we will answer ourselves. This is very inconvenient, because we need to manually copy the user's address into the mailer and only then respond.

The solution to this problem is, and as always, simple. you need in the field Additional headers add code:

Reply To:

Of course, your-email-sh needs to be replaced with your mail shortcode. See skin below:

Now, when you receive a letter from WordPress feedback, you can click in the mailer to answer and your answer will be sent to the correct e-mail.

If after these steps you encounter a problem, you should read the post by clicking on the link. There are described the main problems and causes of troubles in the Contact Form 7 plugin.

That's all. I hope you understand how the plugin and its layouts are configured.

This material will describe in detail the configuration of Contact Form 7 - a plugin for such a popular platform for creating and promoting sites on the Global Web as WordPress. This software tool allows you to create and configure contact forms.

A little about WordPress

One of the most popular and most common development and content tools information resources is WordPress. Initially this software was focused on creating simple blogs. But then specialized specialists supplemented its functionality, which made it possible to create other Internet resources using this content management system.

Strengths and weaknesses of this platform for creating and promoting websites

The advantages of this software platform such:

Simplicity and openness of source codes.

An impressive amount of background information.

The ability to develop any thematic resource on the Internet in the shortest possible time.

High performance without additional software add-ons (plug-ins).

But the disadvantages in this case are the following:

Sites created on the basis of "Wordpress" will not cope with a heavy load.

There is a decrease in the performance of the Internet resource when installing additional mini-programs or, as they are also called, plug-ins.

and why they need sites based on the WordPress platform

The basic functionality of a content management system like WordPress is very modest. It is just enough to develop the most basic blogs and websites. In order to somehow improve the situation with the functionality of the software platform and add flexibility to it, developers have to install special mini-programs, which are called plug-ins in professional jargon. One of these is Contact Form 7. The plug-in setup allows creating a feedback form with an extended level of functionality on a specific page of the content management system.

Specialization "Contact forms 7"

As noted earlier, creating feedback between the visitor and the administrator of an Internet resource based on the Wordpress platform is the main task of Contact Form 7. Setting up mail, editing a template, sending various files is far from a complete list of the possibilities that this mini program. At the same time, the load on the hardware resources of the site will be relatively small and its presence will not lead to a significant decrease in the performance of the site or blog.

Plugin installation order

There are three ways to install plugins on the WordPress platform:

By downloading a ZIP archive from the global web and "uploading" it to the corresponding directory of the Internet resource.

Using various kinds of FTP clients.

The most secure of the three options for installing plugins is the last one. In this case programming code is downloaded from the official site and it definitely does not contain various kinds of malicious, dangerous fragments. The very order of installing the plugin in this case is as follows:

Go to the WordPress admin panel.

Then you need to move to the "Plugins" section.

In the window that opens, select "Add New".

In the search bar, enter the name of the plugin - Contact Form 7 - and then move the mouse pointer over the "Search" button and make a single click. After that, the search operation will begin. software.

Upon completion, a list of found plugins will be displayed. In this list we find the one that we need, and click on the button labeled "Install", which is located opposite it.

After that, the content management system will automatically download and install this plugin.

The next step is to activate the installed software. To do this, go to the "Plugins" tab and find Contact Form7 in the list. Next to it is the inscription: "Activate", and click on it once with the mouse.

We update the administrative panel of the content management system and find Contact Form7 among its items. This is the condition for the successful installation of this popular and functional plugin.



Algorithm for setting "Contact forms 7"

The Contact Form 7 setup consists of the following items:

Creation new form or editing the old one that was created when the plugin was installed. Experience shows that in most cases it is better to use the option to create a new form.

At the next stage, select the language of the form and set its name.

Then, if necessary, reconfigure its template.

We save the changes made.

We create a new page with the code obtained earlier.

At the final stage, you need to go to the site and check the correct operation of the created interface element of the Internet resource.

Creating a new form

Immediately upon activation, this plugin creates a default form for asking questions from website or blog visitors. Of course, it can be edited and configured properly. But it will be much easier to delete this one and create a new one with full set all necessary functionality. To do this, you must perform the following steps:

Go to the menu of this plugin and select the "Forms" item.

In the window that opens after that, you must check the box next to the "Contact form1" item.

Then, above it, in the "Actions" drop-down list, select the "Delete" item.

In response, a question will appear to confirm the actions performed. You must confirm the deletion of the form and click on the "Yes" button.

On the next, select the menu item: "Create New" in the administrative panel "Wordpress" "Contact Form7".

In the window that opens, in the drop-down list, select the interface language of the future form - "Russian". Then click the "Create" button.

After that, the initial code of the new feedback form for WordPress by default will be generated. After that, you will need to perform operations such as setting up Contact Form 7.

Set the name of the form

After performing all the above actions, a window for entering the name of the new form in Contact Form 7 Style will appear. Setting up this precisely begins with this simple operation on the one hand. But the name of the form is better given based on search engine optimization. Therefore, in this case, for example, “Feedback form” or “Ask a question to the site administrator” will be the most optimal. As soon as we have decided on the name of this interface element, we type it in the corresponding field of the query window.



Editing the template "Contact forms 7"

In the same window with the name of the created form, there are 4 tabs. The first one is the template. By default, only 5 elements are formed here:

The place where the name of the visitor of the Internet resource is typed.

The field for dialing the e-mail address of the visitor who asked the question.

Another field allows you to type the subject of the question.

The last default form element is a button labeled Submit.

If necessary, the text in this field can be edited and other interface elements can be added. To do this, it is enough to select the code of any text element(for example, the part of the code where the subject of the message is indicated and copy it using context menu in the same field to another location. On the right there are parameters (it will be discussed in detail in the next paragraph), in which we select the element of interest to us. After that, next to the drop-down list will appear required code. Next, copy this code and paste it instead of the message subject code. The name of the element is chosen at your discretion.

Adjusting field lengths and more

In the same place, you can change the input in Contact Form 7. Adjusting the width of any text field is done as follows:

For example, you need to increase the number of characters in the name of an Internet resource visitor to 55. There are 40 by default.

To do this, add the numbers 60/55 in the code at the end. The result will be a code. After saving the changes, the length of this field will be equal to 60, and maximum amount characters that can be typed in it - 55.

Similarly, you can resize the message text box. Only in this case it is necessary to change the code of this element as follows . In this case, 40 is the number of letters in one line, and 30 is the total number of terms in this interface element in Contact Form 7. The appearance of the form itself is configured precisely by selecting the parameter values ​​of each individual element. Therefore, it is recommended to indicate the specific values ​​of each parameter given in this section in the code of each element.



Other form tabs

As noted, the first tab is called Form Template. The next one in this window is "Letter". It sets the parameters of the place to which mail will be sent from this Internet resource. On the "Notification" tab, the text of the message is formed, which will be displayed in case of successful sending of the letter. There is also the opportunity to prepare a message in case you cannot contact the site administrator using the tools. Last tab in Contact Form 7 - "Additional settings". It contains those parameters that are used very, very rarely in practice. For example, you can use it to set up tracking of the text entered by the user using Yandex - metrics.

Fields that can be added with this plugin to this form

Customizing Contact Form 7 for Wordpress allows you to add the following interface elements to the feedback form:

• A test field is a universal interface element in which you can enter any set of characters.

  E-Mail - place to enter the name of the electronic mailbox.

  URL - a field for typing the address of a web page.

  Phone number - allows you to enter a phone number in international format.

  The "Number (spinbox)" element allows you to create an input field of any integer value (for example, the visitor's age).

  The "Number (Slider)" element adds a slider to the form, with which you can select a numeric value from a specified range.

  The "Date" item creates a special input field in which you can specify the required date. When this interface element is activated, a calendar appears below, in which you can immediately select the required date.

  In turn, the drop-down menu item "Text field" is intended for typing the text part of an email.

  The next item - "Drop-down menu" - allows you to select the required parameter from a fixed list.

  But "CheckBoxes" is designed to select one or more values ​​from a given list.

  The interface element "Radio Buttons" is almost identical to the previous one. The only difference is that in this case you can choose only one correct option, while "CheckBoxes" can have multiple valid values.

  The "Acceptance" item allows you to add just one checkbox to the created form. As a rule, it is used to familiarize yourself with any conditions and without their acceptance it will not be possible to send an email in the future.

  The "Menu" item allows you to create a special section in the interface that will protect your mailbox from spam. In this case, before sending it will be necessary to give the correct answer to the question posed.

  The second security option is CAPTCHA. When it is selected, a separate section will be added to the form, in which a picture with symbols and an additional field for entering them will be displayed.

  The next item is "Sending a file". Allows you to add to the text of the letter a file with various explanations and comments for the resource administrator.

  The last item - "Submit Button" - allows you to add the corresponding interface element.

Save the changes

After the necessary values ​​are set, and the form is properly configured, you need to save all this. To do this, in the plugin editing window, we rise to its upper part. There should be a Save button here. Move the pointer of the manipulator to it and make a single click on it. In response, the form code will appear, which we select using the same mouse pointer and copy. Next, move to the administrative panel of the content management system in the "Pages" item. Then we create a new page with the necessary name (for example, "feedback", "Contacts" or "Ask a question to the resource administrator"). Then we translate the dialing cursor into the input field for its code. In this case, it is necessary to switch the code dialing mode to "Text" in the options panel. After that, paste the previously obtained form code. Next, on the right side of the interface, we find the "Publish" button and hover over it with the mouse. At the next stage, we make a single click of the left mouse button on this element of the interface of the content management system.



Checking the result

After performing the previously indicated manipulations, the interface of the Internet resource should add new page, on which the elements specified in Contact Form 7 will be displayed. The interface setup, in principle, is over. It is only necessary to check the correct software settings. For this you need to go to home page website, blog or portal. Then in the list of pages we find the one on which the feedback form was placed. We go to it, enter the correct parameters in all fields at once and send a test letter to our mail. In response, you should receive an informational message about the successful completion of this operation. Then with empty fields trying to send another email. After that, a message should appear stating that you need to set all the checked form parameters. If in both cases the results indicated earlier were obtained, then the created feedback form functions correctly.

Plugin pros and cons. Alternatives

An excellent solution for a novice developer to create a feedback form is the Contact Form 7 mini-program. Setting up sending mail, creating interface elements and other important interface elements in this case is mostly automated and requires minimal user knowledge. Therefore, for a simple Internet resource entry level and with a novice administrator - this is a great solution. But after all, any plugin is an additional load on the resources of the web page, which reduces performance. As a result, more advanced users recommend moving away from such easy way create a feedback form. You can also create it yourself with using HTML, CSS and JS, albeit with less functionality. This will reduce the need for computing resources of the site and significantly increase the level of performance.



Results

This article describes the Contact Form 7 setup step by step. This plugin really has a high level of functionality, you can use it to create any feedback form. On the other hand, the use of an additional plugin as part of the content management system increases the load on Hardware site. Therefore, novice site administrators based on this content management system are recommended to use this plugin for such purposes. Well, more advanced users can do without Contact Form 7. In this case, you definitely won't need to configure the plugin.