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

Thumbnail
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 Codepen.io
Copyright Kristijan ©
  • HTML
  • CSS
  • JavaScript
    <html>
  <head>
  
  </head>
  <body>
    <header class="jumbotron">
      <h1 id="title" class="text-center">Survey Form</h1>
    </header>
    <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>
        <div class="form-group">
          <label for="email" id="email-label" >Email</label>
          <input type="email" id="email" name="email" class="form-control" placeholder="paul@gmail.com" required />
        </div>
        <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>
        <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>
          </select>
        </div>
        <fieldset>
          <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/>
        </fieldset>
        <fieldset>
          <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/>
        </fieldset>
        <hr/>
        <div class="form-group">
          <label for="txtarea">Comment</label><br/>
          <textarea id="txtarea" class="form-control" placeholder="Write additional information.."></textarea>
        </div>
        <input type="submit" id="submit" class="btn btn-success" /><br/>
      </form>
    </div>
    <footer>
      <p>Made by Kristijan Kelić</p>
    </footer>
  </body>
</html>

/*Downloaded from https://www.codeseek.co/THEK7/survey-form-jKmZww */
    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 https://www.codeseek.co/THEK7/survey-form-jKmZww */
    

Comments