Create Survey Form in HTML and CSS

Introduction

In this article, we will see the development of a form for feedback, surveys, and user data. The survey form should have an appealing outlook, as well as guarantee that the data collected is reliable and systematized. In this, we will see how to create a survey form in HTML and CSS that is fully functional as well as visually appealing.

Overview

Here, the goal of this article is to help you understand the process of making a survey form responsive and beautiful with the common data about the user that are name or nickname, e-mail, age, and position, and the impression of using the concrete product or purchasing the service. Also, there are fields such as radio buttons, checkboxes, and text areas that allow the capturing of remarks in the form.

Final Page

Survey

Technologies Used

To build this survey form, we will use ?

  • HTML ? It is used for the layout of the form elements like input, labels, buttons, and forms.
  • CSS ? It is used to format the form to give it a more attractive look and proper position working at every Browser and Screen size.
  • Media Queries ? To make it easily adaptable to be used with mobile phone screens, tablet screens, and normal computer screens.

HTML Code

Here is the given HTML code for creating a survey webpage.

<!DOCTYPE html>
<html lang="en">

<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Survey Form</title>
<link rel="stylesheet" href="style.css">
</head>

<body>
<main>
<header>
<h1 id="title">Survey Form</h1>
<p id="description">Thank You For Taking Your Time To Give Us Feedback</p>
</header>
<form id="survey-form">
   <div class="form-group">
      <label for="name" id="name-label">Name</label>
      <input type="text" name="name" id="name" placeholder="Enter Your Name" required>
   </div>
   <div class="form-group">
      <label for="email" id="email-label">Email</label>
      <input type="email" name="email" id="email" placeholder="Enter Your Email" required>
   </div>
   <div class="form-group">
      <label for="age" id="number-label">Age</label>
      <input type="number" name="age" id="number" min="1" max="99" placeholder="Enter Your Age">
   </div>
   <div class="form-group">
      <label for="occupation">Choose A Role That Best Describes You</label>
      <select name="occupation" id="dropdown">
         <option selected disabled value>Select Your Role</option>
         <option value="student">Student</option>
         <option value="full-time-job">Full Time Job</option>
         <option value="part-time-job">Part Time Job</option>
         <option value="prefer-to-not-say">Prefer Not To Say</option>
         <option value="other">Other</option>
      </select>
   </div>
   <div class="form-group">
      <label for="rating">Would You Recommend Our Product To A Friend?</label>
      <div class="radio-group">
         <input type="radio" name="rating" id="never" value="never"><label for="never"> Never </label>
      </div>
      <div class="radio-group">
         <input type="radio" name="rating" id="maybe" value="maybe"><label for="maybe"> Maybe </label>
      </div>
      <div class="radio-group">
         <input type="radio" name="rating" id="likely" value="likely"><label for="likely"> Likely </label>
      </div>
      <div class="radio-group">
         <input type="radio" name="rating" id="definitely" value="definitely"><label for="definitely"> Definitely </label>
      </div>
   </div>
   <div class="form-group">
      <label for="liked">Select Things That You Liked About Our Product</label>
      <div class="checkbox-group">
         <input type="checkbox" name="liked" id="ui" value="ui"><label for="ui">
         <svg class="check-mark-svg" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
            <polyline class="check-mark-svg-path" points="25.5,53.5 39.5,67.5 72.5,34.5 " />
         </svg>
         <span>UI</span>
         </label>
      </div>
      <div class="checkbox-group">
         <input type="checkbox" name="liked" id="features" value="features"><label for="features">
         <svg class="check-mark-svg" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
            <polyline class="check-mark-svg-path" points="25.5,53.5 39.5,67.5 72.5,34.5 " />
         </svg>
         <span>Features</span>
         </label>
      </div>
      <div class="checkbox-group">
         <input type="checkbox" name="liked" id="service" value="service"><label for="service">
         <svg class="check-mark-svg" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
            <polyline class="check-mark-svg-path" points="25.5,53.5 39.5,67.5 72.5,34.5 " />
         </svg>
         <span>Service</span>
         </label>
      </div>
      <div class="checkbox-group">
         <input type="checkbox" name="liked" id="simpleness" value="simpleness"><label for="simpleness">
         <svg class="check-mark-svg" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
            <polyline class="check-mark-svg-path" points="25.5,53.5 39.5,67.5 72.5,34.5 " />
         </svg>
         <span>Simpleness</span>
         </label>
      </div>
   </div>
   <div class="form-group">
      <label for="remark">Remarks</label>
      <textarea name="remark" id="remark" placeholder="Tell Us How Can We Improve.."></textarea>
   </div>
   <div class="form-group">
      <button id="submit" type="submit">Submit</button>
   </div>
