<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%; } .radio-inline, .checkbox-inline { position: relative; display: inline-block; padding-left: 20px; margin-bottom: 0; vertical-align: middle; cursor: pointer; } .checkbox, .radio { vertical-align: middle; cursor: pointer; } </style> <form class="form-horizontal"> <div class="form-group"> <label class="col-md-4 control-label" for="sourcefile">Project source files location:</label> <div class="col-md-4"> <input id="sourcefile" name="sourcefile" type="text" placeholder="K:/....." class="form-control input-md"> </div></div> <div class="form-group"> <label class="col-md-4 control-label" for="publish">Where will the video be published?</label> <div class="col-md-4"> <label class="checkbox-inline" for="publish-0"> <input type="checkbox" name="publish" id="publish-0" value=""> YouTube </label> <label class="checkbox-inline" for="publish-1"> <input type="checkbox" name="publish" id="publish-1" value=""> Facebook </label> <label class="checkbox-inline" for="publish-2"> <input type="checkbox" name="publish" id="publish-2" value=""> LinkedIn </label> <label class="checkbox-inline" for="publish-3"> <input type="checkbox" name="publish" id="publish-3" value=""> Instagram </label> <label class="checkbox-inline" for="publish-4"> <input type="checkbox" name="publish" id="publish-4" value=""> Vermeer One </label> <label class="checkbox-inline" for="publish-5"> <input type="checkbox" name="publish" id="publish-5" value=""> Voice </label> <label class="checkbox-inline" for="publish-6"> <input type="checkbox" name="publish" id="publish-6" value=""> Vermeer Univ </label> <label class="checkbox-inline"> <input type="checkbox" name="publish" id="publish-7" value=""> <input class="input-md" size="20" type="text" placeholder="Other"/></label> </div></div> <div class="form-group"> <label class="col-md-4 control-label" for="aspect">What video aspect ratio?</label> <div class="col-md-4"> <label class="radio-inline" for="aspect-0"> <input type="checkbox" name="aspect" id="aspect-0" value="1" checked="checked"> Standard 16:9 </label> <label class="radio-inline" for="aspect-1"> <input type="checkbox" name="aspect" id="aspect-1" value="2"> Vertical 9:16 </label> <label class="radio-inline" for="aspect-2"> <input type="checkbox" name="aspect" id="aspect-2" value="3"> Square 1:1 </label> <label class="radio-inline"> <input type="checkbox" name="aspect" id="aspect-3" value="4"> <input class="input-md" size="10" type="text" placeholder="Other"/></label> </div></div> <div class="form-group"> <label class="col-md-4 control-label" for="radios">How long will the delivered asset (photo or video) be relevant?<br>(shelf life)</label> <div class="col-md-4"> <label class="radio-inline" for="radios-0"> <input type="radio" name="radios" id="radios-0" value="1"> < 6 months </label> <label class="radio-inline" for="radios-1"> <input type="radio" name="radios" id="radios-1" value="2"> < 1 year </label> <label class="radio-inline" for="radios-2"> <input type="radio" name="radios" id="radios-2" value="3"> < 2 years </label> <label class="radio-inline" for="radios-3"> <input type="radio" name="radios" id="radios-3" value="4"> 2 years or more </label> </div></div> <div class="form-group"> <label class="col-md-4 control-label" for="duration">Anticipated video duration:</label> <div class="col-md-4"> <label class="radio-inline" for="duration-0"> <input type="radio" name="duration" id="duration-0" value="1"> < :30 </label> <label class="radio-inline" for="duration-1"> <input type="radio" name="duration" id="duration-1" value="2"> :30-1:00 </label> <label class="radio-inline" for="duration-2"> <input type="radio" name="duration" id="duration-2" value="3"> 1:00-3:00 </label> <label class="radio-inline" for="duration-3"> <input type="radio" name="duration" id="duration-3" value="4"> 3:00-5:00 </label> <label class="radio-inline" for="duration-4"> <input type="radio" name="duration" id="duration-4" value="5"> > 5:00 </label> </div></div> <div class="form-group"> <label class="col-md-4 control-label" for="subtitle">Will the video be subtitled?</label> <div class="col-md-4"> <label class="radio-inline" for="subtitle-0"> <input type="radio" name="subtitle" id="subtitle-0" value="1"> No </label> <label class="radio-inline" for="subtitle-1"> <input type="radio" name="subtitle" id="subtitle-1" value="2"> Yes </label> </div></div> <div class="form-group"> <label class="col-md-4 control-label" for="translate">Will the video be translated to other languages?</label> <div class="col-md-4"> <label class="radio-inline" for="translate-0"> <input type="radio" name="translate" id="translate-0" value="1"> No </label> <label class="radio-inline" for="translate-1"> <input type="radio" name="translate" id="translate-1" value="2"> Yes </label> </div></div> <div class="form-group"> <label class="col-md-4 control-label" for="language">What languages?</label> <div class="col-md-4"> <label class="checkbox-inline" for="language-0"> <input type="checkbox" name="language" id="language-0" value="1"> Spanish </label> <label class="checkbox-inline" for="language-1"> <input type="checkbox" name="language" id="language-1" value="2"> Portuguese </label> <label class="checkbox-inline" for="language-2"> <input type="checkbox" name="language" id="language-2" value="3"> French </label> <label class="checkbox-inline" for="language-3"> <input type="checkbox" name="language" id="language-3" value="4"> Chinese </label> <label class="checkbox-inline" for="language-4"> <input type="checkbox" name="language" id="language-4" value="5"> German </label> <label class="checkbox-inline" for="language-5"> <input type="checkbox" name="language" id="language-5" value="6"> Russian </label> <label class="checkbox-inline" for="language-6"> <input type="checkbox" name="language" id="language-6" value="7"> <input class="input-md" size="20" type="text" placeholder="Other"/></label> </div></div> <div class="form-group"> <label class="col-md-4 control-label" for="format">Delivered format:</label> <div class="col-md-4"> <label class="radio-inline" for="format-0"> <input type="radio" name="format" id="format-0" value="1"> HD </label> <label class="radio-inline" for="format-1"> <input type="radio" name="format" id="format-1" value="2"> 4K </label> </div> </div> <div class="form-group"> <label class="col-md-4 control-label" for="size">Delivered file size limit:</label> <div class="col-md-4"> <label class="radio-inline" for="size-0"> <input type="radio" name="size" id="size-0" value="1" checked="checked"> None </label> <label class="radio-inline" for="size-1"> <input type="radio" name="size" id="size-1" value="2"> 500Mb </label> <label class="radio-inline" for="size-2"> <input type="radio" name="size" id="size-2" value=""> <input class="input-md" size="10" type="text" placeholder="Other"/></label> </div> </div> </form>