Free HTML Code For Survey Form

Free HTML Code For Survey Form
Code Snippet:A Survey Form Project
Author: Etido Ibanga Jonah
Published: January 19, 2024
Last Updated: January 22, 2024
Downloads: 2,067
License: MIT
Edit Code online: View on CodePen
Read More

This HTML and CSS code creates a user-friendly survey form. It collects user data and preferences, making it easy to gather feedback. The form includes input fields for name, email, work experience, a dropdown question, text suggestions, and checkboxes for investment preferences.

Users can also indicate their willingness for further contact. The CSS styling ensures an attractive and responsive design for a seamless user experience.

It helps you collect valuable feedback, user information, and preferences, making it great for market research and user engagement. The code’s responsive design ensures it works well on various devices, enhancing user accessibility.

How to Create a Survey Form Using HTML and CSS

1. First, copy the entire HTML code into your webpage. This code includes the structure of the survey form, labels, and input fields. You can customize the form by changing labels and placeholders to match the questions you want to ask in your survey.

<div id="main">
    <header>
      <h1 id="title">Survey Form</h1>
      <p id="description">User stories survey form</p>
    </header>
     <main>
      <form id="survey-form" method="GET" action="#">
        <div class="bottom-top-padding">
          <div class="label-div">
            <label id="name-label" for="name">Name: </label>
          </div>
           <div class="input-div">
            <input id="name" class="input-text" type="text" placeholder="Enter Name" required>
          </div>
        </div>
         <div class="bottom-top-padding">
          <div class="label-div">
            <label id="email-label" for="email">E-mail: </label>
          </div>
          <div class="input-div">
            <input id="email" class="input-text" type="email" placeholder="Enter E-Mail" required></div>
        </div>
          <div class="bottom-top-padding">
          <div class="label-div">
            <label id="number-label" for="number">Work Experience: </label>
          </div>
          <div class="input-div">
            <input id="number" class="input-text" min="0" max="80" type="number" placeholder="Enter Number">
          </div>
        </div>
         <div class="bottom-top-padding">
          <div class="label-div">
            <label for="dropdown">Are you comfortable in investing in real estate on platform without first investigating properly</label>
          </div>
          <div class="input-div">
            <select id="dropdown" type="dropdown">
        <option>Yes</option>
        <option>No</option>
        <option>Maybe</option>
      </select>
          </div>
        </div>
         <div class="bottom-top-padding">
          <div class="label-div">
            <label>Suggestions to build trusted platform</label>
          </div>
          <div class="input-div">
            <textarea type="text"></textarea>
          </div>
        </div>
         <div class="bottom-top-padding">
          <div class="label-div">
            <label>You are ready to invest in:</label>
          </div>
          <div id="" class="input-div">
            <label for="real-estate"><input id="real-estate" type="checkbox" name="real-estate" value="real-estate">Real Estate</label>
            </br>
            <label for="mutual-funds"><input id="mutual-funds" type="checkbox" name="mutual-funds" value="mutual-funds">Mututal Funds</label>
            </br>
            <label for="crypto"><input id="crypto" type="checkbox" name="crypto" value="crypto">Crypto Currency</label>
            </br>
            <label for="stocks"><input id="stocks" type="checkbox" name="stocks" value="stocks"> Stocks & Bonds</label>
            </br>
          </div>
        </div>
        <div class="bottom-top-padding">
          <div class="label-div">
            <label>Are you ready for further contact</label>
          </div>
          <div class="">
            <label> 
  <input type="radio" name="data" value="yes">Yes 
</label>
            </br>
            <label> 
  <input type="radio" name="data" value="no">No 
</label>
          </div>
        </div>
        <div id="submit-div">
          <button id="submit">Submit</button>
        </div>
      </form>
    </main>
    </div>

2. Now, include the following CSS code in the <style> section of your webpage or link to an external CSS file. This will give your survey form a stylish and responsive design.

/* display: flex is used*/
@import url(https://fonts.googleapis.com/css?family=Raleway:400,500);

body{
 margin: 0px;
  display: flex;
  flex-direction: row;
  justify-content: center;
  background-color: #ffb24f;
  font-family: 'Raleway', Helvetica, sans-serif,Arial;
}
#main{
  width: 80%;
  display: flex;
  flex-direction: column;
  align-items: center;
   background-color: white;
}
form{
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 500px;
}
header{
  text-align: center;
  
}
main{
  display: flex;
  display-direction: row;
  justify-content: center;
  padding-bottom: 20px;
}
.bottom-top-padding{
 padding-top: 10px;
 padding-bottom: 10px;
 display: flex;
  
}

.label-div{
  width: 50%;
  text-align: right;
  padding-right: 8px;
}
.input-div{
  width: 50%;
  text-align: left;
  padding-left: 8px;
}
#submit-div{
 display: flex;
  justify-content: center;
  
}
.input-text, select, textarea{
  width: 60%;
  height: 100%;
}
#submit{
  background-color: #ffb24f;
  color: white;
  height: 35px;
  width: 200px;
  border-radius: 8px;
  font-size: 20px; 
  border: 0px;
    font-family: 'Raleway', Helvetica, sans-serif,Arial;
}

You can further customize the appearance by modifying the CSS code, and adjusting colors, fonts, and layout according to your website’s theme.

That’s it! hopefully, you have successfully integrated this free HTML code into your web project to create a Survey Form. If you have any questions or suggestions, feel free to comment below.

Leave a Comment

This site uses Akismet to reduce spam. Learn how your comment data is processed.

About CodeHim

Free Web Design Code & Scripts - CodeHim is one of the BEST developer websites that provide web designers and developers with a simple way to preview and download a variety of free code & scripts. All codes published on CodeHim are open source, distributed under OSD-compliant license which grants all the rights to use, study, change and share the software in modified and unmodified form. Before publishing, we test and review each code snippet to avoid errors, but we cannot warrant the full correctness of all content. All trademarks, trade names, logos, and icons are the property of their respective owners... find out more...

Please Rel0ad/PressF5 this page if you can't click the download/preview link

X