My only issue is that the comment forms have a bright orange background that doesn’t match my chosen theme colors. I don’t see any color options for this in the block, nor in the patterns, nor in the “edit site > styles > customize individual blocks settings. It seems like the color is hard-coded into the theme, but that bright orange is a surprising choice!

What would be the best way for me to update this color so it is not bright orange?

I have tried a number of things to get it functional, but it doesn’t look the way it should. I had to deactivate reCaptcha invisible v2 for the form to submit. The reCaptcha initially worked before going live but then I got an “Error for Site Owner: Invalid Site Key” notice on the page. In the settings, I turned on Load assets globally & No-conflict mode in recaptcha, testing each individually. Neither had an effect. The Enable AJAX From Submission setting is on.

After disabling reCaptcha on the form settings, it will send, but the checkbox is white with no check. When you click on it, it turns a very light gray which actually means it is unchecked. I tested this. Also, the background in the form fields is the color of my page background, which is relatively dark. The input text was dark but not black & very difficult to read.

The form Styling was set to Base & Form Theme Styling. I tried the other settings & have left it on Base Styling, now, as this fixed the check box & made the input text black. But the submit button is very small & the background is still the same as the page. The form looked better set to Base & Form Theme Styling, but was not useful.

There were no events listed in the log & no errors reported when debugging was activated. The SSL tested successfully.

Host: Bluehost
Theme: Sinatra
Other plugins: WP mail SMTP, Yeost SEO, UpDraft Plus, All in one WP Security, Creative Mail (not tested), Jetpack, … Boost, & … CRM.

I am grateful for any assistance you can offer as I’m out of ideas. Thank you.

It works perfectly on the homepage and a few other pages, however, on some other pages it loads in as a big white box.

(see images linked).

This is the code I’m using for the individual form:

/* contact form 7 NEWSLETTER settings */
div#wpcf7-f64487-o1
#wpcf7-f64487-o1 input[type="text"],
#wpcf7-f64487-o1 input[type="email"] {
    float: left;
    width: 70%;
}
#wpcf7-f64487-o1 input[type="submit"],
#wpcf7-f64487-o1 input[type="button"] {
    float: right;
    width: 29%;
text-align:center;
color: #ffffff !important;
font-family: soleil !important;
font-size: 20px !important;
}
#wpcf7-f64487-o1 input[type="submit"],
#wpcf7-f64487-o1 input[type="button"]  {
    margin-top: -15px;
}
div#wpcf7-f64487-o1 { 
background-color: transparent;
border: none
}

This is the code I’m using for all other CF7 forms

/* Contatct form 7 settings */
div.wpcf7 {
background-color: transparent!important;
border: none
padding:20px;
}
.wpcf7 input[type="text"],
.wpcf7 input[type="email"],
.wpcf7 input[type="url"],
.wpcf7 textarea {
background:#fffc;
color:#000;
font-family:soleil !important;
width:100%;
border: 1px solid #000;
}
input[type="text"].wpcf7-form-control:focus,
input[type="email"].wpcf7-form-control:focus,
input[type="url"].wpcf7-form-control:focus,
textarea.wpcf7-form-control:focus {
    background: #fff;
    color: #000;
}
.wpcf7 input[type="submit"],
.wpcf7 input[type="button"] { 
background-color:#d12a5c;
width:50%;
text-align:center;
color: #ffffff !important;
font-family: soleil !important;
font-size: 20px !important;
}

Can anyone fix this so the form stays the same across all pages?

The actual contact form is inserted in the footer content block on the website.

Please note: before telling me to look into CSS styling – I already have! That’s what the above code is from.

I have linked a screenshot of one of the pages above, however here is a link to two of the pages on our site where the form style is incorrect:

https://www.sierrasixmedia.co.uk/contact-us/
https://www.sierrasixmedia.co.uk/seo-agency-essex/

In case you wanted to compare the coding, here are some pages that it works fine on

https://www.sierrasixmedia.co.uk/
https://www.sierrasixmedia.co.uk/community/

This seems to only happen when 2 forms are on one page – the coding is conflicting.
These are the solutions I have tried so far that havn’t worked:

– Added a:not (#wpcf7-f64487-o1) to the all forms code
– Adding !important to the relevant CSS styles.
– Column shortcodes in the form code.
– Inline css styling in the form code.

It works perfectly on the homepage and a few other pages, however, on some other pages it loads in as a big white box.

(see images linked).

This is the code I’m using:

/* contact form 7 NEWSLETTER settings */
div#wpcf7-f64487-o1
#wpcf7-f64487-o1 input[type="text"],
#wpcf7-f64487-o1 input[type="email"] {
    float: left;
    width: 70%;
}
#wpcf7-f64487-o1 input[type="submit"],
#wpcf7-f64487-o1 input[type="button"] {
    float: right;
    width: 29%;
text-align:center;
color: #ffffff !important;
font-family: soleil !important;
font-size: 20px !important;
}
#wpcf7-f64487-o1 input[type="submit"],
#wpcf7-f64487-o1 input[type="button"]  {
    margin-top: -15px;
}
div#wpcf7-f64487-o1 { 
background-color: transparent;
border: none
}

Can anyone fix this so the form stays the same across all pages?

The actual contact form is inserted in the footer content block on the website.

Please note: before telling me to look into CSS styling – I already have! That’s what the above code is from.

It works perfectly on the homepage, however, on other pages it loads in as a big white box.

(see images linked).

This is the code I’m using:

/* contact form 7 NEWSLETTER settings */
div#wpcf7-f64487-o1
#wpcf7-f64487-o1 input[type="text"],
#wpcf7-f64487-o1 input[type="email"] {
    float: left;
    width: 70%;
}
#wpcf7-f64487-o1 input[type="submit"],
#wpcf7-f64487-o1 input[type="button"] {
    float: right;
    width: 29%;
text-align:center;
color: #ffffff !important;
font-family: soleil !important;
font-size: 20px !important;
}
#wpcf7-f64487-o1 input[type="submit"],
#wpcf7-f64487-o1 input[type="button"]  {
    margin-top: -15px;
}
div#wpcf7-f64487-o1 { 
background-color: transparent;
border: none
}

Can anyone fix this so the form stays the same across all pages?

The actual contact form is inserted in the footer content block on the website.

Hi,

I have built a website and notice that my table above fits, but the formula goes too far to the left.
Can this be adjusted?

Already had the obstacle that the writing became white, I was able to solve this using CSS and HTML.

This plugin has a bunch of other capabilities that are probably also great, but I only happened to need the form styling functionality and alas, cannot speak to those.

Also can you please provide code to hide the privacy policy link.

How can I fix this issue? Is it due to my theme (Brooklyn)?

Here’s the page, just click one of the GET QUOTE buttons: https://myrina-digital.com/let-us-do-the-hard-work-for-you/