Contact Form 7 Issue (Yellow Line)

[AK49_Logan_907]

Hi,
We used Contact Form 7 to create something similar to what you had in the design cloud.

Main Issue:

1. Yellow Bar, get it on every contact form, any page, any element we use.
2. Sizing seems to be limiting the "Let’s do this button from being on the right where it should be.

Shortcode:
[contact-form-7 id="1291" title="Contact Form Final F"]
Form:

<div class="smtitle">Contact Us</div>
<div class="smrow"><div class="smrowinner">[text* your-name placeholder "First Name"]</div></div>
<div class="smrow"><div class="smrowinner">[text* last-name placeholder "Last Name"]</div></div>
<div class="smrow"><div class="smrowinner">[email* your-email placeholder "Email Address"]</div></div>
<div class="smrow"><div class="smrowinner">[text your-company placeholder "Company If applicable"]</div></div>
<div class="smrow"><div class="smrowinner">[submit "LET'S DO THIS"]</div></div><div class="smclear"></div>
</div>

Custom CSS:

padding:20px 0px;
}

.smrow{
width:25%;
float:left;
}
.smtitle{
padding:10px 0px;
text-align:center
}
.smrowinner{
padding:0px 10px;
}

.smrow input{
padding:8px;
width:100%;
border:1px solid #222;
background:#fff;

}

.smrow input[type="submit"]{
padding:8px;
width:100%;
border:1px solid #222;
background:#02b1f4;
color:#fff;
height: 50px;
}


@media only screen and (max-width: 768px) {
.smrow{
width:100%
}
}

Can you tell me where I’m going wrong? I’m using the element “Classic contact Form 7” and also tried “Content Area”.

[marc_a]

Hi @AK49_Logan_907,

One of my colleagues explain the reason why there’s an issue with the yellow line below the contact form 7, please check it here.

For a temporary fix, please add this a little bit CSS code to your Pro > Theme Options then CSS.

.wpcf7-response-output {
    display: none;
} 

I hope it will help you to solve your issue.

Please note that providing custom code is outside the scope of our theme support. Issues that will arise from the use of custom codes should be forwarded to a 3rd party developer.

Thank you.

[AK49_Logan_907]

Hi @cramaton ,
Thank you for getting back to me. Your new code was able to hide the display bar.
The last issue is that there seems to be some kind of container on the “Classic Contact Form 7” element. I’ve made sure global container is off and have played with sizing in the CSS and in the element builder but nothing seems to be able to fix the sizing issue. It was working before I added the “Company, if applicable” box. I’m assuming the builder is limiting the size somehow.

Can you provide any support on this? It would be greatly appreciated!

[nabeel]

Hey @AK49_Logan_907,

To fix the alignment issue, In your custom CSS, please find the following piece of code:

.smrow {
    width: 25%;
    float: left;
}

And replace it with:

.smrow {
    width: 20%;
    float: left;
}

Please note that the code provided above serves as a guide only and is to help you in getting started so implementing it and maintaining the code will be out of our support scope and for further maintenance for new possible versions of the theme that may cause the customization to break, you will need to hire a developer.

Don’t forget to clear all caches including your browser’s cache after adding the code. Let us know how this goes!

[SayyamJS]

Hey Guys

Ever since i recently updated all my clients sites, I’ve had the same issue… Thank you for showing how to hide the response box, but now another big issue has occured as one of my client sites (https://security-everywhere.com) contact form no longer syncs with Active Campaign and that’s major… I am trying to contact the guys who made the integration app also for help, but would appreciate if you had any clue of why this recent update has broken the sync?

P.S. When you submit a form in any contact form now, it submits but with a yellow and not a green box…

Thanks,
Sam

[nabeel]

Hi Sam,

Thank you for reaching out to us. This could be possible the plugin you’re using for Active Campaign might have conflicts with latest update. Ensure everything is up to date according to our version compatibility list at https://theme.co/docs/version-compatibility. Please follow the best practices when updating your theme and plugins. See https://theme.co/docs/product-updates for more details.

If the issue persists then please follow the troubleshooting steps here https://theme.co/docs/common-issues

Let us know how this goes!