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

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.....
«1

Comments

  • 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
  • edited August 2020
    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
  • Sorry, but I do not see any issue, it returns the information that it was send correctly.

    Did you solve the problem or you reversed to the 5.1.9 version?
    thanks
  • 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
  • 1. You can see after send the green color..... this is top 
    2. So where can i set the color for the send message? 
  • 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
  • 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....
  • 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.....
  • 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
  • Dear Pablo,

    thanks for the information. We Wait at the new Betheme Update. Greats Eric
  • 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.
  • 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
  • Dear Pablo,

    the site is now activ. You can check.
  • 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
  • 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.
  • Dear Pablo This Code is since a few days not Working Can you take a look what is the Problem?

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

    thanks

  • 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;}

  • edited January 2021

    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

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

  • Sorry, I do not understand what you mean.

    Can you explain it greater?

    thanks

  • 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.


  • 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

  • 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

  • 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 :)

    thanks

  • 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.

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

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


    Thanks

  • 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?

  • 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

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

Sign In or Register to comment.