HTML Feedback Form

This is one of the ways site visitors interact with managers or the owner of the resource.

It can be used to collect initial information about the desire of visitors to order certain services or goods. It can be used to collect feedback, ideas, various suggestions and any other information.

The algorithm of steps for creating a feedback form for the site:  

  1. The HTML code is the framework of the form;
  2. PHP handler - performs data reception and processing on the server side;
  3. CSS styles – for appearance design;
  4. The AJAX function is to send data to the handler without reloading the page.

HTML structure

<div class="main-content">
	<form class="obratnuj-zvonok" autocomplete="off" action='email.php' method='post'>
		< div class = "form-zvonok" > 
			<div>
				<label>Name<span>*</span></label>
				< input type = 'text' name = 'username' required >< /div >
			<div>
				<label>Phone number(with code)<span>*</span></label>
				<input type='text' name='usernumber' required></div>
			<div>
				<label>Message</label>
				<input type='text' name='question'>
			</div>
			< input class = "bot-send-mail" type = 'submit' value = 'Send a request'>
		</div>
	</form>
</div>

The HTML structure is a framework for a feedback form in which input fields are created, which of them are required to be filled in, and captions to them are indicated. 
CSS styles are responsible for the appearance of the form and the display of data.

The form itself is located between the <form></form> tags. 
Classes are assigned to tags for ease of reference when implementing display via CSS styles.
The <form> tag has two required attributes: 

  • action — a link to a script, usually PHP, that will process the data entered into the form.
  • method — method of sending data to the server (GET or POST).

The autocomplete="off" attribute is responsible for autofill of the form, which leaves/resets all entered data when re—entering the page.

PHP handler

An example of a simple script

<?php
$to="[email protected]";
  $subject="Subject of the message";  
  $message = "Your name: ".$_POST['name']." < br > ";   
  $message .= "Phone number: ".$_POST['phone']."<br>"; 
  $message .= "Message: ".$_POST['message']."<br>";
  $headers="Content-type: text/plain; charset=utf-8 \r\n";  
  mail($to,$subject,$message,$headers);
?>

$to [email protected] – the mailbox to which the message will be sent is specified.
$subject — the subject of the message is shown by mail services when viewing the message lists. 
$message — collects the entered data and writes it to a variable. 
$headers — the header of the letter, it indicates the type of letter, as well as the encoding, from whom the letter was delivered and to which email to send the response.

Formatting using CSS

CSS styles for the design of the feedback form

.obratnuj-zvonok{
	width:100%;
	max-width:350px;
}
.form-zvonok{
	width:100%;
	display:flex;
	flex-direction:column;
	padding:0 20px;
	box-sizing:border-box;
}
.form-zvonok div{
	padding:15px 0;
}
.bot-send-mail{
	box-sizing:border-box;
	width:100%;
}
.form-zvonok label,.form-zvonok input{
display:block;
width:100%;
box-sizing:border-box;
}
.form-zvonok label{
	margin-bottom:5px;
	font-weight:bold;
}
.form-zvonok input{
	padding:10px 15px;
	margin-top:10px;
}
.form-zvonok label span{
	color:red;
}
.form-zvonok .bot-send-mail{
	padding:15px;
	margin-top:10px;
background:none;
border:none;
text-transform:uppercase;
color:#fff;
	font-weight:bold;
	background-color:#009b97;
	cursor:pointer;
	border:3px #009b97 solid;
	border-radius:5px;
}
.form-zvonok .bot-send-mail:hover{
	color:#009b97;
	background-color:#fff;
}

Form view after applying styles

The necessary elements of the feedback form were given classes, for which styles were assigned using CSS.

Ajax

Ajax-the technology helps to increase the performance of your site. This is due to the fact that the user does not overload the entire page when it is necessary to update only some elements/parts of your site.

The simplest combination is PHP + Ajax. To submit the form without reloading, you will additionally need:
Ajax-The request is a JavaScript function that is used to asynchronously send the entered data to the handler
jQuery is a library for working with JavaScript.

Examples of ready-made feedback forms.

from simple to amazing

The form is for those who wanted to write their own, but do not know where to start, here is an almost ready-made example and nothing superfluous.

