WordPress.org

Ready to get started?Download WordPress

Forums

Contact Form 7
Colored background (10 posts)

  1. barefootsusan
    Member
    Posted 3 years ago #

    Anyone know how I can make a colored background show up on my form? I used this exact code successfully with Contact Form 8, then reverted to Contact Form 7 and the background color disappeared.

    Any ideas? The form is at http://www.interstatecashregister.com/contact-us

    <table style="padding: 20px; width: 100%; background-color: rgb(128, 128, 128); color: rgb(255, 255, 255);">
    <tbody>
    <tr>
    <td colspan="2">Please Fill out the form below and a Interstate Cash Register customer service representative will contact you as soon as possible.</td>
    </tr>
    <tr>
    <td colspan="2">
    </td>
    </tr>
    <tr>
    <td style="width: 50%;">Full Name (required)
    [text* your-name 50/] </td>
    <td>Business Name
    [text BusinessName 50/] </td>
    </tr>
    <tr>
    <td style="width: 50%;">Phone
    [text Phone 50/]</td>
    <td>Alternative Phone Number
    [text AlternativePhoneNumber 50/]</td>
    </tr>
    <tr>
    <td style="width: 50%;">City
    [text City 50/]</td>
    <td>State
    [text State 50/]</td>
    </tr>
    <tr>
    <td style="width: 50%;">Zip
    [text Zip 50/]</td>
    <td>Email
    [email* email-240 50/]</td>
    </tr>
    <tr>
    <td style="width: 80%;" colspan="2">Comments or Questions
    [textarea textarea 80x2 Comments] </td>
    </tr>
    </tbody>
    </table>

    <p>[submit "Send"]</p>

  2. webjunk
    Member
    Posted 3 years ago #

    Think you need to edit the Style.css that is in the plugin directory.

  3. barefootsusan
    Member
    Posted 3 years ago #

    I must be doing something wrong because I have changed all the colors for "background" in the style.css for the plugin and it's still white. Humph.

  4. webjunk
    Member
    Posted 3 years ago #

    The Style.css yu should be editing is this one:
    http://www.interstatecashregister.com/wp-content/plugins/contact-form-7/styles.css

    You have no background colors in there. No idea what you edited.

  5. clevestam
    Member
    Posted 3 years ago #

    Selector form (line:19) in template.css will change the whole form background.

  6. barefootsusan
    Member
    Posted 3 years ago #

    webjunk, I edited that file, styles.css, and it's still the same. :o(

    clevestam, where is that file? I don't see it in the plugin directory when I go to Plugins > Editor > Contact Form 7

  7. webjunk
    Member
    Posted 3 years ago #

    No you are not editing. AGain take a look at the link I already gave you to YOUR plugins style.css. Or are you editing your Theme's style.css? That would not be correct.

    Have no idea of the template.css. It is not in my Contact Form 7 plugin.

  8. barefootsusan
    Member
    Posted 3 years ago #

    Thank you...I got it now. I didn't realize I needed to add a line to the css file.

    Now, does anyone know where I can change the color of the text on the form? If I need to add a line of code, what should it say and where should it go?

    Thanks so much for your help. I truly appreciate it!

  9. clevestam
    Member
    Posted 3 years ago #

    Yes the CSS file im talking about is your theme file, the selector there for your form is the one i mentioned. The change will be sitewide so if you want to target a specific form select its id. If you just want to target this plugin's forms form.wpcf7-form if you are going to have more than 1 form from this plugin you can edit the div id wpcf7-f1-p24-o1

    If you are doing a custom theme you can have these in your theme style.css/template.css. If you are changing just the form go for styles.css.

  10. clevestam
    Member
    Posted 3 years ago #

    Add in styles.css

    /*for all contact 7 forms input text*/
    .wpcf7 input{
    color:#000
    }
    /*for all text in all contact form 7 forms*/
    .wpcf7 p{
    color:#000
    }

Topic Closed

This topic has been closed to new replies.

About this Plugin

About this Topic