Generic Survey Form

Written by @phuang 4 November 2022

Generic survey form demonstrating typical input types such as text, email, number, dropdown menu, radio boxes, checkboxes, as well as a comment textarea.

Code Snippet:

                                                <!-- this script is provided by coded by: Kerixa Inc. -->
<!DOCTYPE html>

<html lang="en">


    <meta charset="UTF-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Generic Survey Form</title>

<!-- font awesome library include 4.7 -->

<link rel="stylesheet" href="" integrity="sha512-5A8nwdMOWrSz20fDsjczgUidUBR8liPYU+WymTZP1lmY9G6Oc7HlZv156XqnsgNUzTyMefFTcsFH/tnJE/+xBg==" crossorigin="anonymous" referrerpolicy="no-referrer" />

<!-- css styles -->



  font-family: arial, monospace;

  margin: 0;

  padding: 0;

  color: white;



  background: red;

  background: url('');

  background: linear-gradient(45deg, rgba(66, 135, 245, 0.9), rgba(150, 66, 245, 0.9)), url('');

  background-repeat: no-repeat;

  background-size: cover;

  background-position: center;

  max-width: 100%;

  padding: 1em;



  text-align: center;

  padding: 1em;


#form-view h1{

  padding-top: 1em;

  padding-bottom: 0.5em;


#form-view p{

  font-style: italic;

  padding-bottom: 1em;

  font-size: 1.5em;



  background: rgba(31, 34, 71, 0.75);

  max-width: 50%;

  padding: 2em;

  margin: auto;

  border-radius: 10px;


#survey-form div, #survey-form label{

  padding-top: 2em;

  font-size: 1.25em;


#name, #email, #number, #dropdown{

  width: 100%;

  color: black;

  font-size: 1.25em;

  padding: 0.25em 0em 0.25em 0em;

  border-radius: 0.25em;


#dropdown, #dropdown option{

  color: rgba(0, 0, 0, 0.65);

  width: 100%;


#name:focus, #email:focus, #number{

  box-shadow: 0px 0px 4px #0066ff;



  width: calc(100% - 0.5em);

  height: 250px;

  color: black;

  font-size: 1.25em;

  padding-top: 0.5em;

  padding-left: 0.5em;



  font-size: 1em;

  padding: 0.5em 0em 0.5em 0em; 

  width: 100%;

  color: white;

  font-weight: bold;

  background-color: #00cc66;

  border: 0px;






  <main id="main">

    <!-- Title -->

    <div id="form-view">

     <h1 id="title"><a href="">Html Best Codes Form</a></h1>



    <!-- Form -->

    <div id="survey-form-view">

      <form id="survey-form">


        <label id="name-label" for="name">Name:</label><br /><br />

        <input id="name" type="text" placeholder="Enter your name" required />




        <label id="email-label" for="email">Email:</label><br /><br />

        <input id="email" type="email" placeholder="Enter your email" required/>




        <label id="number-label" for="number">Age:</label><br /><br />

        <input id="number" type="number" placeholder="Enter your age (optional)" min="1" max="150" required/>




        <label for="dropdown">Which option best describes your current role?</label><br /><br />

        <select id="dropdown">

          <option value="role">Select a current role</option>

          <option value="student">Student</option>

          <option value="fulltimejob">Full Time Job</option>

          <option value="fulltimelearner">Full Time Learner</option>

          <option value="prefernottosay">Prefer not to say</option>

          <option value="other">Other</option>






        <label>Would you recommend htmlbestcodes to a friend?</label><br /><br />


        <input id="definitely" type="radio" name="recommendation" value="definitely"/>

        <label for="definitely">Definitely</label><br />


        <input id="maybe" type="radio" name="recommendation" value="maybe"/>

        <label for="maybe">Maybe</label><br />


        <input id="notsure" type="radio" name="recommendation" value="notsure"/>

        <label for="notsure">Not Sure</label><br />





        <label>What would you like to see improved? (Check all that apply)</label><br /><br />


        <input id="frontendprojects" type="checkbox" name="improvement" value="frontendprojects"/>

        <label for="frontendprojects">Front-end Projects</label><br />


        <input id="backendprojects" type="checkbox" name="improvement" value="backendprojects"/>

        <label for="backendprojects">Back-end Projects</label><br />


        <input id="datavisualization" type="checkbox" name="improvement" value="datavisualization"/>

        <label for="datavisualization">Data Visualization</label><br />


        <input id="challenges" type="checkbox" name="improvement" value="challenges"/>

        <label for="challenges">Challenges</label><br />


        <input id="opensourcecommunity" type="checkbox" name="improvement" value="opensourcecommunity"/>

        <label for="challenges">Open Source Community</label><br />






        <label id="textarea-label" for="textarea">Any comments or suggestions?</label><br /><br />

        <textarea id="textarea" placeholder="Enter your comments here..."></textarea>





          <button id="submit" type="submit">Submit</button>














Tutorial Description

Generic survey form demonstrating typical input types such as text, email, number, dropdown menu, radio boxes, checkboxes, as well as a comment textarea.




</html><a target='_blank' href='' style='font-size: 8pt; text-decoration: none'>Html Best Codes</a>                                                


About @phuang

Help desk analyst transitioning to a full-stack developer role. Hoping to learn and collaborate with everyone. Happy coding!



Here you can leave us commments. Let us know what you think about this code tutorial!

0 / 300

Online Users: 12
Recent Members: sahjahan, fk khan, Proper, Jenisha, Mr Joseph Charles
advertisement 2