Styling form to look like Wordpress easy contact

virgild says

I’m trying to style a form theme from cformsII to look like Easy Contact. I managed to get some things the way I wanted but I could really use some help with the rest.

This is a screenshot of the customized form theme in cformII http://img525.imageshack.us/img525/1008/cform.jpg and the code:

/*                                                    */
/*  main 'top-level' form elements                    */
/*                                                    */
@import "calendar.css";

.cform { 
    margin:10px auto 0 auto; 
    width: 100%; 
}

.cform fieldset    { 
    margin-top:10px; 
    padding:5px 0 15px 0; 
    border:1px solid #e6db55; 
    border-left-color:#ececec; 
    border-top-color:#e6db55; 
    background:#fffbcc; 
}

.cform .cf_hidden {
    display:none; 
    border:none!important;
    background:none!important;
    padding:0!important;
    margin:0!important;
}

.cform legend { 
    margin-left:10px;
    padding: 0 2px; 
    font:normal 20px Times;
    color:#666666;
}

ol.cf-ol { 
    margin:0!important; 
    padding:0!important;
}

ol.cf-ol li    {
    background:none!important; 
    margin:5px 0!important;
    padding:0; 
    list-style:none!important; 
    text-align:left;
    line-height:1.3em;
}

/*                                                    */
/* just for text-only fields (no input)               */
/*                                                    */

ol.cf-ol li.textonly {
    background:#F0F0F0 !important;
    letter-spacing:1px;
    margin:10px 0pt !important;
    padding:5px 0pt;
    text-align:center;
}

/*                                                    */
/* global definitions for field labels                */
/*                                                    */

.cform label {
    width:100%; 
    margin:4px 10px 0 0; 
    display:-moz-inline-box; /*for mozilla*/
    display:inline-block; /*for Opera & IE*/
    text-align:left;
    vertical-align:top;
}

.cform label span {
    width:100%;; /* must be the same as above!*/
    display:block; 
}

label.cf-before {
    margin:4px 10px 0 0; 
}

label.cf-after     {
    margin:4px 15px 0pt 6px;
    text-align:left;
    width:115px;
}

label.cf-after span {
    width:115px;
    display:block;
}

label.cf-group-after {
    margin:3px 4px 0 2px;
    width:72px;
    text-align:left;
}
label.cf-group-after span {
    width:72px;
    display:block;
}

/*                                                    */
/*   FORM FIELDS general formatting                   */
/*                                                    */

.cform input,
.cform textarea,
.cform select { 
    padding:3px;
    background: #ffffff; 
    border: 1px solid #abadb3; 
    vertical-align:top;

}

.cform textarea,
.cform input {
    width:100%; 
}
.cform select {
    width:158px; /* attempt to have equal length */
    padding:2px 0;
}  

.cform select.cfselectmulti    { 
    height:7.5em; 
}

.cform textarea {
    font-family: arial;
    font-size: 0.9em;
    overflow:auto;
}

/*                                                    */
/*   radio button title                               */
/*                                                    */

ol.cf-ol li.cf-box-title {
    font-weight:bold;
    letter-spacing:1px;
    padding:8px 0 0 100px; /* check with label 'width' incl. */
}

/*                                                    */
/*   check boxes                                      */
/*                                                    */

.cform input.cf-box-a,
.cform input.cf-box-b     { 
    margin:2px 0 0 0; 
    width:14px;
    height:22px;
    border:none!important;
    background:none!important; 
}

.cform input.cf-box-a     { 
    margin-left:100px; /* check with label 'width' incl. */
} 

/*                                                    */
/* check box groups                                   */
/*                                                    */

ol.cf-ol li.cf-box-group {
    margin:10px 0pt 0px !important;
    padding-left: 100px; 
} 

/*                                                    */
/* formatting for text:  "(required)"  & other        */
/*                                                    */

span.reqtxt,
span.emailreqtxt { 
    margin:3px 0 0 3px;
    font-size:0.9em;

    vertical-align:top;
}

/*                                                    */
/*   FORM submit button                               */
/*                                                    */

