An ideal order form for an online store. Creating a feedback form - php markup. Error messages on the form are visible and clear

One of the most popular functions on the site is the application or order form, the data from which is sent by email to the site owner. As a rule, such forms are simple and consist of two or three fields for data entry. How to create such an order form? This requires the use of language HTML markup and language PHP programming.

The HTML markup language itself is simple; you just need to figure out how and where to put certain tags. With the PHP programming language, things are a little more complicated.

It’s not difficult for a programmer to create such a form, but HTML to the layout designer Some actions may seem difficult.

Create a data submission form in html

The first line will be as follows

This is a very important element of the form. In it we indicate how the data will be transferred and to which file. IN in this case everything is transmitted POST method file send.php. The program in this file must accordingly receive the data, it will be contained in the post array, and send it to specified email address.

Let's get back to form. The second line will contain a field for entering your full name. Has the following code:

The form type is text, that is, the user will be able to enter or copy text here from the keyboard. The name parameter contains the name of the form. In this case, it is fio; it is under this name that everything that the user entered in this field will be transmitted. The placeholder parameter specifies what will be written in this field as an explanation.

Next line:

Here, almost everything is the same, but the name for the field is email, and the explanation is that the user enters his email address in this form.

The next line will be the "send" button:

AND last line the form will have a tag

Now let's put everything together.





Now let's make the fields in the form mandatory. We have the following code:





Create a file that accepts data from the HTML form

This will be a file called send.php

In the file, at the first stage, you need to accept data from the post array. To do this, we create two variables:

$fio = $_POST["fio"];
$email = $_POST["email"];

Variable names in PHP are preceded by a $ sign and a semicolon is placed at the end of each line. $_POST is an array into which data from the form is sent. In the html form, the sending method is specified as method="post". Thus, two variables are taken from html forms. To protect your site, you need to pass these variables through several filters - php functions.

The first function will convert all the characters that the user will try to add to the form:

In this case, new variables are not created in php, but existing ones are used. What the filter will do is transform the character "<" в "<". Также он поступить с другими символами, встречающимися в html коде.

The second function decodes the url if the user tries to add it to the form.

$fio = urldecode($fio);
$email = urldecode($email);

With the third function we will remove spaces from the beginning and end of the line, if any:

$fio = trim($fio);
$email = trim($email);

There are other functions that allow you to filter php variables. Their use depends on how concerned you are that an attacker will try to add program code to this html email submission form.

Validation of data transferred from HTML form to PHP file

In order to check whether this code works and whether data is being transferred, you can simply display it on the screen using the echo function:

echo $fio;
echo "
";
echo $fio;

The second line here is needed to separate the output of php variables into different lines.

Sending received data from an HTML form to email using PHP

To send data by email, you need to use the mail function in PHP.

mail("to which address to send", "subject of the letter", "Message (body of the letter)","From: from which email the letter is sent \r\n");

For example, you need to send data to the email of the site owner or manager [email protected].

The subject of the letter should be clear, and the message of the letter should contain what the user specified in the HTML form.

mail(" [email protected]", "Application from the site", "Full name:".$fio.". E-mail: ".$email ,"From: [email protected]\r\n");

It is necessary to add a condition that will check whether the form was sent using PHP to the specified email address.

if (mail(" [email protected]", "Order from the site", "Full name:".$fio.". E-mail: ".$email ,"From: [email protected]\r\n"))
{
echo "message sent successfully";
) else (
}

Thus, the program code of the send.php file, which will send the HTML form data to the mail, will look like this:

$fio = $_POST["fio"];
$email = $_POST["email"];
$fio = htmlspecialchars($fio);
$email = htmlspecialchars($email);
$fio = urldecode($fio);
$email = urldecode($email);
$fio = trim($fio);
$email = trim($email);
//echo $fio;
//echo "
";
//echo $email;
if (mail(" [email protected]", "Application from the site", "Full name:".$fio.". E-mail: ".$email ,"From: [email protected]\r\n"))
( echo "message sent successfully";
) else (
echo "errors occurred while sending the message";
}?>

Three lines to check if the data is being transferred to the file are commented out. If necessary, they can be removed, since they were needed only for debugging.

