CF7 – 2 forms on one page conflict.

Hello, I’m having issues with CSS styling for a newsletter form using Contact form 7

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.