Archive: May 2016

Here is the end result:

Font Awesome gets linked in the header:

<link rel="stylesheet" href="path/to/font-awesome/css/font-awesome.min.css">

Here is the Chronoforms Code:

<div class=”form-group gcore-form-row” id=”form-row-custom”><div class=”gcore-input gcore-display-table” id=”fin-custom”><p class=”disclaimer_text_home”>Notice: This website presents general information about  and is not intended as legal advice, nor should you consider it as advice. You should not act upon this information without seeking professional counsel. Please keep in mind that merely contacting  by email or otherwise will not establish an attorney-client relationship.  cannot represent you until the firm knows there would not be a conflict of interest and the firm determines that it is otherwise able to accept the engagement. Accordingly, please do not send  any information or documents until a formal attorney-client relationship has been established through an interview with an attorney and you get authorization in the form of an engagement letter from  Any information or documents sent prior to your receipt of an engagement letter cannot be treated as confidences, secrets, or protected information of any nature.</p></div></div>
<div class=”form-group gcore-form-row” id=”form-row-multi-11″><div class=”gcore-subinput-container-wide” id=”fitem-namehome”><div class=”gcore-input pull-left gcore-sub-input gcore-display-table” id=”fin-namehome”><input name=”namehome” id=”namehome” value=”” placeholder=”name…” class=”validate[&#039;required&#039;,&#039;alpha&#039;] form-control A” title=”” style=”border:none;color:#FFF;” data-inputmask=”” data-load-state=”” data-tooltip=”” type=”text” /><i class=”icon-append fa fa-user”></i></div></div>
<div class=”gcore-subinput-container-wide” id=”fitem-emailhome”><div class=”gcore-input pull-left gcore-sub-input gcore-display-table” id=”fin-emailhome”><input name=”emailhome” id=”emailhome” value=”” placeholder=”email…” class=”validate[&#039;required&#039;,&#039;email&#039;] form-control A” title=”” style=”border:none;color:#FFF;” data-inputmask=”” data-load-state=”” data-tooltip=”” type=”text” /><i class=”icon-append fa fa-envelope”></i></div></div>
<div class=”gcore-subinput-container-wide” id=”fitem-subjecthome”><div class=”gcore-input pull-left gcore-sub-input gcore-display-table” id=”fin-subjecthome”><input name=”subjecthome” id=”subjecthome” value=”” placeholder=”subject…” class=”validate[&#039;required&#039;] form-control A” title=”” style=”border:none;color:#FFF;” data-inputmask=”” data-load-state=”” data-tooltip=”” type=”text” /><i class=”icon-append fa fa-tag”></i></div></div></div><div class=”form-group gcore-form-row” id=”form-row-messagehome”><div class=”gcore-input gcore-display-table” id=”fin-messagehome”><textarea name=”messagehome” id=”messagehome” placeholder=”message…” rows=”3″ cols=”40″ class=”validate[&#039;required&#039;] form-control A” title=”” style=”border:none;width: 93% !important;color:#FFF;” data-wysiwyg=”0″ data-load-state=”” data-tooltip=””></textarea><i class=”icon-append textarea fa fa-comment”></i></div></div><div class=”form-group gcore-form-row” id=”form-row-captcha”><div class=”gcore-subinput-container-wide” id=”fitem”>
<div class=”gcore-input pull-left gcore-sub-input gcore-display-table” id=”fin-captchahome”><input placeholder=”enter code…” class=”form-control A” title=”” style=”” type=”text” name=”captcha” id=”captcha” /></div></div>
<div class=”gcore-subinput-container-wide” id=”fitem1″><div class=”gcore-input pull-left gcore-sub-input gcore-display-table” id=”fin-captchahome2″>{captcha_img}</div></div></div><div class=”form-group gcore-form-row” id=”form-row-button4″><div class=”gcore-input gcore-display-table” id=”fin-button4″><input name=”button4″ id=”button4″ type=”submit” value=”Send Message” class=”btn btn-default form-control A” style=”” data-load-state=”” /></div></div>

Here is the added CSS:

/*  Home Page Consultation Form Styles */

#chronoform-free_consultation {
text-align: center;
padding-top: 30px;
}

#form-row-multi-11 {
margin: 0 0 15px 0;
width: 95%;

}

#namehome {
border: none;
float:left;
width: 32%;
background: none;
}

#fin-namehome {

padding: 3px;
margin-right: 20px;
background: #4b4b4b;
border-radius: 4px;
width: 32%;

}

#fin-namehome i {
border-left: #727272 thin solid;
padding: 10px;
margin-left: 10px;
float: right;

}

#ftd-namehome .gcore-line-td {

float:left;

}

#emailhome {
border: none;
float:left;
background: none;
color: #FFF;
}

#fin-emailhome {
border: none;
padding: 3px;
margin-right: 20px;
background: #4b4b4b;
border-radius: 4px;
width: 32%;
}

#fin-emailhome i {
border-left: #727272 thin solid;
padding: 10px;
margin-left: 10px;
float: right;
}

#subjecthome {
border: none;
float:left;
background: none;

}

#fin-subjecthome {
border: none;
padding: 3px;
width: 32%;
background: #4b4b4b;
border-radius: 4px;
}

#fin-subjecthome i {
border-left: #727272 thin solid;
padding: 10px;
margin-left: 10px;
float: right;
}

#messagehome {
border: none;
float:left;
width: 93%;
height: 95px;
background: none;
}

#fin-messagehome {
border: none;
padding: 3px;
width: 95%;
background: #4b4b4b;
border-radius: 4px;
}

#fin-messagehome i {
border-left: #727272 thin solid;
padding: 10px;
margin-left: 10px;
float: right;
}

#captchahome {
border: none;
float:left;
color: #FFF;
background: none;
}

#form-row-captcha {
display: inline-block;
width: 400px;
margin: 0 auto 15px;
}

#fin-captchahome {
border: none;
padding: 3px;
margin-right: 20px;
background: #4b4b4b;
border-radius: 4px;
}

#fin-button4 {
margin: auto;
}

#captcha {
background: none;
border: none;
color: #FFF;
}

#button4 {
background:#2d4f68;
color: #FFF;
border:none;
padding: 10px 80px;
font-size: 18px;
margin-top: 30px;
height: 50px;
}

#button4:hover {
background: #999;

}

#chronoform-free_consultation #fin-custom {
width: 75%;
color: #FFF;
margin: auto;
}