Forums

F.E.: https://www.gasoline.nl/contact

I always use Chronoform, when you get the hang of it it works flawless and makes live a lot easier. I have more forms on my site.

[attachment=0]contactform.jpg[/attachment]

Very nice. wWould love to know how you styled it! 🙂

I too would like to know how you styled this particularly the icons in the fields

It's something like this:

<div class="col-md-6">
  <input name="naam" id="verplicht" value="" placeholder="Uw naam alstublieft"  class="verplicht validate[&#039;required&#039;] form-control" title="Vul alstublieft uw naam in" style="" data-inputmask="" data-load-state="" data-tooltip="" type="text" />
</div>
<div class="col-md-6">
  <input name="bedrijfsnaam" id="vrij" value="" placeholder="Uw bedrijfsnaam"  class="form-control" title="" style="" data-inputmask="" data-load-state="" data-tooltip="" />
</div>
<div class="col-md-6 sex"><input type="hidden" id="verplicht sx_ghost2" data-ghost="1" value="" class="form-control" name="verplicht sx_ghost" />
      <span class="gcore-radio-item">
      <label class="control-label" for="verplicht sx2">
        <input name="geslacht" id="verplicht sx2" value="man" class=" validate[&#039;group:3&#039;]" title="" style="" data-load-state="" data-tooltip="" type="radio" />
        <div class="sexus">De Heer</div></label>
      <label class="control-label" for="verplicht sx3">
        <input name="geslacht" id="verplicht sx3" value="vrouw" class=" validate[&#039;group:3&#039;]" title="" style="" data-load-state="" data-tooltip="" type="radio" />
        <div class="sexus">Mevrouw</div></label></div>
<div class="col-md-6">
  <input name="telefoon" id="vrij" value="" placeholder="Uw telefoonnummer"  class="form-control" title="" style="" data-inputmask="" data-load-state="" data-tooltip="" type="text" />
</div>
<div class="col-md-6">
  <input name="email" id="verplicht" value="" placeholder="Uw e-mailadres" class="verplicht validate[&#039;required&#039;,&#039;email&#039;] form-control" title="Vul alstublieft uw emailadres in" style="" data-inputmask="" data-load-state="" data-tooltip="" type="text" />
</div>
<div class="col-md-6">
  <input name="website" id="vrij" value="http://www." placeholder=""  class="form-control" title="" style="" data-inputmask="" data-load-state="" data-tooltip="" type="text" />
</div>
<div class="col-md-12">
  <textarea name="opmerkingen" id="verplicht" placeholder="Uw opmerkingen aub" class=" validate[&#039;required&#039;]" title="" style="" data-wysiwyg="0" data-load-state="" data-tooltip=""></textarea>
</div>
<div class="col-md-6">{ReCaptcha}</div>
<div class="col-md-6">
  <input name="verzend" id="verzend" type="submit" value="Verzend" class="btn btn-primary btn-lg" style="" data-load-state="" />
</div>

Plus some css (maybe not complete but you get the hang of it:

form#chronoform-offerte.chronoform label.control-label:hover{background:rgba(0,0,0,0.36);cursor:cell;}

form.chronoform div.col-md-6,form.chronoform div.col-md-12{margin-bottom:20px}
.sexie,.aanvraag{overflow:hidden}
form.chronoform input,form.chronoform textarea{font-size:2.5rem;font-weight:normal;line-height:3rem;height:3em;background:rgba(255,255,255,0.8);color:@secondarylight;border-radius:0;border:none}
form.chronoform textarea{height:10em;width:100%;padding:10px}
form.chronoform input:focus,form.chronoform textarea:focus{color:@primarydark}
form.chronoform .form-control:focus,form.chronoform textarea:focus{box-shadow: inset 0 0px 1px @primarydark, 0 0 8px #ff5722}
input#verzend{float:right;color:white;background:@green;box-shadow: inset 0 0 0 0 @secondary;transition: all ease 0.8s;width:100%}
input#verzend:hover{box-shadow: inset 0 0 0 125px @secondary;}
form.chronoform label.control-label {padding-left:13px;padding-right:13px;width: 100%;background:rgba(255,255,255,0.8);box-sizing:border-box}
form.chronoform label.control-label input{float: left;}
form.chronoform label.control-label:hover{background:rgba(255,255,255,0.36);cursor:cell;}
.sexy > * {box-sizing:border-box}
.sex label{margin-bottom:0}
label.control-label div.sexus, .sexie .sex,.aanvraag .keuzes{color:#DADADA;font-size:2.5rem;line-height:75px;font-weight:normal;margin:0 22px}
input#verplicht, textarea#verplicht, label.control-label #verplicht,#chronoform-offerte > div:nth-child(3) > span > label:nth-child(2),#chronoform-contact > div.col-md-6.sexy > span > label:nth-child(2),.sex label:nth-child(2) {border-right: solid 5px @secondarylight;}
div.col-md-6.sex{overflow: hidden}
input[type="radio"]{margin:0}
.aanvraag input{float:left}
.aanvraag .keuzes{white-space: nowrap;text-overflow: ellipsis;overflow: hidden;}

::-webkit-input-placeholder{
  color:#D2D2D2 !important;
}
::-moz-placeholder {
  color:#D2D2D2 !important;
}
:-ms-input-placeholder {
  color:#D2D2D2 !important;
}
:-moz-placeholder {
  color:#D2D2D2 !important;
}