Contact Form CSS
-
Hi
I’ve read that you can change the appearance of the contact form by CSS, but don’t know how to do it? Can someone advise where to start?
All I would like to change is the font on my Contact page, which can be found here http://fcboro.co.uk/about/contact
Thanks
The blog I need help with is: (visible only to logged in users)
-
I’ve never done this myself but try the code below which should work.
textarea#contact-form-comment-4267 {font-family: Calibri,Arial,Verdana,sans-serif;} -
-
I just tested the code in my blog and had no problems. Make sure the textarea contact form you’re using has an ID with the number 4267 in it or you’ll have to change the number yourself. I’ve tested it with the form on your contact page, it works OK in FF 3.6.8, perhaps it is a browser issue.
-
How do you find out the ID of the contact form. All I’ve done is inserted [contact-form subject="Contact FC Boro" show_subject="yes"] on a blank page, but didn’t know there was an ID?
-
Do you have the CSS upgrade? That code should work fine if added to your custom styles. The ID number is automatically generated and you can find it by looking at the HTML code. I use the Firebug add-on for Firefox to do this.
-
Yeah I have the CSS upgrade. I copied and pasted the code above into the “Edit CSS” section and nothing happened. I checked it on both IE8 and Google Chrome.
-
I just checked your blog and it seems to be working fine. I tested in Opera 9.63 and Safari 4.0.5 on a mac and they were both fine too. Anything typed into the textarea box display the specified font.
-
I see that the text area is the font I want, which is I assume what the code above is for? I wanted to know how to change the font of the text around the text area such as the Submit button and “Subject” “Email” headers etc. Thanks for your continuing help. Much appreciated.
-
When you said “contact form” I thought you meant the actual form you type in. You can change the submit button and the input titles with this code:
#contact-form-4267 label {font-family:courier;} input.pushbutton-wide {font-family:tahoma;} -
That’s more what I was getting at. Thanks a lot. Any idea what to add to change the “Logged in as” and “Text only. No markup allowed” bits. Basically I want the whole form to be in one consistent font. Sorry to be a pain.
-
form.contact-form p, form.contact-form a {font-family:verdana;}This will do the regular text and the links. I’d recommend downloading Firefox and the Firebug add-on. You can then simply click on an element to view the tag structure, IDs, classes and any competing CSS styles.
-
- The topic ‘Contact Form CSS’ is closed to new replies.
WordPress.com Forums 