Buy Now
Sign in

My contactform on own site

gasoline , July 25 2016
gasoline
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.

contactform.jpg
Attachments
contactform.jpg
contactform.jpg
(14.6 KiB)
731 Downloads/Views
I build custom made Joomla templates since 2005!
J
jjspelman
Very nice. wWould love to know how you styled it!
healyhatman
I too would like to know how you styled this particularly the icons in the fields
Web developer at SkySpider.com.au
I don't work for ChronoEngine but I do accept donations paypal.me/healyhatman
gasoline
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;​
​}
I build custom made Joomla templates since 2005!