<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <form class="form-horizontal"> <fieldset> <!-- Form Name --> <legend>Design & Build</legend> <!-- Multiple Radios --> <div class="form-group"> <label class="col-md-4 control-label" for="designandplan">Do you have any designs, plans or consents?</label> <div class="col-md-4"> <div class="radio"> <label for="designandplan-0"> <input type="radio" name="designandplan" id="designandplan-0" value="plansyes" checked="checked"> Yes </label> </div> <div class="radio"> <label for="designandplan-1"> <input type="radio" name="designandplan" id="designandplan-1" value="plansno"> No </label> </div> </div> </div> <!-- Text input--> <div class="form-group"> <label class="col-md-4 control-label" for="plansifyes">If yes, please specify</label> <div class="col-md-4"> <input id="plansifyes" name="plansifyes" type="text" placeholder="please specify" class="form-control input-md"> </div> </div> <!-- Text input--> <div class="form-group"> <label class="col-md-4 control-label" for="secsize">Section Size</label> <div class="col-md-4"> <input id="secsize" name="secsize" type="text" placeholder="size" class="form-control input-md" required=""> </div> </div> <!-- Text input--> <div class="form-group"> <label class="col-md-4 control-label" for="seccontour">Contour</label> <div class="col-md-4"> <input id="seccontour" name="seccontour" type="text" placeholder="contour" class="form-control input-md" required=""> </div> </div> <!-- Multiple Radios (inline) --> <div class="form-group"> <label class="col-md-4 control-label" for="sectype">Section Type</label> <div class="col-md-4"> <label class="radio-inline" for="sectype-0"> <input type="radio" name="sectype" id="sectype-0" value="secrural" checked="checked"> Rural </label> <label class="radio-inline" for="sectype-1"> <input type="radio" name="sectype" id="sectype-1" value="secsubdivision"> Town Subdivision </label> </div> </div> <!-- Text input--> <div class="form-group"> <label class="col-md-4 control-label" for="secaccess">Accessibility</label> <div class="col-md-4"> <input id="secaccess" name="secaccess" type="text" placeholder="accessibility" class="form-control input-md" required=""> </div> </div> <!-- Text input--> <div class="form-group"> <label class="col-md-4 control-label" for="dabsqm">How many square meters is your new build to be?</label> <div class="col-md-4"> <input id="dabsqm" name="dabsqm" type="text" placeholder="sqm" class="form-control input-md" required=""> </div> </div> <!-- Text input--> <div class="form-group"> <label class="col-md-4 control-label" for="dablivingareas">How many living areas?</label> <div class="col-md-4"> <input id="dablivingareas" name="dablivingareas" type="text" placeholder="living areas" class="form-control input-md" required=""> </div> </div> <!-- Text input--> <div class="form-group"> <label class="col-md-4 control-label" for="dabbedrooms">How many bedrooms/study?</label> <div class="col-md-4"> <input id="dabbedrooms" name="dabbedrooms" type="text" placeholder="bedrooms" class="form-control input-md" required=""> </div> </div> <!-- Text input--> <div class="form-group"> <label class="col-md-4 control-label" for="dabbathrooms">How many bathrooms?</label> <div class="col-md-4"> <input id="dabbathrooms" name="dabbathrooms" type="text" placeholder="bathrooms" class="form-control input-md" required=""> </div> </div> <!-- Text input--> <div class="form-group"> <label class="col-md-4 control-label" for="dablevels">Is it single level or multi-level?</label> <div class="col-md-4"> <input id="dablevels" name="dablevels" type="text" placeholder="levels" class="form-control input-md" required=""> </div> </div> <!-- Text input--> <div class="form-group"> <label class="col-md-4 control-label" for="dabgarage">Is there a garage?</label> <div class="col-md-4"> <input id="dabgarage" name="dabgarage" type="text" placeholder="garage" class="form-control input-md" required=""> </div> </div> <!-- Text input--> <div class="form-group"> <label class="col-md-4 control-label" for="dablandscape">Is there any landscaping or driveways to be completed?</label> <div class="col-md-4"> <input id="dablandscape" name="dablandscape" type="text" placeholder="landscaping" class="form-control input-md" required=""> </div> </div> <!-- Multiple Radios --> <div class="form-group"> <label class="col-md-4 control-label" for="dabbudget">What is your budget range for your build?</label> <div class="col-md-4"> <div class="radio"> <label for="dabbudget-0"> <input type="radio" name="dabbudget" id="dabbudget-0" value="300000" checked="checked"> Up to $300,000 </label> </div> <div class="radio"> <label for="dabbudget-1"> <input type="radio" name="dabbudget" id="dabbudget-1" value="500000"> $300,000 - $500,000 </label> </div> <div class="radio"> <label for="dabbudget-2"> <input type="radio" name="dabbudget" id="dabbudget-2" value="800000"> $500,000 - $800,000 </label> </div> <div class="radio"> <label for="dabbudget-3"> <input type="radio" name="dabbudget" id="dabbudget-3" value="1000000"> $1 Million + </label> </div> </div> </div> <!-- Textarea --> <div class="form-group"> <label class="col-md-4 control-label" for="dabconcerns">Please note any concern’s you have about your new build</label> <div class="col-md-4"> <textarea class="form-control" id="dabconcerns" name="dabconcerns">enter here</textarea> </div> </div> <!-- Multiple Radios --> <div class="form-group"> <label class="col-md-4 control-label" for="dabtiming">Do you have any specific timing requirements to work within?</label> <div class="col-md-4"> <div class="radio"> <label for="dabtiming-0"> <input type="radio" name="dabtiming" id="dabtiming-0" value="timingyes" checked="checked"> Yes </label> </div> <div class="radio"> <label for="dabtiming-1"> <input type="radio" name="dabtiming" id="dabtiming-1" value="timingno"> No </label> </div> </div> </div> <!-- Text input--> <div class="form-group"> <label class="col-md-4 control-label" for="dabtimingifyes">If yes, please speify</label> <div class="col-md-4"> <input id="dabtimingifyes" name="dabtimingifyes" type="text" placeholder="please specify" class="form-control input-md"> </div> </div> <!-- Multiple Radios --> <div class="form-group"> <label class="col-md-4 control-label" for="dabcompany">What is most important to you when making a decision on which company you will use for your new build?</label> <div class="col-md-4"> <div class="radio"> <label for="dabcompany-0"> <input type="radio" name="dabcompany" id="dabcompany-0" value="dabknowledgeexp" checked="checked"> Knowledge & Experience </label> </div> <div class="radio"> <label for="dabcompany-1"> <input type="radio" name="dabcompany" id="dabcompany-1" value="dabquality"> Quality </label> </div> <div class="radio"> <label for="dabcompany-2"> <input type="radio" name="dabcompany" id="dabcompany-2" value="dabcommunication"> Communication and/ or ideas </label> </div> <div class="radio"> <label for="dabcompany-3"> <input type="radio" name="dabcompany" id="dabcompany-3" value="dabtiming"> Starting/ finishing by set date </label> </div> <div class="radio"> <label for="dabcompany-4"> <input type="radio" name="dabcompany" id="dabcompany-4" value="dabvalue"> Best value for money </label> </div> </div> </div> <!-- Text input--> <div class="form-group"> <label class="col-md-4 control-label" for="badhowdidyouhear">How did you hear about us?</label> <div class="col-md-4"> <input id="badhowdidyouhear" name="badhowdidyouhear" type="text" placeholder="enter here" class="form-control input-md"> </div> </div> <!-- Button --> <div class="form-group"> <label class="col-md-4 control-label" for="dabbttnsubmit"></label> <div class="col-md-4"> <button id="dabbttnsubmit" name="dabbttnsubmit" class="btn btn-success">Submit</button> </div> </div> </fieldset> </form>