WordPress.org

Ready to get started?Download WordPress

Forums

[Plugin: Contact Form 7] changing the font color for the form field names (18 posts)

  1. adminasylum69
    Member
    Posted 4 years ago #

    I have a black background on my theme and when I created my contact form the instructional text is black so you can't see what the names of the fields are that you are filling in when you fill out the form.

    How can I fix this?

    Also my php files are the only ones listed as active. All css files are listed as inactive. Why is this?

    I'm new to wordpress and still learning. Any help would be appreciated.

    Thanks

    Misty

  2. esmi
    Forum Moderator
    Posted 4 years ago #

    Edit your theme's stylesheet.

    Also my php files are the only ones listed as active. All css files are listed as inactive. Why is this?

    Sorry? Where is this?

  3. adminasylum69
    Member
    Posted 4 years ago #

    in the plugin none of the css files are listed as active.

  4. stumic
    Member
    Posted 4 years ago #

    same issue, so all the names of fields are white on white background.

  5. Webbabe
    Member
    Posted 4 years ago #

    Anybody managed to solve this problem?
    I partly did but in several browsers (like Safari) it then still shows white (unreadable texts)

  6. smallholdingtimes
    Member
    Posted 4 years ago #

    Hi guys

    The actual form itself (that you create) takes html so can you put your font colours in there eg

    <FONT COLOR="#FF0000"><br /><b/>CONTACT US</b></FONT>
    
    <p>Name <br />
        [text* your-name] </p>
    
    <p>Email<br />
        [email* your-email] </p>
    
    <p>Subject <br />
        [text* your-subject] </p>
    
    <p>Your Message<br />
        [textarea your-message] </p>
    
    <p>Please validate your message:<br />
    [captchac captcha-786 fg:#FFFFFF bg:#FF0000]<br />
       [captchar captcha-786] </p>
    
    <p>[submit "Submit Message"]</p>

    Hope this helps ;-D

  7. smallholdingtimes
    Member
    Posted 4 years ago #

    Oops - I may have got the wrong end of the stick here - sorry .... I'll disappear quietly

  8. edwardbishop
    Member
    Posted 4 years ago #

    I also would like to change the colour of the font for the field names. In trying to edit this in the plugin but cannot within which file the code should be changed.

    As adminasylum69, all my css files are listed as inactive too.

  9. fnibble
    Member
    Posted 4 years ago #

    Re changing font color for the field headings, editing your theme css might work if you knew what bits relate to what is used in Contact Form 7, so suggestion above not much use.
    I changed them by the following, no guarantees I have not stuffed something else, so here goes. Load and start the plugin in your admin page. Go to Plugins in left hend side of admin page, and expand it by clicking on little arrow. Click on editor. Select contact form 7 in drop menu top left of edit field and select. click on Cf7/styles.css
    add color definition into first section ie
    div.wpcf7 {
    margin: 0;
    padding: 0;
    color: #ff6600;
    }

    save the setting and try it out. Hope that helps. fnibble

  10. fnibble
    Member
    Posted 4 years ago #

    Sorry, above post Select contact form 7 in drop menu top left of edit field and select. should be Select contact form 7 in drop menu top right of edit field and select.
    fnibble

  11. Paul Lee
    Member
    Posted 4 years ago #

    Hi fnibble

    Thanks for your feed back, I tried your code, it works but it only changes
    the colour of the heading of each sections. In this case

    "Your Name", "Your Subject", "Your Email" changes to orange, but I think we are asking here is to change the font colour of the text in the text boxes.

    In my case I have b/w webiste, the back ground is black and the font is white

    When I use CF7, the text box back ground is white and the text is white, so one can not actually see whats been entered in the text box unless you do a high light by doing a text selection on the text box.

    HELP~!~!~!~! echo echo echo

    LZ is too hot, request for immediate CF7 Support~!~!~! LOL

  12. Sellingsen
    Member
    Posted 3 years ago #

    SO...

    Has anyone figured this out???

    I'm having the same issue. My site has a black background and the font in the fill-in boxes go white and hence invisible... would love to get this fixed!

    Thanks,
    Steinar

  13. Inspired
    Member
    Posted 3 years ago #

    I figured it out.

    You need to add a class to your contact form. I used blacktext for my class. After you have added the class don't forget to "save."

    <p>Phone Number (optional)<br />
    [text text-308 20/ class:blacktext]</p>

    Then go to Plugins and click on Editor.

    If Contact Form code isn't showing, then select it from the drop down menu on the upper right side (above the Plugin Files list) and choose Contact Form.

    From the list (located on the right side) click on "contact-form-7/styles.css" and add your css code. After adding your css code don't forget to "Update File."

    Example:

    .blacktext {
    color: #000;
    }

    Now check your contact page to make sure the changes have been made.

  14. carrierawks
    Member
    Posted 3 years ago #

    On my contact page ( http://www.casketcrew.com/contact/ ) I am trying to find what exactly controls the text color in the form fields. It comes in as white. I tried looking over the CSS of the Weaver 2010 theme I am using and can't seem to find the answer there.

  15. esmi
    Forum Moderator
    Posted 3 years ago #

    http://www.casketcrew.com/wp-content/uploads/weaver-subthemes/style-weaver.css

    #content, #content input, #content textarea {
        color: #FFFFFF;
    }
  16. carrierawks
    Member
    Posted 3 years ago #

    Okay I found that in the theme's style sheet. But in Weaver 2010 you have advanced options and so I put this in the header section

    <style type="text/css">
    #content textarea {
    	color: #000000;
    	font-size: 16px;
    	line-height: 24px;
    }
    </style>

    And that did it for me. Now to get the darn submit button. Thanks for the help!

  17. esmi
    Forum Moderator
    Posted 3 years ago #

    No problem. I can heartily recommend using Firefox with the Firebug add-on for this kind of work.

  18. emidesigns
    Member
    Posted 3 years ago #

    Thanks Esmi! For all beginners like myself using twenty ten:

    Find this section on your main CSS sheet and change the colour of the textarea. Everyone's happy.

    #content,
    #content input,
    #content textarea {
    	color: #FFF;
    	font-size: 16px;
    	line-height: 24px;
    }

    to

    #content,
    #content input,
    #content textarea {
    	color: #000;
    	font-size: 16px;
    	line-height: 24px;
    }

Topic Closed

This topic has been closed to new replies.

About this Topic