Contact Form CSS

  • Author
    Posts
  • #502362

    sgmboro
    Member

    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 fcboro.co.uk.

    #502486

    hallluke
    Member

    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;}

    #502592

    sgmboro
    Member

    I just tried that code, but unfortunately it didn’t work. Thanks anyway.

    #502678

    hallluke
    Member

    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.

    #502711

    sgmboro
    Member

    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?

    #502716

    hallluke
    Member

    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.

    #502724

    sgmboro
    Member

    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.

    #502725

    hallluke
    Member

    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.

    #502728

    sgmboro
    Member

    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.

    #502729

    hallluke
    Member

    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;}
    #502731

    sgmboro
    Member

    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.

    #502732

    hallluke
    Member

    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.

    #502733

    sgmboro
    Member

    Thanks a lot for your help. Much appreciated.

The topic ‘Contact Form CSS’ is closed to new replies.