Styling a Wordpress contact form

Question

I am trying to create a contact form similar to this one for my site

http://www.solarmarket.com.au/

I have tried to create it with Contact Form 7 in Wordpress but I can't style the Checkboxes to make them similar to the one above. I have seen numerous solutions to styling fields but I can't apply this to individual checkboxes - the radio ones seem best suited to this if I could style them.

Does anyone know if this type of form is possible with Contact Form 7 or if there is another Contact Form that would allow me to create this as I've searched everywhere and gone through all the docs on Contact Form 7 and havn't found a solution.

Regards,

Ciaran

score 0 · Answer 1 · answered May 22 '13 at 11:57

0

Search the div/class with firebug and change it in your css?

answered May 22 '13 at 11:57

Disgeae

80
2
8

Hi Disgeae thanks for the response. I've been trying that but the issue I am having is the checkboxes don't have a div or class and I can't seem to apply one to them either. The form is down the bottom of this page [link]http://thegrapevineofflicence.com/ – Ciaran May 22 '13 at 12:17
See this question: http://stackoverflow.com/questions/4148499/how-to-style-checkbox-using-css – Disgeae May 22 '13 at 12:30
Thanks Disgeae I should be able to dig out a solution from there. Cheers. – Ciaran May 23 '13 at 23:34

score 0 · Answer 2 · answered May 22 '13 at 12:38

Just edit your theme css file (style.css), located in the theme folder, and add the following to the bottom of the stylesheet:

textarea,
input[type="text"],
input[type="password"],
input[type="datetime"],
input[type="datetime-local"],
input[type="date"],
input[type="month"],
input[type="time"],
input[type="week"],
input[type="number"],
input[type="email"],
input[type="url"],
input[type="search"],
input[type="tel"],
input[type="color"],
.uneditable-input {
  background-color: #ffffff;
  border: 1px solid #cccccc;

}

textarea:focus,
input[type="text"]:focus,
input[type="password"]:focus,
input[type="datetime"]:focus,
input[type="datetime-local"]:focus,
input[type="date"]:focus,
input[type="month"]:focus,
input[type="time"]:focus,
input[type="week"]:focus,
input[type="number"]:focus,
input[type="email"]:focus,
input[type="url"]:focus,
input[type="search"]:focus,
input[type="tel"]:focus,
input[type="color"]:focus,
.uneditable-input:focus {
  border-color: rgba(82, 168, 236, 0.8);
  outline: 0;
  outline: thin dotted \9;
  /* IE6-9 */
}

See the FIDDLE

NOTE: Just change the color of the focus to whatever you want...

UPDATE2: Here is a simpler solution: http://jsfiddle.net/x54Fa/10/

Hey Dextrous Dave thanks for that it works perfectly for styling the text areas but I still don't seem to be able to style the checkboxes. I can add padding to them etc to push other things away from them but i can't change the color of them or make them bigger or anything. Do you know why that is or is it not possible to change the checkboxes? — Ciaran, May 22 '13 at 12:50

Styling a Wordpress contact form

2 Answers2