HTML: 

 <form method="POST" id="feedback-form">
    <input type="text" name="nameFF" required placeholder="Имя" x-autocompletetype="name">
    <input type="email" name="contactFF" required placeholder="E-mail" x-autocompletetype="email">
    <textarea name="messageFF" required rows="5"></textarea>
    <input type="submit" value="to send">
  </form>
CSS:

form {
	width:300px;
}
form input, form textarea {
	width:100%;
}

Feedback form with field animation effects

To display the text correctly, place the code below between the tags <head>.

 <link rel="stylesheet" type="text/css" media="all" href="http://fonts.googleapis.com/css?family=Skranji:400,700|Oxygen:400,700">
HTML:

<div id="w">
    <h1>Write a letter !</h1>
    <form id="contactform" name="contact" method="post" action="#">
      <p class="note"><span class="req">*</span> Fields with an asterisk are required</p>
      <div class="row">
        <label for="name">your name <span class="req">*</span></label>
        <input type="text" name="name" id="name" class="txt" tabindex="1" placeholder="Стив Джобс" required>
      </div>
	  
      <div class="row">
        <label for="email">E-mail Address<span class="req">*</span></label>
        <input type="email" name="email" id="email" class="txt" tabindex="2" placeholder="[email protected]" required>
      </div>
      
      <div class="row">
        <label for="subject">Тема <span class="req">*</span></label>
        <input type="text" name="subject" id="subject" class="txt" tabindex="3" placeholder="The subject of the letter" required>
      </div>
      
      <div class="row">
        <label for="message">Message<span class="req">*</span></label>
        <textarea name="message" id="message" class="txtarea" tabindex="4" required></textarea>
      </div>
      
      <div class="center">
        <input type="submit" id="submitbtn" name="submitbtn" tabindex="5" value="send a message">
      </div>
    </form>
  </div>
CSS:

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
  margin:0;
  padding:0;
  border:0;
  font-size:100%;
  font:inherit;
  vertical-align:baseline;
  outline:none;
  -webkit-font-smoothing:antialiased;
  -webkit-text-size-adjust:100%;
  -ms-text-size-adjust:100%;
  -webkit-box-sizing:border-box;
  -moz-box-sizing:border-box;
  box-sizing:border-box;
}
html{ height:101%; }
body{ 
  font-family:'Oxygen', Arial, Helvetica, sans-serif; 
  font-size:62.5%; 
  line-height:1; 
  padding-bottom:85px;
  background:#b1eeee;
}