We place the HTML and PHP code for submitting the form in one file

In the comments to this article, many people ask the question of how to make sure that both the HTML form and the PHP code for sending data to email are in one file, and not two.

To implement this work, you need to place the HTML code of the form in the send.php file and add a condition that will check for the presence of variables in the POST array (this array is sent from the form). That is, if the variables in the array do not exist, then you need to show the user the form. Otherwise, you need to receive data from the array and send it to the recipient.

Let's see how to change the PHP code in the send.php file:



Application form from the site


//check if variables exist in the POST array
if(!isset($_POST["fio"]) and !isset($_POST["email"]))(
?>





) else (
//show the form
$fio = $_POST["fio"];
$email = $_POST["email"];
$fio = htmlspecialchars($fio);
$email = htmlspecialchars($email);
$fio = urldecode($fio);
$email = urldecode($email);
$fio = trim($fio);
$email = trim($email);
if (mail(" [email protected]", "Application from the site", "Full name:".$fio.". E-mail: ".$email ,"From: [email protected]\r\n"))(
echo "Message sent successfully";
) else (
echo "Errors occurred while sending the message";
}
}
?>

We check the existence of a variable in the POST array with the isset() PHP function. An exclamation point before this function in a condition means negation. That is, if the variable does not exist, then we need to show our form. If I hadn’t put the exclamation point, the condition would literally mean “if exists, then show the form.” And this is wrong in our case. Naturally, you can rename it to index.php. If you rename the file, do not forget to rename the file name in the line

. The form should link to the same page, for example index.php. I added the page title to the code.

Common errors that occur when submitting a PHP form from a website

The first, probably the most popular mistake, is when you see a blank white page with no messages. This means that you made an error in the page code. You need to enable display of all errors in PHP and then you will see where the error was made. Add to the code:

ini_set("display_errors","On");
error_reporting("E_ALL");

The send.php file must only be run on the server, otherwise the code simply will not work. It is advisable that this is not a local server, since it is not always configured to send data to an external mail server. If you run the code not on the server, then the PHP code will be displayed directly on the page.

Thus, for correct operation, I recommend placing the send.php file on the site hosting. As a rule, everything is already configured there.

Another common mistake is when the “Message sent successfully” notification appears, but the letter does not arrive in the mail. In this case, you need to carefully check the line:

if (mail(" [email protected]", "Order from the site", "Full name:".$fio.". E-mail: ".$email ,"From: [email protected]\r\n"))

Instead of [email protected] there must be an email address to which the letter should be sent, but instead[email protected] must be an existing email for this site. For example, for a website this will be . Only in this case a letter with the data from the form will be sent.

Nowadays, on every website you can find a feedback form, be it a commercial or informational site. Unfortunately, most website owners make forms inconvenient to fill out or display them too intrusively, spoiling the impression of the company as a whole. Let's figure out where and how to correctly request user data to make it easy to interact with the site.

Main types of forms for the site

