Creating a feedback form - css markup. Don't forget about social networks

Hello dear readers, today I want to tell you about how I create forms to obtain user contact information.

Today, , is part of the landing page structure. After all, this is one of the ways to accept an order or send a catalog of your products, having previously received the visitor’s e-mail.

Creating a feedback form - html markup

I usually need three fields, and in most cases, I use this markup to create a contact form:

Get price

Try opening it in your browser this code and look what you get, depending on what Internet browser you use, it should look something like this:

If you have any questions about the markup, feel free to ask them in the comments, I will try to answer in detail, and I will not describe each element in the article so as not to increase its size. In addition, the elements are quite simple.


Creating a feedback form - css markup

Let's style our form and make it readable:

/* Form styles */ #application ( width: 475px; margin: 0 auto; ) /* Input field styles */ #applicationName, #applicationEmail, #applicationTelephone ( width: 100%; height: 73px; background: none; margin -top: 25px; border: 1px solid #fff; border-radius: 40px; text-align: center; color: #fff; font-size: 24px; ) /*Styles of fields when clicking on them*/ #applicationName:focus , #applicationEmail:focus, #applicationTelephone:focus ( border: 1px solid #30ad64; ) /*Styles of text displayed in placeholder*/ ::-webkit-input-placeholder ( color: #efefef; font-family: "PT Sans ", sans-serif; text-shadow: 0 1px 1px rgba(0, 0, 0, .3); ) ::-moz-placeholder ( color: #fff; font-family: "PT Sans", sans-serif ; text-shadow: 0 1px 1px rgba(0, 0, 0, .3); ) /* Firefox 19+ */ :-moz-placeholder ( color: #fff; font-family: "PT Sans", sans- serif; text-shadow: 0 1px 1px rgba(0, 0, 0, .3); ) /* Firefox 18- */ :-ms-input-placeholder ( color: #fff; font-family: "PT Sans" , sans-serif; text-shadow: 0 1px 1px rgba(0, 0, 0, .3); ) ::placeholder ( color: #fff; text-shadow: 0 1px 1px rgba(0, 0, 0, .3); ) /*Button styles*/ .applicationButton ( margin-top: 25px; background: #30ad64 ; border: none; width: 100%; height: 73px; border-radius: 40px; color: #fff; font-size: 24px; text-transform: uppercase; font-family: "PT Sans", sans-serif; cursor: pointer; ) .applicationButton:hover ( background: #d68c18; )

If you want the button color to change smoothly, add the following line to .applicationButton and .applicationButton:hover:

Transition: .6s;

Where.6s is the animation time in milliseconds.
Now our form has acquired beautiful view, now it looks like this:

Creating a feedback form - php markup

Now we need to create the application.php file. It will receive the entered parameters from the form and send them to us by email.

Its structure is like a regular one html file, this could be a page on which you write “Thank you, your application has been accepted. After processing the application, our managers will contact you"

That is, when the user clicks the button, he will be redirected to the application.php page. This is a full page and you should style it accordingly.

"; $msg .= "

Message from the site

\r\n"; $msg .= "

From whom:".$username."

\r\n"; $msg .= "

Mail:".$usermail."

\r\n"; $msg .= "

Website:".$usertel."

\r\n"; $msg .= ""; // sending a message if(@mail($sendto, $subject, $msg, $headers)) ( echo " "; ) else ( echo " "; } ?>

Let's explain the code a little:

$sendto = " [email protected]"; // mail to which the letter will be sent $username = $_POST["name"]; // save the data received from the field with the name into a variable $usertel = $_POST["telephone"]; // save the data into a variable received from the field with a phone number $usermail = $_POST["email"]; // save the data received from the field with an email address into a variable

Here, I think, it’s clear.

Now let's create the header of the letter.

$subject = "New message"; $headers = "From: " . strip_tags($usermail) . "\r\n"; $headers .= "Reply-To: ". strip_tags($usermail) . "\r\n"; $headers .= "MIME-Version: 1.0\r\n"; $headers .= "Content-Type: text/html;charset=utf-8 \r\n";

Line $subject = "New message";— is responsible for the subject of the letter, can write there: “Application from the site” or whatever suits you best.

I propose to make sure that the letter arrives from the address specified in the input type="email" field. That is, from the one from which the user entered when filling out the form. To do this, we write the following lines:

$headers = "From: " . strip_tags($usermail) . "\r\n";

That is, we will substitute data from the $usermail variable, where the information from the field responsible for entering the email address is stored.

Now let's set appearance letters. You can design it however you like, but I suggest the following structure:

$msg = " "; $msg .= "

Message from the site

\r\n"; $msg .= "

From whom:".$username."

\r\n"; $msg .= "

Mail:".$usermail."

\r\n"; $msg .= "

