Style ‘WP Contact Form’ ?

  • Hey!

    I’ve installed the WP Contact Form and it works a dream, sends emails and everythin! ??

    However, it’s looking pretty ugly.

    Has anyone got experience of styling it?

    It doesn’t appear to be very user-friendly to style ??

    Any suggestions?

Viewing 3 replies - 1 through 3 (of 3 total)

  • The classes are as follows:

    .contactform
    This is the overall contact form. If you want a background behind the form, you would put it here.

    .contactleft
    This is where the labels for the input boxes (Name, etc.) are.

    .contactright
    This is where the input boxes are located.

    .contactform input
    This would be the class for the input boxes (everything except for the message box).

    .contactform textarea
    This is the class for the message box.

    For an example, this is what I have for my css for this plugin:

    .contactform {
	position: static;
	overflow: hidden;
	background: url(images/cformbg3.jpg) no-repeat;
	padding-top: 21px;
	height: 442px;
}
.contactleft {
	width: 20%;
	text-align: right;
	clear: both;
	float: left;
	display: inline;
	padding: 4px;
    font: small-caps bold 13px Georgia, "Times New Roman", Times, serif;
    color: #fff;
}
.contactright {
	width: 70%;
	text-align: left;
	float: right;
	display: inline;
	padding: 4px;
}
.contacterror {
	border: 2px solid #ff0000;
}
.contactform input {
	border: none;
	background: transparent url(images/cformbg.gif) no-repeat;
	padding: 3px 8px;
	height: 22px;
	width: 230px;
	font-family: arial, helvetica;
	font-size: 12px;
}
.contactform textarea {
	margin:3px 5px;
	padding: 5px;
	background: transparent url(images/cformbg2.gif) no-repeat;
	border: none;
	font-family: arial, helvetica;
	font-size: 12px;
	width: 280px;
	height: 200px;
}

    Make sure you disable the css option on the plugins options page if you want to use your own css.

    Thread Starter michaelmcguk

    (@michaelmcguk)

    Brilliant!

    Many thanks, I figured it out before, but that CSS disabling option is magic ??

    Cheers

    Well I cannot find the turn of button of the contact form css… I wouldn’t want to turn of all plugins’ css of course, but if I can style the contact form myself that would be great. Where is it?

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘Style ‘WP Contact Form’ ?’ is closed to new replies.