p.cf-sb {
    text-align:right;
    padding: 0!important;
    margin: 0;
}
.cform input.backbutton,
.cform input.resetbutton,
.cform input.sendbutton    { 
    width:100px;  
    padding:5px; 
    margin: 10px 0 0 5px;
    font-size:0.8em;
    background:url(../images/button-bg.gif) repeat-x; 
    border:1px solid #adadad!important;
    border-left-color:#ececec!important; 
    border-top-color:#ececec!important;
}
.cform input.resetbutton {
    width: auto;
    padding:5px 1em;
}
.cform input.backbutton {
    width: auto;
    padding:5px 1em;
}

/*                                                    */
/*   FORM FIELDS enhanced error display               */
/*                                                    */
ol.cf-ol li.cf_li_err {
    background:#fffbcc;
    border-bottom: 2px solid #e6db55;
    padding:5px 0!important;
    margin:5px 0!important;
}

ol.cf-ol li ul.cf_li_text_err {
    height:1%;
    min-height:1%;
    margin:0 0 0 100px;
    padding:0;
    color:#442;
}

ol.cf-ol ul.cf_li_text_err li {
    background: #fffbcc;
    list-style:none!important;
    font-weight:bold;
    text-indent:0;
    margin:0 0 2px!important;
    padding-left: 36px;
}
ol.cf-ol ul.cf_li_text_err li:before {
    content:'';
}

/*                                                    */
/* 'visitor verification' related styles              */
/*                                                    */

label.secq,
label.seccap {
    vertical-align:text-bottom;
    margin-bottom:4px;
}

input.secinput {
    vertical-align:text-bottom;
}

#cforms_captcha6,
#cforms_captcha5,
#cforms_captcha4,
#cforms_captcha3,
#cforms_captcha2,
#cforms_captcha {
    height:15px;
    width:50px;
    padding: 4px 4px;
    margin: 0;
}

img.captcha    {
    vertical-align:text-bottom;
    margin:0 0 0 10px!important;
    padding:0!important;
    border:none!important;
    float:none!important;
}

img.captcha-reset {
    vertical-align:text-bottom;
    background:    url(captcha_reset_grey.gif) no-repeat;
    margin:0 0 2px 3px;
    width:21px;
    height:21px;
    border:none;
}

img.imgcalendar {
    border:none;
}

/*                                                    */
/* change formatting of response msgs here            */
/*                                                    */

div.cf_info {
    color:#333;
    display:none;
    padding:10px 15px!important;
    width:380px;
    line-height:1.3em;
    margin:10px auto;
}
div.cf_info ol {
    margin:0;
    padding:5px 15px 0 30px;
}
div.cf_info ol li {
    padding:1px 0;
    margin:2px 0;
}
div.cf_info a    {
    color:#ad2929!important;
    text-decoration:underline!important;
}
div.success {
    background:#F7F7F7 none repeat scroll 0% 50%;
    color:#444444;
    display:block;
}
div.failure {
    display:block;
    background:#FFDFDF url(li-err-bg.png) repeat!important;
    border-color:#DF7D7D;
    border-style:solid;
    border-width:1px 0pt;
}
div.waiting {
    background:#F9F9F9;
    color:#AAAAAA;
    display:block;
}
/*                                                    */
/*   formatting for invalid user inputs               */
/*                                                    */
.cform .cf_error { 
    color:#ad2929; 
    border:1px solid #ad2929; 
}
div.mailerr {
    display:block;
}
.mailerr,
.cform .cf_errortxt {
    color:#ad2929; 
}

/*                                                    */
/* disabled fields [disabled] does not work on IE!    */
/*                                                    */

[disabled] {
    color:#dddddd;
    border-color:#dddddd!important;
    background:none!important;
}
.disabled {
    border-color:#dddddd!important;
}

/*                                                    */
/* upload box styling                                 */
/*                                                    */
.cform input.cf_upload  {
    width:220px;
    background: #f9f9f9;
    border:1px solid #888888;
}

/*                                                    */
/*  Other: link love                                  */
/*                                                    */
.linklove {
    width:410px;
    margin:0 auto 10px!important;
    padding:0!important;    
    text-align:center!important;
}
.linklove a,
.linklove a:visited {
    font-size: 0.8em;
    font-family: Tahoma;
    color:#aaaaaa!important;
}

