WordPress.org

Ready to get started?Download WordPress

Forums

Contact Form 7 Send Button Text Color (13 posts)

  1. buee86
    Member
    Posted 3 years ago #

    So I'm having a downright simple issue with the Contact Form 7 plugin. I think it's a theme vs. plugin issue, but the background on the button is a dark blue and the text "Send" for the contact form button is black. It makes it really hard to read. I would like to change the text to white.

    I did search through and found many many many posts similar to this or exactly this. The problem is that I've tried it all and nothing has changed a darn thing. So only two things can be happening, either I'm not proficient enough in CSS and it needs to be spelled out to me, or the code has changed significantly since the posts were made and those solutions no longer work in the new code of the plugin. Almost every post was closed so I can't reply to it so this was my only option.

    Again, I just want to change the text in the Send button that reads "Send" to white.

  2. Jack Reichert
    Member
    Posted 3 years ago #

    If you can post a link to the specific page I'll be happy to post the css you need.
    =)

  3. buee86
    Member
    Posted 3 years ago #

    The site isn't public at the moment, I have to get this fixed among a couple other things before it can go public.

  4. Jack Reichert
    Member
    Posted 3 years ago #

    Hmmm, are you familiar with "Inspect Element"?
    if you are using firefox, install the "firebug" extension, or if you are using chrome, the following functionality is built-in.

    Right-click on the text that is wrong and select "inspect Element".

    A window will open in the bottom of your browser and the faulty line in the source code should be selected. If you can past that line here I can see if I can help.

    Alternatively, in the window that popped up, on the right side is the css for that specific element. You can play with it there to make it the way you want, and then, once it is how you want it, copy the changes to the style.css file.

  5. buee86
    Member
    Posted 3 years ago #

    Ok, I've found it and made the necessary changes, but it apparently puts all other text of the website in white, too. Problem there is that the background is, of course, white. Below is the code that showed up when inspected.

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

    I changed the #333333 to #FFFFFF which worked, but it changed ALL text white. The Send button is located in a dark blue button so I just need that to be white.

  6. Rev. Voodoo
    Volunteer Moderator
    Posted 3 years ago #

    .wpcf7-form input[type="submit"]

    is the selector I use to hit the submit button

    http://voodoopress.com/2011/02/configuring-contact-form-7-to-work-perfectly-with-a-twentyten-child-theme/

  7. Jack Reichert
    Member
    Posted 3 years ago #

    The code you posted will change all text in the element with the id of content, and all the inputs, and the textareas to have white text.

    If you add the line:
    #content input { color: #ffffff; }
    underneath it should work.
    if there is a unique id or class on that specific button you can target it directly.
    As with rev's post, it would be
    .wpcf7-form input[type="submit"] { color: #ffffff; }

  8. buee86
    Member
    Posted 3 years ago #

    The code you posted will change all text in the element with the id of content, and all the inputs, and the textareas to have white text.

    If you add the line:
    #content input { color: #ffffff; }
    underneath it should work.
    if there is a unique id or class on that specific button you can target it directly.
    As with rev's post, it would be
    .wpcf7-form input[type="submit"] { color: #ffffff; }

    This worked, awesome. For the record and if someone else needs it, I'm using the third-style theme and that's the CSS I had to edit. (.../wp-content/themes/third-style/style.css). The specific line of code is located at line 496. It's just a couple lines below the

    /* =Content
    -------------------------------------------------------------- */
    comment

    I just added a new line of:
    #content input { color: #ffffff; }
    as suggested by jackreichert and that worked. Thanks!

  9. Jack Reichert
    Member
    Posted 3 years ago #

    My pleasure!
    Don't forget to mark the topic as resolved =)

  10. buee86
    Member
    Posted 3 years ago #

    Well, I spoke too soon. Apparently, it did work to set the Send button white. However, there are 4 text fields that I have in a contact form (Contact Form 7). Name, Email, Address, and a CAPTCHA entry. Name, Email, and the CAPTCHA appear as white text when you type in the box. The address field, however, you can type and actually read what you're typing. Weird. Any thoughts on that? The only thing I'm seeing is the Name, Email, and CAPTCHA entry are all one liners while the address text entry is numerous lines.

  11. Jack Reichert
    Member
    Posted 3 years ago #

    Have you tried voodoo's suggestion

    .wpcf7-form input[type="submit"] { color: #ffffff; }

    alternatively you can try

    #content input[type="submit"] { color: #ffffff; }

    If you post a link to the page I can be more specific.

  12. buee86
    Member
    Posted 3 years ago #

    So I put that in the CSS itself?

  13. praful.chandra
    Member
    Posted 2 years ago #

    but can u please specify which css should be edited to change the color of send button .

Topic Closed

This topic has been closed to new replies.

About this Topic