Telephone:".$usertel."

\r\n"; $msg .= "";

The first line sets the letter font. Second, we display a message, for example: “Request from the form feedback on the first screen." The third, fourth and fifth lines transmit data from the form. Each on a new line.

Now you need to send a letter using the mail function and determine what will happen if the letter is sent successfully and not successfully:

If(@mail($sendto, $subject, $msg, $headers)) ( echo "

"; ) else ( echo " "; } ?>

I made it so that in any of the cases a picture with the corresponding text will be displayed. You can display a full page instead of a picture. Just write the code instead of the picture.

A few seconds later, after the image is displayed, I redirect (automatic redirection) to the main page. This can be done by entering next line between head tags;

That is, after 4 seconds the user will automatically be returned to the main page!

I'm not an expert in PHP - it's a back-end programming language; I've been drawn to learning front-end all my life. So don't judge harshly. Yes, here you can make checks for filling out contact forms and so on, but this was always enough for me, so if anyone has a suggestion on how to improve this code, please write in the comments or by email, I will correct the lesson, thank you!

By the way, if you need a feedback form without reloading the page, then you can read about how to install it in

Maybe some people don’t understand the material very well, but if you repeat my steps exactly, it will definitely work for you contact form. If you have any questions, write in the comments, I’ll try to answer! See you on the blog!

P.s. Since I began to very often receive questions about why the form does not work and emails do not arrive, I decided to describe several of the most popular reasons why this may happen:

• You are testing the form not on the server.
• Testing the form for demons paid hosting.
• You test the form on paid hosting, but during the free trial period.

In these cases, letters will not be sent to your email.

If you are too lazy to figure it out and make the form yourself, then I recommend paying attention to.

23/07/2014 12/07/2018

dimadv7

We made a website, set up advertising, people started sending money, all that was left was to fill out the fields and press a button. But the fish breaks away. The reason is the form of capture on the site. Questions arise: what’s wrong with it, how to evaluate it, where to model it successful experience?! You will learn about this, and even more, in the article.

About the highlight of the program

Contact grip shape is like air. You don’t think about her when you’re making a website and you think that everything is important, but not her. True, I will say differently - you cannot live without it. Perhaps a harsh comparison, but to emphasize the importance of the topic, just right. Because the question is about your wallet.

A feedback form is a window with fields for data entry, text and a button for feedback from a visitor to your site.

This form is one of the stages of the sales funnel; it collects contacts of site visitors or Landing Page. In other words, the buyer is friends with the seller. It is also called a lead - a form or form of feedback. But globally, it doesn’t matter what you call it, as long as we understand what we’re talking about.

And since the topic itself is not complicated, we will not confess our love to each other for a long time, but will immediately move on to the details. And let's start with what 3 types of gripping forms there are.

1. Closed form

A form is called closed when it is designed as a button or link on a website, when clicked, an expanded form with fields appears. Classics of the genre:

Necessary if the design is respected and the page space is used for information. And also when it contains more than 4 fields and overlaps some of the content on the site. Mainly in online stores. The only negative is that it requires an additional mouse click by the user.

2. Open form

The open capture form is designed in expanded form and is located, in most cases, on the first screen home page website or landing page.

Serves to take care of the hottest customers who already want to send their contacts, pay for goods and receive benefits. Such users do not want to carry out extra clicks mouse. If space on the page, design, number of fields allows, and you have a lot of hot clients, calmly use an open lead capture form.

3. Double shape

The main difference between a double form and a regular one is the presence of motivating, selling, informational text, which is more correctly placed to the left of the data entry fields.

This form may be special offer or a promotion that is not announced on the website. Your lead is a magnet or a special condition for the client who submitted an application from this form. The main thing is that it is valuable to the user.

Types of grip forms

OK. Now that you have globally seen what examples of capture forms there are, we can move on to their type. And here the list will be quite long, but you don’t need everything. Main principle Your choice: the form must correspond to the client’s wishes at the time he is in a specific place on the site. And I'm starting.

1. Subscribe to the newsletter

E-mail marketing works successfully, no matter what they say about it. Therefore, one of the form types is “Newsletter Subscription”. Its goal is to take e-mail address user for further sale of your products using the newsletter.

Although, taking into account the fact that chatbots and auto funnels are now actively developing in social networks. networks, it can easily replace e-mail marketing in this form.

Place the form to the side of the main content or at the bottom of the home page after the user has read important information. One field indicating the email address is enough. Well, at most one more name.

Certainly, best effect You will receive only when a person clearly understands on the site what he will receive in return for his contact. Therefore, here the name “Subscribe to the newsletter” is more general. You can also simply offer to receive some kind of gift in exchange for contacts. For example, we often offer 300 advertising methods.

2. Call back

Perhaps the most common type of feedback form. Especially if you work in your own city. Telephone communications is fast and most importantly in a convenient way communication. And yes, use it this form needed on all sites, since this is no longer just a feature, but a necessity.

“Order a call” is best placed next to the phone number in the “header” of the site. And it doesn't have to be a button. The form may appear after clicking on the text, which can be executed as a link (underlined by a dotted line and highlighted in color)

You can make a form with one field for a phone number to increase conversion, because the fewer fields, the higher the efficiency due to the fact that we reduce human energy costs. But there is a small drawback, although not significant - the manager will have to find out the client’s name.

Be sure to place a call request form in the footer of the page next to the contacts so that the user does not have to go up if he wants to leave a contact.

3. Consultation

If you are selling a scooter, then everything is clear, there are a minimum of questions and almost no consultation is needed. What if you have bankruptcy? legal entities, then it is necessary to take into account many nuances and consultation does not fit.

You can also use the request for consultation in the online store. If there is a possibility that a person will not find on your website the desired product, but you can offer him an alternative. Execute it in the form of a pop-up window of a client capture form, which partially overlaps in meaning with a “call back”.

You can place this form immediately after you talk about your benefits and advantages. Or you can do it right away on the first screen, as we did on the real estate agent’s landing page.

Or there is an even more cunning and, what is most interesting, according to our observations, a very effective option - place the capture form at the bottom of the page, where the fields include not only the name and phone number, but also a place to describe the task.

4. Calculation / cost recognition

Again, if you sell nail extensions, then the price can be indicated immediately on the website. And if you, like us, have a complex service, for example, marketing consulting, then no matter what cost you indicate, it will be approximate in any case, which means you need a separate form of capture according to its personal calculation.

By the way, in the example above you see the implementation of cost calculation through a quiz site (in our case, a quiz block). This is when the client, before seeing the treasured fields for entering contacts, must answer questions in the form of a small gamification, and his system will roughly guide him in the price range.

But you don’t have to bother so much; in some cases, it’s enough just to make a button with the usual offer “Calculate cost” or “Get an offer with prices.” For example, this is exactly how we implemented it on the first screen of our landing page development site.

5. Online consultant

Online chat also refers to the form of feedback, albeit indirectly. But we will not ignore it. Therefore, if you are sure that the visitor will have any questions about the product and the manager in the chat can close it to the next stage of the sales funnel, then implement an online consultant on your resource.

Just the phrase in the example above is a greeting for thousands of sites. And your competitors. Therefore, remove the templates. Adapt to the specifics of your niche. If you sell children's toys, you can write the following greeting: “Zdlasti! If you can’t decide on a choice, write to us in the text and in the text with all the information)))”

Ridiculous, but cool. And, believe me, positivity and laughter are more conducive than a dry: “Hello, how can I help you?” By the way, we even have a whole video about this:

And there's another one good news, in our practice we have worked with a large number of online consultants and naturally during this time we chose the best. We wrote about them in this article “Review of online consultants for the site: supposedly a rating.”

6. Login and registration form

This form provides access to additional information or resource capabilities on trial period. Again, no unnecessary actions for the user. Three fields are enough: “Name”, “E-mail” and “Password”.

It would seem as simple as shelling pears, but... You can make it even simpler: generate a password for the user and save him, once again, from going through the dates of birth of his relatives in his head.

Just if you happen to be a service, don’t mix up the “Login” and “Registration” forms. Although these forms do not have much difference, they are intended for different tasks. One for registered people to log in, the other for initial registration or even trying to test the portal.

Pop-up with feedback form

Pop-up is a window that “pops up” when the visitor’s cursor moves to the browser tabs or through certain time user stay on the site. This form should contain a tasty special offer so that the client submits an application.

It is believed that pop-ups are annoying and cause dissatisfaction. But if you really have an offer that no one else has, then why not try making a pop-up? Only testing will tell.

I just beg you, set up the normal logic for its appearance. This pop-up should not crash on every page after 2 seconds of mouse movement. Everything should be logical, and then you won’t even have to do testing.

TIPS and nuances

You must have already felt that this “square with a button” on the site is not so bad. It has many small components that are important for the coveted conversion of your resource. Therefore, further we will analyze just these chips. Yes, and you love them so much, I know.

1. Thank you window after submitting the form

This is the same “tick” that appears on the monitor screen after the user submits the form. Another little thing, but so important! It could be modal window or a separate page with thanks and further actions which will occur after the user has successfully submitted the form.

Captcha is a test computer systems, which determines whether you are a human or a robot. Its advantage is that the captcha protects your resource from robots that visit the site, register, send spam and increase its load.

Disadvantage – it adds complexity to the user filling out the form. And sometimes it is the captcha that causes the visitor to leave the site. Incomprehensible inscriptions, illegible letters. In general, everything is difficult.

If you think about it, the problem of spam and bots on the resource is not a problem for your clients. She is yours. So try to avoid or make captchas simple (invisible reCAPTCHA from Goog) or in a semi-game form using an image.

3. Privacy Policy

Remember Law N 152-FZ “On Personal Data”. No?! In general the law Russian Federation states that you may not collect people's contacts without their consent. And their consent means checking a special checkbox under the button (the location can be any).

Important. Failure to comply with this clause may result in fines, although we have not yet heard of such cases. And yes, the checkbox should NOT be checked by default.

I hope you haven't fallen asleep yet. Actually, bonuses in your business also affect the conversion of the lead form. For example, you offer a person to order a measurement visit, and in addition to this you promise that a bottle of champagne will be a gift, even if the person does not buy anything.

Mix banal calls to action with non-banal ones. For example, for a design studio in the “Portfolio” block, it would be stupid to have the main call to action – “Request a call”. It would be better to write “I want it too.”

Or, if you are presenting a product that has many advantages, but requires detailed consultation, you can use the call - “Even more advantages.” Or apply a solution like the example below, where we offer to contact and answer any questions.

This is necessary so that our capture forms, especially single ones, do not fall into the filter of the human eye, which automatically passes them through because it knows that they are advertising. Interested? Read more about this in the article “Call to action. What is the power of a call to action.”

What should the grip form look like?

The visual channel of human perception is 60%. Therefore, the visual component of the form on a subconscious level should evoke aesthetic pleasure in a person. Color, shape, size, text, button, location. Every little detail affects the aesthetic perception of the user.

1. Shape color

There is no specific set color. To please the user's eye, the color of the form must be made in accordance with the style of the site. Dissonance or lack of harmony in color will cause an uncomfortable feeling. Here you need to work with the Itten color wheel, hue, saturation, noise, etc. A designer can handle this best.

2. Button color

Oh... Well, you could write an entire dissertation on this topic. Since the widespread spread of the Internet, there have always been disputes between marketers, designers and web programmers about the treasured button, which, with the slightest change, can significantly increase website conversion. Its color, shape, text, location are a close subject of discussion among specialists.

We came to one global conclusion, the main thing is that the button should be contrasting with the background. This will make her stand out. And all other hypotheses, even if they give results in A/B testing, will be so tiny that you will lose more time than you earn money.

3. Field color

As they say, it’s written in black and white. That is why the color of the data entry fields is white. But there is one caveat. Highlight fields with a colored border when the user clicks on the field to write text.

The visitor immediately understands that the form is active and working properly. If at this moment the visitor decides to go get some more cookies, then upon arrival he will immediately see where he left off.

4. Size of the mold and its parts

It all depends on your target audience. If your people are adults and their vision is not doing so well, then you need to use a large form in all its manifestations. If this is a youth, then the main thing is that it is noticeable and fits beautifully into the design, and the size will be secondary.

5. Input fields

This item is applicable for sites in which the form is located on separate page. There is no need to make the “Your name” field the entire width of the page. Or even half. Because there are no such long names in Russia. But the main thing is that you lose useful space on which you can show additional benefits or add text with step by step actions, after sending the data.

Field label text informs the user what data needs to be entered in a specific field. Should it be placed to the left of the margin, above or inside the margin? If the text is inside a field, it disappears when you enter data, so it needs to be duplicated. It is more convenient to do this above the fields, but only if the form design allows it.

6. Heading and eyeliner for the form

The text title of the form should match the call to action and stand out from the general background in bold. Under the title, in a smaller font, describe what exactly the user should do and what will happen after the actions are completed. Moreover, preferably with an indication of time.

If you want to describe your offer and operations in more detail after the user submits the form, use the double form we wrote about above.

7. Animation

The main thing is not to overdo it. It is acceptable for a button to jump a little when hovering the cursor, glow, change color, or get larger - this is good idea. But making the button constantly twitch as if in a fit is already a bad idea.

And by the way, use icons. This little detail makes the button more interesting, informative and pleasing to the eye. And in the data entry or signature fields, the visitor quickly understands what needs to be entered here.

Briefly about the main thing

What can I say? Make the feedback form convenient and simple for your visitors. Give it a purpose and the right call to action. It should not interfere with learning the content, but at the same time it must simply encourage you to fill it out, or at least cause aesthetic pleasure.

And I understand that the paragraph above is general words, but in reality the whole idea of ​​​​creating a high-quality form of capture can be literally summarized in two main meanings:

Taking care of the user is how the visitor should feel.

His thoughts must coincide with your form of communication.

But the fish breaks away. The reason is the form of capture on the site. Questions arise: what’s wrong with it, how to evaluate it, where to model a successful experience?! You will learn about this, and even more, in the article.

About the highlight of the program

Contact grip shape is like air. You don’t think about her when you’re making a website and you think that everything is important, but not her.

True, I will say differently - you cannot live without it. Perhaps a harsh comparison, but to emphasize the importance of the topic, just right. Because the question is about your wallet.

Feedback form- this is a window with fields for data entry, text and a button for feedback from your site visitor.

This form is one of the steps that collects contacts of site visitors or Landing Page visitors.

In other words, the buyer is friends with the seller. It is also called a lead form or feedback form. But globally, it doesn’t matter what you call it, as long as we understand what we’re talking about.

And since the topic itself is not complicated, we will not confess our love to each other for a long time, but will immediately move on to the details. And let's start with what 3 types of gripping forms there are.

1. Closed form

A form is called closed when it is designed as a button or link on a website, when clicked, an expanded form with fields appears. Classics of the genre:

Closed form
New window

Necessary if the design is respected and the page space is used for information.

And also when it contains more than 4 fields and overlaps some of the content on the site. Mainly in online stores. The only negative is that it requires an additional mouse click by the user.

2. Open form

The open capture form is designed in expanded form and is located, in most cases, on the first screen of the main page of the site or landing page.

Open form

Serves to take care of the hottest customers who already want to send their contacts, pay for goods and receive benefits.

Such users do not want to make unnecessary mouse clicks. If space on the page, design, number of fields allows, and you have a lot of hot clients, calmly use an open lead capture form.

3. Double shape

The main difference between a double form and a regular one is the presence of motivating, selling, informational text, which is more correctly placed to the left of the data entry fields.

Double form

This form may contain a special offer or promotion that is not announced on the website.

Your lead is a magnet or a special condition for the client who submitted an application from this form. The main thing is that it is valuable to the user.

Types of grip forms

OK. Now that you have globally seen what examples of capture forms there are, we can move on to their type.

And here the list will be quite long, but you don’t need everything. The main principle of your choice: the form must correspond to the client’s wishes at the time he is in a specific place on the site. And I'm starting.

1. Subscribe to the newsletter

E-mail marketing works successfully, no matter what they say about it. Therefore, one of the form types is “Newsletter Subscription”.

Its purpose is to take the user’s e-mail address for further sale of your products using mailing lists.

Subscribe to the newsletter

Although, taking into account the fact that they are now actively developing in social media. networks, it can easily be replaced in this form.

Subscribe to newsletters via social networks

Place the form to the side of the main content or at the bottom of the home page after the user has reviewed important information.

Just one field indicating your email address is enough. Well, at most one more name.

Of course, you will get the best effect only when a person clearly understands on the site what he will receive in return for his contact.

Gift in exchange for contacts

2. Call back

Perhaps the most common type of feedback form. Especially if you work in your own city.

Telephone communication is a fast and, most importantly, convenient way of communication. And yes, you need to use this form on all sites, since it is no longer just a feature, but a necessity.

Back call

“Order a call” is best placed next to the phone number in the “header” of the site. And it doesn't have to be a button.

The form may appear after clicking on the text, which can be executed as a link (underlined by a dotted line and highlighted in color)

Capture form - call back

You can make a form with one field for a phone number to increase conversion, because the fewer fields, the higher the efficiency due to the fact that we reduce human energy costs.

But there is a small drawback, although not significant - the manager will have to find out the client’s name.

Order a call

Be sure to place a call request form in the footer of the page next to the contacts so that the user does not have to go up if he wants to leave a contact.

3. Consultation

If you are selling a scooter, then everything is clear, there are a minimum of questions and almost no consultation is needed.

And if you have bankruptcy of legal entities, then there are many nuances that need to be taken into account and consultation is not appropriate.

Consultation

You can also use the request for consultation in the online store. If there is a possibility that a person will not find the desired product on your website, but you can offer him an alternative.

Execute it in the form of a pop-up window of the client capture form, which partially overlaps in meaning with the “call back”.

Back call

You can place this form immediately after you talk about your benefits and advantages.

Or you can do it right away on the first screen, as we did on the real estate agent’s landing page.

Free consultation

Or there is an even more cunning and, most interestingly, according to our observations, a very effective option - place the capture form at the bottom of the page, where the fields include not only the name and phone number, but also a place to describe the task.

https://youtu.be/eykrf_RWJOo

4. Calculation / cost recognition

Again, if you sell nail extensions, then the price can be indicated immediately on the website.

And if you, like ours, have a complex service, for example, then no matter what cost you indicate, it will be approximate in any case, which means you need a separate form of capture according to its personal calculation.

Cost calculation

By the way, in the example above you see the implementation of cost calculation through (in our case, a quiz block).

This is when the client, before seeing the treasured fields for entering contacts, must answer questions in the form of a small gamification, and his system will roughly guide him in the price range.

But you don’t have to bother so much; in some cases, it’s enough just to make a button with the usual offer “Calculate cost” or “Get an offer with prices.”

For example, this is exactly how we implemented it on the first screen of our website.

Find out prices

5. Online consultant

Online chat also refers to the form of feedback, albeit indirectly. But we will not ignore it.

Therefore, if you are sure that the visitor will have any questions about the product and the manager in the chat can close it to the next stage of the sales funnel, then implement an online consultant on your resource.

Online consultant

Just the phrase in the example above is a greeting for thousands of sites. And your competitors. Therefore, remove the templates.

Adapt to the specifics of your niche. If you sell children's toys, you can write the following greeting: “Zdlasti! If you can’t decide on a choice, write to us in the text and in the text with all the information)))”

Ridiculous, but cool. And, believe me, positivity and laughter are more conducive than a dry: “Hello, how can I help you?” By the way, we even have a whole video about this:

https://youtu.be/p3G42Yg3VKA

And there is one more good news: in our practice, we have worked with a large number of online consultants and, naturally, during this time we have chosen the best. We wrote an article about them.

6. Login and registration form

This form provides access to additional information or resource features for a trial period.

Again, no unnecessary actions for the user. Three fields are enough: “Name”, “E-mail” and “Password”.

Registration form

It would seem as simple as shelling pears, but... You can make it even simpler: generate a password for the user and save him, once again, from going through the dates of birth of his relatives in his head.

Password generation

Just if you happen to be a service, don’t mix up the “Login” and “Registration” forms. Although these forms do not have much difference, they are intended for different tasks.

One for registered people to log in, the other for initial registration or even trying to test the portal.

Login and registration forms

7. Pop-up with a feedback form

Pop-up is a window that “pops up” when the visitor’s cursor moves to the browser tabs or after a certain time of the user’s stay on the site.

This form should contain a tasty special offer so that the client submits an application.

Special offer

It is believed that pop-ups are annoying and cause dissatisfaction. But if you really have an offer that no one else has, then why not try making a pop-up? Only testing will tell.

I just beg you, set up the normal logic for its appearance. This pop-up should not crash on every page after 2 seconds of mouse movement.

Everything should be logical, and then you won’t even have to do testing.

TIPS and nuances

You must have already felt that this “square with a button” on the site is not so bad.

It has many small components that are important for the coveted conversion of your resource. Therefore, further we will analyze just these chips. Yes, and you love them so much, I know.

1. Thank you window after submitting the form

This is the same “tick” that appears on the monitor screen after the user submits the form.

Another little thing, but so important! This can be a modal window or a separate window and further actions that will occur after the user successfully submits the form.

Thank You Window

2. Captcha

Captcha is a test of computer systems that determines whether you are a human or a robot. Its advantage is that the captcha protects your resource from robots that visit the site, register, send spam and increase its load.

Captcha

Disadvantage – it adds complexity to the user filling out the form. And sometimes it is the captcha that causes the visitor to leave the site. Incomprehensible inscriptions, illegible letters. In general, everything is difficult.

If you think about it, the problem of spam and bots on the resource is not a problem for your clients. She is yours.

So try to avoid or make captchas simple (invisible reCAPTCHA from Goog) or in a semi-game form using an image.

Captcha in a game form

3. Privacy Policy

Remember Law N 152-FZ “On Personal Data”. No?! In general, the law of the Russian Federation states that you cannot collect people's contacts without their consent.

And their consent means checking a special checkbox under the button (the location can be any).

Privacy Policy

Failure to comply with this clause may result in fines, although we have not yet heard of such cases. And yes, the checkbox should NOT be checked by default.

4. Bonus

I hope you haven't fallen asleep yet. Actually, bonuses in your business also affect the conversion of the lead form.

For example, you offer a person to order a measurement visit, and in addition to this you promise that a bottle of champagne will be a gift, even if the person does not buy anything.

What a surprise!

5. Summoning

Mix banal calls to action with non-banal ones. For example, in a design studio, in the “Portfolio” block, it is stupid to make the main call to action - “Request a call.” It would be better to write “I want it too.”

Call to action

Or, if you are presenting a product that has many advantages, but requires detailed consultation, you can use the call - “Even more advantages.”

Or apply a solution like the example below, where we offer to contact and answer any questions.

Unusual call to action

This is necessary so that our capture forms, especially single ones, do not fall into the filter of the human eye, which automatically passes them through because it knows that they are advertising. Interested? Read more about this in the article.

The capture form on the site is several fields, located sequentially one after another, which the visitor can fill out, leaving his contact information as he sees fit. It is also called a lead form, that is, a form for capturing leads. The form may be offered for completion when filling out an application or to receive information sent to your email address. For example, in order for some online store to send its new catalog to this visitor with a unique offer.

The form usually asks you to indicate name, phone number, email address, there may also be a text field for comments, wishes, additional information. If a person indicates a phone number, it is better to add a field in which you can mark a time convenient for calling. Some fields may be required to be filled in, while others may be filled in at the client's discretion.

Why do you need a capture form on a website?

Users' personal information worldwide network, most often, they leave reluctantly. For a person to provide at least some of his data, the website must be credible and offer something very unique, interesting or free. That's how the psyche works modern man– receive more than give.

How to improve your shape

After receiving a certain number of responses from the capture form, analysis can be done. From its results, information will be obtained about which fields are filled in more readily and which are more often left empty. This will help optimize the shape and remove excess. Remove unnecessary lines, you can try adding others. Then analyze their completion again. As they say, there is no limit to perfection.

To make it convenient and comfortable enough for people to fill out forms on your website, try filling them out yourself. Then you will be able to identify all the nuances of this procedure at the development stage. You will experience all the pros and cons and be able to make the lead form simpler and more convenient.

Working with the mailing database

Having received the contacts of site visitors who agreed to fill out the form, you can start notifying and sending them out. There are many services and scripts that allow you to generate mailing letters and automatically send them to many addresses at the same time. You can even customize the sequence and frequency of your mailings. In addition, such services have systems for statistics and analysis of email openings, views, and responses.

The capture form on the site is designed to develop your resource and organize confidential communication between you and potential clients.

What forms of capture are effective on a website? Web studio "Salamat" conducted a study based on projects and derived some patterns. The Internet marketing environment is changing very quickly and what was relevant last year is now rejected. And this article will become outdated after some time, so each tool must be used in a timely manner! Follow our blog, subscribe to our newsletter and you will always be aware of effective technologies for increasing conversion.

One example of a bygone era is the timer form. In this form it is hopelessly outdated and when the visitor sees the watch he says: “Yes, yes, yes, 6 days until the end of the promotion, and then there will be new promotion. Only for me and only now"

She doesn't inspire any confidence. And you need to understand that when searching for services, a person does not rush to the first site he comes across to order. He opens 5-7 pages and leaves a request for those projects that inspire confidence and a sense of professionalism. And not those who consider him an idiot.

It is worth noting that deadlines are very effective way closing the client on a deal, but as we have already said, provided that there is trust in it. The widespread use of timers on landing pages killed this feeling in people, although at the beginning of their appearance they actually increased conversion. But at the same time, deadlines are effectively used in e-mail marketing, trainings, etc. On the website, instead of a timer, it is better to use a counter not by time, but by the number of places or goods.

Let's look at what basic forms of capture exist and how best to use them:

1. Contact form

Option A. Form with output in a modal window.

Option B. Open form.

If we compare the two designs, testing has proven that the lower form is more convertible than the upper one. It does its job well due to its simplicity. Even grandpa will figure out how and where to enter the phone number.

Tricks of reception

Conversion varies not only depending on whether it is open or modal form capture, but also from headers and buttons. It is very important to conduct A/B testing. This is when a script is installed on the site and 50% of users see a headline with option A, 50% see a headline with option B. And then analytics shows us which of them had more applications. This will no longer be a person’s opinion, but a fait accompli, proven by a test.

Regarding headers, 4U technology still works and increases form fillability. If you are unfamiliar with it, then read the articles, it is not new, and we will give examples:

Option A. Without 4U header

Option B. With 4U header.

Of course, in option B the conversion will be higher, because the headline describes more benefits that the client will receive. And also because there is a form of capture here, but in option A there is none. The conversion, as we wrote, can be increased if in this example you use an open form, and not in a modal window. But sometimes this is justified, as in the example with the CASCO calculation, because... For this, it is not enough to take only a phone number, you need more input data and it is better to pack it in a modal window. As with most rules, there are exceptions.

One of the best places to place a form is on the first screen. If a person does not immediately see an intriguing offer and a capture form, he can close the site, and this means a lost lead and a deterioration in statistics in terms of refusals (when a person closes it within 14 seconds after entering the site - this is considered a refusal and search engines underestimate such sites).

About the number of fields in capture forms

As mentioned above, sometimes there is a need to request completion of several fields. And this is justified.

But you also have to see when a site requires you to fill out unreasonably a large number of fields than actually needed. For example, when you click on the “Order” button, this window pops up!

And it’s not clear why I have to fill in so many fields. And also captcha. In one of the studies, only one field was removed from filling out the application (it was tracked that it was this field that stopped filling out the form further, although it was important) and even such a simple action allowed to increase the conversion. This form can be shortened by at least two times, which will not interfere with further interaction with the client. It is not necessary to shorten all fields and ask only for phone number. Testing will show which of them affect conversion and should be kept.

And yet there are areas where it is vital that a person fill out a lot of fields. For example, when calculating CASCO. Perfect solution A question with a large number of fields was implemented by Tinkov.

On the website, when calculating CASCO insurance, only three fields for entering information and a discount offer appear. Nothing scares you and the person begins to fill out, choosing “car make”. Immediately after this, another field “car model” appears next to it, which was not previously visible and for choosing which you will receive another 1% discount. And so on until all the necessary information. I give a standing ovation)

