[Plugin: Contact Form 7] Colored background

  • 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 https://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 80×2 Comments] </td>
    </tr>
    </tbody>
    </table>

    <p>[submit “Send”]</p>

Viewing 9 replies - 1 through 9 (of 9 total)

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

    Thread Starter barefootsusan

    (@barefootsusan)

    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.

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

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

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

    Thread Starter barefootsusan

    (@barefootsusan)

    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

    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.

    Thread Starter barefootsusan

    (@barefootsusan)

    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!

    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.

    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
    }

Viewing 9 replies - 1 through 9 (of 9 total)
  • The topic ‘[Plugin: Contact Form 7] Colored background’ is closed to new replies.