Create a Survey Form with HTML and CSS (Source code)

By Faraz - July 21, 2024

Learn how to create a visually appealing and effective survey form with HTML and CSS. Discover best practices for collecting valuable feedback.

Join us on Telegram

create a survey form with html and css.jpg

Read Also

How to Create a Scroll Down Button: HTML, CSS, JavaScript Tutorial

Welcome to this guide on how to build a professional survey form with HTML and CSS! Survey forms are an essential tool for gathering feedback and data from specific audiences. They are used to improve products, services, websites, or any other type of user experience. However, building a survey form that is visually appealing, easy to use, and capable of collecting valuable feedback can be challenging, especially for those who are new to web development.

This guide aims to provide a step-by-step approach to building a professional survey form using HTML and CSS. Whether you are a web developer, designer, or anyone looking to improve your feedback collection efforts, this guide will give you the tools and best practices needed to create an effective survey form. By the end of this guide, you will have a better understanding of how to create a survey form that not only looks great but also encourages participation and feedback.

The guide will begin by covering the basics of survey form planning, including defining survey objectives and questions, choosing the right survey type, and identifying the target audience. It will then move on to building the survey form using HTML and CSS, including setting up the HTML structure, adding form elements, styling the form with CSS.

Whether you are a beginner or an experienced web developer, this guide will provide you with the knowledge and skills necessary to build a professional survey form using HTML and CSS.

Let's start making an amazing responsive survey form using HTML, and CSS step by step.

Join My Telegram Channel to Download the Project: Click Here

Prerequisites:

Before starting this tutorial, you should have a basic understanding of HTML, and CSS. Additionally, you will need a code editor such as Visual Studio Code or Sublime Text to write and save your code.

Source Code

Step 1 (HTML Code):

To get started, we will first need to create a basic HTML file. In this file, we will include the main structure for our survey form.

In this HTML code, we have created a survey form for gathering feedback about a game. Let's go through it step by step.

First, we have declared the doctype and the language of the document. Then, we have added a title to the webpage and some meta tags for better display and compatibility. We have also linked two fonts and a CSS file named styles.css.

Next, we have added a header section with a title for the survey form. After that, we have created a form element with an id "survey-form". Inside the form, we have added three fieldsets with some sub-groups for collecting different types of feedback.

The first fieldset contains some input fields for collecting the user's name, email, age, handphone number, and whether the user is a first-timer or has never played the game before.

The second fieldset contains a list of checkboxes for the user to select which game they have played.

The third fieldset contains a list of radio buttons for the user to select whether they would recommend the game to their friends or not.

The fourth and final fieldset contains a text area for the user to write any comments or suggestions they may have about the game.

Finally, we have added a submit button for the user to submit their feedback. That's it for this HTML code.

After creating the files just paste the following codes into your file. Make sure to save your HTML document with a .html extension, so that it can be properly viewed in a web browser.

This is the basic structure of our survey form using HTML, and now we can move on to styling it using CSS.

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Survey Form</title>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width" />
    <link href="https://fonts.googleapis.com/css?family=Quicksand|Roboto" rel="stylesheet">
    <link rel="stylesheet" href="styles.css" />
  </head>
  <body>
  <header>
  <div id="title"><h1>Survey Form</h1>
    </header>

<form id="survey-form">
  
  <div id="description"> Let us know how we can improve our service</div><br>
  
  <fieldset class="fieldset">
    
    <div class="sub-group">
      <label class="left" id="name-label" for="name">*Name:</label>
    <input type="text" name="customer-name" class="right input-field" id="name" placeholder="Enter your name" required>
    </div>
    
    <div class="sub-group">  
      <label class="left" id="email-label" for="email">*Email:</label>
    <input type="email" name="Email-address" class="right input-field" placeholder="Enter your email" id="email" required>
    </div>
 
    <div class="sub-group">
      <label  class="left" id="number-label" for="number">*Age:</label>
    <input type="number" name="Age" placeholder="Age" min="1" max="100" class="right input-field" id="number">
  </div>
  
    <div class="sub-group">
      <label class="left" id="handphone-label" for="handphone">*Handphone:</label>
      
    <input type="text" placeholder="Phone Number" class="right input-field" id="handphone">
  </div>

    <div class="sub-group">
      <label class="left" for="dropdown">*First time playing Escape Room?</label>
      
      <select class="right dropdown" id="dropdown" name="dropdown">
        <option selected disabled>Select an option</option>
        <option value="first">First-Timer</option>
        <option value="never">Never Play Before</option>
      </select>
    </div>
  </fieldset>
  
  <fieldset class="fieldset">
<div class="sub-group">
<label class="left">
  *Which game you played?</label>
  
 <ul style="list-style: none;" class="right">
  
   <li class="checkbox"><label><input type="checkbox" name="game" value="exodus" >Exodus</label></li>
     <li class="checkbox"><label><input type="checkbox" name="game" value="alcatraz">Alcatraz</label></li>
     <li class="checkbox"><label><input type="checkbox" name="game" value="aokigahara" >Aokigahara<label></li>
     <li class="checkbox"><label><input type="checkbox" name="game" value="mausoleum" >Mausoleum</label></li>
     <li class="checkbox"><label><input type="checkbox" name="game" value="castiglione" >Castiglione</label></li>
       </ul></div></fieldset>
       
    <fieldset class="fieldset">
  <div class="sub-group">
  <label class="left" id="left-radio">Will you recommend the game to your friends?</label>
  
   <ul style="list-style: none" class="right">
       <li class="radio"><label><input name="radio-buttons" value="1" type="radio" class="recommendation">Yes</label></li>
       <li class="radio"><label><input name="radio-buttons" value="2" type="radio" class="recommendation">Maybe</label></li>
       <li class="radio"><label><input name="radio-buttons" value="3" type="radio" class="recommendation">No</label></li>
   </ul>
  </div></fieldset>

     <fieldset class="fieldset">
   <h2>Any comments or suggestions?</h2>
  
    <div class="commentbox">
   
   <textarea rows="4"  placeholder="Enter your comment here..."></textarea>
   
   <br></br>
  
  <button id="submit" type="submit">Submit</button>
       </div></fieldset>