</form>
</main>
</body>
</html>

CSS Code

Here is the given CSS code for the Survey Webpage.

<style>
body {
   margin: 40px 0;
   padding: 0;
   border: none;
   outline: none;
   background-color: #000000;
   box-shadow: none;
   font-family: 'Cambria', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Helvetica Neue', Arial, sans-serif;
}

main {
   background-color: rgb(255, 162, 162);
   padding: 10px 40px 40px 40px;
   display: block;
   text-align: left;
   max-width: 500px;
   margin: auto;
   border-radius: 10px;
}

header {
   text-align: center;
}

h1 {
   font-size: 40px;
   color: #191516;
   font-weight: bold;
   font-family: 'Cambria', serif;
}

form {
   display: flex;
   flex-direction: column;
   font-size: 22px;
   font-family: 'Cambria', serif;
}

#name, #email, #number, #dropdown {
   outline: none;
   width: 100%;
   padding: 7px;
   font-size: 16px;
   border: 1px solid #dee2e6;
   border-radius: 3px;
   background-color: white;
   box-sizing: border-box;
}

#dropdown, option {
   outline: none;
}

select {
   padding: 7px;
}

textarea {
   display: block;
}

.form-group {
   padding: 8px 0;
   margin-bottom: 2px;
}

.form-group>label {
   margin-bottom: 8px;
   color: #191516;
   display: block;
   font-weight: 500;
}

[type="checkbox"]+label>span, [type="radio"]+label {
   font-size: 16px;
}

[type="checkbox"], [type="radio"] {
   margin: 0 8px 0 0;
   box-sizing: border-box;
   min-width: 18px;
   min-height: 18px;
}

[type="checkbox"], [type="radio"] {
   opacity: 0;
   pointer-events: none;
}

.radio-group, .checkbox-group {
   display: flex;
   flex-direction: row;
   margin-bottom: 10px;
   position: relative;
}

[type="radio"]+label {
   margin: 0 5px 0 0;
   font-size: 16px;
   position: relative;
   cursor: pointer;
}

[type="checkbox"]+label {
   margin: 0 5px 0 0;
   font-size: 16px;
   position: relative;
   cursor: pointer;
}

[type="checkbox"]+label::before {
   content: '';
   min-width: 18px;
   min-height: 18px;
   position: absolute;
   left: -26px;
   border-radius: 3px;
   background-color: #eee;
   transition: all 0.4s;
}

[type="checkbox"]+label svg {
   position: absolute;
   width: 28px;
   left: -31px;
   top: -5px;
}

[type="checkbox"]+label svg polyline {
   stroke: white;
   stroke-width: 8;
   fill: none;
   stroke-dasharray: 70;
   stroke-dashoffset: 70;
   transition: stroke-dashoffset 0.4s;
}

[type="checkbox"]:checked+label::before {
   background-color: #191516;
}

[type="checkbox"]:checked+label svg polyline {
   stroke-dashoffset: 0;
}

textarea {
   width: 100%;
   box-sizing: border-box;
   height: 200px;
   resize: none;
   padding: 4px;
   font-size: 16px;
   border: 1px solid #dee2e6;
}

button {
   width: 100%;
   display: block;
   height: 40px;
   background-color: #191516;
   border: none;
   font-weight: bold;
   font-size: 20px;
   color: white;
   box-sizing: border-box;
}

#description {
   text-align: center;
   font-style: italic;
   margin-top: -10px;
}

