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" (надо взять в !} square brackets as in the picture).
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
In the new version of the 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 WordPress feedback letter, 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.
(Last update: 05/19/2019)
Greetings, dear reader! Today I will show you how to create a contact form with the author of a website / blog in WordPress using the popular Contact Form 7 plugin (over 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 form WordPress Contact Form 7. That's it, that's it. 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 on a new page, post or on sidebar(via 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 file upload field to a form template, you need to: Mark the place to insert the tag with the mouse (best after the message) and click the corresponding "file" tab. With this feature, you can allow users to upload their files via 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. And the allowed file size 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 the necessary tags to 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 new page is automatically added to the menu, then we set the "Order" 1, 2 or 3 (whichever is in the menu, the Contact page will be displayed). Click the "Publish" button. Everything. 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 title. 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 one of the 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 settings 7. In the settings of the main plugin will appear new tab- 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)?
- Your hosting issues It is important to note that sending and receiving emails is highly dependent on the server hosting your WordPress site;
- Make sure you are using the correct return email address;
- Your email may be considered spam;
- Plugins or theme conflict with Contact Form 7;
- 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!
(function(w, d, n, s, t) ( w[n] = w[n] || ; w[n].push(function() ( Ya.Context.AdvManager.render(( blockId: "RA -292864-4", renderTo: "yandex_rtb_R-A-292864-4", async: true )); )); t = d.getElementsByTagName("script"); s = d.createElement("script"); s .type = "text/javascript"; s.src = "//an.yandex.ru/system/context.js"; s.async = true; t.parentNode.insertBefore(s, t); ))(this , this.document, "yandexContextAsyncCallbacks");A contact form is an essential attribute of most sites. That is why there are so many plugins in the WordPress directory for contact forms. 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 form contacts. 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:
- Form Template
- Letter
- Additional settings
Let's consider each tab separately.
Form Template
In this tab, you can customize the fields and appearance of the form. The work area is HTML editor WP. 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:
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:
- delete and create a new one using the constructor.
- 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 the tag text field with additional options:
Text (mandatory) Field type: text, select, password, number, etc. (in this case 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 (mandatory) 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 The class attribute on input with the 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:
- 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].
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.
Letter body
It's next an important part 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
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 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.
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 new section 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
- 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.
Used to pass to address form mailbox sender
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 of
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 box has big sizes 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 - input field style (text field)
- 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;
- color- text color.
- font-family- input fields font.
- font-size- font size
- line-height- line height
- border- frame around input field
- 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 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 thing 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; )
Detailed instructions for installing, configuring and using the feedback form plugin for a WordPress site. Plugin Contact Form 7 on this moment is the best in its category.
The fact that there is no obvious alternative even among paid plugins can be judged by how often the Contact Form 7 plugin is used. At the time of writing this post, this plugin has been downloaded more than 28,800,000 times from the official WordPress site alone, and the average rating is 4.5 out of 5! This is truly a sign of great success. In addition, if you look at the top selling premium WP themes, in almost every one of them you will find the Contact Form 7 plugin as recommended or installed by default.
The Contact Form 7 plugin is “live”, updated by the author with each new version WordPress. Bugs and errors are fixed promptly. There are no obvious conflicts with most commonly used plugins.
Plugin Contact Form 7 is completely free incl. for commercial use. After installing the plugin in the settings panel, you will find the author's request for a "donation".
Installing the Contact Form 7 Plugin
You can download the Contact Form 7 plugin from the official WordPress site (link above), or directly through the tab “Plugins” > “Add New” > Line “Search plugins” > drive in “Contact Form 7”. Don't forget to activate the plugin before you start: “Plugins” > “Installed” > find the Contact Form 7 plugin > click “Activate”. A new item “Contact Form 7” will appear in the side administrative panel of your site.
Configuring the Contact Form 7 Plugin
What is nice, by default, the Contact Form 7 plugin supports multilingualism. If your version of WordPress is in Russian, then the plugin will also be completely in Russian, while you can create a feedback form in any language. The language of the form is specified during the creation of each form. There is no separate section for settings, all settings are individual for each individual form.
An example of adding a feedback form
1. Select in the administrative panel “Contact Form 7” > “Forms” > button on the “Add New” page.
2. You will be prompted to select a language for the form. The default is "Russian". Click the "Add New" button
3. A window has opened in front of you where you can create your own form with your settings.
The possibilities are extensive, but I want to point out a few features right away. The window that opened contains several tabs: “Form template”, “Letter”, “Notifications when submitting the form”, “Additional settings”. Last tab you don't need it, it's more of a customization for advanced users and programmers. Let's take a closer look at the rest.
“Form Submission Notifications”- these are the messages that a visitor to your site will see when submitting the form. Contain options for messages both successful sending, and with errors and failures. You can change these system messages as you wish.
“Form Template”- in this section, you will generate Tags, which are responsible for the presence of the necessary fields in the form.
"Letter"- this is the appearance and content of the letter that you will receive after the visitor fills out the form.
ATTENTION: Now we will analyze what tags are and what fields they create. All these tags are entered in the “Form template” tab, but if you do not enter the “reply tags” manually (!) In the “Letter” tab, then the completed forms will not be complete.
4. Tag options in the Form Template tab.
-text: adds a text field (short).
— email: field for e-mail.
- url: a field for specifying the address of the site or any link.
— tel: contact phone field
-number: a field in which you can enter only a numeric value
date: date format field
- text area: adds a text field (long).
- drop-down menu: drop-down list. The field has additional settings. The list that will drop out is indicated in the “Options” field. And one element of the list in one line (not separated by commas!). If “Allow multiple selections” is checked, the user will be able to select more than one option from your list. If “Insert a blank item as the first option” is checked, then an empty field will be added at the top by default, which can also be selected by the user.
- checkboxes: Checkbox (checkmarks). The field has several settings. The list of checkboxes is indicated in the “Options” field. And one checkbox in one line (not separated by commas!). If “Put a label first, a checkbox last” is checked, the first checkbox will be checked by default. If the item “Make checkboxes exclusive” is checked, then the user will be able to mark only one of the checkboxes.
radio buttons: radio buttons. Radio buttons allow you to always select only one item from the list. Entering a list is similar to checkboxes in a column. From the settings, you can enable “Put a label first, a checkbox last”, then the first radio button from the list will be selected by default.
— acceptance: check box field, without checking the box in which the message will not be sent. In fact, this is an opportunity to take the user's unconditional consent to something, otherwise the letter will not be sent. For example, “You agree that the information you provide will be processed by our operators.”
— quiz: plugin innovation. This field allows you to create a question and an answer to it. Ideal to use as spam protection. Look at the format of the question and answer in the tag generation form.
Any field can be made mandatory (usually such fields are marked *) for filling, for this you need to check the box Field type > Required field. Attention! Do not forget to indicate in the text to users that the field must be filled in mandatory!
- CAPTCHA: captcha is installed only as an additional plugin. But in principle, with the presence of the quiz tag, the need for a drop is much less.
-file: field creates a tag that allows the user to attach a file to the message. In the tag settings, you can specify “File size limit (bytes)”, the maximum size of the attached file, allowed file types (extensions separated by commas). Attention, if you do not specify the maximum size of the attached file, then by default it is determined by the capabilities of your server. You can find out the exact information on the restrictions from the company providing you with hosting. Usually the maximum size is limited to 10 MB.
submint: the tag adds a “Submit” button (the name can be changed).
This is a screen with all the tags I generated, and below is a screen of the form on the site. Please note that the “Form Template” supports HTML tags, so I make explanations for users using using HTML tags.
5. Tab "Letter".
Now let's go to the form for generating a letter that will be sent to you and add the tags that we used in the “form template”. Pay attention to the screen. Fields not included in the body of the letter are placed at the top of the tab in black, and those that are present in the body of the letter are gray.
We bring them into the body of the letter (“Message Body” field): just copy the tags highlighted in black and paste them into the form of the body of the letter. Please note that the numbers indicated in the tags match the unique numbers of the fields that you added in the form template. Thus, you can identify which field belongs to what and sign them directly in the body of the letter, so as not to get confused later.
We save the changes.
6. Installing the form on the site.
From the form creation page, copy the shore code (usually it is highlighted in blue or brown) and paste it into any page or post.
Pros and cons in a nutshell
pros
+ a large number of field types
+ multilingual support
+ ease of use
+ free
+ reliable
+ does not conflict with other plugins
+ Contact Form 7 plugin is under development
Minuses:
- do not forget to add additional tags to the generated letter
– design of the form and letter requires minimal knowledge of HTML
Output: Definitely a great editor, if not the best! Pleased with flexibility, reliability and stability. If it was paid, they would still buy it, because. there is no one close to it in quality. I recommend the Contact Form 7 plugin.
