Flector 5
This is a plugin for creating contact forms. It is extremely popular (second only to plugins and in downloads) among users, as it successfully combines ease of use and powerful options for customizing and designing contact forms. I will try to consider all the features of the plugin in as much detail as possible.
1 Unpack the archive.
2 Copy the folder contact-form-7 v / wp-content / plugins /.
3 We go to the blog admin panel on the " Plugins"and activate the plugin.
When activated, the plugin creates a separate menu in the blog admin area called "", and also creates a default contact form, which you can see in " Contact Form 7 \ Shapes":
If you use the suggested "embed code", then the form in the blog will be like this:
Of course, appearance this contact form will depend on the styles used in your template, but in general it will look like this.
To output this simplest form you only need a couple of minutes. And it is because of this ease of adding a contact form that many users love this plugin.
However, the plugin has a ton of possibilities for creating advanced contact forms of any complexity. But let's start simple, by creating your own form, which will be only slightly different from the default form built into the plugin. Click on the "Add new" link:
This will open start page adding a form:
The plugin automatically detects the locale used in the blog, so there is no need to select the language, just click on the "" button. This will bring up the form designer page. The first thing you should do here is rename the title of the form:
The heading doesn't matter, it's just so you don't get confused in your own shapes. Set the name of your form, click on the " Save", and got the" embed code "as a result:
Now you can paste the suggested code into any of your posts or pages (in "Text" mode, of course) to display a contact form in it. However, it will not differ in any way from the default form, so we will continue to work with the form designer. On the right side of the designer page there is a button " Generate tag", clicking on it will give:
Let's choose, for example, a phone number. A window like this will open:
Actually, here you can not change anything at all. Sizes, classes and so on are secondary options and in most cases you do not need to edit them. However, the "" option can be useful as a hint to visitors on how to fill in this field.
For example, we set the following values:
When displaying a contact form, the field will look like this:
When you click on this field, the text entered there will disappear, since it serves only as a hint for filling. But I missed the point of adding the selected tag to the contact form itself. This tag:
It is necessary to paste to the left side of the page of the form designer, where the code of the contact form is located:
You need to create the form code manually, that is, arrange the headings, paragraph tags and line breaks yourself, you should get something like:
Save the form code and end up with the following contact form:
Actually, in the same way, you can easily add to your contact form in a couple of minutes any tag used by the plugin. I will not force you to manually try each tag, I will immediately give their output:
1 Text field.
Plain text box, can be used for name, subject, etc.
2 E-mail.
Used for input only e-mail addresses.
3 URL.
4 Phone number.
Used only to enter a phone number (numbers and hyphens).
5 Number (spinbox).
Used only to enter a number (can be used to indicate age, number of ordered items, etc.).
6 Number (slider).
It works incorrectly. To display this numeric slider, HTML5 is used, and this, firstly, means that such a slider looks different in different browsers, and secondly, it still does not really work. On the plugin support forums, I saw solutions that fix the work of this tag, but they did not help me - I could not get this slider to display any numbers. I recommend not using this tag.
7 Date.
Used only for date entry.
8 Text field.
In Russian translation, this tag is also called "Text field", but in HTML terminology it is a textarea, which, in fact, means only an enlarged text field. Used to enter the text of the message.
9 Drop-down menu.
Used to select an item (or multiple items) from a drop-down menu. It can be used for anything - from asking about the color of the ordered product to choosing the gender of a person.
10 Checkboxes.
Used to select one or more items from the proposed options.
11 Radio buttons.
Used to select only one item from the proposed options.
12 Acceptance.
Used to agree to the terms.
13 Question.
Used to answer the specified questions (the question is chosen randomly from the specified options). Basically, this tag is used as protection against spam. And if spambots can easily answer a numerical question, then questions like "what planet do we live on?" they are unable to answer.
14 CAPTCHA.
It is used to display a full-fledged captcha. To use this tag, you need to install the Really Simple CAPTCHA plugin. Captcha is quite readable, and therefore easily penetrated by advanced spam bots like Hrumer.
15 File upload.
Used to send a file. You can specify the maximum size and formats of valid files.
16 Submit button.
Used to submit contact form data. This is a required tag.
With tags used directly in contact form, figured it out. Now let's look at how to get these same tags from the contact form to your email. Just below the code of the contact form in the constructor is the template of the letter sent to you, and it is in it that you must make the necessary changes. This is important because filling out this template incorrectly will prevent you from knowing exactly what the visitor wrote in your form. Let's take a phone number tag as an example. Let's say in your contact form it is inserted via code like this:
So, in the template of the sent letter, you need to insert the following code:
The meaning, I think, is clear. In the code of the contact form , and in the letter only the name of this field ... The plugin generates digital tag names like , but no one is stopping you from using your names. And about the rest of the tags in the email template - they are also formed according to the same principle - instead of used by etc.
The texts that the contact form gives out can also be corrected in the form designer in the "Messages" section:
Plugin Frequently Asked Questions:
1 View error " ", how to fix?
This means that either the specified form has been deleted, or the form title is incorrectly specified (title in the calling code is critical for calling the form).
2 In the letter I see tags like instead of text, how to fix it?
This means that the visitor has not filled out this field. In this case, the tag is not replaced, but displayed as it is.
3 Are there any restrictions on choosing a name for a tag?
There is. If the loop WordPress the name "name" is used, then you cannot use it as the name for the tag. In the best way avoiding problems is adding prefixes for names, like the word "your". There will definitely not be any problems with the tag name.
4 Can a visitor be informed by email that their form has been received?
Can. Use the "Destination 2" option in the form constructor:
This option can be used as an answering machine.
5 Can a completed form be sent to multiple addresses?
Can. Use the "" field in the "Destination" option:
Where [email protected] your additional email, to which a copy of the form filled out by the visitor will be sent (the "cc" command sends a blind copy).
6 Is it possible to display a form not on a post or page?
Yes. Paste the code for calling the form into a text widget.
7 Is it possible to render the form directly with code in the template files?
Yes. Use code like:
| "" ) ; ?> |
8 The form is not sent, an error in the red frame is displayed, how to fix it?
Contact your hoster, it is possible that PHP does not allow the mail () function call.
9 When submitting the form, I get an error in the orange frame, how can I fix it?
An orange frame indicates spam. Caching plugins can cause false positives of anti-spam protection. Configure your caching plugin to periodically clear cache files (24 hours is sufficient).
10 The email field looks different from other fields in the form, how can I fix it?
The plugin uses HTML5 code to enter an email address ( instead of ), and such code is often not formatted in old templates. You need to make changes to styles.css your template by adding the necessary code for the input selector there.
11 How to insert a file attached by a user into an email?
To do this, use the special field "Attached files:"
Really deserves your attention. Unlike many other popular plugins, it doesn't force you to buy any. Pro version - all its capabilities are available immediately. The popularity of the plugin (over 19 million downloads) is well deserved - for all its functionality, it is extremely easy to configure and available even for novice users of the engine WordPress.
But remember, this is a contact form plugin, not a simple form plugin. For all its capabilities, it will not allow you to create an advanced form based on any conditions. Its main purpose is to create contact forms and nothing more. For creating dynamic forms, post creation forms and the like, use plugins like Ninja Forms, they are more suitable for this.
If you still have any questions about configuring the plugin - ask in the comments, I will definitely try to help you.
Plugin author: Takayuki Miyoshi
The version in question: 3.9.1
from 07/31/2014
Current version: 5.1.4
from 04.08.2019
Compatible with WordPress version: 4.9
and higher
Active plugin installations: 5 000 000+
Download plugin version 5.1.4(total downloaded 121 112 956
once)
Did you like the post? Subscribe to software updates or
Adds a privacy policy page to the site. Also, under Contact Form 7, adds consent to the processing of personal data. The plugin is intended only for Russian-language sites. Upon entering, users are shown a notification about the use of cookies by the site. Suitable for 152FZ.
For questions about the plugin, write to this mail: [email protected] We do not give advice through an online consultant on our website.
Installation
- Install the plugin.
- Fill in the required company information.
Contributors and Developers
“Privacy policy for the site. Consent under Contact-Form 7 ”is an open source project. The following contributors have contributed to the development of the plugin:
Change log
1.28 Checking compatibility with WP 5.0. Added hiding the title from the policy text
1.27 Checking the presence of a cookie for the plate that pops up from the bottom when entering the site is translated to js
1.26 Added rel = nofollow plugin links
1.25 Added text of agreement under standard form commenting
1.24 Fixed bug in Java script
1.22 Fixed minor bugs in the admin panel and displaying the text of the button name under contact form 7 on the page
1.21 The container class, with which the policy text is framed, has been replaced with container-ppcf7
1.2 Added class to tag
p> under forms
1.1 Added option to show / hide privacy policy link in footer
1.01 Removed extra p tag in cookie message
1.0 First version in repository
FormGet is a simple WordPress plugin that works like drag and drop, which allows you to create various contact forms for your site. You just need to click on the fields you want to add to the form and your form feedback will be ready in a few seconds.
Forms that can be done with this plugin
Contact Form, Support Form, Booking Forms, Consulting Services, Contact Form, Mailing List, Questionnaires, Job Application Form, Registration Form Wizard, Order Form Builder, and more can all be done in this awesome plugin.
FormGet Contact Form is very effective tool which will allow you to create and embed a contact form on your site in several simple steps... Select form fields, customize options, and easily embed a contact form on your site by simply placing the code in the widget or using a custom shortcode. You do not need any programming knowledge to make the desired shape - this is an additional plus in choosing such extensions.
If several contact forms are installed on the site at once, then all data on them can be tracked in one place - on the dashboard. A more significant advantage of this plugin is that the forms it creates are adaptive, which allows you to correctly display the required data on any device without writing additional styles and classes.
List of fields supported by the plugin:
Name, address, contact phone number, message, payment (integration with PayPal), date (support for dd-mm-yy or dd / mm / yy or yy-mm-dd format), text string, multi-line text, multiple choice, attachments, Checkbox, Select (selection from the suggested list), radio buttons, file upload and Captcha.
The installation is normal - through the site admin panel on WordPress.
Setting up and creating a contact form
After installation and activation, you will see a special welcome form:
Click on the "Click to Create" button and go to the settings and create a feedback form. All settings are divided into 4 tabs:
- Contact Form Builder
- Embed code
- Extensions
Initially, the first tab opens, where you can create your first feedback form using the constructor.
Let's take a closer look:
Setting up and using the plugin is intuitive, so install and use it with pleasure!
Many sites set up feedback forms so that users can leave a message to the administrator without leaving the site. The most popular, high-quality and convenient to set up and use is the plugin Contact Form 7- with its help you can create any contact forms and more. Since the plugin has a large number of different forms and fields, it can be used for many tasks. For example, I used it to create an employer and job seeker profile on a recruiting site, to create a product order form on a site selling only one product line, I used this plugin to create a complex and voluminous calculation form for a construction site, for a variety of feedback forms and other forms. But this is not about this, but about how to make the contact form appear in a pop-up window, so that you can make a button to call a contact form on each page, and not just on the “Contacts” page?
It's not really difficult, but you will need another plugin with the FancyBox effect, I personally like these two plugins: Easy FancyBox or FancyBox for WordPress, there are various similar plugins, but either of these works great and also allows you to open images in a popup.
In general, there are two plugins installed: Contact Form 7 and Easy FancyBox, the contact form is created, it remains to add the code to the template.
The code is inserted into the site template in the .php files!
Popup contact form code set in template file code:
Request a call
If you insert the code for calling the form directly into the Visual Editor for editing text in TEXT mode, then the code will look like this:
Popup Contact Form Code set in visual editor records (in Text mode) in the site admin panel:
Request a call
In my example, I have a code for the "Request a call back" form - there are only two fields in the form - a name and a phone number, so that the site administrator would call the client back.
Let's consider this code.
This is the code of the button for calling a window with a form, for this button you can set any styles, and insert it anywhere in the template:
Request a call
This is the code for the popup itself, you can leave it under the window's call button, or you can hide it in the footer to keep the content code cleaner:
In this code, the form itself is called by a function like this:
Where it is written - display the shortcode for the Contact form, the shortcode is indicated in the contact form itself when it is created:
To call several forms on one page, you need to use different id to call the form.
An example of calling two feedback forms in a pop-up window:
Calling Form 1
Calling Form 2V this case to call multiple forms, pay attention to these parts of the code:
... and for the second form: ... etc.
Instead of displaying a shortcode for a feedback form, you can display any content, for example, blocks with text or pictures, or a Feedburner subscription form, for example, this is how a feedburner subscription form is displayed on one of the sites
You can use this code for your subscription form by changing only the feed address http://feedburner.google.com/fb/a/mailverify?uri=inoutdigest/feed to your own.
An important point! In order for the form to have a beautiful look, you need to set your own display styles for it. It is best to wrap your form in a div as early as the CF7 form creation step.
How to make a window with a feedback form (fancybox) close after a successful submission
Add this code if using a plugin with fancybox such as Easy Fancybox.
If the form is located just on the page, then everything is clear there - there are error messages and a message after the successful sending of the message right below the form.
Let's consider what interesting variants of events can be after submitting the CF7 form in a pop-up window, that is, in a pop-up window. How to make such a form, I described in the article How to make a feedback form in a pop-up window for WordPress.
Add the code to the Additional settings block of your form.
After successfully sending the message
We display an alert ‘Thank you for your application!’ - primitive and ugly.
On_sent_ok: "alert (" Thank you for your application! ");"
Redirect to the thank you page
On_sent_ok: "location =" http: //site.tu/thankyou/ ";"
Just closing the pop-up is not the best option, the user may not understand if everything went well
On_sent_ok: $ .fancybox.close ();
We display a pop-up window "Thank you for order" after successful message sending
We display the pop-up window “Thank you for ordering”, while the window itself is in the block with id = "popup_msg", the appearance and styles will need to be designed according to your design, so that everything is beautiful + make the button ‘Close’ the thank you window.
We add this code to the Additional settings block of your CF7 form:
On_sent_ok: "$ .fancybox ((href:" #popup_msg "));"
The window itself looks like this:
This pop-up window code can be placed anywhere, even in the footer, even under the form, the main advantage is that this window can be called by any other form and you do not need to make your own for each form.
And for the "Close window" button, add the following code to the script file:
$ (". popup-close-btn"). on ("click", function () ($ .fancybox.close ();));
How to download a pdf file after filling out a form using the Contact Form 7 plugin
Open the pdf immediately on the same page
On_sent_ok: "location =" http://site.ua/wp-content/uploads/2016/08/catalog.pdf ";"
Open pdf on a new page
On_sent_ok: "window.open (" http://site.ua/wp-content/uploads/2016/08/catalog.pdf "," _blank ");"
Method using on_sent_ok hook is no longer recommended. This feature will be canceled by the end of 2017.
Now, to redirect to another page after a successful form submission, you need to use the wpcf7mailsent event
For example, this option to open a modal window with id = "sentMessage":
Document.addEventListener ("wpcf7mailsent", function (event) ($ ("# sentMessage"). Modal ();), false);
If you have several forms, then for each form ID you can create your own events:
Document.addEventListener ("wpcf7mailsent", function (event) (var id = event.detail.contactFormId; if (id == 4 || id == 44 || id == 45) ($ .magnificPopup.open ((items : (src: "#popup_msg"), type: "inline"), 0);)), false);
id is the number of the form
$ .magnificPopup.open - This example uses Magnific Popup
We create an event for a specific form after successfully sending a message (we use the usual Easy Fancybox)
Many have difficulties with this moment, so I decided to include it in the article.
This script will display the id = "popup_msg" window after successful submission of one of the forms (id == 17754 or id == 17758 or id == 17757):
Document.addEventListener ("wpcf7mailsent", function (event) (var id = event.detail.contactFormId; if (id == 17754 || id == 17758 || id == 17757) ($ .fancybox ((href: " #popup_msg "));)), false);
Simple code parsing
id == 17754 || id == 17758 || id == 17757 - the window will be shown only for these forms (either / or).
Window with a message about successful submission (you can add it to the code, or better to the footer widget, for example, if you don't want to change the template, or 100 more options):
If you add the script not to the script file, but to the footer or js-code editor, then wrap it in this code:
JQuery (document) .ready (function ($) (// code ...));