Let's look at the features of each type so you can choose the ones that suit your site or use the list as a checklist so you don't forget to place them all.

  1. Callback order form

    We recommend that all commercial sites use this form. The ideal placement is the site header, next to the phone number. Moreover, you should not show the input fields right away; it is better to hide them under the “Order a call” button and display them after the click. It is not necessary to make the button bright; in the form of a link it will be just as clearly visible:

    In the expanded version, two fields “Phone” and “Name” are enough, and only the first one is required to be filled in:

    You can leave only one field for entering a phone number, which is also a completely working option, although you will have to first ask each client for their name when calling:

    Also, a call back form is useful in the footer of the site; place it next to the contact information. This way, after viewing the page, customers won’t have to go back to the beginning.

  2. Consultation form

    “Rescuer form” for those users of your site who could not find the necessary information on the page, but want to place an order. It is better to place it in one of two options: either collapsed in the lower right corner of the screen, or expanded - at the bottom of the Home page and on the pages of the product or service catalog.

    First placement option (example from the Tango and Cash website):

    Second placement option (example from the Okna-dpa website):

    This form is often replaced by an online consultant, which is basically the same thing, but you need to understand that you will need an employee who will support it.

    This form should also be placed on the contact page. Be sure to add a comment field so that users can tell you what issue they are contacting the company about.

    Feedback form on the YouDesign contact page:

  3. Service order form

    Obviously, the form should be placed on the service page, preferably at the end of the page, after a description of the work, results and prices, in order to direct the user to fill out an application after reading the information. You can display form fields immediately, expand them after clicking a button, or redirect them to your personal account to the appropriate page.

    Often, service pages include a form for ordering a call back or consultation, which is not entirely correct. The client has already selected a service page, perhaps even a tariff, and is shown a general form with no selected information. It's disorienting. We recommend specifying the following fields:

    • “Type of service” or “Tariff” - it is better to fill out this field automatically or place it as text at the beginning of the form
    • "Name"
    • “Phone” - make this field mandatory
    • “Email” - to duplicate order information to the client
    • “Comment” - perhaps the client has clarifications

    Each business is individual and you may need additional parameters, but we recommend placing no more than 5-7 fields so as not to alienate the client. If you still cannot avoid a large number of fields, then visually group them by topic to reduce the number of errors when entering information. An example of a simple order form on the Stroya company website:

  4. Product order form

    It is better to show this form to the user on the cart page when he has decided on the choice of products. If you have a personal account on your website, you will have to work out two forms: for authorized and unauthorized users.

    For new clients. Don't force them to register to return to the order. This will only push them away. All you need to do is add a few fields with contact information. Ask for name, phone number, email and delivery address. This way the user will not have to perform unnecessary actions, and you will get a new client. By email you can do automatic registration and send the client a password by email.

    An example of placing fields in a form for new users on Ozon:

    For old clients. Those who order again have already provided all contact information, so in addition to the list of goods, the form should only contain options for selecting delivery and payment. And if you use promotional codes, then add a field for entering them, but nothing more. There is no need to re-ask for client contacts.

    An order form for Wildberries, which even displays the previous choice of delivery and payment method (but leaves the option to change them):

    Many people split entering the delivery address into several fields, separately requesting the zip code, city name, street name, house number, etc., which looks very cumbersome. Anti-example from the Angorochka website:

    Users make mistakes even in such forms, so it is better to leave one general address entry field and check the correctness of the data with new clients by phone.

    Required fields for entry should be contact information, delivery address, choice of delivery method and payment. The form can be displayed in stages, but it is not forbidden to show all the fields at once. The main thing is to visually divide them into semantic groups.

  5. Registration form

    We recommend separating it from the authorization form, because many new clients are confused by the “Login” button. Two links side by side will not take up much space and will reduce search time. Also, the form should always be visible, so it is better to place it in the header of the site. The most common option is in the upper right corner as a link (example from Aqua-Viva):

    In general, the form should contain the same fields as the order form (and the required input fields are the same), so we advise you not to overload it with unnecessary items and create a common field for the address. Remember that registration is an additional step for the client, so don’t put him off with a long list. You can ask for a date of birth in order to send congratulations and discounts, but forcing the client to come up with a nickname or indicate an additional phone number or address is unnecessary.

    It’s a great practice to offer clients to register via social networks. This way, the client will not have to come up with a password and, in general, registration will be faster. An example of using this feature on the Asos website:

    This online store is foreign, so the popular social networks of those countries are shown. For the Russian-speaking audience, it is better to remove Twitter and add buttons for VKontakte, Odnoklassniki.

    A personal account is best suited for online stores to store customer contact information, order history, information about discounts and bonuses. Also suitable for subscription services, for example, if you provide access to watch movies in the original.

    At the same time, if you sell industrial goods, when each order is accompanied by a call from a specialist, then there is no point in either a shopping cart or a registration form. Websites that provide services, for example, design or renovation of apartments, also most often do not need a personal account.

  6. Authorization form

    Password recovery is most commonly done by email, sending the client a link to a form for entering a new password. Generating an automatic “temporary” password forces the user to look for a password change form himself, which is inconvenient and only unnecessary hassles for the client. It's better not to allow this to happen.

  7. Newsletter subscription form

    We have already written more than once about the benefits of email marketing and given advice on its development, for example, this article and its second part contain the most detailed information. Therefore, the subscription form is a must-have if you want to use this customer acquisition channel.

    The form should be placed on the Home page so that the user can immediately see that there is such an opportunity. It’s better after all the basic information, at the bottom of the page (example from Lavkalavka):

    If the site has a blog, and in letters, in addition to goods and services, you announce new articles, then you can add a form on the general page of the section, for example, to the right of the articles, as Vkusnosti by Mado did:

    The subscription form, of course, needs an “Email” field, and you can also ask for a name to make the emails more personalized.

