<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <style type="text/css">body {background-color: #ffffff;} .form-group { background: #ffffff ; overflow: hidden; padding: 0px; } .col-md-4 { float: left; width: 40%; padding: 10px; } .control-label { font-weight: bold; text-align: right; } .form-control {width: 100%; } </style> <form class="form-horizontal"> <fieldset> <div class="form-group"><label class="col-md-4 control-label" for="radios">Has the venue been reserved?</label> <div class="col-md-4"><label class="radio-inline" for="radios-0"><input id="radios-0" name="radios" type="radio" value="1" /> Yes </label> <label class="radio-inline" for="radios-1"> <input id="radios-1" name="radios" type="radio" value="2" /> No </label></div> </div> <!-- Textarea --> <div class="form-group"><label class="col-md-4 control-label" for="stagelocation">Where will the stage be position?</label> <div class="col-md-4"><textarea class="form-control" id="stagelocation" name="stagelocation"></textarea></div> </div> <!-- Text input--> <div class="form-group"><label class="col-md-4 control-label" for="attendeesize">How many people will attend?</label> <div class="col-md-4"><input class="form-control input-md" id="attendeesize" name="attendeesize" placeholder="50" type="text" value="" /></div> </div> <!-- Multiple Checkboxes --> <div class="form-group"><label class="col-md-4 control-label" for="checkboxes">Where will attendees sit?</label> <div class="col-md-4"> <div class="checkbox"><label for="checkboxes-0"><input id="checkboxes-0" name="checkboxes" type="checkbox" value="1" /> Bleachers </label></div> <div class="checkbox"><label for="checkboxes-1"><input id="checkboxes-1" name="checkboxes" type="checkbox" value="2" /> Tables in center </label></div> <div class="checkbox"><label for="checkboxes-2"><input id="checkboxes-2" name="checkboxes" type="checkbox" value="" /> Chairs in center </label></div> <div class="checkbox"><label for="checkboxes-3"><input id="checkboxes-3" name="checkboxes" type="checkbox" value="" /> Other </label></div> </div> </div> <!-- Multiple Radios (inline) --> <script type="text/javascript"> function yesnoMeal() { if (document.getElementById('yesMeal').checked) { document.getElementById('ifYes').style.display = 'block';} else document.getElementById('ifYes').style.display = 'none';} </script> <div class="form-group"> <label class="col-md-4 control-label" for="meal">Will a meal be served?</label> <div class="col-md-4"> <label class="radio-inline" for="meal-0" id="meal-question"> Yes <input type="radio" onclick="javascript:yesnoMeal();" name="yesno" id="yesMeal"> </label> <label class="radio-inline" for="meal-1"> No <input type="radio" onclick="javascript:yesnoMeal();" name="yesno" id="noMeal" checked="checked"> </label> <div id="ifYes" style="display:none"> <b><em>AV crew members must be included in the meal count and receive their meals first in order to return to tech operations. Please plan accordingly.</em></b> </div> </div> </div> <!-- Multiple Radios (inline) --> <div class="form-group"><label class="col-md-4 control-label" for="music">Do you need background music?</label> <div class="col-md-4"><label class="radio-inline" for="music-0"><input checked="checked" id="music-0" name="music" type="radio" value="1" /> No </label> <label class="radio-inline" for="music-1"> <input id="music-1" name="music" type="radio" value="2" /> Yes </label></div> </div> <!-- Select Basic --> <div class="form-group"><label class="col-md-4 control-label" for="musicstyle">What style of music?</label> <div class="col-md-4"><select class="form-control" id="musicstyle" name="musicstyle"><option selected="selected" value="">Pop Rock</option><option value="">Country Rock</option><option value="">80s Rock</option><option value="">Dinner</option><option value="">Christian Contemporary</option><option value="">Other</option> </select></div> </div> <!-- Text input--> <div class="form-group"><label class="col-md-4 control-label" for="presenters">How many presenters?</label> <div class="col-md-4"><input class="form-control input-md" id="presenters" name="presenters" placeholder="2" type="text" value="" /></div> </div> <!-- Multiple Checkboxes (inline) --> <div class="form-group"> <label class="col-md-4 control-label" for="mictype">What microphone type will the presenters use?</label> <div class="col-md-4"> <label class="checkbox-inline" for="mictype-0"> <input type="checkbox" name="mictype" id="mictype-0" value="1"> Over-the-ear lavalier </label> <label class="checkbox-inline" for="mictype-1"> <input type="checkbox" name="mictype" id="mictype-1" value="2"> Handheld </label> <label class="checkbox-inline" for="mictype-2"> <input type="checkbox" name="mictype" id="mictype-2" value="3"> Podium Mic </label> </div> </div> <!-- Textarea --> <div class="form-group"><label class="col-md-4 control-label" for="textarea">Additional audio requirements:</label> <div class="col-md-4"><textarea class="form-control" id="textarea" name="textarea"></textarea></div> </div> <!-- Multiple Radios (inline) --> <div class="form-group"><label class="col-md-4 control-label" for="projector">Is the projector needed?</label> <div class="col-md-4"><label class="radio-inline" for="projector-0"><input checked="checked" id="projector-0" name="projector" type="radio" value="1" /> No </label> <label class="radio-inline" for="projector-1"> <input id="projector-1" name="projector" type="radio" value="2" /> Yes </label></div> </div> <!-- Multiple Checkboxes (inline) --> <div class="form-group"><label class="col-md-4 control-label" for="video">What needs to be projected?</label> <div class="col-md-4"><label class="checkbox-inline" for="video-0"><input id="video-0" name="video" type="checkbox" value="1" /> Powerpoint </label> <label class="checkbox-inline" for="video-1"> <input id="video-1" name="video" type="checkbox" value="2" /> Video in Powerpoint</label> <label class="checkbox-inline" for="video-2"> <input id="video-2" name="video" type="checkbox" value="3" /> Video Clip </label></div> </div> <!-- Text input--> <div class="form-group"><label class="col-md-4 control-label" for="ppt">Who will deliver the powerpoint or video clips?</label> <div class="col-md-4"><input class="form-control input-md" id="ppt" name="ppt" placeholder="" type="text" value="" /></div> </div> <!-- Multiple Radios (inline) --> <div class="form-group"><label class="col-md-4 control-label" for="confidence">Does the presenter(s) need a confidence monitor?</label> <div class="col-md-4"><label class="radio-inline" for="confidence-0"><input checked="checked" id="confidence-0" name="confidence" type="radio" value="1" /> No </label> <label class="radio-inline" for="confidence-1"> <input id="confidence-1" name="confidence" type="radio" value="2" /> Yes </label></div> </div> <!-- Textarea --> <div class="form-group"><label class="col-md-4 control-label" for="specvideo">Additional video requirements:</label> <div class="col-md-4"><textarea class="form-control" id="specvideo" name="specvideo"></textarea></div> </div> <!-- Multiple Radios (inline) --> <div class="form-group"><label class="col-md-4 control-label" for="livestream">Does the event need to be streamed live?</label> <div class="col-md-4"><label class="radio-inline" for="livestream-0"><input checked="checked" id="livestream-0" name="livestream" type="radio" value="1" /> No </label> <label class="radio-inline" for="livestream-1"> <input id="livestream-1" name="livestream" type="radio" value="2" /> Yes </label></div> </div> <!-- Multiple Radios (inline) --> <div class="form-group"><label class="col-md-4 control-label" for="record">Does the event need to be recorded?</label> <div class="col-md-4"><label class="radio-inline" for="record-0"><input checked="checked" id="record-0" name="record" type="radio" value="1" /> No </label> <label class="radio-inline" for="record-1"> <input id="record-1" name="record" type="radio" value="2" /> Yes - Video and Audio </label></div> </div> <!-- Text input--> <div class="form-group"><label class="col-md-4 control-label" for="textinput">How will the recording be distributed post-event?</label> <div class="col-md-4"><input class="form-control input-md" id="textinput" name="textinput" placeholder="" type="text" value="" /></div> </div> <!-- Textarea --> <div class="form-group"><label class="col-md-4 control-label" for="lighting">Special lighting requirements?</label> <div class="col-md-4"><textarea class="form-control" id="lighting" name="lighting"></textarea></div> </div> </fieldset> </form>