help styling a form

virgildd · Member · Nov 21, 2009 at 10:14 pm

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; }

supportbot · Member · Nov 21, 2009 at 10:14 pm
Copy link
You did not specify a blog address or reason for posting when you created this topic.

This support forum is for blogs hosted at WordPress.com. If your question is about a self-hosted WordPress blog then you’ll find help at the WordPress.org forums.

If you don’t understand the difference between WordPress.com and WordPress.org, you may find this information helpful.

If you forgot to include a link to your blog, you can reply and include it below. It’ll help people to answer your question.

This is an automated message.

The topic ‘help styling a form’ is closed to new replies.

help styling a form

Couldn't find what you needed?

Contact us

Browse our guides

Mobile Apps

Social Media