The example is also good because here in a rare field you need to type yourself, selections from the list, radio buttons, date selection, etc. are correctly used.

It is also common on many sites to have a “Clear field” button; there is also no need to leave it, especially when it is easy to confuse the buttons on your phone and you need a very strong motivation to fill everything back out.

What happens after submitting the form?

If you send standard message that we will call you back soon, you act like a common gray mass that does not distinguish you in any way. Why don’t you, after filling out the form, give some useful material to the person or play a short video in which your competitive advantages and examples of work. This will increase the customer's loyalty to your company even before you contact him.

Where does the application go after filling out the form?

By mail? And the manager, a day after the application arrived, calls the client, who no longer remembers when on which site he filled out something.

It is important to understand here that everything is measured not only by conversion on the site. It is very important how the client pushes up afterwards. And if after filling out the form you call back within a minute, he will be surprised at how quickly the service works. You will do it faster than your competitors. You need to close a deal with a client while he is ardent and loyal to cooperation.

How to achieve lightning-fast reactions? The application should be sent not only by email, but first of all by SMS to your phone. It's easy to implement and the effect is stunning. In our practice, after a call from a client, we heard: “Yes, I’ve been leaving requests all day, you’re actually the first one to call me back. I will work with you"

What is written on your button?

On one of the projects in the first version, the inscriptions “Order a call”, “Get a consultation”, “Leave a request” were tested on the button. But the undisputed leader by a wide margin was “Get Price”.

