Contact Form 7 Version 5.2.2. and Betheme no Colours in PopUp after Send Button

Freshinger

Dear Betheme Team,

we have problems with the Update Contact Form 7 5.2.2 and the Betheme Theme.

1. After Push the Send button in the new Version the scroll up Funktion is not working. Here the the JS-Code

(function($) {

$(document).ready(function(){

    //bmo scroll to not valid

    $(".wpcf7").on('invalid.wpcf7',function(e){

        $('html, body').animate({

                scrollTop: $(".wpcf7-not-valid").first().offset().top-200

            }, 1400);

    });

});

})(jQuery);

2. The Push Notification after the Send Button is showing a Information without a Background Color. The Text is Only alone.

I don`t understand the Problem.....

Pablo

Hello,

1) Sorry, but we do not help with the custom js scripts, we only provide help with css code tweaks.

2) I do not understand, can you explain me it greater and attach a link to your website?

thanks

Learn more: Video Tutorials | How To | FAQ Vote on what comes next

Freshinger

Dear Pablo,

1) ok i understand.

2) After i click to the send button, it comes a pop up information under the contact form. So this have no color. We have create a stage for you. https://alpha.protectum.de/en/contact. Here when you click to send. The Information under the send button have no color after install contact form 5.2.2. with contact form 5.1.9 all is running well. So please take a look. Than i can do a roleback to version 5.1.9 and than you can take a second look. So you can understand my problem

Pablo

Sorry, but I do not see any issue, it returns the information that it was send correctly.

https://prnt.sc/u651z6

Did you solve the problem or you reversed to the 5.1.9 version?

thanks

Learn more: Video Tutorials | How To | FAQ Vote on what comes next

Freshinger

This is right, but i have colors in the Backround on version 5.1.9 so where can set the Colors in the new version? I have rollback to version 5.1.9

Freshinger

1. You can see after send the green color..... this is top 

2. So where can i set the color for the send message? 

Pablo

1) I do not understand, it's green container with success information, what is the problem?

2) Please use this CSS code:

.wpcf7-mail-sent-ok{
  background:purple !important;
}

thanks

Learn more: Video Tutorials | How To | FAQ Vote on what comes next

Freshinger

Dear Pablo, so i have use the new css code. Now i have updatet to the Version5.2.2 from Contact form 7. So you can check again. The color purple is not show yet. Please check again now you understand the problem....

Freshinger

Dear Pablo,

can you check it again? You can see now color after Installation Contact Form 7 Version 5.2.2. The Color purple is not show.....

Pablo

Well, it changed in the plugins code, we did not change anything there.

It will be fixed in the next update, so stay calm

If you need the code ASAP, please tell me.

thanks

Learn more: Video Tutorials | How To | FAQ Vote on what comes next

Freshinger

Dear Pablo,

thanks for the information. We Wait at the new Betheme Update. Greats Eric

Freshinger

Dear Pablo,

we have Install the latest Version of Betheme 21.8.4. But the problem is not resolved. I have no background color at the Popup Information. 

Please Come back with more Informations.

Pablo

We changed the problem with floating, but we are still waiting for the fix from CF7 team, because the problem is coming from their plugin, not the betheme.

If you want to get the fix with CSS code, please restore the website, because right now I cannot access it to create such a code.

thanks

Learn more: Video Tutorials | How To | FAQ Vote on what comes next

Freshinger

Dear Pablo,

the site is now activ. You can check.

Pablo

Please use this CSS code in the Theme Options > Custom CSS & JS > CSS

.wpcf7-response-output[role='alert']{background:purple !important; color:white; width:100%; text-align: center;}

thanks

Learn more: Video Tutorials | How To | FAQ Vote on what comes next

Freshinger

ok thank you, now is the Color showing. So we wait at the new Update from Contact Form 7. So all is working well in a few weeks. Greats.

Freshinger

Dear Pablo This Code is since a few days not Working Can you take a look what is the Problem?

Pablo

Can you send us a link to your website? The one you sent is not working anymore.

thanks

Learn more: Video Tutorials | How To | FAQ Vote on what comes next

Freshinger

Dear Pablo,

we have test ist a little bit, but we need your Code, in an DIV Class as Column One but your code is not Column One can you take a Column into this CSS Code?

.wpcf7-response-output[role='alert']{background:purple !important; color:white; width:100%; text-align: center;}

Pablo

Well, the HTML in CF7 changed again, in that case, you have to remove the [role='alert'] from CSS selector

It should look like that:

.wpcf7-response-output{background:purple !important; color:white; width:98%; text-align: center;}

Thanks

Learn more: Video Tutorials | How To | FAQ Vote on what comes next

Freshinger

So and this code is set to an "div class=column one" where can I do this?

Pablo

Sorry, I do not understand what you mean.

Can you explain it greater?

thanks

Learn more: Video Tutorials | How To | FAQ Vote on what comes next

Freshinger

I need the code what we have in an div class but the Respons-output is not centered under the Contact Form look at the Picture.

Pablo

It won't be always equal because this container is between 20%-30% of width by default, with CSS we extended it but HTML code of that form is not desired for that kind of modifications.

I changed the CSS code above to be better, but on some resolutions it won't be 1:1 pixel perfect

Thanks

Learn more: Video Tutorials | How To | FAQ Vote on what comes next

Freshinger

ok thank you very much. I think the problem is the new Version of Contact Form 7 since Version 5.2 we have problems.

I hope betheme is working at a support for Ninja Form. That was great.

Greats Eric

Pablo

We do not have plans to support it right now, but please post your suggestion in this topic, we'll take a look at it :)

https://forum.muffingroup.com/betheme/discussion/113/your-suggestions-for-future-updates

thanks

Learn more: Video Tutorials | How To | FAQ Vote on what comes next

Freshinger

Dear Betheme Support,

can you tell me how can I change the color vor Warning Message or vor send Message into red or into green color.

The Contact Form 7 and Betheme is since Version 5.20 of contact form very ugly.

Phil

Can you send me a link to your website again, please?

Because the link from your second message is not working anymore.

Thanks

Learn more: Video Tutorials | How To | FAQ Vote on what comes next

Freshinger

I found it: here are the codes:

.wpcf7 form.sent .wpcf7-response-output{background:lightgreen !important; color:white; width:98%; text-align: center;}

.wpcf7 form.invalid .wpcf7-response-output{background:lightgreen !important; color:white; width:98%; text-align: center;}

.wpcf7 form.failed .wpcf7-response-output{background:red !important; color:white; width:98%; text-align: center;}

.wpcf7 form.spam .wpcf7-response-output{background:orange !important; color:white; width:98%; text-align: center;}

But the text is not complete centered with width:98% have you a other tip?

Phil

Sorry, but you still did not send a link to your website.

Can you attach it, please? It would help a lot if I could take a closer look at it.

Best regards

Learn more: Video Tutorials | How To | FAQ Vote on what comes next

Freshinger

https://beta.protectum.de where can I send you login files ? For a Look?