How to set up feedback on wordpress. The best WordPress plugins for creating contact forms. Why you need a WordPress contact form

By default, WP does not have such functionality, but plugins and specially designed configurations for the engine come to the rescue.

Contact Form WordPress Plugin Contact Form 7

I will analyze the free Contact Form 7, which is translated into Russian. In the standard version, it includes:

• Mail address
• Optional telephone
• Message text
• Captcha

Add reCaptcha captcha

Install the plugin as standard through the WordPress admin panel, as it looks in the panel.

CF7 in search

Set up reCaptcha from Google, go to the integration section, and click on the google.com/recaptcha link. Must have a Google account.

Link to recaptcha

It will transfer it to the service, set up the items as in the screenshot, enter the domain correctly, click send below.

Linking captcha to the site

Copy the data for the captcha, both keys.

Access keys

Go back to the WordPress plugin and click the Integration Settings button.

Integration

We enter the keys copied on the reCaptcha service, write them down to the appropriate sections and save.

Saving settings

Form creation

Go to settings and create a new form. Erasing the standard markup.

Erasing standard labels

Enter the name of the new project and click the Text button, because the name will be entered in text without rules.

Field text

A pop-up window will appear, customize it according to your needs.

Tag generator

1. The type determines whether the visitor must fill in the field, I put yes
2. The name is not changed, it is a unique identifier
3. Default value, entered the phrase that I see inside
4. Use instead of a placeholder, that is, until nothing is entered, the inscription will be displayed
5. I do not recommend using the Akismet field
6. To add styles, enter class or id, made pole-imya
7. Insert the tag into the general field

Similarly, we press the e-mail button, we see the same interface.

Mail generator

You can enter mail through text, but then you will lose the validation function. The plugin will check if there is an @ sign.

Add a section of the text area and phone (optional), the principle is the same.

Phone and text area buttons

Previously, we set up the integration of captcha in WordPress, in the basic version of CF7 there is no button for inserting captcha, for this we have created a shortcode and place it under the rest of the elements.

It remains to add a submit button, select from the list and configure its output.

Submit button

The result is the following code.

Final code CF7

Configuring email sending

Changing email parameters

1. Field tags created earlier
2. Mail address where letters will be sent
3. From whom and the subject, fill in as desired
4. Additional headers, completely clear
5. We write in the body of the letter what we want to receive by mail after sending. For example, I typed Mail and inserted the corresponding tag opposite this word.
6. At the bottom, click Save

Preservation

Test the rest of the notification and settings tabs, you can change the text displayed in different situations.

Inserting a form on the site

A shortcode has formed at the top of the page, copy it.

Shortcode

Go to any record and paste.

Putting the shortecode on the page

After clicking the View button, it will be transferred to the site with the display of the work done.

Final option

A good trait for WordPress theme developers is to make a product that supports CF7 in advance, which makes life easier and you don't need to write CSS styles in the site code. My theme supports the plugin and displays a pretty nice picture. If you are not satisfied, then a class was prescribed for each field, use it to change the design. I checked the work of the topic, letters come quickly. For other methods, read the link.

I will attach a video instruction to all the material, I show not only the creation process, but also how make a beautiful form design, because the whole process cannot be described in text.

Make margins horizontally in line

I looked on the Internet and was horrified at how many manipulations they are doing. I will not show you how to fully customize the design, this is the topic of not a single large manual. We go into editing the form and wrap the fields that we want to line up horizontally in a div with a class, look at the code.

I want to line up the Name, Mail and Phone field. Don't forget to save your changes.

Wrapping in a div

Go to the WordPress admin panel Appearance\u003e Theme Editor\u003e style.css and add styles for WordPress feedback at the end of the file.

Flex-form (display: flex;) @media only screen and (max-width: 655px) (. Flex-form (display: block;))

Writing styles

From the styles, you can see that the div with the flex-form class has been assigned the display: flex property, it sets the arrangement of elements in a row, without additional parameters, the space is divided equally.

The second entry shows when the screen resolution reaches 655px, the form changes its property from flex to block and the form starts to display as before, with fields below each other. This 655 limit is individually variable and styled to make the feedback look normal on mobile.

Pop-up feedback form

CF7 positively accepts applications. The plugin for the popup will be Popup Maker. I will not describe, the link to the material is located in this paragraph. In addition to that article.

How to add to elementor

To insert a form into elementor, use the shortcode section. The form was created according to the instructions above, which means there is a shortcode from CF7. Go to page creation in the element and look for the shortcode in the element search.

Finding an element in elementor

Elementor processed the request

Using the theme setting

