How to make contact form 7 on a photo. All fields (tags) of the form. The CAPTCHA text input field works on Internet Explorer, but not Firefox. Unable to enter code

(Last update: 19.05.2019)

Greetings, dear reader! Today I will show you how to create a form feedback with the author of a site / blog in WordPress, using the popular plugin Contact Form 7 (more than 5 million installations). Post included : correct setting Contact Form 7, spam protection how to change and configure appearance forms. He also pointed out the main reasons - why the contact form does not work and does not send letters .

contact form is an important means of keeping in touch with your readers and vice versa. Strike a personal letter, make an offer to the author (which he cannot refuse), ask a question, send some and much more. All this will take over and will not disclose valuable information to outsiders, our contact wordpress form Contact Form 7. Here, something like that. I wrote it like that, I liked it myself.

Oh, the letter has arrived! Contact form 7 well done

I will not bore you, dear reader, with any scribbling - let's get down to business. Installation and correct configuration of the module for WordPress - contact form 7.

WordPress Contact Form 7 Plugin

Plugin for WP Contact Form 7

Contact Form 7 can manage numerous contact forms where you can flexibly customize the content of the forms and mail with fairly simple markup. Forms have built-in support for Ajax submission, CAPTCHA, Akismet's spam filter, and more.

All manipulations are performed in the WordPress admin panel. In order to install the plugin, in the "Plugins" section, click "Add New". We enter in the "Search" window Contact Form 7. Naturally, it will be displayed first. Click the button "Install:

How to install the plugin

Contact form #1 by default

From the picture you can see that by default there is a standard version of the contact form and a ready-made shortcode for inserting into a new page, post or sidebar (via a text widget). Contact form 7 default appearance, installed on a separate page of the site:

Appearance: Standard WordPress Contact Form

If you just want to view, check or change, that is, add additional fields to it, then click the "Edit" item. Screen above.

The Edit Contact Form page opens. The plugin is in Russian and therefore it will be very easy for you to figure out what's what. Form Template tab. You can modify the form template to suit your needs.

For example, to add a tag field to a form template for uploading a file, you need to: Mark with the mouse the place to insert the tag (best after the message) and click the corresponding "file" tab. With this feature, you can allow users to upload their files through your form and then an email will be sent to you with file attachments:

Edit contact form. File tab

A window will open - Form Tag Generator: file:

To attach a file uploaded to the mail, you need to insert the tag ()

Contact Form 7 applies default limits for file type and file size. When you don't set your options, the default file extensions are: jpg, jpeg, png, gif, pdf, doc, docx, ppt, pptx, odt, avi, ogg, m4a, mov, mp3, mp4, mpg, wav, and wmv. A allowable size file is 1 MB (1048576 bytes). Click the "Insert Tag" button:

File tag inserted in form template

Where marked with the mouse cursor there and an additional tag will appear. If you pasted in the wrong place, then just copy it and place it in the right place. In the same way, add desired tags into your form. Be sure to click the blue "Save" button after adding additional tags. And this is how the button for attaching a file to a letter will look like, after the message field:

Select file button in contact form

If you do everything right, then you will not have problems with additional fields.

Also check the Mail, Form Submission Notifications, and Advanced Settings tabs. In my opinion there is no need to change anything. If only in Additional settings you can specify the parameter - only for subscribers - subscribers_only: true . For detailed information, there will be a link to the settings page for additional parameters.

And now, friends, we need to place the prepared contact form on a separate, new page or sidebar of a web resource. This is done easily.

We place the contact form on a separate page of the site / blog

After all the settings and saving the form, copy the shortcode on the Contact Forms or Edit Contact Form page. After that, create a new page - section Pages - Add New. Enter the name of the page, for example "Contacts". Switch the post editor to "Text" mode and paste the shortcode into the post field:

New page with contact form

If you have a new page automatically added to the menu, then set "Order" 1, 2 or 3 (whatever the account in the menu, the Contact page will be displayed). Click the "Publish" button. All. Ready. You can also add a page to the menu manually. Now you have a form for contacting the author of the blog / site.

