Post
Ask Question

Creating a Feedback Form Using HTML

Introduction

 
During the creation of websites for online classes, shopping, or anything else, you need to attach a feedback form for the purpose of getting the feedback from the customer or user. Those feedbacks help the organisation to improve their services. The fields for the feedback forms vary for the organizations and their services, but there will be a common layout for all those forms, such as first name, last name, mail ID and feedback section. Creating this kind of forms using HTML is not a tedious process. In this article, we will discuss creating a feedback form using HTML for web development.
 

Creating a Feedback Form

 
For creating a feedback form you can open a new HTML code editing page in your IDE. Here, I am using Visual Studio Code for this purpose. You can install the Visual Studio Code by clicking here. I embedded the codes in the single file, but you can link the different files for style sheet, Javascript and PHP work. You can use the source code given below for creating a page:
  1. <!DOCTYPE html>    
  2. <html>    
  3. <head>    
  4. <meta name="viewport" content="width=device-width, initial-scale=1">    
  5. <style>    
  6. * {    
  7.   box-sizing: border-box;    
  8. }    
  9.     
  10. input[type=text], select, textarea {    
  11.   width: 100%;    
  12.   padding: 12px;    
  13.   border: 1px solid rgb(70, 68, 68);    
  14.   border-radius: 4px;    
  15.   resize: vertical;    
  16. }    
  17. input[type=email], select, textarea {    
  18.   width: 100%;    
  19.   padding: 12px;    
  20.   border: 1px solid rgb(70, 68, 68);    
  21.   border-radius: 4px;    
  22.   resize: vertical;    
  23. }    
  24.     
  25. label {    
  26.   padding: 12px 12px 12px 0;    
  27.   display: inline-block;    
  28. }    
  29.     
  30. input[type=submit] {    
  31.   background-color: rgb(37, 116, 161);    
  32.   color: white;    
  33.   padding: 12px 20px;    
  34.   border: none;    
  35.   border-radius: 4px;    
  36.   cursor: pointer;    
  37.   float: right;    
  38. }    
  39.     
  40. input[type=submit]:hover {    
  41.   background-color: #45a049;    
  42. }    
  43.     
  44. .container {    
  45.   border-radius: 5px;    
  46.   background-color: #f2f2f2;    
  47.   padding: 20px;    
  48. }    
  49.     
  50. .col-25 {    
  51.   float: left;    
  52.   width: 25%;    
  53.   margin-top: 6px;    
  54. }    
  55.     
  56. .col-75 {    
  57.   float: left;    
  58.   width: 75%;    
  59.   margin-top: 6px;    
  60. }    
  61.     
  62. /* Clear floats after the columns */    
  63. .row:after {    
  64.   content: "";    
  65.   display: table;    
  66.   clear: both;    
  67. }    
  68.     
  69. /* Responsive layout - when the screen is less than 600px wide, make the two columns stack on top of each other instead of next to each other */    
  70. </style>    
  71. </head>    
  72. <body>    
  73. <h2>FEED BACK FORM</h2>    
  74. <div class="container">    
  75.   <form>    
  76.     <div class="row">    
  77.       <div class="col-25">    
  78.         <label for="fname">First Name</label>    
  79.       </div>    
  80.       <div class="col-75">    
  81.         <input type="text" id="fname" name="firstname" placeholder="Your name..">    
  82.       </div>    
  83.     </div>    
  84.     <div class="row">    
  85.       <div class="col-25">    
  86.         <label for="lname">Last Name</label>    
  87.       </div>    
  88.       <div class="col-75">    
  89.         <input type="text" id="lname" name="lastname" placeholder="Your last name..">    
  90.       </div>    
  91.     </div>    
  92.     <div class="row">    
  93.         <div class="col-25">    
  94.           <label for="email">Mail Id</label>    
  95.         </div>    
  96.         <div class="col-75">    
  97.           <input type="email" id="email" name="mailid" placeholder="Your mail id..">    
  98.         </div>    
  99.       </div>    
  100.     <div class="row">    
  101.       <div class="col-25">    
  102.         <label for="country">Country</label>    
  103.       </div>    
  104.       <div class="col-75">    
  105.         <select id="country" name="country">    
  106.             <option value="none">Select Country</option>    
  107.           <option value="australia">Australia</option>    
  108.           <option value="canada">Canada</option>    
  109.           <option value="usa">USA</option>    
  110.           <option value="russia">Russia</option>    
  111.           <option value="japan">Japan</option>    
  112.           <option value="india">India</option>    
  113.           <option value="china">China</option>    
  114.         </select>    
  115.       </div>    
  116.     </div>    
  117.     <div class="row">    
  118.       <div class="col-25">    
  119.         <label for="feed_back">Feed Back</label>    
  120.       </div>    
  121.       <div class="col-75">    
  122.         <textarea id="subject" name="subject" placeholder="Write something.." style="height:200px"></textarea>    
  123.       </div>    
  124.     </div>    
  125.     <div class="row">    
  126.       <input type="submit" value="Submit">    
  127.     </div>    
  128.   </form>    
  129. </div>    
  130.     
  131. </body>    
  132. </html>    
To create a feedback form, I am using four programming languages, they are:
  • HTML - For creation of basic templates and functions.
  • CSS - Attaching styles to the HTML template.
  • JavaScript - For validation and triggering functions.
  • PHP - For assigning button controls.
HTML and CSS are two basic languages for creation of this webpage. You can use some other languages instead of using PHP and JavaScript
 

Output Verification

 
After coding, you must save the code in .html.
 
Creating A Feedback Form Using HTML
 
You can find an HTML page in the place where you saved the file. Open that file in a browser.
 
Creating A Feedback Form Using HTML 
 
There you can see a feedback form that asks for basic information.
 
 
Creating A Feedback Form Using HTML
 
 
There you can enter your basic information. On the feedback section, you can enter the feedback and then you submit the form.
 
 
Creating A Feedback Form Using HTML 

Conclusion

 
This is an option to help the users of the website. You can use the code while developing a website.
 
Note
In the source code, I cleared the PHP attachment because it will show 'page not found' when you submit the form.


Similar Articles