Styling The gpEasy Contact Form

The default styling of the gpEasy CMS contact form is in the additional.css file. Therefore, when customizing the styling of the contact form we should copy all the original styling for it form the additional.css file to ensure that we compensate for each and every aspect.

Here's the current default styling for the contact form:

.contactform td{
	padding:.5em;
	}
.contactform .left{
	text-align:right;
	font-size:11px;
	padding-top:1em;
	}
.contactform .input, .contactform textarea{
	width:20em;
	padding:5px;
	font-size:13px;
	}
.contactform textarea{
	height:10em;
	}

The contact form itself is a table. The class contactform actually wraps all the content of the Special_Contact page therefore you want to be careful about applying styles to the .contactform class.

As you can see from the default styling there really isn't much to it. Similar to the simple search plugin styling we also have a textarea and input for the contact form. They are just what you expect them to be, the text area and the input button. The .left class is for the text to the left of the form, name, subject, email, etc. That's all there is to it.

Here's my current styling for the trueacu.com theme:

.contactform td {
	padding: .5em;
}
.contactform {
	width: 100%;
}
.contactform table {
	width: 100%;
}
.contactform .left, .contactform .input {
	opacity: .4;
	text-align: left;
	width: 70px;
	font-size: 14px;
	font-weight: bold;
	color: #01203c;
}
.contactform .left {
	padding: 15px 0 0 20px;
}
.contactform .input {
	width: 450px;
	padding: 5px;
	font-size: 16px;
}
.contactform textarea {
	opacity: .8;
	height: 300px;
	width: 98%;
	color: #0C386E;
	font-size: 16px;
	font-weight: bold;
	padding: 5px;
}
.contactform .submit {
	opacity: .4;
	width: 250px;
	color: #0C386E;
}

As you can see I compensated for the default styling and I also added a couple styles for the contact form & table width so that it would be fluid.

 

gpEasy B2sq Theme by CS @True Acupuncture