In the same way, a contact form is added to the sidebar, footer or in the text of the article. Copy the shortcode and paste it into your posts or text widget content. Know that at any time you can edit the form or create a new one with different tags/fields.

Are you receiving spam through Contact Form 7?

There is protection. Spammers affect everything, your contact forms are no exception. Before you get spammed, protect your contact forms with Contact Form 7's powerful anti-spam features.

Contact Form 7 supports spam filtering with Akismet. Intelligent reCAPTCHA blocks annoying spam bots. Using the blacklist of comments, you can also block messages containing certain keywords or sent from specific IP addresses.

Click "Integration". Google reCAPTCHA protects you from spam and other automated abuse. With the reCAPTCHA Contact Form 7 integration module, you can block the form submission by spam bots.

Google reCAPTCHA v3 integration: spam protection

Plugin integration with other recaptcha services

Trample Setup Integration, and then follow the link to get ReCaptcha API keys:

reCAPTCHA is Google service

To start using reCAPTCHA, you first need to register your WordPress site. reCAPTCHA is a Google service, so to use it you need Google account. Sign in to Google using account and follow the link https://www.google.com/recaptcha/admin. You will see a simple registration form like this:

Register a WordPress site. Goodle reCAPTCHA

Specify a name. Select reCAPTCHA v3 (reCAPTCHA v3 does not require the CAPTCHA widget ("I'm not a robot" checkbox used in reCAPTCHA v2)) and enter the site's domain in the Domains field. After registering a site, you will receive a site key and a secret key. Enter them (screenshot above) and save the settings. That's all. Your contact form is now using the reCAPTCHA score to check if the message was sent from a human or a spam bot.

If you decide to install Contact Form 7, then I advise you to install the Contact Form 7 Style addon in addition to it. It will allow you to edit the appearance of your form. You can not only choose from ready-made templates but also create your own unique design. Want to change your look? Then the continuation is especially for you, connoisseurs of beauty.

Contact Form Appearance - Contact Form 7 Style

Styles for contact forms 7

The Contact Form 7 Style Plugin is an addon for Contact Form 7 that needs to be installed on your WordPress site. Supports custom styles that can be easily managed through the admin panel. There are also predefined templates that can be activated in the contact form 7 settings. A new tab will appear in the main plugin settings - Contact Form 7 Style Template. Appearance customization:

Ready-made templates for the form

Example, I changed the standard external to this pretty one:

Appearance of the contact form

Don't forget that you can set your own custom style options:

The plugin supports custom styles that can be managed through the admin panel

In conclusion:

Sending emails from Contact Form 7 works seamlessly for most people. But it turns out not for everyone. Even though the plugin successfully sends millions of emails every day, there are many issues that can delay or stop emails, both on the sending and receiving side of a typical email.

Why is Contact Form 7 not working (not sending emails)?

1. Your hosting issues It is important to note that sending and receiving emails is highly dependent on the server hosting your WordPress site;
2. Make sure you are using the correct return email address;
3. Your email may be considered spam;
4. Plugins or theme conflict with Contact Form 7;
5. Javascript conflicts.

If you can't send emails from this plugin, it's likely that you can't send emails from WordPress in general. In which case, gentlemen, you can get to frequently asked questions about the operation of the plugin on the page https://contactform7.com/faq/.

Or on the support forumhttps://wordpress.org/support/plugin/contact-form-7/. English language it doesn't matter, everything will be clear with the translation of your favorite browser.

That's all for me. Looks like he didn't forget anything. All the best. Good luck friends.

P.S. It turns out that editing old posts (information for readers should always be up to date) takes as much time as writing new instruction. Horror!

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 tools for developing and filling information resources is WordPress. Initially, this software product 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 are needed for 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. Plugin 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:

Creating a new form or editing an 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 you need to, 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 correct work 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.

E-mail address field mailbox 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, the required code will appear next to the drop-down list. 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 60, and the maximum number of characters that can be typed in it is 55.