The test was carried out under other equal conditions, this is how changing the button label significantly changes the conversion on the site.

2. Online chats

The next common form of client capture is online chats.

They, like promotion timers, were a novelty and a tool for increasing conversion. And they still are effective tool, with one BUT!

Efficiency directly depends on how quickly the answer comes. Sometimes it’s really more convenient for me to write in chat than to call. But in very rare cases the manager answers me. Those. The main problem is not the chat itself, but the human factor, because the manager’s waiting time for a response is about 30 seconds. And then the user runs headlong into other tabs and won’t remember about you.

And a manager cannot be online all the time, because there are meetings, lunches, toilets, and turnover. It also cannot communicate with 5 users at the same time, the quality will suffer.

Chats are constantly changing and incorporating new functions.

If you remember the history of instant messengers, in the beginning there was icq and it seemed very convenient. Now no one remembers him and WhatsApp and Telegram are trending. Likewise, online chats will transform, become more convenient, and until death threatens them.

Chats have already been transformed, which automatically respond to any user with a standard phrase, and then write that it would be better to consult by phone and a form pops up for entering only a number. There are also chats that show what a person is doing on the site in video mode, and which social network he came from. And this is already a combination with other forms of capture.

3. Social Hunter

Social Hunter is a script that catches a profile in in social networks. You are looking at a product on the website, various reasons you close the site, and then within an hour they write to you on VKontakte, but you were on our site and didn’t buy, maybe they can tell you something. It can be used as an analytical tool, but as a sales tool it is more a form of aggressive marketing. You can use it very carefully, but do not write to everyone. And this should definitely be determined not by a typical secretary-manager, but by an analyst. Besides search engines They don’t have a very positive attitude towards such scripts and by using them you risk getting sanctions, even a ban.

4. Call back service

It costs more than online chats, the wow effect is gone and you won’t surprise anyone with the service. But at the same time, it has become more familiar to people; we test the form on projects completed by our company and it shows its effectiveness and justifies the costs.

5. Phone number

Many of our projects began to show dominance mobile traffic over desktop ones back in 2016. And you don’t always want to type something from your phone, but you want more mobility - click on a number and have the call go straight away.

Now almost everyone has learned to put their phones in a prominent place in their header. But the designer's desire to make beautiful room phone, giving it different styles- completely prevents the phone from dialing correct number. I won't go into technical details, why this happens, but it’s a fact.

Given that more and more people are accessing websites from phones, care must be taken to mobile version or Adaptive layout made the site easy to use and made it possible to make a call by clicking on a number.

Results

It is necessary to combine all possible variations of grip forms to achieve maximum result. We do not recommend doing this based on the conclusions of your imagination; you need to test different options.

You can give at least 100 more ways to increase conversion on a website, but you should move on to them when the main forms are in order. Trying to improve everything at once, people often achieve nothing. You need to go from the most important thing to the main thing, showing patience and persistence - to go to the result.