</form>
</div>
  </body>
</html>

Read Also Develop Flappy Bird Game Using HTML, CSS, and JavaScript.jpg

Step-by-Step Guide: Develop Flappy Bird Game Using HTML, CSS, and JavaScript (Source Code)

Step 2 (CSS Code):

Once the basic HTML structure of the survey form is in place, the next step is to add styling to the form using CSS.

Next, we will create our CSS file. In this file, we will use some basic CSS rules to create our survey form.

The code starts with a rule for the background color of the body, which is set to a light pinkish color.

The next rule is for the header element, which sets the font family, font size, color, and font weight of the text. The text is also centered and given a margin on the top and bottom.

The #survey-form rule sets the background color, font family, maximum width, margin, padding, and border radius of the form element.

The #description rule centers and styles the description text of the form.

The .fieldset rule sets the border width and padding of the fieldset element to zero.

The .sub-group rule positions the sub-group elements to the right, centers the display, wraps it, and adds padding.

The .left and .right rules style the labels and input fields of the form, respectively. The label text is aligned to the right and given a width of 30%, while the input fields have a height, padding, border, and border radius.

The #dropdown rule styles the dropdown element of the form with a height, border, and border radius.

The .checkbox and .radio rules position the checkbox and radio input elements, respectively, and add padding.

The h2 rule sets the position, font size, text alignment, and font weight of the h2 element.

The .commentbox rule centers the comment box of the form.

The textarea rule sets the width and border radius of the textarea element.

The #submit rule styles the submit button with a background color, font family, and border radius.

The label:hover rule adds a hover effect to the label elements of the form.

Finally, the code includes two media queries that adjust the font size of the body element based on the screen size. The font size decreases as the screen size decreases.

This will give our survey form an upgraded presentation. Create a CSS file with the name of styles.css and paste the given codes into your CSS file. Remember that you must create a file with the .css extension.

body{
  background-color:#FFE4E1;
}

header{
  font-family:Roboto;
  font-size:26px;
  colour:black;
  font-weight:bold;
  text-align:center;
  margin-top:20px;
  margin-bottom:20px;
}

#survey-form{
  background-color:#FFFFFF;
  font-family:Quicksand;
  max-width:70%;
  margin:auto;
  padding:0;
  border-radius:15px;
}

#description{
  text-align:center;
  font-size:16px; 
  padding-top:17px;
  font-weight:bold;
}

.fieldset{
  border-width:0;
  padding-top:1%;
  
}

.sub-group{
  position:relative;
  right:30px;
  display:flex;
  justify-content:center;
  flex-wrap:wrap;
  padding:1%;
}

label.left{
  width:30%;
  padding-right:4%;
  text-align:right;
}


.right{
  width:30%;
}

.input-field{
  height:20px;
  padding:5px;
  border: 1px solid #c0c0c0;
  border-radius: 2px;
}

#dropdown{
  font-family:Quicksand;
  height:30px; 
  border: 1px solid #c0c0c0;
  border-radius: 2px;
}

.checkbox{
  position:relative;
  padding:3px;
  right:3px;
  bottom:15px;
}

.radio{
  position:relative;
  padding:3px;
  bottom:15px;
}

h2{
  position:relative;
  bottom:8px;
  font-size:16px;
  text-align:center;
  font-weight:bold;
}

.commentbox{ 
  text-align:center;
}

textarea{
  width:65%;
  border-radius:4px; 
}

#submit{
  background:#FFE4E1;
  font-family:Roboto;
  border-radius:4px;
  font-size:23px;
}

label:hover{
  cursor:pointer;
}

@media (max-width: 800px) {
  body {
    font-size: 12px;
  }
}

@media (max-width: 580px) {
  body {
    font-size: 9px;
  }
}

Final Output:

create a survey form with html and css.gif

Read Also Create a Random Joke Generator with HTML, CSS, and JavaScript.jpg

Build an Interactive Joke Generator for Your Website

Conclusion:

In conclusion, building a professional survey form with HTML and CSS is an essential tool for anyone looking to gather valuable feedback from their target audience. Whether you are looking to improve your website, products, or services, a well-designed survey form can help you achieve your goals.

Throughout this guide, we have covered the basics of survey form planning, including defining objectives and questions, choosing the right survey type, and identifying the target audience. We have also explored the process of building the survey form using HTML and CSS, including setting up the HTML structure, adding form elements, styling the form with CSS.

By following these steps and best practices, you can create a survey form that is not only visually appealing but also encourages participation and provides valuable feedback. With a well-designed survey form, you can make informed decisions that will help you improve your website, products, or services, and ultimately, provide a better user experience for your target audience.

We hope this guide has been helpful in building a professional survey form with HTML and CSS. Remember to keep it simple, clear, and concise, and test your form regularly to ensure it is working effectively.

That’s a wrap!

I hope you enjoyed this post. Now, with these examples, you can create your own amazing page.

Did you like it? Let me know in the comments below 🔥 and you can support me by buying me a coffee

And don’t forget to sign up to our email newsletter so you can get useful content like this sent right to your inbox!

Thanks!
Faraz 😊

Tags: survey form, html, css, create survey form with html and css, html and css survey form design, build professional survey form, survey form best practices, web development tips for survey forms

End of the article