WordPress.org

Ready to get started?Download WordPress

Forums

Contact Form 7
[resolved] Field border (7 posts)

  1. mod7
    Member
    Posted 1 year ago #

    How come the fields don't have visible borders?, do I have to code them in?

    See here:
    http://d.pr/i/tkKR

    http://wordpress.org/extend/plugins/contact-form-7/

  2. davejampole
    Member
    Posted 1 year ago #

    Add this to your style.css file (from the dashboard, click Appearance, Editor)

    #form_name{
    background: #F7F7F7;
    }

    Then, on the dashboard click Contact and select the form in question. When the form loads, surround the form code with <div id = "form_name"> and </div>. Note that you can change "form_name" to whatever you want, BUT what you use in the stylesheet MUST be the same as what you use in the <div> tag that surrounds the form code.

    You can change the #F7F7F7 hex code to whatever form background color you want. If that scares you, take a look at this <http://www.rapidtables.com/web/color/RGB_Color.htm>. Mouse over the color you like and the hex code is automatically displayed.

    Good luck.

  3. mod7
    Member
    Posted 1 year ago #

    Aha...cheers matey!

  4. davejampole
    Member
    Posted 1 year ago #

    I assume from that Aussie cheer that what I sent you worked. Great, glad I could help.

    Now, you have the responsibility of doing something helpful for someone.

    Dave

  5. mod7
    Member
    Posted 1 year ago #

    Well yes and no it worked...see here:

    http://d.pr/i/CQHN

    Yes got background colour but it sits behind the form field white boxes?

    I want a 1px grey border around the input boxes really...bit lame Contact Form doesn't do it automatically cause its daft having white input boxes on a white background.

  6. davejampole
    Member
    Posted 1 year ago #

    Okay,

    Add this to your theme stylesheet to control the border AND field background colors. Change as desired

    .wpcf7 input[type=text], .wpcf7 textarea {
    	border: 1px solid #A0A0A0;
            background:#9FF;
    }

    This should do it for you.

  7. mod7
    Member
    Posted 1 year ago #

    Excellent, that's better!

    http://d.pr/i/QrBI

    Job's a goodun!!...thanks muchly!

Topic Closed

This topic has been closed to new replies.

About this Plugin

About this Topic