Now that we have decided which forms need to be placed and where on the site, let’s figure out how to make them more convenient to fill out.

  1. Forms in pop-up (modal) windows. They should be displayed only after the user clicks on the desired link or button. No “pop-ups” when opening the Home page or when customers try to leave the site. An online consultant should also not “pop up”, offering to start a chat. Such things irritate and repel users. Anti-example from Delicat-Servis (the guys have now fixed this problem, and the form opens only after clicking):
  2. Using animation. Let's highlight this as a separate item, since this is a common problem. The form should not blink, jump across the screen, or float into the middle of the screen to attract attention. Such animation prevents the user from studying the main content of the page and becomes annoying when viewing for a long time. Make the buttons on the forms contrasting, and then the client will definitely not miss them.
  3. Name of the form. Always sign forms so the user can see what they are filling out. It is correct when the name of the tariff or service is written in the title, but if the title is too long, then add this information in the form of text below, as Fullhousedesign did:

  4. Name of the form fields. It is best to place the field name above it, and indicate an example of filling inside the field. If you place the name inside the field, it will be erased when filled in, which is not entirely convenient. It’s also a bad option when the titles are on the left and the margins on the right; the eyes have to correlate the columns with each other (a bad example of a form on the website of the Moscow House of Books):

    A convenient option for arranging signatures and tips (on the website Xarakiri.ru):

  5. Required fields. Always mark * required fields. Above, when describing the forms, we indicated which ones to choose. The exception is forms with one field - and it is clear that it is required. An example of highlighting required fields from Izto:
  6. Errors in forms. Users often make mistakes and don't notice, so we recommend adding input checks for contact information and required fields. It is better to display error messages as text next to the corresponding field. They should not disappear or overlap input fields. You can highlight the field with a red frame, but the message must also be present. Example of clear error messages from Aristo:
  7. Confirmation of sending data. After the client has filled out all the fields and clicked the submit button, you need to display a prominent confirmation message so that they do not try to fill out the form again. You can use modal windows or, if the form is already in a pop-up window, place the appropriate text under the submit button. The message should also indicate exactly when the specialists will contact the client or what he should do next. A simple “Thank you, data sent” is not enough. An example of a detailed shipment confirmation from the Cable Systems company:

  8. Using captcha. We do not recommend using robot checks in forms, as it forces users to take unnecessary actions and may even cause them to leave the site. Use security methods that are invisible to users, for example, track the form filling time on the server (if it is too short, then the form is being filled out by a robot), add hidden fields (that only a robot can fill out), use anti-spam services for verification, etc. . As a last resort, you can use Google's input validation:

  9. Saving data. Perhaps the client accidentally closed the form, there was an error or a reboot, and so as not to have to enter the data again, save it before sending. This advice especially applies to long forms.
  10. Reset button. Never place it next to the submit button so that the user does not accidentally click on it. Place it in another part of the form or remove it altogether. An example of poor button placement on the Avarit website:

  11. Law on Personal Data. To avoid fines for collecting personal data from clients, it is necessary to prepare regulatory documents and write about it on the website.

Results

Each form must be approached individually, so it is impossible to describe all cases in one article. The main principle that should be followed is a minimum of fields. It is better to call the client and clarify the details verbally than to force him to fill out long forms. Perhaps the client has some additional questions, then with a call you will solve two problems.

We hope that our recommendations will help you create convenient forms on your website and collect more orders. For those who want a personal analysis of the usability of forms, we recommend using this service.