Most WordPress templates do not have automated feedback tools. But our templates from WPShop have a built-in function that is displayed using a shortcode. Let's take a look at Root as an example. I turn to page creation, then look at the snapshot.

Add-on in ROOT

• We write the text [contactform] (without spaces inside the brackets)
• Click on the preview

A page will open with an already adapted, marked up and typeset form, according to which the visitor can receive feedback from the administrator.

ROOT built-in function work

Feedback via widgets

Putting feedback into widgets is easy. The text widget will help, transfer it to the active zone and write the shortcode into it.

Using the text widget

We set the title, enter the configuration in the text area, go to the blog and see how the feedback is processed.

Form in widget

Feedback without plugin

If you prefer methods without a plugin, that is, an excellent instruction, I found it on the Internet, if the owner of the code shows up, I will gladly put a link.

Open the function.php file for editing, write the code at the very bottom, how to use it.

/ * feedback code * / add_shortcode ("art_feedback", "art_feedback"); function art_feedback () (ob_start ();?\u003e

We created a form in WordPress HTML markup and link it to a shortcode. I think this approach will be convenient, because the block can be displayed anywhere.

We go into creating a page in the WordPress panel, write, click on view.

In Gutenberg, insert a line into any text block.

Putting the output into the record

Going to the site, we will see an unformed form, the fields work, but the letter will not be sent, because the PHP handler is not attached.

Bad appearance

Now let's customize the look, paste this code into the style.css file of the active theme.

#add_feedback (margin: 20px 0 0; position: relative;) #art_name, #art_email, #art_subject, #art_comments (padding: 10px 5px; display: inline-block; width: 49.548%; border-radius: 3px; border: 1px solid #ddd; font-size: 0.9em;) #art_subject (width: 100%; margin: 5px 0;) #art_comments (width: 100%;) #add_feedback .button (border: none; padding: 10px 20px; color: #fff; font-size: 1em; display: inherit; margin: 10px 0 0 0; border-radius: 3px; background-color: # 2f94ce;) #add_feedback input: focus, #add_feedback input: focus, #add_feedback input: focus, #add_feedback textarea: focus (color: # 444; box-shadow: 0 0 3px rgba (68, 68, 68, 0.2);) .error-text (background: # F59E9E; padding: 15px 0px; text -align: center; color: #fff;) .error-name, .error-email, .error-comments (display: inline-block; font-size: 11px; position: absolute; top: -30px; color: white ; border: 1px solid red; padding: 5px 10px; line-height: 1.1; background: red; box-shadow: 0 0 3 px 0px rgba (0, 0, 0, 0.3); ) .error-name: after, .error-email: after, .error-comments: after (content: ""; position: absolute; left: 20px; bottom: -10px; border: 5px solid transparent; border-top: 5px solid red;) .error-comments (top: 16%; left: 0;) .error-name (left: 0;) .error-email (right: 4%;) .message-success (background: rgba ( 0, 128, 0, 0.5); color: #fff; padding: 20px; text-align: center; margin: 20px auto; border-radius: 3px;) #add_feedback .error (border: 1px solid red;) #add_feedback .required: after (content: "*"; position: absolute; left: 20px; bottom: -10px;) #art_name: focus :: - moz-placeholder, #art_name: focus: -moz-placeholder, #art_name: focus : -ms-input-placeholder, #art_email: focus :: - webkit-input-placeholder, #art_email: focus :: - moz-placeholder, #art_email: focus: -moz-placeholder, #art_email: focus: -ms- input-placeholder, #art_comments: focus :: - webkit-input-placeholder, #art_comments: focus :: - moz-placeholder, #art_comments: focus: -moz-placeholder, #art_comments: focus: -ms-inpu t-placeholder, #art_subject: focus :: - webkit-input-placeholder, #art_subject: focus :: - moz-placeholder, #art_subject: focus: -moz-placeholder, #art_subject: focus: -ms-input-placeholder ( color: transparent)

We update style.css on the server and see how the feedback on the page has changed.

Layout block

Create a feedback.js file and put the code in it. Upload to the hosting in the js folder of the active theme.

JQuery (document) .ready (function ($) (var add_form \u003d $ ("# add_feedback"); // Reset field values \u200b\u200b$ ("# add_feedback input, #add_feedback textarea"). On ("blur", function () ($ ("# add_feedback input, #add_feedback textarea"). removeClass ("error"); $ (". error-name, .error-email, .error-comments, .message-success"). remove (); $ ("# submit-feedback"). val ("Send message");)); // Submit field values \u200b\u200bvar options \u003d (url: feedback_object.url, data: (action: "feedback_action", nonce: feedback_object.nonce ), type: "POST", dataType: "json", beforeSubmit: function (xhr) (// When submitting, change the label on the button $ ("# submit-feedback"). val ("Submitting ...");) , success: function (request, xhr, status, error) (if (request.success \u003d\u003d\u003d true) (// If all fields are filled, send data and change the label on the button add_form.after ("

") .slideDown (); $ (" # submit-feedback "). val (" Send a message ");) else (// If the fields are empty, display messages and change the label on the button $ .each (request.data, function (key, val) ($ (". art_" + key) .addClass ("error"); $ (". art_" + key) .before (" "+ val +"");)); $ (" # submit-feedback "). val (" Something went wrong ... ");) // On successful submission, reset the field values \u200b\u200b$ (" # add_feedback "). reset ( );), error: function (request, status, error) ($ ("# submit-feedback"). val ("Something went wrong ...");)); // Submit add_form.ajaxForm ( options);));

Js folder on server

Now we load the second part of the code into function.php.

/ * second part * / add_action ("wp_enqueue_scripts", "art_feedback_scripts"); function art_feedback_scripts () (// Processing fields wp_enqueue_script ("jquery-form"); // Include the script file wp_enqueue_script ("feedback", get_stylesheet_directory_uri (). "/js/feedback.js", array ("jquery"), 1.0 , true); // Set the data of the ajax object wp_localize_script ("feedback", "feedback_object", array ("url" \u003d\u003e admin_url ("admin-ajax.php"), "nonce" \u003d\u003e wp_create_nonce ("feedback-nonce" ),));) add_action ("wp_ajax_feedback_action", "ajax_action_callback"); add_action ("wp_ajax_nopriv_feedback_action", "ajax_action_callback"); function ajax_action_callback () (// Array of errors $ err_message \u003d array (); // Check the nonce. If the check fails, then block sending if (! wp_verify_nonce ($ _ POST ["nonce"], "feedback-nonce")) ( wp_die ("Data sent from the wrong address");) // Check for spam. If the hidden field is filled in or the receipt is removed, then block the sending if (false \u003d\u003d\u003d $ _POST ["art_anticheck"] ||! empty ($ _ POST [ "art_submitted"])) (wp_die ("This is spam");) // Check the name fields, if empty, then write a message to the error array if (empty ($ _ POST ["art_name"]) ||! isset ($ _ POST ["art_name"])) ($ err_message ["name"] \u003d "Please enter your name.";) else ($ art_name \u003d sanitize_text_field ($ _ POST ["art_name"]);) // Check mail fields if empty, then write a message to the error array if (empty ($ _ POST ["art_email"]) ||! isset ($ _ POST ["art_email"])) ($ err_message ["email"] \u003d "Please enter your email address mail. ";) elseif (! preg_match (" / ^ [[: alnum:]] * @ + \\. (2,4) $ / i ", $ _POST [" ar t_email "])) ($ err_message [" email "] \u003d" The email address is invalid. "; ) else ($ art_email \u003d sanitize_email ($ _ POST ["art_email"]);) // Check the email subject fields, if empty, then write the default message if (empty ($ _ POST ["art_subject"]) ||! isset ( $ _POST ["art_subject"])) ($ art_subject \u003d "Message from the site";) else ($ art_subject \u003d sanitize_text_field ($ _ POST ["art_subject"]);) // Check the message fields, if empty, then write a message to array of errors if (empty ($ _ POST ["art_comments"]) ||! isset ($ _ POST ["art_comments"])) ($ err_message ["comments"] \u003d "Please enter your message.";) else ($ art_comments \u003d sanitize_textarea_field ($ _ POST ["art_comments"]);) // Check the error array, if not empty, then send the message. Otherwise, send a letter if ($ err_message) (wp_send_json_error ($ err_message);) else (// Specify the recipient $ email_to \u003d ""; // If the recipient is not specified, then we take data from the site settings if (! $ email_to) ($ email_to \u003d get_option ("admin_email");) $ body \u003d "Name: $ art_name \\ nEmail: $ art_email \\ n \\ nMessage: $ art_comments"; $ headers \u003d "From:". $ art_name. "<" . $email_to . ">"." \\ r \\ n "." Reply-To: ". $ email_to; // Send an email wp_mail ($ email_to, $ art_subject, $ body, $ headers); // Send a message about successful sending $ message_success \u003d" Message sent. I will contact you shortly. "; Wp_send_json_success ($ message_success);) // Kill the ajax process again just in case wp_die ();)

We check the form for performance. The problem may arise if you have not correctly loaded the js file into the WordPress theme, and the path to it is not registered correctly, namely in the second code in the section // Include the script file.

We fill in and send the letter

Such a letter comes to the mail with feedback.

What comes after sending

Great, we did it, we were able to create a feedback form in WordPress using three different methods, if you have any questions, then ask, we'll figure it out. Good luck!

I like it I like it

When creating a site of any type, it is important to ensure direct contact with visitors. In this case, it will be possible to establish a connection with users, which will make them return to your resource more than once. Today I want to tell you how to create a feedback form on WordPress. We will consider options with and without a plugin, and you will choose the one that suits you best.

In this article, you will learn:

Feedback plugin for WordPress

The easiest way to use feedback on the site is to install a plugin. Personally, I chose this option for myself, although I do not welcome plugins. First you need to download the Contact Form 7 plugin from the official WordPress site. It is quite easy to use.

After downloading, unpack the archive and copy the files to the server in the / wp-content / plugins / folder. After activating the plugin, go to its settings in the admin panel. The "Contact" item will appear on the right in the menu. This means that the WordPress feedback plugin is installed and running. To install the standard CF7 form on the site, just copy the “contact form” code that you will see in the Contact menu. If you want to customize the form to your liking, click on the "Add new" link.

As a result, several fields will appear:

1. Form name;
2. Feedback form;
3. Mail settings;
4. Additional feedback form;
5. Service messages;
6. Additional settings.

Items 2 and 4 allow you to use the constructor for different types of forms. For example, this is how you can create a WordPress popup feedback form. After filling in all the fields, you can get a ready-made code for the contact page. Setting up additional form (No. 4) helps to receive not only letters to the post office, but also, for example, SMS messages to the specified phone number.

When you receive a standard or more complex form code, paste it into the feedback page you created in your site admin area.

Alternatively, you can still try the Cforms plugin, it is more complex, but it also has more functions.

How to create a WordPress contact form without a plugin

Let me remind you that each new plugin complicates the work of the WordPress engine, which can lead to its slowdown. So I'll show you how to create a beautiful WordPress contact form without a plugin. I do not urge you to choose this particular option, it is just an alternative, and you decide. The given form will be quite simple, this is the main backbone into which, if you wish, you can make your own adjustments.

First you need to create a separate * .php file (for example, contact.php or mail.php). After creating it, it is better to place it in the folder with the template theme, then you can edit it from the admin panel.

Here is the code to paste into the php file you created:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20

$ name \\ n E-mail: $ email \\ n Subject: $ subject \\ n Text: $ body "; $ send \u003d mail ($ address, $ subject, $ message, "Content-type: text / plain; charset \u003d UTF-8 \\ r \\ n From: $ email"); if ($ send \u003d\u003d "true") (echo "Thank you, your message was sent successfully!"; ) else (echo "Error, message not sent!"; )) else (echo "You have not filled in all the fields, you must go back!"; } ?>

For your blog, you will need to change the url in the first line and in the address line, and optionally the name of the Name, Subject, Text fields. Also, at your discretion, you can change the text messages that the user will see after sending, or if the message has not been sent.

After you have created the required file, you need to insert it into the contact page.

To do this, you can use the following code:

1 2 3 4

<h2\u003eFeedback form</ h2\u003e <form name \u003d "Form1" action \u003d "/wp-content/themes/lime/contact.php" method \u003d "post"\u003e FULL NAME.<input class \u003d "input" name \u003d "email" type \u003d "text" style \u003d "width: 31%" /\u003e Email<input class \u003d "input" name \u003d "subject" type \u003d "text" style \u003d "width: 31%" /\u003e SubjectMessage text:<textarea name \u003d "body" cols \u003d "1" rows \u003d "5" style \u003d "width: 98%" /\u003e </ form\u003e

Feedback form

FULL NAME. Email SubjectMessage text:

The most important thing here is to specify the correct path to the php file that you created (in our case, this is contact.php). In this code, you can change the names of the fields and their width as you wish and taste.

If you want to give a form without a plugin a special look, you can use different styles using the style.css file.

Beautiful wordpress feedback form

The articles in which I tell you how to style blog elements using css code are very popular on my blog:

Now I will show you how to design a beautiful feedback form for WordPress.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24

.wpcf7-form input [type \u003d "submit"] (background: # 63c6ae; / * background color of the Submit button * / border: 0; width: 120px; / * width of the Submit button * / color: #fff; / * text color of the Send button * / height: 30px; / * the height of the Submit button * / ) .wpcf7-form textarea (display: block; margin-top: 5px; / * top padding of the message text field * / background: #fff; border: 1px solid # 63c6ae; / * field border Message text * / width: 400px; color: # 222; padding: 10px 10px; ) .wpcf7-form input [type \u003d "email"], .wpcf7-form input [type \u003d "text"] (background: #fff; border: 1px solid # 63c6ae; / * border of text boxes * / width: 400px; color: # 222; height: 30px; / * height of text boxes * / padding: 0 10px; / * inner borders of text boxes * / }

Wpcf7-form input (background: # 63c6ae; / * Submit button background color * / border: 0; width: 120px; / * Submit button width * / color: #fff; / * Submit button text color * / height: 30px; / * the height of the Submit button * /) .wpcf7-form textarea (display: block; margin-top: 5px; / * top padding of the message text field * / background: #fff; border: 1px solid # 63c6ae; / * margin border Message text * / width: 400px; color: # 222; padding: 10px 10px;) .wpcf7-form input, .wpcf7-form input (background: #fff; border: 1px solid # 63c6ae; / * border of text boxes * / width: 400px; color: # 222; height: 30px; / * height of text boxes * / padding: 0 10px; / * inner borders of text boxes * /)

As a result, I got like this:

Consider the option using the Contact Form 7 plugin. After the plugin is installed and configured, you need to open the style.css file of your active theme and insert the following code at the end:

As you can see, creating feedback on WordPress with or without a plugin is no big deal.

If you need more advanced functionality and don't want to go into the trick of the code, use a contact form plugin for WordPress. Choose the option that suits you best for contacting your users.

WordPress initially does not have a feedback form, but it is a necessary tool for communicating with visitors. In this article I will show you how to create a beautiful WordPress contact form using plugins, as well as without them with sending by mail.

But let's touch on a little theory, if someone is not interested, then you can immediately proceed to installing the form on WordPress:

Theory: Why do I need a feedback form?

I think many people know that search engines value the contact page very much. And if you have it, it means that you have nothing to hide from your readers and you are open to communication.

But why would I need to set up some form when I can just write my email address? - This question arises among beginners who have not yet managed to gain popularity.

Cons of email addresses in contacts:

1. A lot of spam comes from bots;
2. Visitors rarely write;
3. There is no benefit from the page.

I know that not everyone faced such problems, but believe me in 1 year, your mail will be included in all mailing lists and you will be bombarded with unnecessary messages.

But in fact, people will rarely write, because they do not want to go to the post office and type in your address, but if they do, then there is a high chance that the letter will end up in the "Spam" category and you won't even know about it.

Therefore, setting up a feedback form ideally fights these issues. After all, no one will recognize your real mail, as well as all letters will reach quickly and will not end up in spam.

WordPress contact form using a plugin

Installing a plugin is the easiest option to create a beautiful WordPress contact form. However, here I ran into such a problem that most plugins are heavy, not pretty, and also have few settings.

Therefore, I spent several days looking for the best plugins that will be convenient for both the site administrator and the visitors.

1.

Huge It Forms - one of the simplest and most convenient plugins. Which allows you not only to receive messages, but also to create beautiful forms, does not pass spam and can do bulk mailing.

The plugin is perfectly displayed in any part of the site and can even be displayed in the sidebar. And the main plus is that it does not load your site like popular extensions.

2. - pop-up feedback form

Usernoise Is a free and unique plugin of its kind that features a pop-up feedback form. Moreover, it is easy to edit, and the output can be configured anywhere, you can even draw a conclusion by the button.

3. Contact Form 7 is the worst of the best

Contact Form 7 Is the most popular plugin used by millions of people. But few people know that it consumes a lot of resources and makes WordPress very slow.

The fact is that it creates unnecessary queries to the database, and also connects scripts to the scope blocking the download with the main file. Thus, the page load increases by 2 seconds and it is not necessary that there is a feedback form on the page.

By the way, speeding up the site is one of the reasons to stop using unnecessary plugins. And just add functionality and styles to your site.

Online feedback form generator

Few have heard, but there are sites that are able to create beautiful forms of communication and are easily customizable, after which a special code is obtained to be inserted into the site.

Thus, we use the resources of another site that will process our letters. This option is suitable for people on free hosting, where there is no mail processing.

Form Designer - a free generator of various forms in Russian. One of the few that fits perfectly into the site. True, it has limitations, for example, the ability to send only 100 letters per month.

But already for $ 5 you can receive 1000 letters, an antispam system is built in, disk space is added, reports are generated and you can easily connect a mailing service.

If you want to get rid of any restrictions, then you can connect a form from Google. It has many functions and is easy to create, though difficult to insert into the site.

I didn't find any video tutorials, but there is a good installation guide!

Php contact form without plugins

What do you need to create your own contact form? Just follow 4 simple steps:

1. Create php file;
2. On the contact page (in html format) write a few lines;
3. Connect Google library (if the form doesn't work);
4. If it's not pretty, add styles.

I didn't want to describe everything on the site in detail, so I shot a video and made an archive with the necessary files on the Yandex disk. Archive files can be downloaded -.

Video instruction for creating a feedback form without plugins

Someone's form doesn't work? Then you need to insert into the header.php file: (connecting google library). I hope that the instructions are very clear and simple for everyone. Also in the archive you will find a file with styles. Just copy all the lines and paste into the style.css file at the end.

Attention: free hosting does not support the function of sending letters. And also the use of the test mode.

Instead of conclusions

In this article, I've covered all the ways to create a beautiful WordPress contact form. As you can see, there are many approaches and each is good in its own way.

Personally, I chose to create my own form, and only for the reason that you can customize it for yourself. If you dig well, then the styles of the first plugin can be reconfigured in your own way, but this is a topic for another article.

Having a contact form on the website helps users easily communicate with webmasters without using their inbox. Indeed, the modern contact form page works as a bridge between the website owner and the website users, providing a better user experience.

The contact page simply used an email address, address, phone number, etc., which users had to copy or save to contact the owner of the website. This traditional way seems really inconvenient for users, but an opportunity for spammers who can harm your valuable website data. We can't risk that!

Best WordPress Form Builder Plugins 2018

The plugins that made this list are widely used, receive regular updates, and have received great feedback from the WordPress community. They are also not listed in any particular order, as they all offer many benefits that may or may not suit your specific needs. Let's start!

Price: Free

Contact Form 7 is popular, simple and flexible. You have the ability to create multiple forms and they can also be customized with simple markup. You can find options for configuring mail settings and changing the default message in the custom panels pane.

Also, while some have complained about the updates causing bugs, the general consensus is that this is a simple plugin for creating all the simple forms.

Key Features:

• Easy to customize.
• Customizable default messages.
• Easily defined mail settings.

WPForms

Price: Free

WPForms allows you to create clean, modern forms in an intuitive drag-and-drop interface. There are also a number of pre-built templates to choose from, including multi-page and custom registration forms.

The input management system allows you to view all of your outputs in one place within a streamlined workflow. Plus, you can create high-performance forms using WPForms smart conditional logic, and include file uploads.

Add-ons like MailChimp, AWeber and PayPal integrations are available on higher WPForms plans.

Key Features:

• Instant notifications.
• Optimized input control system.
• Clever conditional logic.

Ninja Forms

Price: Free

Ninja Forms is a great plugin for beginners and developers alike. For beginners, the drag and drop interface makes it quick and easy to create any shape. For developers, Ninja Forms has a number of filters and custom field templates for high-level customization.

The main form does not include conditional logic, which is a highly desirable feature for many users. Nevertheless, this is available as an add-on.

Key Features:

• Intuitive user interface.
• Almost unlimited number of forms, fields and views.
• Options for forcing the required fields and correcting data formatting.

Form Maker

Price: Free

Form Maker provides an easy-to-use drag and drop interface that lets you create simple contact forms. The basic free plugin offers features like multi-page forms, conditional logic, and customizable emails.

In addition, there are many premium features (such as PayPal integration) and many paid add-ons that allow you to tailor this plugin to suit your needs, such as MailChimp and Dropbox integrations and conditional mailing.

Key Features:

• 41 customizable themes.
• Form submission control.
• Multipage forms.

Fast Secure Contact Form

For a plugin with a free contact form, Fast Secure Contact Form is pretty reliable. You can easily create and edit forms in the drag-and-drop interface, and add or remove as many fields as you like.

This plugin is a great option if you want to use your form to schedule appointments. Includes options for adding an online timetable, booking orders, and billing through the vCita platform.

Key Features:

• Easily customizable form editing.
• Ability to send confirmation emails.
• You can redirect visitors to almost any URL.

Price: Free

With multiple layout options and 18 field types, the Visual Form Builder allows you to quickly and easily create professional-looking forms. This plugin can be configured to send form requests to multiple emails, as well as the ability to send individual postage receipts to each user.

Moreover, you can place multiple forms on the same page or page and duplicate forms with one click. Visual Form Builder automatically saves form entries in the WordPress database and allows you to manage data directly from your WordPress dashboard.

Key Features:

• Drag and drop interface.
• The ability to export records to a CSV file.
• Several options for placing fields.

Form Builder

Form Builder lets you create simple forms based on one of 10 default templates. If you're looking for a fast and user-friendly form, the main plugin will do the job. Nevertheless, this is stylistically not enough, so if aesthetics are important to you, a paid Form Builder upgrade might be a better fit.

With the premium version, you get 37 themes based on different color schemes, the ability to add a content section, and the ability to export the submitted data to CSV or XML format.

Key Features:

• Email settings for administrators and users.
• Integration with Google Maps.
• Variety of redirection options.

Formidable

Price: Free

Formidables are great for creating a form quickly and easily. The customization options are somewhat limited in the free version, but it offers enough for all kinds of simple uses. You can create forms using built-in templates, or start from scratch with a drag-and-drop builder and save your own templates for future use.

While you're only limited to seven field types in the free version, the premium version includes 15 additional field types. It also offers several flexible admin options to view, edit, and delete records and generate graphs and statistics based on your collected data.

There are also a number of paid add-ons such as MailChimp and AWeber integrations.

Key Features:

• Drag and drop interface.
• Almost unlimited email notifications.
• Import and export forms using XML format.

Pirate Forms

Price: Free

Pirate Forms is another free option for creating simple contact forms, although it does have an edge over many of its competitors when it comes to the look and feel of your forms. However, there are no customization options, but this is part of the prerequisite for the plugin.

The form is for a little customization, so you can simply remove the completed form to your site using a shortcode or widget. Additionally, Pirate Forms stores your collected contact information in a database for easy access from your dashboard.

Key Features:

• Email notifications.
• Ability to customize fields, labels and messages.
• Contacts are stored in a database.

Ultimate Form Builder

Price: Free

Ultimate Form Builder is wordPress plugin Form Premium to create unlimited flexible contact forms. This plugin has 10 beautifully designed form templates. It is an easy-to-use plugin that allows you to create simple and complex contact forms without touching a single code.

Ultimate Form Builder supports both one-step and multi-step support according to your needs. With this plugin, you can easily create different types of contact forms such as Contact Us, Choice, Call to Action, Poll, Quote, Request, etc. It has support for conditional logic that includes the show hide logic display, email logic, and redirect logic. A free version of the plugin is available in the WordPress Plugin Directory.

Everest Forms

Price: Free

Everest Forms is a lightweight and extensible formatting and formatting tool that creates any type of form quickly and easily. This plugin offers multi-column support, Google re-captcha for anti-spam, support for multiple email recipients, array of form fields, successful email submissions, and more. Not only that, with Everest Forms you can choose from several form design templates and view form entries directly from your dashboard. The plugin also has a lot more features with great utility, but the feature that stands out above all else is its lightweight drag and drop interface that makes the process of creating shapes a piece of cake.

weForms

Price: Free

If you want to save a lot of time while creating your form, then weForms Is one of the best solutions for you. It is a WordPress form maker plugin with which a fully functional form can be easily made in minutes. You also don't need to worry about performance degradation when creating a form with this plugin. it very fast so how everything works on one page. To make your work even faster, she also has form templates, which you can use to create the form right away.

You can have many components and elements that will be quite useful for your form with this WordPress form editor plugin. He has drag and drop interface.This way, you can just add the form fields you need on your site without any problem. You can also create different types of forms with this form builder. These can include contact forms, tell a friend, user registrations, loan applications and volunteers, and more.

Key Features:

• 18+, to increase functionality.
• Shortcodes, place the shape anywhere.
• Responsive design , can be used on any portable device.
• Drag and drop , use it with live preview.
• Easy interface , powerful and simple user interface.

Easy Contact Form

The GrandWP Forms plugin has a wide range of flexibility. You can make the forms exactly how you want them to appear on the Front-End without hiring a developer. It is 100% responsive and high performance plugin. Use the Form builder plugin to create various forms to submit to users or simply provide detailed additional information about a product / service or the website in general.

The GrandWP form builder is extremely easy to use. The Forms plugin has an intuitive and simple interface that allows you to create amazing forms in a few clicks. It has a modern and flexible design that will make your website look professional. The Forms plugin lets you customize all the levels of each individual field that you create to look exactly the way you want it. After creating the GrandWP Forms project, you can modify / customize it whenever you want and still want to. The blogging forms plugin also has a drag and drop option that lets you change the order of fields with a single click.

Hello, friends! In this tutorial we will talk about creating a feedback form, or as the people say "Contact form".

Today we will analyze with you how you can create in a few minutes easy, beautiful and functional a feedback form using my favorite plugin Contact Form 7 .

I will try to explain in as much detail as possible all the stages of installing the contact form, and in this regard, the lesson will be quite long 🙂

Creating a contact form in WordPress

At the very beginning, I want to note that the Contact Form 7 plugin is Russified, and you will not have any problems with it. As proof of my words, the fact that this plugin was downloaded can be MORE THAN 25 MILLION TIMES !!!

And so, let's get started. To create a feedback form you need to do the following:

1. Install and activate the Contact Form 7 plugin. How to install plugins you can.

2. After activation, go to Contact Form 7 -\u003e Forms.

3. In the window that opens copy the line with an embed code.

4. Paste the copied code on the page where we want to add a feedback form. After you have inserted the code, do not forget to save the changes by clicking the button "Refresh".

Here is such result adding a contact form to get:

Done! You installed working form feedback to your site!

As you can see, in total in a few minutes you can easily install a feedback form on the site. You can put an end to this, but for those who are not satisfied with the standard form and who want to create completely new contact form with other fields and possibilities - i recommend read the lesson to the end.

In order to create a new form, you first need to decide what fields in it we need. In this tutorial, as an example, we will create a simple call back order form.

To do this, we need the form to have the following fields for filling:

• Name (Required field)
• Surname
• Phone (Required field)
• Field with the choice of a convenient time for a call

After we have decided on the fields, we proceed to creating the form:

1. Go to Contact Form 7 -\u003e Add New.

2. In the window that opens, click the button "Add new"... If necessary, select a language from the drop-down list below. By the default language will be Russian.

3. After clicking the button, you will be taken to the page on which the form editor.

At the very top of the page is the field in which we write name new form... AT Form template we see standard form fields that are created by default.

Below we see the settings of the letter that comes to your mail after someone has sent an order from the form on the site. In these settings, for example, you can change or add an e-mail that will receive requests from the form on your site. AT letter template the information that will be displayed inside the letter is configured.

4. After we have superficially familiarized ourselves with the structure of the editor, we proceed to create our new form. For this we need DELETE from the form template all lines except the button "Send",and in the email template delete all completely . After deleting, you should get something like this:

5. Now we need to create new fields: Name (required), Surname, Phone(required), Convenient call time.

We start by creating a field to enter a name, which should be required. To do this, press the button "Generate Tag"and choose Text field.

In the settings of the new field, put a check mark, which is necessary only if the field should be required. Next, copy the generated code into the form template on the right, and copy the following code into the email template. See the image below for comments and arrows for better understanding.

6. After we have added a field for entering a name, click "Generate tag" -\u003e Text field and by analogy create a field Surname and Phoneby copying and pasting the code into the form template and the letter template. The only difference is that for the field Surnameyou do not need to check the box for mandatory filling .

After adding the First Name, Last Name and Phone fields, the form editor will look like this:

7. Now we create the field Convenient call time. To do this, click "Generate Tag" and choose "Drop-down menu".

In field Choice we write in a line according to one option, in our case this time is from 8-00 to 18-00 at intervals of two hours. After filling out, copy the corresponding lines of code into the form template and the letter template.

As a result, you should get something like this:

9. Copy the form code and paste it on the page where you need the form... If you did everything correctly, you should get the following form for ordering a call back:

After the user makes a callback order from your site, a letter will be sent to your mail with the following content:

DONE!Here we have created with you callback order form from scratch.

I agree that for some, everything may seem very difficult and scary, but this feeling will only last until the first creation of a contact form from scratch 😉

In most cases, a standard feedback form, which is created by the plugin by default immediately after its installation and activation, is sufficient.

I hope this tutorial was useful to you and you figured out the Contact Form 7 plugin.

If you have any questions during the creation of the form or something will not work - write and ask questions in the comments.

And remember that feedback form on the site - a required attribute on the contact page.

Hello, friends! In this lesson we will talk about creating a feedback form, or as the people say "contact form". Today we will analyze with you how you can create an easy, beautiful and functional feedback form in a few minutes using my favorite Contact Form 7 plugin. I will try to explain in as much detail as possible all the stages of installing a contact form, and in this regard, the lesson will be quite long :) Creating a contact form in WordPress At the very beginning, I want to note that the Contact Form 7 plugin is Russified, and you will not have any problems with it. As proof of my words, the fact that this plugin ...

Overview

Vote for the lesson

100

Assessment

Outcome: Dear Readers! Do not be lazy to vote and leave a comment. This way I can understand the usefulness of the lessons and articles and improve their quality in the future. Thanks in advance!