How do I edit contact form CSS?

  • Unknown's avatar
    garyjdunne · Member ·

    Hi

    I’m in the early stages of setting up garydunne.wordpress.com.

    I’ve got the CSS editor.

    Can someone tell me how to remove the ‘website’ textbox from the contact form, and also remove the ‘required’ after name+email?

    Thanks!

    Gary

  • Unknown's avatar
    trent · Member ·

    I did some research into this one for you since I was interested myself, but I am afraid that the actual text “Name (required)” is hardcoded into the form itself and not styled with CSS to change that portion. I am afraid it is there to stay (along with email). As for the website, I am sure that a smarter CSS guru might be able to tell you the code to specifically “stop” the website field from being shown, but it is a little over my head I am afraid without “trial and error” testing. I will however, help out by providing the details here for someone else:

    The div class that is made from the contact form is:

    <div id='contact-form-11'>

    The specific form call for the website field is:

    <input type='text' name='comment_author_url' id='url-11' value='http://' class='textbox'/>
		<label for='name-11' class='url'>Website</label>

    Hope that helps someone sort it out for you!

    Trent

  • Unknown's avatar
    garyjdunne · Member ·

    Nice one Trent, thanks. I’ll await further enlightenment.

  • Unknown's avatar
    devblog · Member ·

    You could try adding this to your CSS:

    #url-11, #url-11 ~ label {display: none;}

    Unfortunatelly, this CSS rule won’t work in:
    Internet Explorer 6
    Opera 8.53
    Opera 7.20

    It does work in:
    Firefox 2.0
    Internet Explorer 7
    Opera 9.01
    Safari 3.0.4

    I haven’t tested it in Safari 2, but I’m pretty sure it’d work.

    IMO, this is not the best solution since it won’t work in some browsers… HTH?

  • Unknown's avatar
    devblog · Member ·

    I just noticed that the ‘for’ attribute in the label tags used in this theme have the wrong values… copy and paste much?

    And no, Lifeinsong… this is not directed to you.

    Mark, if you read this, I’d suggest you to fix that.

  • Unknown's avatar
    trent · Member ·

    I will have to remember this one devblog as I have often wondered how to do that. thx

    Trent

  • Unknown's avatar
    devblog · Member ·

    Sure thing.

    Another way of doing it is like this:

    #url-11, label[for="comment_author_url"] {display: none;}

    I need to add that these approaches won’t work in the browsers mentioned above because this is CSS Level 3.

    I don’t know if Sandbox 10 offers more ids/classes to control this kinda things… if it does, an alternative for Lifeinsong would be porting his current theme to Sandbox… just a thought.

  • Unknown's avatar
    devblog · Member ·

    Oh, dang!

    I forgot to mention that my last example wouldn’t work for him because… the values of the for attributes are wrong… if Mark fix those, then they’d work.

  • Unknown's avatar
    trent · Member ·

    devblog, could you send in a support ticket on the changes you think the theme needs since they would need specific examples of what needs changed and I don’t understand it well enough to tell them myself ;)

    Trent

  • Unknown's avatar
    garyjdunne · Member ·

    right. it’s probably not worth messing about with if it’s gonna affect some browser users. not a major issue.

    cheers.

  • Unknown's avatar
    garyjdunne · Member ·

    or, on second thoughts, by ‘not working in certain browsers’, do you mean that the form will just display as normal?

  • Unknown's avatar
    elpelos · Member ·

    by ‘not working in certain browsers’, do you mean that the form will just display as normal?

    Exactly.

  • The topic ‘How do I edit contact form CSS?’ is closed to new replies.