Survey Form

In this example below you will see how to do a Survey Form with some HTML / CSS and Javascript

Responsive Web Design Projects - Build a Survey FormfreeCodeCamp task

This awesome code was written by Kristijan, you can see more from this user in the personal repository.
You can find the original code on
Copyright Kristijan ©
  • HTML
  • CSS
  • JavaScript
    <header class="jumbotron">
      <h1 id="title" class="text-center">Survey Form</h1>
    <div class="container">
      <p id="description" class="text-center"><strong>Task:</strong> <em>Responsive Web Design Projects - Build a Survey Form by freeCodeCamp</em></p>
      <form id="survey-form">
        <div class="form-group">
          <label for="name" id="name-label">First name</label>
          <input type="text" id="name" name="name" class="form-control" placeholder="Paul" required/>
        <div class="form-group">
          <label for="email" id="email-label" >Email</label>
          <input type="email" id="email" name="email" class="form-control" placeholder="" required />
        <div class="form-group">
          <label for="number" id="number-label">Number</label>
          <input type="number" id="number" name="number" min=12 max=100 class="form-control" placeholder="Age" required/>
        <div class="form-group">
          <label for="dropdown">Select adventure</label>
          <select id="dropdown" class="form-control">
            <option default value="first">First</option>
            <option value="second">Second</option>
            <option value="third">Third</option>
            <option value="fourth">Fourth</option>
          <legend>Choose one option</legend>
          <input type="radio" name="radios" id="rbfirst" value="rbfirst" />
          <label for="rbfirst">First</label><br/>
          <input type="radio" name="radios" id="rbsecond" value="rbsecond" />
          <label for="rbsecond">Second</label><br/>
          <input type="radio" name="radios" id="rbthird" value="rbthird" />
          <label for="rbthird">Third</label><br/>
          <input type="radio" name="radios" id="rbfourth" value="rbfourth" />
          <label for="rbfourth">Fourth</label><br/>
          <legend>Choose one/multiple options</legend>
          <input type="checkbox" id="cbfirst" value="cbfirst" />
          <label for="cbfirst">First</label><br/>
          <input type="checkbox" id="cbsecond" value="cbsecond" />
          <label for="cbsecond">Second</label><br/>
          <input type="checkbox" id="cbthird" value="cbthird" />
          <label for="cbthird">Third</label><br/>
          <input type="checkbox" id="cbforuth" value="cbforuth" />
          <label for="cbforuth">Fourth</label><br/>
        <div class="form-group">
          <label for="txtarea">Comment</label><br/>
          <textarea id="txtarea" class="form-control" placeholder="Write additional information.."></textarea>
        <input type="submit" id="submit" class="btn btn-success" /><br/>
      <p>Made by Kristijan Kelić</p>

/*Downloaded from */
    input:invalid:focus {
  border: 1px solid red;

.container {
  max-width: 50%;
  max-height: 50%;

#survey-form {
  -webkit-box-shadow: -1px 3px 4px 10px rgba(0,0,0,0.48);
  -moz-box-shadow: -1px 3px 4px 10px rgba(0,0,0,0.48);
  box-shadow: -1px 3px 4px 10px rgba(0,0,0,0.48);
  padding: 10%;

footer {
  position: flex;
  bottom: 0px;
  min-width: 100%;
  text-align: center;
  margin-top: 4%;

/*Downloaded from */