Similarly, you can resize the message text field. 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 that in the code of each element, specify the specific values ​​​​of each parameter given in this section.



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 only one correct option can be selected, while "CheckBoxes" can have several correct 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 e-mail 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, a new page should be added to the interface of the Internet resource, 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 we try to send one more letter. 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.

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

You can download the Contact Form 7 plugin on the official WordPress website

You can download the Really Simple CAPTCHA plugin on the official WordPress website

We covered how to install and connect this plugin in the lesson "", now we will deal with additional features Plugin Contact Form 7. The form works correctly on monitors, tablets, phones and laptops. By the way, if your laptop is broken, then there is a service where HP laptops are repaired.

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

Hover your mouse over the name of the form and select "Edit"

A window for changing the form parameters will open.

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

Block No. 2 displays what will be displayed on the page in the form. First comes the text, the name of the field, after the code of this field. You can change the text to whatever you want.

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

• Text field
• Email
• Phone number
• Number (spinbox)
• Number (slider)
• Text field
• Drop-down menu
• Checkboxes
• radio buttons
• Acceptance
• Question
• CAPTCHA
• Sending a file
• submit button

Tips and form fields by default are arranged like this: at the top is a hint, at the bottom is an element. If you want to place the description and the element on one line, remove the tag after the text

. The entire block with descriptions and elements must be on one line and be inside the tag

Text field

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.

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 the maximum size in bytes, and the allowed formats for uploading, for example.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, we will make changes to the appearance of the form 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 - style of the input field (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

.buttons_form ( padding: 0px; height: 30px; width: 150px !important; border: none !important; cursor: pointer; color: #fff; -webkit-border-radius: .5em; -moz-border-radius: . 5em; border-radius: .5em; color: #faddde; border: solid 1px #980c10; background: #d81b21; background: -webkit-gradient(linear, left top, left bottom, from(#ed1c24), to(# aa1317)); background: -moz-linear-gradient(top, #ed1c24, #aa1317); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#ed1c24", endColorstr="#aa1317"); )

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 the style of the input fields, text areas */ padding:5px; /* Sets the padding from the 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; ) .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 ( /* 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 the mouse pointer over it */ 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 the text on the button will be displayed in capital letters) */ /* Rounding 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; /* Indent to the right of the edge of the element to its content */ /* Gradient background - The gradient background of the button */ 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:DXImageTransform.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; /* Indent*/ /* Corner rounding for different browsers - 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 */ /* Corner rounding for different browsers - 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; 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); ) .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", "Feedback form", 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 custom HTML structure. For example, our default form looks like this:

Your name (required) Your email (required) Subject Message

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

Your name (required)

Your email (required)

Subject

Message

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 "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)

Not required fields in the body of the letter

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. It is possible to use limited HTML list 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 a letter to the site administrator with full information and a duplicate to 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.

It is difficult to imagine a full-fledged commercial site that does not have a feedback form, and some sites even use the feedback form as an order form. True, there are also dinosaurs who write about the demand for new buildings in Kyiv, but communication with them is possible only via email:

Those. in order to write to them, you need to copy the email, open the software / site, create a letter, paste the email, write the text and send. And for our people, it is very hard and lazy. It’s easier to fill in the name field on the site, indicate your mail, write a letter and send a letter by pressing a button.

In some CMS there are already built-in forms, but in WordPress there is no such (

Do not be sad, because there is an excellent contact form plugin. In 10 minutes you will have a fully configured plugin on your site, so let's not waste time, but get down to business right away.

Installing the CF7 Plugin

First, download the plugin and drop it into the folder ▬ /wp-content/plugins/

Then go to the admin panel on the tab plugins And activate it!

Proper setup of contact form 7

After installation, the item should appear on the left side "Contact Form 7":

We click on it and proceed to create the first form or edit existing ones.

1. If you need to create a new form, click "add new"

2. If you have customized the first form for yourself, then using the short code you can insert it on any page, post or widget.

3. You can edit the form by clicking on it.

On new page will additional settings fields, error messages when sending emails, email template, etc. With a simple click, you can add any field to the form template.