[type="radio"]+label::before {
   content: '';
   position: absolute;
   border-radius: 50%;
   background-color: #eee;
   left: -27px;
   top: -1px;
   width: 20px;
   height: 20px;
   transition: all 0.4s;
}

[type="radio"]:checked+label::before {
   box-shadow: inset 0 0 0 6px #191516;
}

@media (max-width: 540px) {
   main {
      max-width: 380px;
   }
}

@media (max-width: 460px) {
   main {
      max-width: 280px;
   }
   h1 {
      font-size: 32px;
   }
   #description {
      font-size: 15px;
   }
   form {
      font-size: 18px;
   }
   #name, #email, #number, #dropdown, textarea {
      font-size: 15px;
   }
   [type="radio"]+label, [type="checkbox"]+label>span {
      font-size: 15px;
   }
}

@media (max-width: 375px) {
   main {
      max-width: 260px;
      padding: 10px 30px 30px 40px;
   }
   h1 {
      font-size: 28px;
   }
   #description {
      font-size: 12px;
   }
   form {
      font-size: 15px;
   }
   #name, #email, #number, #dropdown, textarea {
      font-size: 12px;
   }
   [type="radio"]+label, [type="checkbox"]+label>span {
      font-size: 12px;
   }
   button {
      font-size: 18px;
   }
}

@media (max-width: 320px) {
   main {
      max-width: 220px;
   }
}

@media (max-width: 280px) {
   main {
      max-width: 180px;
   }
}
</style>

Explanation

  • HTML Document Setup ? The structure starts with the declaration of the document type, which cross-checks the document with the browser for correct interpretation by using the tagline <!DOCTYPE html>, where meta tag is used for responsiveness and the form is put within the <body> specification.
  • Main Section ? All the form questions are located inside the main tag to enhance the structure and semantics of the page containing the survey form. It has a page title that has an <h1> tag and a page description that has a p tag
  • Form Structure ? This form works with the form tag, which has an ID attribute to define it as unique (id= "survey-form"). Like the text fields, emails, radio buttons, and checkboxes are wrapped in a div tag with an attribute of class form-group for enhanced styling.
  • Input Fields ? The common user details including name, email address, and age are collected through the various input fields with corresponding types; text, email, and numbers respectively. Each field has a label tag connected to it to make accessibility easier so that users and programs can understand what these inputs are.
  • Dropdown Menu ? The vertical input type (select tag) is applied to select the user occupation with defined fragments Student, Full-Time Job, Part-Time Job, etc. The selected and disabled attributes are used on the first option so that users will be forced to choose a role.
  • Radio Buttons ? Radio buttons limit the choices by question type and only allow the selection of one value against the question of whether one would recommend our product to a friend. These radio buttons are labeled for simplicity, as in a radio button set, and they're wrapped in the radio-group class.
  • Checkboxes ? Fields with checkboxes are used to let know about what the user liked about the product, such as UI, Features, Service, etc. One interesting feature here is SVG check marks for a checkbox that becomes animated when checked or selected.
  • Text Area ? The remarks section for users is in textarea format so that users have the opportunity to type whatever they have in mind. This field is designed for usability purposes where the height is fixed but the width is collapsible.
  • Submit Button ? An option of submitting the data contained by the form is given in a button located at the end of the form. To make a button useful, it forms a button element with a type = 'submit' attribute. The button is colored black having white text on it like the other buttons on the form design.
  • Responsive Design ? These are Media queries used to change the form layout and the font sizes appropriate for the small screen sizes. This guarantees the form adaptability and compatibility with the devices that the customers use. For example, if the screen size is small, the text size and accepting input areas' width are resized in a way.

Conclusion

With the help of this approach, it is possible to design a simple HTML and CSS-based survey form that is not only functional but looks good as well. The form is not only engaging but also adaptable to fit different devices used during the completion. In this article, you will learn how to blend HTML such as a template with CSS methods for creating a sleek appearance for a website.

Updated on: 2025-01-28T10:44:22+05:30

204 Views

Kickstart Your Career

Get certified by completing the course

Get Started
Advertisements