<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 ----------> <div class="container"> <div class="row"> <form class="form-horizontal"> <fieldset> <!-- Form Name --> <legend>Cake Order</legend> <!-- Text input--> <div class="form-group"> <label class="col-md-4 control-label" for="name">Name</label> <div class="col-md-4"> <input id="name" name="name" type="text" placeholder="Name" class="form-control input-md" required=""> </div> </div> <!-- Text input--> <div class="form-group"> <label class="col-md-4 control-label" for="phone">Phone</label> <div class="col-md-4"> <input id="phone" name="phone" type="text" placeholder="Phone" class="form-control input-md" required=""> <span class="help-block">Format: (xxx)xxx-xxxx</span> </div> </div> <!-- Multiple Checkboxes (inline) --> <div class="form-group"> <label class="col-md-4 control-label" for="cakeFlavors">Cake Flavors</label> <div class="col-md-4"> <label class="checkbox-inline" for="cakeFlavors-0"> <input type="checkbox" name="cakeFlavors" id="cakeFlavors-0" value="yellow"> Yellow </label> <label class="checkbox-inline" for="cakeFlavors-1"> <input type="checkbox" name="cakeFlavors" id="cakeFlavors-1" value="chocolate"> Chocolate </label> <label class="checkbox-inline" for="cakeFlavors-2"> <input type="checkbox" name="cakeFlavors" id="cakeFlavors-2" value="combo"> Combo </label> <label class="checkbox-inline" for="cakeFlavors-3"> <input type="checkbox" name="cakeFlavors" id="cakeFlavors-3" value="white"> White </label> <label class="checkbox-inline" for="cakeFlavors-4"> <input type="checkbox" name="cakeFlavors" id="cakeFlavors-4" value="redVelvet"> Red Velvet </label> <label class="checkbox-inline" for="cakeFlavors-5"> <input type="checkbox" name="cakeFlavors" id="cakeFlavors-5" value="germanChocolate"> German Chocolate </label> </div> </div> <!-- Select Basic --> <div class="form-group"> <label class="col-md-4 control-label" for="cakeSize">Cake Size</label> <div class="col-md-4"> <select id="cakeSize" name="cakeSize" class="form-control"> <option value="full">Full Sheet: 2-3 Layers (Serves 80-94 People) Price: $95.00 + tax</option> <option value="half">Half Sheet: 2-3 Layers (Serves 30-50 People) Price: $54.00 + tax</option> <option value="quarter">Quarter Sheet: 2-3 Layers (Serves 15-20 People) Price: $32.00 + tax</option> </select> </div> </div> <!-- Multiple Checkboxes (inline) --> <div class="form-group"> <label class="col-md-4 control-label" for="fillings">Fillings</label> <div class="col-md-4"> <label class="checkbox-inline" for="fillings-0"> <input type="checkbox" name="fillings" id="fillings-0" value="apple"> Apple </label> <label class="checkbox-inline" for="fillings-1"> <input type="checkbox" name="fillings" id="fillings-1" value="raspberry"> Raspberry </label> <label class="checkbox-inline" for="fillings-2"> <input type="checkbox" name="fillings" id="fillings-2" value="custard"> Custard </label> <label class="checkbox-inline" for="fillings-3"> <input type="checkbox" name="fillings" id="fillings-3" value="lemon"> Lemon </label> <label class="checkbox-inline" for="fillings-4"> <input type="checkbox" name="fillings" id="fillings-4" value="cherry"> Cherry </label> <label class="checkbox-inline" for="fillings-5"> <input type="checkbox" name="fillings" id="fillings-5" value="blueberry"> Blueberry </label> <label class="checkbox-inline" for="fillings-6"> <input type="checkbox" name="fillings" id="fillings-6" value="icing"> Icing </label> <label class="checkbox-inline" for="fillings-7"> <input type="checkbox" name="fillings" id="fillings-7" value="banana"> Banana </label> <label class="checkbox-inline" for="fillings-8"> <input type="checkbox" name="fillings" id="fillings-8" value="lemon"> Lemon </label> <label class="checkbox-inline" for="fillings-9"> <input type="checkbox" name="fillings" id="fillings-9" value="fresh strawberry"> Fresh Strawberry </label> </div> </div> <!-- Select Multiple --> <div class="form-group"> <label class="col-md-4 control-label" for="frosting">Frosting</label> <div class="col-md-4"> <select id="frosting" name="frosting" class="form-control" multiple="multiple"> <option value="chocolate">Chocolate</option> <option value="vanilla">Vanilla</option> <option value="chocolate fudge">Chocolate Fudge</option> <option value="butter cream">Butter Cream</option> </select> </div> </div> <!-- Textarea --> <div class="form-group"> <label class="col-md-4 control-label" for="decoration">Decoration</label> <div class="col-md-4"> <textarea class="form-control" id="decoration" name="decoration">Describe Color & Design</textarea> </div> </div> <!-- Textarea --> <div class="form-group"> <label class="col-md-4 control-label" for="writing">Writing</label> <div class="col-md-4"> <textarea class="form-control" id="writing" name="writing">Enter Writing on Cake Here</textarea> </div> </div> <!-- Button (Double) --> <div class="form-group"> <label class="col-md-4 control-label" for="submit"></label> <div class="col-md-8"> <button id="submit" name="submit" class="btn btn-success">Submit Order</button> <button id="cancel" name="cancel" class="btn btn-danger">Cancel</button> </div> </div> </fieldset> </form> </div> </div>