We have released a new book, “Content Marketing on Social Media: How to Get Into the Heads of Subscribers and Fall in Love with Your Brand”.
A feedback form on a site is a mechanism for communication between a visitor to a resource and its administrators.
More videos on our channel - learn internet marketing with SEMANTICA
What is feedback for?
- Answers to visitors' questions.
- Questioning.
- Acceptance of orders through the site.
- Reception of applications for call back.
Two types of communication with the visitor
- Sending by email. After filling in the proposed fields, the form is sent to the e-mail of the site administrator. All further communication takes place through the exchange of emails or going offline (phone, etc.).
- Submitting to the content management system. After filling out, the site administrator sees the request in the list of filled data in the CMS, and can process it there. For example, a guestbook or a question-and-answer system can be implemented in this way. Buying goods from an online store works in a similar way.
In the future, we will not consider in detail the work of the online store, since this is a topic for a separate article, but we will focus on feedback as one of the types of communication with the site visitor.
For efficient and fast processing of applications, it is recommended to combine both types of sending.
How to make a feedback form on the site
Knowledge of php, html and javascript is required for development. On the CMS, there are different constructors that allow you to create a feedback service, you can also use services on the Internet. But still the first way is preferable. As a site administrator, you should know exactly what mechanisms are used to send messages.
The mechanism for sending a question to email works through a mail server installed on the hosting. If you do not receive emails, you may need to revise your web server settings or check your mailbox for the presence of a spam list.
Structure
The feedback page can consist of several fields that the visitor is invited to fill out. Fields marked with an asterisk are required. If a person tries to submit a form without filling in the fields with an asterisk, they will receive a message that the form cannot be submitted.
As a rule, the following fields are required: name, phone number, e-mail, your question. The simplest communication page should contain these fields.
In addition to text boxes, a page can contain selection items.
Callback service example
You can envisage the possibility of attaching documents of various formats. For effective work, indicate the formats and weights of files that the visitor can attach to the message.
An example of a complicated order feedback form
The last field should be a captcha - a security code generated with each page refresh, which serves to prevent spam. If you do not install the captcha, you will soon get tired of cleaning the site database and mailbox from spam messages sent by various bots. Currently, bots can recognize codes, so install reliable captchas and update the generating script periodically.
Where to post
Typically, two types of form placement are used:
- On a separate page in case the form contains many fields.
- On the "Contact Us" page under the heading "Write to us".
It is not recommended to place the form itself on the main page, and even more so - to duplicate it in an end-to-end way on all pages of the site. An exception is the callback service, which can be attributed to the above only by the method of communication. The form works poorly in. The exception is landing page, the purpose of which is to keep the visitor's attention and bring it to the bottom of the page.
Good manners
After filling in the fields and sending the message, the visitor should receive an answer on the screen like “Thank you for your question. We will answer you within 1 hour. " If a visitor does not receive a response within the specified time, his or her disposition towards you drops dramatically. The fact of ignoring is very unpleasant and suggests that the site does not value its customers. Feedback should work, not collect dead loads from unanswered questions from visitors.
Communication through forms is the fastest method of communication with clients, which makes it possible to prepare detailed answers and collect a unique database of e-mail addresses and phone numbers. Remember, you may not use this bulk mailing database or transfer it to a third party. According to statistics, your offer will work if a person is currently looking for your service or product. If a potential client has already contacted you, it is in your power to offer him now exactly what he is interested in.
Hello, friends! In this tutorial we will talk about creating a feedback form, or as they say among the people "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 turn out to 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 -> 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:
Ready! 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 create completely new contact form with other fields and possibilities - recommend read the lesson to the end.
In order to create a new form, you first need to determine what fields we need in it. In this tutorial, as an example, we will create a simple call back order form.
To do this, we need the following fields to be filled in the form:
- Name (Required field)
- Surname
- Phone (Required field)
- A field with a 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 -> Add New.
2. In the window that opens, press 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 title new form... V 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, which will receive requests from the form on your site. V 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 creating our new form. For this we need DELETE from the form template all lines except for 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, Telephone(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 only necessary 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" -> Text Field and by analogy create a field Surname and Telephone by copying and pasting the code into the form template and the letter template. The only difference is that for the field Surname you 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:
READY! 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 turn out to 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
Grade
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. Thank you in advance!
1. Plugin for creating online forms "jFormer"
Creation of contact forms: feedback, comments, login form, registration form with checking the correctness of the information entered.
2. Step by step registration form using jQuery
A neat form with step-by-step filling. Below is a form fill indicator.
3. Step by step form
Filling out the form in several steps and checking the correctness of the filling.
4. Contact form for the site
Validation of the correctness of the input of information is carried out "on the fly" before sending the message using javascript.
5. Animated switching between forms using jQuery
Animated jQuery toggle between login, registration, and password recovery fields. On the demo page, click on the yellow link to see the effect.
6. PHP checkout form
A similar solution can be used to give a visitor the ability to quickly contact the site owner from any page. On the demo page, click on the down arrow to move the form out.
7. PHP registration form using jQuery and CSS3
Form with verification of the correctness of the information entered.
8. PHP Facebook-style registration form
Nice registration form implemented with CSS, PHP and jQuery.
9. jQuery "SheepIt" Contact Form
The ability to add new fields before sending a message has been implemented.
10. Contact form "Fancy AJAX Contact Form"
Nice neat PHP feedback form with validation of information entered. Technologies: CSS, PHP, jQuery.
11. System of authorization / registration on the site
12. Data submission form
Checking the correctness of the filling.
13. jQuery "Contactable" plugin
To implement a checkout form to quickly send a message.
Greetings to my readers, I have gained experience and I will tell you about the principles of the php feedback form. I'll show you with illustrative examples so that you understand how everything works and how the interaction between the input form itself (its input fields) and the handler file written in php takes place. In addition, you can download the sources for free along with.
Of course, it will be great if you know a little about HTML / CSS. By analogy, you will have to drag the code onto your page. We will not touch on the PHP language, I will show all the necessary edits that need to be done for myself.
UPDATE: According to the responses of readers, I realized that you need something more beautiful and functional, meet, read and see. Choose which one you like best)
UPDATE2: Version 3.0 Responsive Landing Page + ajax form with passing UTM tags, read and see. You'll like it
I remembered myself when I first tried to make my own feedback form in php, and to be honest, it was laborious, because did not understand what was happening and how. Patience and perseverance are friends and you will succeed.
Php contact form - structure
We will study the analysis of the feedback form itself on the example of a landing page (Landing Page), by the way, there is a separate article on. You can see how it works in action by using the buttons below, I attach the sources of this one-page page and the main file of the php handler (this file will process and send a letter to email)
After downloading the sources and unpacking the archive, you will see the following file structure:
- image - all images that are used for the Landing Page itself, buttons, etc.
- js - javascript scripts that provide, for example, a popup modal on the page and other visual effects
- index.html - our one page index file
- index1.php - a handler file into which values from the form are passed, then a letter is formed from the received variables and sent to the specified email address. Also, index1.php will act as an intermediate page for notification of successful data submission with automatic redirection back to index.html (i.e. our one-page page)
It is important that your hosting, on which the site files are located, supports php processing, otherwise the index1.php file will not be executed and will not work. To clarify this nuance, contact the campaign where your hosting is registered or just test it - it works, which means there is support. If not, then enable php language support option
Take a look at how the interaction of all elements (page, form, handler) works
The source code of the form call and handler
Let's take a look at the operation of one of the buttons, which invokes a modal pop-up window that contains a feedback form. This given source code is more than once, two inserted into the page and it will work, you yourself will have to customize it to your design and needs.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 | Request a call back
Request a call back
|
Request a call back
Below is the full source code of the index1.php handler, in order to configure sending to your mailbox, change “ [email protected]»On your own, the rest, in principle, can be left unchanged
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 | "; // from whom $ send = mail ($ address, $ sub, $ mes," Content-type: text / plain; charset = utf-8 \ r \ nFrom: $ email "); ini_set (" short_open_tag ", "On"); header ("Refresh: 3; URL = index.html");?>
|