Checkboxes
-
Hey there, so..I searched the internet for a way to make a 2 column contact form.
My Contact Form looks as following:<div id="responsive-form" class="clearfix"> <div class="form-row"> <div class="column-half">Vor- und Nachname*[text* name placeholder "Max Mustermann"]</div> <div class="column-half">E-mail*[email* your-email placeholder "[email protected]"]</div> <div class="column-half">Telefonnummer*[text* your-phone placeholder "1234567890"]</div> <div class="column-half">Wohnort*[text* wohnort placeholder "Ich suche eine Schuldnerberatung in..."]</div> <div class="form-row"> <div class="column-half">Ich bin/war Unternehmer [checkbox menu class:ueber-sie id:ueber-sie multiple "aktiv selbstständig" "Mitarbeiter beschäftigt" "Vollstreckungsmaßnahmen eingeleitet" "Steuerschulden vorhanden" "Steuerstrafverfahren eingeleitet" "Schulden bei der Krankenkasse"] </div> <div class="column-half">Ich bin/war Immobilienbesitzer[checkbox ueber-sie-optionen multiple id:ueber-sie-optionen "Kredit gekündigt" "Zwangsversteigerung beantragt"]</div> <div class="column-half">Ich bin Privatperson [checkbox menu class:ueber-sie-optionen id:ueber-sie-optionen multiple "arbeitssuchend" "Beschäftigungsverhältnis" "Kontopfändung" "Lohnpfändung" "Unterhaltsschulden"]</div> <div class="column-full">Sonstiges[textarea sonstiges]</div> </div> <div class="form-row"> <div class="column-full">Betreff [text* your-subject]</div> <div class="column-full">Ihre Nachricht [textarea your-message]</div> </div> <div class="form-row"> <div class="column-full">[submit "Senden"]</div> </div>The CSS looks like this:
#responsive-form{ max-width:80% /*-- change this to get your desired form width --*/; margin:0 auto; width:100%; } .form-row{ width: 100%; } .column-half, .column-full{ float: left; position: relative; padding: 0.65rem; width:100%; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box } .clearfix:after { content: ""; display: table; clear: both; } /**---------------- Media query ----------------**/ @media only screen and (min-width: 48em) { .column-half{ width: 50%; } } .wpcf7 input[type="text"], .wpcf7 input[type="email"],.wpcf7 textarea { width: 100%; padding: 8px; border: 1px solid #ccc; border-radius: 3px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box } .wpcf7 input[type="text"]:focus{ background: #fff; } .wpcf7-submit{ float: right; background: #CA0002; color: #fff; text-transform: uppercase; border: none; padding: 8px 20px; cursor: pointer; } .wpcf7-submit:hover{ background: #ff0000; } span.wpcf7-not-valid-tip{ text-shadow: none; font-size: 12px; color: #fff; background: #ff0000; padding: 5px; } div.wpcf7-validation-errors { text-shadow: none; border: transparent; background: #f9cd00; padding: 5px; color: #9C6533; text-align: center; margin: 0; font-size: 12px; } div.wpcf7-mail-sent-ok{ text-align: center; text-shadow: none; padding: 5px; font-size: 12px; background: #59a80f; border-color: #59a80f; color: #fff; margin: 0; } #ueber-sie{ -webkit-column-count: 2; /* Chrome, Safari, Opera */ -moz-column-count:2; /* Firefox */ column-count:2; border: 1px solid #ccc; border-radius: 3px; display: block; } #ueber-sie-optionen{ -webkit-column-count: 2; /* Chrome, Safari, Opera */ -moz-column-count: 2; /* Firefox */ column-count: 2; display: block; border: 1px solid #ccc; border-radius: 3px; }The checkboxes look really bad though. The checkbox itself is on top of the text, which works..but looks really ugly. How can I make them look nicely? (Checkbox and Label on one line)
The topic ‘Checkboxes’ is closed to new replies.