{Theme} comes several variations of form, available with the following CSS classes:
Classes:
- .ct-formSearch–extended
- .ct-searchFormMobile
- .ct-formRegister
- .ct-formContact–map
- .ct-contactForm–small
- .ct-form–label–type1
- .ct-form–label–type2
- .ct-popupForm
To use form you need to configure your mail data in form/config.php file and use the following HTML markup:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 |
<form class="ct-formRegister pull-right"> <div class="form-group"> <div class="ct-form--label--type2"> <div class="ct-u-displayTableVertical"> <div class="ct-u-displayTableCell"> <div class="ct-input-group-btn"><button class="btn btn-primary"> <i class="fa fa-user"></i> </button></div> </div> <div class="ct-u-displayTableCell text-center"><span class="text-uppercase">Become a member</span></div> </div> </div> <div class="ct-form--item ct-u-marginBottom20"><label>Your Email</label> <input class="form-control input-lg" required="" type="text" placeholder="" /></div> <div class="ct-form--item ct-u-marginBottom20"><label>Password</label> <input class="form-control input-lg" required="" type="text" placeholder="" /></div> <div class="ct-form--item ct-u-marginBottom20"><label>Repeat Password</label> <input class="form-control input-lg" required="" type="text" placeholder="" /></div> <div class="ct-form--item ct-u-marginBottom20"><label>Account Type</label> <select class="ct-js-select ct-select-lg"><option value="standard">Standard User</option><option value="premium">Premium User</option></select></div> <div class="ct-form--item ct-u-marginBottom20"> <div class="checkbox"><label> <input type="checkbox" value="" /> I read and agree to<a href="terms.html"> terms & conditions</a> </label></div> </div> <div class="ct-form--item"><button class="btn btn-warning center-block" type="submit">Register Now</button></div> </div> </form> |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 |
<div class="ct-popupForm ct-js-productForm--main infinite-left"><form> <div class="form-group"> <div class="ct-form-content"> <div class="ct-content--left pull-left"> <h3 class="text-uppercase">Edit Address</h3> <label>First Line</label> <input class="form-control input-lg" required="" type="text" value="15421 Southwest 39th Terrace" placeholder="" /> <label>Second Line</label> <input class="form-control input-lg" required="" type="text" value="San Francisco, CA 55689" placeholder="" /> <label>Property ID</label> <input class="form-control input-lg" required="" type="text" value="828219" placeholder="" /> </div> <div class="ct-content--right pull-right"> <h3 class="text-uppercase">Edit Description</h3> <label>Text</label> <textarea class="form-control" name="field[]" required="" placeholder="">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Proin nibh augue, suscipit a, scelerisque sed, lacinia in, mi. Cras vel lorem. Etiam pellentesque aliquet tellus. Phasellus pharetra nulla ac diam. Quisque semper justo at risus. Donec venenatis, turpis vel hendrerit interdum, dui ligula ultricies purus, sed posuere.</textarea> </div> <div class="clearfix"></div> <h3 class="text-uppercase">Edit Summary</h3> <div class="ct-content--left pull-left"><label>Price</label> <input class="form-control input-lg" required="" type="text" value="$ 1 450 000" placeholder="" /> <label>Area</label> <input class="form-control input-lg" required="" type="text" value="185 m2" placeholder="" /> <label>Status</label> <input class="form-control input-lg" required="" type="text" value="Sale" placeholder="" /> <label>Type</label> <input class="form-control input-lg" required="" type="text" value="House" placeholder="" /> <label>Location</label> <input class="form-control input-lg" required="" type="text" value="San Francisco, CA 55689" placeholder="" /></div> <div class="ct-content--right pull-right"><label>Beds</label> <input class="form-control input-lg" required="" type="text" value="4" placeholder="" /> <label>Baths</label> <input class="form-control input-lg" required="" type="text" value="2" placeholder="" /> <label>Garage</label> <input class="form-control input-lg" required="" type="text" value="1" placeholder="" /> <label>Pool</label> <input class="form-control input-lg" required="" type="text" value="yes" placeholder="" /> <button class="btn btn-primary" type="button"><i class="fa fa-plus"></i></button></div> <div class="clearfix"></div> <button class="btn btn-success" type="submit">Save changes</button> </div> <div class="ct-form-close"></div> </div> </form></div> |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 |
var $popupForm = $(".ct-popupForm"); var $popupMain = $(".ct-js-productForm--main"); var $popupMap = $(".ct-js-productForm--map"); var $popupDetails = $(".ct-js-productForm--details"); var $popupAgents = $(".ct-js-productForm--agents"); var $popupProperties = $(".ct-js-productForm--properties"); var $popupmask = $(".mask"); var $popupclose = $(".ct-form-close"); var $btnEditMain = $(".ct-js-btnEdit--Main"); var $btnEditMap = $(".ct-js-btnEdit--Map"); var $btnEditDetails = $(".ct-js-btnEdit--Details"); var $btnEditAgents = $(".ct-js-btnEdit--Agents"); var $btnEditProperties = $(".ct-js-btnEdit--Properties"); $btnEditMain.on("click", function(){ $popupMain.removeClass("infinite-left"); $popupmask.removeClass("infinite-left"); centerForm($popupMain); }); $btnEditMap.on("click", function(){ $popupMap.removeClass("infinite-left"); $popupmask.removeClass("infinite-left"); centerForm($popupMap); }); $btnEditDetails.on("click", function(){ $popupDetails.removeClass("infinite-left"); $popupmask.removeClass("infinite-left"); centerForm($popupDetails); }); $btnEditAgents.on("click", function(){ $popupAgents.removeClass("infinite-left"); $popupmask.removeClass("infinite-left"); centerForm($popupAgents); }); $btnEditProperties.on("click", function(){ $popupProperties.removeClass("infinite-left"); $popupmask.removeClass("infinite-left"); centerForm($popupProperties); }); $popupmask.on("click", function(){ $popupForm.addClass("infinite-left"); $popupmask.addClass("infinite-left"); }); $popupclose.on("click", function(){ $popupForm.addClass("infinite-left"); $popupmask.addClass("infinite-left"); }); |