P.S. If you need information on how to create forms (the technical side of the issue), you need recommendations on code, convenient constructors, etc., then write questions in the comments, and we’ll make a separate article on this topic.

The profitability of any online store primarily depends on how comfortable the conditions are created on the site. Any buyer wants to find what they are looking for as quickly as possible and at the same time spend a minimum of effort. Statistically, most customers don't like the checkout process. That is why, if you want to increase the number of sales, you need to simplify the ordering system on your website.

In online stores, in order to buy a product, the client must fill out order form, which is installed on the site using special scripts, modules or plugins. When creating an order form, adhere to the following rules.

1. Simplicity is the key to effectiveness.

As practice shows, if a buyer encounters any problem when placing an order, he most often leaves the resource, fearing to encounter this problem again. If your order form has a few simple steps and is easy to fill out, you are guaranteed consistent sales. It is worth noting that the main thing is not to overdo it with simplicity; always take into account the specifics of your project. The order form on the website must collect the minimum necessary information to complete the order.

2. Use clear examples.

A person always needs a clear example, especially when filling out an order form. Try to create a web form that even a complete beginner can fill out.

3. In total, show the progress of the order to your client.

The client should always see how many stages he has completed and how many still remain to be completed. is of particular importance from a psychological point of view. The classic ordering process takes place in 3-4 stages. The first stage is when the user creates an order list. The second stage - the buyer enters his contact information. The third stage is information verification. The fourth stage is the transaction.

4. Dispel all doubts of clients.

In our country, the law on the protection of personal data has recently come into force, but many users do not know about it. In the html order form, be sure to indicate the non-disclosure of personal information. This will significantly increase the trust of your customers.

5. No! registrations.

Almost all buyers have a negative attitude towards any registration, due to the fact that this process can take a long time (in their opinion). Therefore, even if you register on your website without confirming your profile, delete it or make the ordering process available to unregistered users. It is worth noting that in some cases registration, on the contrary, is necessary. For example, when you intend to create a quality customer base. In this case, register on the site through social networks. It's very simple.

All of the above rules and tips undoubtedly increase the efficiency of the order form on the site, but you should always remember that a lot depends on the specifics of the topic. Only by trial and error can you really increase website conversion.

Websites selling any goods are often made using specialized systems (cms). Full-fledged online stores must have a fully functional shopping cart and the ability to pay for purchases remotely. But what to do if the range of your products is not large enough to open an entire store. What if you are selling your book, training, or some unique technique? Even if you have an online store with full automation, the “Buy in a few clicks” or “Order in 5 seconds” button will be very useful.

Conducted studies show that when using the possibility of express orders, conversion increases up to +56%. If we consider the classic ordering process, the number of failures is about 7%. When using a 1-click order, the number of refusals reached 20% (every 5th order contained “fake” customer data). Despite this, there were a majority of express orders. This means that if this function is used correctly, the number of sales can increase significantly.

Here's how the conversion value changed in our experimental stores over the course of a month at each stage. In the beginning there was only one button “Add to cart”. In the first experiment, an express purchase link was added. The results were amazing. Then, in the second experiment, we decided to place the 1-click purchase in the main button, and put the add to cart in the link. The conversion was higher than the original one, but still the first experiment turned out to be more productive. This is what we recommend to our clients.

  • WIX

Step 1. Designing an express order form

Let's look at the ready-made one-click order forms from the examples in the designer.

Standard form for ordering from the website. A button or link to it can be placed next to the “Add to cart” button, or used separately. The name of the product will be sent in the hidden (invisible) field of the form. In this example, the product field was made visible, so you can follow the field changes. In designer templates, the hidden field for products has the identifier product . In order for this field to be filled in automatically depending on which button/link is clicked, you need to add the pseudo-attribute data-product="Product Name" to the link or button.

Buy iPhone 5S Buy Samsung S5 Buy HTC Desire

An expanded form with additional fields will allow you to more accurately specify the size and delivery method. You can add fields or remove unnecessary ones, or change their purpose. For example, instead of size, you can specify color, etc. This type of form is only suitable if all products have the same properties (delivery, size). Or make a separate form with its own properties for each group of products. The extended type form will be convenient for sites that sell courses, techniques, etc.