formtastic stuffs

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

This awesome code was written by 1bladesforhire, you can see more from this user in the personal repository.
You can find the original code on
Copyright 1bladesforhire ©
  • HTML
  • CSS
  • JavaScript
    <script src=""></script>

<h1 id="title">Help choose the next chicken for the flock</h1>

<p id="description">We currently have 4 chickens and have added space for 2 more.<br/> Help us pick the chickens we add to the flock.</p>

<form id="survey-form">
  <label id="name-label">Your name</label>
  <input type="text" placeholder="full name" id="name" required>
  <label id="email-label">Your email</label>
  <input type="email" placeholder="Email address" id="email" required/>
  <label id="number-label">Number to add</label>
  <input type="number" id="number" min="1" max="3" placeholder="Enter a number from 1-3" pattern="[0-3]" required>
  <label id="breed-label">Which breed? </label>
  <select id="dropdown">
    <option>Rhode Island Red</option>
    <option>Cuckoo Maran</option>
    <legend>Should we make room for more chickens?</legend>
    <input type="radio" name="moreChickens" value="yes">
    <input type="radio" name="moreChickens" value="no">
    <legend>Should we choose just eggers, meat birds, add turkeys?</legend>
    <input type="checkbox"  id="eggers" name="turkeys" value="turkeys"><label id="eggers">Eggers</label>
    <input type="checkbox"  id="meats" name="turkeys" value="carrots"><label id="meat">Meat birds</label>
    <input type="checkbox"  id="turks" name="turkeys" value="carrots"><label id="turks">Turkeys</label>
  <label id="comments">Additional Comments</label>
  <button id="submit">Submit</button> 

/*Downloaded from */
    #title, #description {
  text-align: center;
  display: block;
  max-width: 400px;
  margin: 0 auto;
  background: #d3d3d3;
  padding: 20px;
  margin: 10px 0 5px;
#name, #number, #email{
  display: block;
  width: 100%;
fieldset label{
  display: inline-block;
  margin-top: 20px;

/*Downloaded from */