In this video I show you how to customise a WordPress contact form with your own font and colour. I give you css code related to the Contact Form 7 plugin┬áspecifically so if you are using a different contact form then this won’t work ­čÖü

Related Links:

CSS:

Just copy and paste the following code into your CSS section

[codesyntax lang=”css”]

@import  "http://fonts.googleapis.com/css?family=PT+Sans";

/*************************************************
 * CONTACT FORM CSS
/************************************************/
.wpcf7 {
	color: #555;
	font-weight: bold;
	font-family: 'PT Sans', 'sans-serif';
}

/*Input Fields*/
.wpcf7 input[type="password"], .wpcf7 input[type="text"], .wpcf7 input[type="email"] {
	width: 60%;
	border: 2px solid #FF957E;
	font-family: 'PT Sans', 'sans-serif';
}

/*Message Area*/
.wpcf7 textarea {
	width: 100%;
	border: 2px solid #FF957E;
	font-family: 'PT Sans', 'sans-serif';
	padding: 6px;
}

.wpcf7 :focus {
	outline: none;
}

/*All Fields when Active*/
.wpcf7 input[type="text"]:active, .wpcf7 input[type="email"]:active, .wpcf7 textarea:active,
.wpcf7 input[type="text"]:focus, .wpcf7 input[type="email"]:focus, .wpcf7 textarea:focus {
	background-color: #f8f8f8 !important;
	border: 2px solid #8ED2C0;
}

/*Send Button*/
.wpcf7  input[type="submit"] {
	padding: 10px 20px;
	background-color: #FF957E;
	color: #fff;
	text-align: right;
	border: 1px solid #ff9b85;
	float: right;
}

/*Send button hover*/
.wpcf7 input[type="submit"]:hover {
	background-color: #8ED2C0;
	border: 1px solid #7bd2bb;
}

div.wpcf7-response-output {
	margin: 2em 0 1em;
	padding: 20px 10px;
	font-family: 'PT Sans', 'sans-serif';
	font-size: 1.2em;
}

div.wpcf7-mail-sent-ok {
	border: none;
	background-color: #8ED2C0;
	color: #fff;
}

div.wpcf7-mail-sent-ng {
	border: none;
	background-color: #8ED2C0;
	color: #fff;
}

div.wpcf7-spam-blocked {
	border: none;
	background-color: #f85342;
	color: #fff;
}

div.wpcf7-validation-errors {
	border: none;
	background-color: #f85342;
	color: #fff;
}

span.wpcf7-not-valid-tip {
	color: #f85342;
	font-size: 1em;
	display: block;
}

[/codesyntax]

Leave a Reply

2 thoughts on “How to Customise Your WordPress Contact Form

  1. I want to add drop down menu to my contact form, below mentioned coding is correct to use

    /*Input Fields*/
    .wpcf7 input[type=”drop-down mennu”] {
    width: 40%;
    border: 2px solid #FF957E;
    font-family: ‘PT Sans’, ‘sans-serif’;
    }

    /*All Fields when Active*/
    .wpcf7 input[type=”drop-down menu”]:active textarea:active,
    .wpcf7 input[type=”drop-down menu”]:focus textarea:focus {
    background-color: #f8f8f8 !important;
    border: 2px solid #8ED2C0;
    }

    please advice

    Posted on March 16, 2015 at 9:28 pm
  2. Awesome video and post! Thank you for making it very simple. I have one additional question, here in your message box it has “start typing” and that disappears when I do start typing. Could you direct me to learning what the code is to make that happen?

    Thank you!

    Posted on April 26, 2015 at 12:04 pm