Feedback form without a wordpress plugin. Create a beautiful WordPress feedback form. Theory: Why do we need a feedback form

This is another article on how to make your WordPress site a little better, more informative and more attractive. And today you will learn how to organize feedback on the WordPress site without the help of plugins.

The feedback form is one of the most important elements on the site, the next step towards the visitor. And visitors are the most important thing for any site. Therefore, and I believe you will agree with me, the page with the feedback form is required for installation on each site!

And in this article I will dwell on how to add a feedback form to the WordPress site.

Before you start directly to create a form, you need to set goals, decide what the form will include, which fields are needed.

The form should be clear and understandable.

Usually, the following set of fields is sufficient:

• Email address
• Message subject
• Message text

Tasks are set, priorities are set, fields for the form are defined. You can proceed directly to the creation.

Create a feedback form for a site based on WordPress

1. Create a new contact.php file
2. Open it in your favorite text editor and copy the following code into it
\\ n \\ n ". __ (" Messege "," theme_textdomain ").": \\ n $ messege \\ n \\ n - \\ n ". __ (" This mail is sent via contact form on "," theme_textdomain ") . get_bloginfo ("name"). "\\ n". get_bloginfo ("url"); $ headers \u003d "From: $ name"; $ headers \u003d "Reply-To: $ email"; / * $ headers \u003d "To: $ emailTo "; * / wp_mail ($ emailTo, $ subject, $ body, $ headers); $ emailSent \u003d true; unset ($ _ POST [" contactName "], $ _POST [" email "], $ _POST [" subject " ], $ _POST ["messege"], $ _POST ["control"]);))?\u003e

"class \u003d" contact-form required "/\u003e

"class \u003d" contact-form required email "/\u003e

"class \u003d" contact-form required subject "/\u003e

<?php if (isset($_POST["messege"])) { if (function_exists("stripslashes")) { echo stripslashes($_POST["messege"]); } else { echo $_POST["messege"]; } } ?>

"class \u003d" rcontact-form required question "/\u003e
">
3. Save contact.php file and upload it to the folder with your theme files
4. Open the functions.php file for editing and add the following code to it
/ * Shortcode contact * / function contact_shortcode ($ content \u003d null) (return get_template_part ("contact");) add_shortcode ("contact", "contact_shortcode");
5. Save the document

Everything is ready to go.

How to add a feedback form to a WordPress page

1. Create a new page
2. Enter the page name - for example, "Feedback"
3. Insert the short code [contact] in the content field
4. Publish the page
5. Use

How to Russify WordPress feedback form

By default, all messages and signatures in the form will be displayed in English.
  But the ability to translate all messages and signatures has been added to the code. To do this, replace all occurrences of theme_textdomain with a value for your theme, and add the translation of the required lines to the localization file. Unfortunately, the description about working with localization files is beyond the scope of this article, but if you have any questions, ask.

And for beginners and the most curious, I’ll explain in a nutshell what the above code does.

The first part of the code checks the form for empty fields and for errors in the filled fields. If they are absent, the entered message is sent via e-mail to the site administrator.

If (isset ($ _ POST ["submitted"])) (if (trim ($ _ POST ["contactName"]) \u003d\u003d\u003d "") ($ nameError \u003d __ ("Please enter your name", "theme_textdomain"); $ hasError \u003d true;) else ($ name \u003d trim ($ _ POST ["contactName"]);) if (trim ($ _ POST ["email"]) \u003d\u003d\u003d "") ($ emailError \u003d __ ("Please enter your email address "," theme_textdomain "); $ hasError \u003d true;) else if (! preg_match (" / ^ [[: alnum:]] * @ + \\. (2,4) $ / i ", trim ($ _POST ["email"]))) ($ emailError \u003d __ ("You entered an invalid email address", "theme_textdomain"); $ hasError \u003d true;) else ($ email \u003d trim ($ _ POST ["email"]) ;) if (trim ($ _ POST ["messege"]) \u003d\u003d\u003d "") ($ commentError \u003d __ ("Please enter a message", "theme_textdomain"); $ hasError \u003d true;) else ($ messege \u003d stripslashes (trim ($ _ POST ["messege"]));) if (trim ($ _ POST ["control"])! \u003d "31") ($ controlError \u003d __ ("Enter the correct answer to the question", "theme_textdomain "); $ hasError \u003d true;) else ($ control \u003d trim ($ _ POST [" control "]);) if (! isset ($ hasError)) ($ emailTo \u003d get_option (" ad min_email "); if (trim ($ _ POST ["subject"])! \u003d "") ($ subject \u003d trim ($ _ POST ["subject"]);) else ($ subject \u003d "";) $ body \u003d __ ("From" , "theme_textdomain"). ": $ name<$email>\\ n \\ n ". __ (" Messege "," theme_textdomain ").": \\ n $ messege \\ n \\ n - \\ n ". __ (" This mail is sent via contact form on "," theme_textdomain ") . get_bloginfo ("name"). "\\ n". get_bloginfo ("url"); $ headers \u003d "From: $ name"; $ headers \u003d "Reply-To: $ email"; / * $ headers \u003d "To: $ emailTo "; * / wp_mail ($ emailTo, $ subject, $ body, $ headers); $ emailSent \u003d true; unset ($ _ POST [" contactName "], $ _POST [" email "], $ _POST [" subject " ], $ _POST ["messege"], $ _POST ["control"]);))