/*                                                    */
/*  Other: browser hacks                              */
/*                                                    */
* html .cform fieldset {
    position: relative;
    margin-top:15px;
    padding-top:25px; 
}
* html .cform legend { 
    position:absolute; 
    top: -10px; 
    left: 10px; 
    margin-left:0;
}
*+html .cform fieldset {
    position: relative;
    margin-top:15px;
    padding-top:25px; 
}
*+html .cform legend { 
    position:absolute; 
    top: -10px; 
    left: 10px; 
    margin-left:0;
}

* html ol.cf-ol,
* html ol.cf-ol li,
* html span.reqtxt,
* html span.emailreqtxt { 
    display: inline-block;  /*for ie6*/
}
*+html .cform label,
*+html ol.cf-ol,
*+html ol.cf-ol li,
*+html span.reqtxt,
*+html span.emailreqtxt {
    display: inline-block; /*for ie7*/
}

* html img.captcha {
    margin-bottom:1px!important;
}
*+html img.captcha {
    margin-bottom:1px!important;
}

An this is the easy contact style code and screenshot http://img695.imageshack.us/img695/8468/easycontact.jpg

body div.formcontainer{
clear: both;
overflow: hidden;
width: 100%;
}

body div.formcontainer span.required {
color: #ff0000;
}

body div.formcontainer p.error,
body div.formcontainer p.important,
body div.formcontainer p.information,
body div.formcontainer p.success {
border-top: 1px solid #e6db55;
color: #442;
line-height: 250%;
padding-left: 36px;
width: 95%;
}

body div.formcontainer p.error {
background: #fffbcc url('error.png') no-repeat 12px 50%;
border-bottom: 2px solid #e6db55;
}

body div.formcontainer p.important {
background: #fffbcc url('important.png') no-repeat 12px 50%;
border-bottom: 2px solid #e6db55;
}

body div.formcontainer p.information {
background: #fffbcc url('information.png') no-repeat 12px 50%;
border-bottom: 2px solid #e6db55;
}

body div.formcontainer p.success {
background: #fbfbee url('success.png') no-repeat 12px 50%;
border-bottom: 2px solid #e6db55;
}

body div.formcontainer form.contact-form {
clear: both;
float: none;
width: 100%;
}

body div.formcontainer form.contact-form fieldset {
background: #FFFFFF;
color: #333333;
margin: 0.5em 0 1.5em 0;
}

body div.formcontainer form.contact-form fieldset legend {
text-transform: uppercase;
}

body div.formcontainer form.contact-form fieldset div.form-label {
display: block;
float:none;
line-height:150%;
margin: 0.5em 0 0 0;
padding:0;
text-align:left;
width:100%;
}

body div.formcontainer form.contact-form fieldset div.form-label label,
body div.formcontainer form.contact-form fieldset div.form-option label {
cursor: pointer;
line-height:100%;
}

body div.formcontainer form.contact-form fieldset div.form-input,
body div.formcontainer form.contact-form fieldset div.form-textarea {
display: block;
float:none;
margin: 0.2em 0 0 0;
width:100%;
}

body div.formcontainer form.contact-form fieldset div.form-input input,
body div.formcontainer form.contact-form fieldset div.form-textarea textarea {
padding: 0.3em;
width: 97%;
}

body div.formcontainer form.contact-form fieldset div.form-textarea textarea {
overflow: auto;
}

body div.formcontainer form.contact-form fieldset div.form-input input.error {
background-color: #FBF4E2;
}

body div.formcontainer form.contact-form fieldset div.form-input input.optional {
margin-bottom: 0.2em;
}

body div.formcontainer form.contact-form fieldset div.form-option,
body div.formcontainer form.contact-form fieldset div.form-submit {
display: block;
float:none;
margin: 1em 0 0 0;
width:100%;
}

body div.formcontainer form.contact-form fieldset div.form-submit input {
cursor:pointer;
padding:0.5em 2em;
}

body div.formcontainer fieldset { border:1px solid #ddd; padding: 10px; }
body div.formcontainer legend { padding: 5px; }

3 years ago

Styling form to look like Wordpress easy contact

Search forums

Active threads

Follow Us

Help and Support

Styling form to look like Wordpress easy contact

Search forums

Active threads

Follow Us

Help and Support

Monthly Newsletter