<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 Name --> <legend>Kostenanfrage</legend> <!-- Text input--> <div class="form-group"> <label class="col-md-4 control-label" for="Unternehmen">Unternehmen</label> <div class="col-md-4"> <input id="Unternehmen" name="Unternehmen" placeholder="z.B. Allianz" class="form-control input-md" required="" type="text"> </div> </div> <!-- Text input--> <div class="form-group"> <label class="col-md-4 control-label" for="project_name">Projektbezeichung</label> <div class="col-md-4"> <input id="project_name" name="project_name" placeholder="e.g. C3-Relaunch Website" class="form-control input-md" required="" type="text"> </div> </div> <!-- Appended Input--> <div class="form-group"> <label class="col-md-4 control-label" for="budget">Budget (falls bekannt)</label> <div class="col-md-4"> <div class="input-group"> <input id="budget" name="budget" class="form-control" placeholder="" type="text"> <span class="input-group-addon">€</span> </div> </div> </div> <!-- Multiple Checkboxes --> <div class="form-group"> <label class="col-md-4 control-label" for="project_parts">Was soll im Rahmen des Projekts entstehen?</label> <div class="col-md-4"> <div class="checkbox"> <label for="project_parts-0"> <input name="project_parts" id="project_parts-0" value="1" type="checkbox"> interaktive Infografik </label> </div> <div class="checkbox"> <label for="project_parts-1"> <input name="project_parts" id="project_parts-1" value="2" type="checkbox"> Landingpage </label> </div> <div class="checkbox"> <label for="project_parts-2"> <input name="project_parts" id="project_parts-2" value="3" type="checkbox"> Microsite </label> </div> <div class="checkbox"> <label for="project_parts-3"> <input name="project_parts" id="project_parts-3" value="4" type="checkbox"> Website </label> </div> <div class="checkbox"> <label for="project_parts-4"> <input name="project_parts" id="project_parts-4" value="5" type="checkbox"> Webanwendung </label> </div> <div class="checkbox"> <label for="project_parts-5"> <input name="project_parts" id="project_parts-5" value="6" type="checkbox"> Online-Shop </label> </div> <div class="checkbox"> <label for="project_parts-6"> <input name="project_parts" id="project_parts-6" value="7" type="checkbox"> (mobile) App </label> </div> </div> </div> <!-- Multiple Checkboxes --> <div class="form-group"> <label class="col-md-4 control-label" for="gewerke">Leistungen</label> <div class="col-md-4"> <div class="checkbox"> <label for="gewerke-0"> <input name="gewerke" id="gewerke-0" value="1" type="checkbox"> Konzeption </label> </div> <div class="checkbox"> <label for="gewerke-1"> <input name="gewerke" id="gewerke-1" value="2" type="checkbox"> Design </label> </div> <div class="checkbox"> <label for="gewerke-2"> <input name="gewerke" id="gewerke-2" value="3" type="checkbox"> Technische Umsetzung </label> </div> </div> </div> <!-- Prepended checkbox --> <div class="form-group"> <label class="col-md-4 control-label" for="cms">Wird ein CMS benötigt? Wenn ja, hat der Kunde Präferenzen?</label> <div class="col-md-4"> <div class="input-group"> <span class="input-group-addon"> <input type="checkbox"> </span> <input id="cms" name="cms" class="form-control" placeholder="e.g. Magnolia, Wordpress, Drupal, typo3" required="" type="text"> </div> </div> </div> <!-- Multiple Radios --> <div class="form-group"> <label class="col-md-4 control-label" for="devices">Geräteunterstützung</label> <div class="col-md-4"> <div class="radio"> <label for="devices-0"> <input name="devices" id="devices-0" value="1" checked="checked" type="radio"> Desktop </label> </div> <div class="radio"> <label for="devices-1"> <input name="devices" id="devices-1" value="2" type="radio"> Tablets </label> </div> <div class="radio"> <label for="devices-2"> <input name="devices" id="devices-2" value="3" type="radio"> Smartphones </label> </div> </div> </div> <!-- Multiple Checkboxes --> <div class="form-group"> <label class="col-md-4 control-label" for="browser_specs">Browser-Unterstützung</label> <div class="col-md-4"> <div class="checkbox"> <label for="browser_specs-0"> <input name="browser_specs" id="browser_specs-0" value="1" type="checkbox"> Chrome (latest) </label> </div> <div class="checkbox"> <label for="browser_specs-1"> <input name="browser_specs" id="browser_specs-1" value="2" type="checkbox"> Firefox (latest) </label> </div> <div class="checkbox"> <label for="browser_specs-2"> <input name="browser_specs" id="browser_specs-2" value="3" type="checkbox"> Safari (latest) </label> </div> <div class="checkbox"> <label for="browser_specs-3"> <input name="browser_specs" id="browser_specs-3" value="4" type="checkbox"> IE9,10,11 </label> </div> <div class="checkbox"> <label for="browser_specs-4"> <input name="browser_specs" id="browser_specs-4" value="5" type="checkbox"> IE8 </label> </div> </div> </div> <!-- Prepended checkbox --> <div class="form-group"> <label class="col-md-4 control-label" for="multi_language">Mehrsprachigkeit</label> <div class="col-md-4"> <div class="input-group"> <span class="input-group-addon"> <input type="checkbox"> </span> <input id="multi_language" name="multi_language" class="form-control" placeholder="z.B. englisch, deutsch, polnisch" type="text"> </div> </div> </div> <!-- File Button --> <div class="form-group"> <label class="col-md-4 control-label" for="briefing_doc">Kundenbriefing</label> <div class="col-md-4"> <input id="briefing_doc" name="briefing_doc" class="input-file" type="file"> </div> </div> <!-- File Button --> <div class="form-group"> <label class="col-md-4 control-label" for="CI">CI Richtlinien</label> <div class="col-md-4"> <input id="CI" name="CI" class="input-file" type="file"> </div> </div> <!-- File Button --> <div class="form-group"> <label class="col-md-4 control-label" for="sonstiges">sonstige Unterlagen</label> <div class="col-md-4"> <input id="sonstiges" name="sonstiges" class="input-file" type="file"> </div> </div> <!-- Button --> <div class="form-group"> <label class="col-md-4 control-label" for="singlebutton"></label> <div class="col-md-4"> <button id="singlebutton" name="singlebutton" class="btn btn-primary">Anfrage absenden</button> </div> </div> </fieldset> </form>