::selection{ background:#d2bef5; }
::-moz-selection{ background:#d2bef5; }
::-webkit-selection{ background:#d2bef5; }

br{display:block; line-height:2.2em;} 

article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section{display:block;}
ol, ul{list-style:none;}

blockquote, q{quotes:none;}
blockquote:before, blockquote:after, q:before, q:after {content:“ ”; content:none;}
strong{font-weight:bold;} 

table { border-collapse: collapse; border-spacing: 0; }
img { border: 0; max-width: 100%; }

h1 {
  font-family: 'Skranji', 'Trebuchet MS', sans-serif;
  font-weight: bold;
  font-size: 3.75em;
  line-height: 1.7em;
  margin-bottom: 7px;
  color: #5b5463;
  text-shadow: 0 2px white, 1px 3px #666; 
  text-transform: uppercase;
  text-align: center;
  border-bottom: 1px solid #bbb;
}



/* positioning */
#w { 
  display: block;
  width: 660px;
  margin: 0 auto;
  margin-top: 25px;
  padding: 35px 15px;
  background: #fff;
  -webkit-border-radius: 7px;
  -moz-border-radius: 7px;
  border-radius: 7px;
  -webkit-box-shadow: 2px 3px 4px -2px rgba(0,0,0,0.55);
  -moz-box-shadow: 2px 3px 4px -2px rgba(0,0,0,0.55);
  box-shadow: 2px 3px 4px -2px rgba(0,0,0,0.55);
}



/* form styles */
form .row { 
  display: block;
  padding: 7px 8px;
  margin-bottom: 7px;
}
form .row:hover {
  background: #f1f7fa;
}

form label {
  display: inline-block;
  font-size: 1.2em;
  font-weight: bold;
  width: 120px;
  padding: 6px 0;
  color: #464646;
  vertical-align: top;
}
form .req { color: #ca5354; }

form .note { 
  font-size: 1.2em;
  line-height: 1.33em;
  font-weight: normal;
  padding: 2px 7px;
  margin-bottom: 10px;
}

form input:focus, form textarea:focus { outline: none; }

/* placeholder styles*/
::-webkit-input-placeholder { color: #aaafbd; font-style: italic; } /* WebKit */
:-moz-placeholder { color: #aaafbd; font-style: italic; }           /* Mozilla Firefox 4 to 18 */
::-moz-placeholder { color: #aaafbd; font-style: italic; }          /* Mozilla Firefox 19+ */ 
:-ms-input-placeholder { color: #aaafbd; font-style: italic; }      /* Internet Explorer 10+ */

form .txt {
  display: inline-block;
  padding: 8px 9px;
  padding-right: 30px;
  width: 240px;
  font-family: 'Oxygen', sans-serif;
  font-size: 1.35em;
  font-weight: normal;
  color: #898989;
  background-color: #f0f0f0;
  background-position: 110% center;
  background-repeat: no-repeat;
  border: 1px solid #ccc;
  text-shadow: 0 1px 0 rgba(255,255,255,0.75);
  -webkit-box-sizing: content-box;
  -moz-box-sizing: content-box;
  box-sizing: content-box;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  border-radius: 3px;
  -webkit-box-shadow: 0 1px 2px rgba(25, 25, 25, 0.25) inset, -1px 1px #fff;
  -moz-box-shadow: 0 1px 2px rgba(25, 25, 25, 0.25) inset, -1px 1px #fff;
  box-shadow: 0 1px 2px rgba(25, 25, 25, 0.25) inset, -1px 1px #fff;
  -webkit-transition: all 0.3s linear;
  -moz-transition: all 0.3s linear;
  transition: all 0.3s linear;
}

form .txtarea {
  display: inline-block;
  padding: 8px 11px;
  padding-right: 30px;
  width: 320px;
  height: 120px;
  font-family: 'Oxygen', sans-serif;
  font-size: 1.35em;
  font-weight: normal;
  color: #898989;
  background-color: #f0f0f0;
  background-position: 110% 4%;
  background-repeat: no-repeat;
  border: 1px solid #ccc;
  text-shadow: 0 1px 0 rgba(255,255,255,0.75);
  -webkit-box-sizing: content-box;
  -moz-box-sizing: content-box;
  box-sizing: content-box;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  border-radius: 3px;
  -webkit-box-shadow: 0 1px 4px -1px #a8a8a8 inset;
  -moz-box-shadow: 0 1px 4px -1px #a8a8a8 inset;
  box-shadow: 0 1px 4px -1px #a8a8a8 inset;
  -webkit-transition: all 0.3s linear;
  -moz-transition: all 0.3s linear;
  transition: all 0.3s linear;
}

form .txt:focus, form .txtarea:focus {
  width: 300px;
  color: #545454;
  background-color: #fff;
  background-position: 110% center;
  background-repeat: no-repeat;
  border-color: #059;
  -webkit-box-shadow: 0 1px 4px -1px #a8a8a8 inset, 0 1px rgba(255, 255, 255, 0.6), 0 0 11px rgba(70, 100, 200, 0.7);
  -moz-box-shadow: 0 1px 4px -1px #a8a8a8 inset, 0 1px rgba(255, 255, 255, 0.6), 0 0 11px rgba(70, 100, 200, 0.7); 
  box-shadow: 0 1px 4px -1px #a8a8a8 inset, 0 1px rgba(255, 255, 255, 0.6), 0 0 11px rgba(70, 100, 200, 0.7); 
}
form .txtarea:focus { 
  width: 375px; 
  background-position: 110% 4%;
}

form .txt:valid {
  background-color: #deecda;
  background-position: 98% center;
  background-repeat: no-repeat;
  color: #7d996e;
  border: 1px solid #95bc7d;
}
form .txtarea:valid {
  background-color: #deecda;
  background-position: 98% 4%;
  background-repeat: no-repeat;
  color: #7d996e;
  border: 1px solid #95bc7d;
}
form .txt:focus:valid, form .txtarea:focus:valid {
  -webkit-box-shadow: 0 1px 4px -1px #a8a8a8 inset, 0 1px rgba(255, 255, 255, 0.6), 0 0 11px rgba(120, 200, 70, 0.7);
  -moz-box-shadow: 0 1px 4px -1px #a8a8a8 inset, 0 1px rgba(255, 255, 255, 0.6), 0 0 11px rgba(120, 200, 70, 0.7); 
  box-shadow: 0 1px 4px -1px #a8a8a8 inset, 0 1px rgba(255, 255, 255, 0.6), 0 0 11px rgba(120, 200, 70, 0.7);  
}

form .center {
  margin-top: 25px;
  text-align: center;
}

#submitbtn{
height:70px;
width:275px;
padding:0;
cursor:pointer;
font-family:'Oxygen', Arial, sans-serif;
font-size:2.0em;
color:#0a528f;
text-shadow:1px 1px 0 rgba(255,255,255,0.65);
border-width:1px;
border-style:solid;
border-color:#317bd6 #3784e3 #2d74d5 #3774e3;
-webkit-border-radius:3px;
-moz-border-radius:3px;
border-radius:3px;
background-color:#4581e5;
background-image:-webkit-gradient(linear,left top,left bottom,from(#6faefd),to(#4581e5));
background-image:-webkit-linear-gradient(top,#6faefd,#4581e5);
background-image:-moz-linear-gradient(top,#6faefd,#4581e5);
background-image:-ms-linear-gradient(top,#6faefd,#4581e5);
background-image:-o-linear-gradient(top,#6faefd,#4581e5);
background-image:linear-gradient(top,#6faefd,#4581e5);
-moz-box-shadow:1px 1px 3px rgba(0,0,0,0.4), 0 1px 0 rgba(255, 255, 255, 0.5) inset;
-webkit-box-shadow:1px 1px 3px rgba(0,0,0,0.4), 0 1px 0 rgba(255, 255, 255, 0.5) inset;
box-shadow:1px 1px 3px rgba(0,0,0,0.4), 0 1px 0 rgba(255, 255, 255, 0.5) inset;
-webkit-transition:all 0.3s linear;
-moz-transition:all 0.3s linear;
transition:all 0.3s linear;
}
#submitbtn:hover, #submitbtn:focus{
 -webkit-box-shadow: 0 0 15px rgba(70, 100, 200, 0.9);
 -moz-box-shadow: 0 0 15px rgba(70, 100, 200, 0.9);
 box-shadow: 0 0 15px rgba(70, 100, 200, 0.9);
}

#submitbtn:active {
  -webkit-box-shadow:0 0 15px rgba(70, 100, 200, 0.9), 0 1px 3px rgba(0,0,0,0.4) inset;
  -moz-box-shadow: 0 0 15px rgba(70, 100, 200, 0.9), 0 1px 3px rgba(0,0,0,0.4) inset;
  box-shadow:0 0 15px rgba(70, 100, 200, 0.9), 0 1px 3px rgba(0,0,0,0.4) inset;
}

Using the HTML code of the form from QForm

The QForm service provides an opportunity to view the HTML code of the feedback form, which was created using the constructor.
Using it, we will get a not very beautiful framework, without styles and binding to the backend of the service. The constructor generates a beautiful structured form code, to which you can bind the handler yourself, design the appearance with CSS styles and get a working feedback form. 

Let's create a form with asynchronous data sending (without reloading the page) via AJax and jQuery

First you need to create a form

We switch to the “Constructor” mode and add the necessary fields.

Open the HTML tab, copy the generated code and paste it into the code editor.

After inserting the code, the created form will look like this.

First of all, we connect jQuery — insert a line at the end before the closing tag </head>.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

We are building JavaScript. It can be added together with the HTML code above or uploaded as a separate file without the first or separate line. 

Now we will connect a special PHP script that will be responsible for processing the data entered by the user. It will determine what to forward, where and in what form, after the send message button is pressed. Create a separate file feedback_form.php.

<?php
if(isset($_SERVER['HTTP_X_REQUESTED_WITH']) && !empty($_SERVER['HTTP_X_REQUESTED_WITH']) && strtolower($_SERVER['HTTP_X_REQUESTED_WITH']) == 'xmlhttprequest') //проверка на асинхронность
	{
    if (isset($_POST["name_2"]) && isset($_POST["email"]) ) 
	{ 
    if ($_POST['name_2'] == '') 
    {
        echo 'The Name field is not filled in';
        return; //checking for required fields
     }
    if ($_POST['email'] == '') 
    {
        echo 'The field is not filled in E-mail';
        return;
    } 
    $name = $_POST['name_2'];
    $email = $_POST['email'];
 mail ("your@email", "Application form from the website", "Name:" .$name. "E-mail:" .$email, "From: your@email \r\n");  // we collect the information and send it to the specified email address. don't forget to change both addresses
         echo 'The application has been sent!';
    	return; //returning the message to the user
     }
    }
?>

The result is a jQuery form without reloading the page. After filling in all fields and sending, applications will be sent to the specified email address. All that remains is to style it using CSS.

Setting up and installing the feedback form

We will describe the installation and configuration of one of the above forms (the HTML and CSS code is already given above, so we will not re-paint them).

Install the form in the right place on the site.
In the HTML structure, the elements are given classes and IDs to operate on them.
The <label> tags have the <span class="red">*</span> tag - this means that the field is required (if necessary, you can remove these criteria).

Connecting jQuery

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

Adding attributes to the <form> tag:
autocomplete="off" - disables autofill and when you re-enter the page, all input fields will be reset to zero
onsubmit="call()" - calling a JavaScript event
Building Javascript

<script type="text/javascript">
	function call() {
	  var msg   = $('#contactform).serialize();
       $.ajax({
         type: 'POST',
         url: 'feedback_form.php', //contacting the handler
          data: msg,
        success: function(data) {  //if successful, we output the results in a div "results"
            $('#contactform).remove(); //hiding the form after sending it
            $('#results').html(data); //showing a success message instead
         },
         error:  function(xhr, str){ //the error displays the corresponding message
        alert('An error has occurred: ' + xhr.responseCode);
         }
       });
   }
</script>

Next, we create a separate file called “feedback_form” - it will be responsible for sending and processing the letter.

<?php
if(isset($_SERVER['HTTP_X_REQUESTED_WITH']) && !empty($_SERVER['HTTP_X_REQUESTED_WITH']) && strtolower($_SERVER['HTTP_X_REQUESTED_WITH']) == 'xmlhttprequest') //checking for asynchrony
  {
    if (isset($_POST["name"]) && isset($_POST["email"]) ) 
	{ 
    if ($_POST['name'] == '') 
    {
        echo 'The Name field is not filled in';
        return; //checking for required fields
     }
    if ($_POST['email'] == '') 
    {
        echo 'Не заполнено поле E-mail';
        return;
    }
    $name = $_POST['name'];
    $email = $_POST['email'];
mail("[email protected]", "Application form from the website", "Name: ".$name. "\nE-mail: ".$email ,"From: [email protected] \r\n"); //here we send the application to the post office. Don't forget to change both addresses
         echo 'The application has been sent!';
    	return; //returning the message to the user
     }
    }
?>

After sending the message, applications will be sent to the mail in accordance with the specified requirements.

Link to a detailed article on creating a form manually

It is not entirely advisable to use the manual method of writing code only to debug the feedback form. Making a framework, arranging it and connecting a handler is not all that needs to be done. If you need a cool and beautiful shape, in the future you will need:

  • Asynchronous sending (sending without reloading the page) to reduce the load on the server and not to disorient the user by unnecessarily reloading the page or redirecting;
  • Setting up the hiding of the submitted form;
  • Showing success/failure messages;
  • Validation of fields, field masks;
  • Integration with CRM;
  • Sending the achievement of goals to yandex.metrica and setting up a captcha.

But all this is done in our form builder in just a couple of clicks. With the help of an intuitive interface, you can assemble almost any shape. 

Using the service will give you a wide range of opportunities. Exactly:

Field constructor with drag-n-drop function;

Design Settings;

Creating groups and distributing access rights;

Video widget;

Custom CSS;

Email and messenger notifications;

Internal CRM;

External integrations;

Using captcha.

Let's describe the process of creating a feedback form on QForm and inserting it on the site.

Inserting the Form on the website

Add a website
Create a form
Add fields by dragging or clicking on the "+” icon
Select the design type and display settings
Copy the DIV to install the form and the script to call it
Insert the DIV code into the site location where the form should be generated
Paste the script into the <head> section
Did you like the article? Share it!!