The next part of the code is responsible for checking the result of sending the message, and displaying the corresponding message

If (isset ($ emailSent) && $ emailSent \u003d\u003d true) (?\u003e

And accordingly, the rest of the source code is responsible for displaying the form itself

"class \u003d" contact-form required "/\u003e

"class \u003d" contact-form required email "/\u003e

"class \u003d" contact-form required subject "/\u003e

<?php if (isset($_POST["messege"])) { if (function_exists("stripslashes")) { echo stripslashes($_POST["messege"]); } else { echo $_POST["messege"]; } } ?>

"class \u003d" rcontact-form required question "/\u003e
">

Be careful! When changing the design theme on your site, the page with the feedback form will stop working. You will need to manually copy the contact.php file to the directory with the new theme and configure the translation and layout.

From the author:   I welcome you, dear readers. If you need a feedback form on the WordPress site, then this article is for you. After reading the article, you will learn how to make a feedback form on WordPress, while doing this easily, quickly and efficiently.

So, to solve the problem, we will use the feedback form plugin, which is called Contact Form 7. I don’t know why the author chose such a name, more precisely, the serial number in the title, perhaps this is his lucky number

Be that as it may, the Contact Form 7 plugin for WordPress is one of the most popular plugins among plugins for creating a WordPress feedback form, as well as among any others. Indeed, more than a million installations - the figure speaks for itself. The rating of the plugin is quite high - 4.5 stars, which eliminates all doubts about its use. In addition, the plugin is already Russified, so you do not have to translate the form fields and messages into Russian.

INSTALLING CONTACT FORM 7 PLUGIN FOR WORDPRESS

Well then, let's go through the standard installation process. By the way, if you have never installed plugins, then be sure to check out the article “WordPress. Installing plugins ”, in which you will find all possible ways to install plugins.

In the site admin, go to the Plugins section - Add a new one and enter the name of the plugin in the search bar - “contact form 7 ″. The first feedback form plugin found is the option we need.

Click the Install button and activate the plugin. After installation, a new Contact Form 7 section will appear in the menu with several items.

The first paragraph of the Form contains a list of current forms on your site and allows you to manage them: edit or delete. The finished form is nothing more than a shortcode (short code) that can be inserted into a post, page or even a widget. This shortcode will be deployed on the page in a full form code. The plugin already has a predefined example of a feedback form, let's copy its shortcode and paste it, for example, on the contact page. After that, we’ll go to the page and see on it a ready-made working WordPress feedback form.

We can try to fill out the form and send it, the letter will be delivered to the email address specified in the administrator profile settings. Please note that the Contact Form 7 plugin does not just offer the usual standard feedback form. No, the plugin allows you to flexibly configure it. In addition, the form is submitted without reloading the page, which is an additional plus. Well, and, of course, validation of form fields, the ability to specify required fields - this is another huge plus.

CONFIGURING A FEEDBACK FORM FOR WORDPRESS

Well, we used a ready-made form. What about her change? Is this possible and is it easy to do it? The answer is yes to both questions. For example, I want to remove the Subject field from the form, how can I do this? Let's move on to editing the form in the Forms plugin menu and see the following picture.

In order to remove the topic, just remove the 2 corresponding lines, circled by a frame in the screenshot. The second line is interesting here:. As you might have guessed, this is nothing more than a shortcode that unfolds in the form field. In this case, this is a text field with the value of the name attribute - your-subject.

If, for example, we are talking about the text area below, then its shortcode looks like this:. Here, textarea is the form's textarea tag, and your-message is the name of this form element. Everything is simple.

Here you can ask a logical question: what to do with other form elements? How do you know which shortcode is responsible for, say, a drop-down list? There is nothing complicated here either. There are buttons above the template field of the editable form, by clicking on which we will add the necessary elements to the form.

Well, if you still have difficulties, then the documentation for the plugin will help you, where you can find many examples.

So, let's remove the subject of the message as an example and add a list with options for choosing the subject of the message. To create a drop-down list, click on the drop-down menu button. In the modal window that opens, fill out the form. The key is the Options field, into which we enter options for the drop-down list. Each option with a new line. Other form fields should be intuitive. For example, if we check the box in the Field type (Required field) field, then we will make the created form field mandatory. The Allow multiple selections checkbox allows you to create a list with the ability to select multiple options, and the Insert a blank item as the first option checkbox creates the first empty option in the list. The Id and Class fields speak for themselves - these are the fields for adding the id and class attributes, allowing you to further design the field.

After creating a list with the necessary options, a new field will appear in the form template.

We save the template and try to test the new feedback form. The form has really changed on the site; instead of the topic text field, a drop-down list with options for choosing a topic has appeared.

Let's try to fill out and submit the form. The form is submitted, but oops ... in the received letter there is no selected topic option. How so? How to fix this misunderstanding? Do not worry, it is fixed simply. We go to edit the form and switch to the Letter tab.

In this tab, you can configure the letter format that comes to email from the feedback form. In the screenshot in the first circled area, we see a list of shortcodes (form field names) that are used in our feedback form. It is the values \u200b\u200bof these fields that are substituted into the letter template. We see on the second marked area that for the Subject field, the name from the previous field remains. Also in the Message Body field is the old shortcode. Let's replace them with the corresponding tag from the list above -. By the way, here we can also change the email address of the recipient, he is recorded in the To field. We can also change the other settings below, they are all signed and understandable.

We save the changes and try to resend the letter. Now the feedback form works as it should, - an email with the selected subject comes to the email.

In the next tab, Notifications when submitting a form, we can configure messages about success or errors that occur when submitting a form.

FEEDBACK PROTECTION

What about spam, can you ask a reasonable question? The plugin author took care of this as well. There is an Integration item in the plugin settings section.

Here we can set up reCAPTCHA service from Google. To do this, you will need to follow the specified link to the appropriate Google service and then follow the instructions to get the necessary key and integrate the captcha with your site.

For those who do not want to use the reCAPTCHA service, the plugin offers protection against robots in the form of a question / answer field. To add this field to the form template, click on the quiz button and fill out the form in the same way as we did for the drop-down list. We enter the question and answer through a vertical line.

After that, a new field will appear in the feedback form with one of the options for the questions that you typed. Now, for the form to submit, you must give the correct answer to the question.

As you can see, making a feedback form on WordPress is easy. Contact Form 7 plugin allows you to build a form for almost any purpose. This can be a feedback form, a form of some application, etc. Yes, as I said above, the form can be inserted not only into the post or page, but also into the sidebar widget. To do this, just create a Text widget and insert a shortcode of the desired shape into it. Well, you guessed it, you can create new forms in the Add New plugin menu.

That’s all for me. Play with the Contact Form 7 plugin for WordPress, try to create various forms, believe me, there are still a lot of opportunities for research. If you have questions, then I, as always, wait for them in the comments. Good luck

Good afternoon friends! In this tutorial, I’ll teach you how to create a WordPress contact form using plugins. The WordPress feedback form is an ideal solution for those who want to keep in touch with their audience or receive requests for an email address to order any services. We will learn how to make a pop-up form in a modal window with you. After reading this article, you will be able to independently insert the form on your sites. So let's go.

Why do you need a WordPress contact form?

You may be surprised at the question why do I need a feedback form on the WordPress website? Why not just add an email address to the site so people just write to me?

This is the most common question from beginners who are afraid to add form code to the site without programming knowledge. In truth, you don’t need the code at all when creating a WordPress feedback form. In this guide, we will create a contact form step by step and even the most absolute beginner can do it.

Below are 3 main reasons why using a form is better than just adding an email address to the site.

•   - spam bots with an enviable regularity retrieve mail addresses through their parsers where there is a mention of the mail domain and put it in their database, so that later they will send you unwanted correspondence. On the other hand, when using the feedback form for WordPress, you get rid of the problem of spam emails being sent to your mailbox.
• Completeness of information - when sending mail people do not always send all the information that you need. Using the contact form, you yourself determine which fields you need to make it easier for users to send you an email (name, email, phone number, comment, and more).
• Save time - The WordPress feedback form can save you time. In addition to the completeness of the information that you requested from the user and which he will send to you, you can also indicate what awaits you in the next step, for example, “Your application will be reviewed within 24 hours” or Watch the video and many other usefulnesses.

The following is an example of the contact form that we will create in this tutorial.

Let's start with, gentlemen.

Step 1: Choosing the Best WordPress Feedback Form Plugin

At this step, we need to choose the appropriate form plugin. There are a great many of them, both free and paid. In this lesson I’ll tell you about different plugins so that you have a rich choice. In the first case, the WPForms plugin will be involved.

Below are the reasons why WPForms is the best feedback plugin:

1. Firstly, this is the most beginner-friendly plugin. By simply dragging and dropping the necessary blocks, you can create a contact form in a few clicks.
2. WPForms Lite is completely free.
3. When you are ready for more powerful functionality and if it really is important to you, then you can upgrade to the Pro version.

Well, if these reasons were sufficient and I convinced you, then we are moving forward.

Step 2: Install the WordPress Contact Form Plugin

For this tutorial, we use the Lite version because it is free and easy to use. You can install it by logging into the blog and going to Plugins - Add a new one.

In the search bar, type the name of our plugin and click Install now.

After installing the plugin, make sure you activate it. This is shown here:

Step 3: Create a Contact Form in WordPress

So, after successfully completing the plugin activation, it's time to create our feedback form. To do this, in the blog admin panel click on the WPForms Menu tab and go to Add New.

This will allow you to open the Wpforms constructor, where by simply dragging and dropping the necessary blocks you can create a WordPress feedback contact form. In the free Lite version, two pre-built templates are available (blank and simple form). You can use them together to make the necessary and convenient for you. In this example, we have chosen the second option for you, that is, a simple contact form. Add a name, Email and a text box to it.

You can click on each field to edit it. You can also drag and reorder form fields using the mouse.

If you want to add a new field, simply select from the list on the left and drag it to the workspace.

When done, just click the Save button.

Step 4: Configure Notifications and Confirmations

After you have successfully created a feedback form on WordPress, it is very important to correctly set up notification and confirmation forms.

The confirmation form is what your users see when they send you a request from the form. This can be a thank you message or you can redirect them to another special page.

The notification form is the messages you receive when a new application or email from your WordPress site arrives.

You can configure both of these fields by going to Settings inside the WPForms form designer plugin.

We didn’t set it by default and left the Confirmation Form field with the message “Thank you for your appeal” as it is. However, you have the right to change it to another text or redirect the user to a separate page.

The best thing about this plugin is that the default settings are just perfect for beginners. They do not need to think about what to do or what to change. Everything is very intuitive and simple. When you go to notification settings, all fields will be pre-populated dynamically.

Notifications are sent by default to the mail that you specified in the settings. If you want to change the destination for sending notifications, then it can also be easily changed. If you want to indicate several mail addresses (indicated by a comma), then please hand in the cards, as they say 🙂

The Subject email field will be automatically populated with your form name. The name field will be taken from the username (your name). When you reply to the letter, it will go to the mail with the name of the user who filled out the contact form.

Step 5: Add the WordPress Contact Form to the Page

At this step, when you have built and configured the feedback form, you need to create a separate “Contacts” page for it, where you can place it. Either you create a new one or edit an existing page where you can add it.

We will use a simple shortcode to insert the form on the page. Just click on the “Add form” button and select the name of your form to insert it on the page.

Excellent. Now save the page and open the preview to see the changes.

Here's what the form would look like on a simple WordPress page:

If you just want to add a form to the page, then congratulations. All steps are done successfully. If you want to add it as a widget to the sidebar, then continue below.

Step 6: Adding a WordPress Contact Form to the Sidebar

The WPForms plugin comes with a built-in widget for the feedback form, which you can add to the sidebar or any other area on the site (for example, to the basement).

To do this, we need to go to the “Appearance” -\u003e Widgets section. There you will see a predefined widget of the form plugin on the left. We just take it and use the usual drag and drop to set the display order in the desired area in the sidebar.

The next step is the name of the widget and save. Go to the site and see the result.

This completes the review of our WPForms feedback form plugin. But, especially for you, I have prepared another review of one free plug-in, with which we can make a pop-up feedback form and all the same chips as in the previous one. It is called Contact Form 7. It is really very powerful and its trump card is that it is completely FREE!

It can also be made adaptive, i.e. the feedback form will adapt to the screen size of your device.

So, just in case, so that you know that they areJ

How to make a contact feedback form using Contact Form 7

We continue to understand the issue of creating forms for accepting applications from your site. Ahead we have another WordPress contact form plugin called Contact Form 7. Let's install it on our blog and activate how we can do it.

It is already installed on my site, not on this blog. The procedure is standard. Now we need to go to the admin panel of the blog and create a new form that will collect us applications and other useful information. Go to the section “Contact Form 7” -\u003e Add New.

Excellent! Now let's give her the appropriate name, in my case there are a lot of these contact forms. We’ll choose one, for example, “Website Promotion Order Form”

I’ll briefly tell you what we need here. First of all, we need to decide how many form fields we want to make. I must say right away that you do not need to do 100500 fields, and this is pointless, for the simple reason that people will close your site and not leave a request. They need to simplify this step. That is, if you think about it, then we need from a person that:

1. His name to address him (personal appeal)
2. Mail address (feedback, where to send him an offer)
3. Phone number to call immediately (if this happens quickly, it will become your client anyway)
4. Actually the button "Submit"

This is the basic data, others you can already find out in the course of correspondence or a telephone conversation. Is it logical? I think yes. Moving on.

Creating Contact Form Fields in Contact Form 7 Plugin

So, we decided on the number of fields, now we need to create these fields. The following tabs are available to us:

• Text (Any text field, such as “Name”, “Ask a Question”, or any other name that you will collect through this field)
• Email (there is only one purpose for the user to enter)
• URL (the site address will be entered in this field, other values \u200b\u200bare not acceptable, an error will be generated)
• Tel (field with a phone number for our WordPress feedback form, numerical values \u200b\u200bare acceptable, the text will give an error)
• Number (The numerical range of values, you can apply, for example, to the price: "how much are you willing to pay for the site? From 23,000 to 120,000 rubles")
• Date (We indicate the date, from which to what date. Example: "Booking a car from 04/13/2016 to 04/25/2016")
• Text Area (Text area, here you can enter text as a comment)
• Drop-Down Menu. Implemented on my blog, you can see. At the end of each article, I offer users the creation of either a simple site or an online store. Such functionality provides this option.
• Checkboxes (multiple choice, for example: Website + Logo creation + promotion + contextual advertising)
• Radio buttons (Selecting one item, for example: “You order either contextual advertising or targeted”)
• Acceptance (Accept the terms of the agreement, i.e. user information, like a public offer)
• Quiz (Quiz - a series of short questions, can also be inserted into the contact form).
• reCaptcha (Confirmation that you are not a robot and will not be spammed.) Good protection against SPAM. Note: this option works if you have connected the Really Simple Captcha plugin.
• File (If you want to give users the opportunity to upload a file to you, for example: “Attach TK to the development site”).
• Submit (Send data to e-mail)

So, we decided on the fields, the value of each you also know. Let's get started building our WordPress contact form.

In the example below, I used 2 fields: Name, Email. Accordingly, you will need these tabs:

By clicking on the text tab (Text) we get into the dialog box:

Here we need to click on the checkbox Type Field - Required. It was made in order that if the user does not enter a name in him, then he will not be able to send an application to you, there will be a sending error that not all fields are filled out correctly.

Then you will see a shortcode to insert this field and next to it is a blue button "Insert tag". This way you add one new contact form field.

So you do not get confused, I highlighted it in style. Code below:

< div class = "col-md-4" > < label class = "sr-only" >   Full name< / label >   [text * text - 658 class: form - control placeholder "(! LANG: your name" ] !}< / div >

And here is the screen:

We perform a similar operation for the "Email" field. We click on the appropriate tab and we get here in such a dialog box.

Absolutely no different from the previous one, just repeat our actions with you. My email field also has a style. I quote the code below:

< div class = "col-md-4" > < label class = "sr-only" >   Full Email< / label >   [email * email - 447 class: form - control placeholder "(! LANG: Your Email" ] !}< / div >

And here is the screen:

And finally, the Submit button. I have it all in styles.