Form style disappears before displaying the success message

When you submit the form with a correct email address, the whole CSS of the form disappears for a moment before the success message is displayed if “TheGem” theme is active on the site (the issue is not there if using a default theme like Twenty Seventeen). How can this be fixed?

And I also when you type a@b.com for example in the email field, would it be possible to get the error message displaying with the same CSS style and animation as the success message? Is it possible?

  • Jonjon

    Hello there Pierre.

    Hope you are doing great.

    I have checked your website and I have found what the problem is regarding your form disappearing, the Class name .loading is shared between theme and hustle plugin so there is conflict there.

    I suggest you verify if this class is used in other places of your website, if not you can comment it out in your theme style.css file. However, I have implemented a fix for this which uses the !important tag. Note this should only be used as a last resort such as this case to overcome some conflict, but it's better evade all possible conflicts.

    the portion in your style.css which is conflicting with Hustle Pro is:

    .loading {
        position: absolute;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        z-index: 2;
    }

    Below are two screenshots where I put the fix and show the original code.

    As for your second request, I believe my colleagues has helped you with that correct?

    Hope to have helped.

    Best Regards,
    Jon

  • Pierre-Antoine

    Hi Jon,

    No problem ! It was a countdown page I did but no framework involved, just pure html/css/jquery

    Sure !
    For now, when I enter a bad email address (like no @ or even just a@b.com), here is what I get :

    What I would like is to change te way the error message is displayed and display it like the success message :

    With the same .js animation (SlideUp for x seconds, then disapear)
    Thank you for your help !

  • Jonjon

    Hi there Pierre.

    Thanks for your feedback.

    The only was I found was adding a new CSS animation. I already applied it okay? It is in Appearance - Customize-Additional CSS.

    @keyframes flickerAnimation {
      0%   { opacity:0; }
      50%  { opacity:1; }
      100% { opacity:0; }
    }
    @-o-keyframes flickerAnimation{
      0%   { opacity:0; }
      50%  { opacity:1; }
      100% { opacity:0; }
    }
    @-moz-keyframes flickerAnimation{
      0%   { opacity:0; }
      50%  { opacity:1; }
      100% { opacity:0; }
    }
    @-webkit-keyframes flickerAnimation{
      0%   { opacity:0; }
      50%  { opacity:1; }
      100% { opacity:0; }
    }
    .animate-flicker {
       -webkit-animation: flickerAnimation 1s infinite;
       -moz-animation: flickerAnimation 1s infinite;
       -o-animation: flickerAnimation 1s infinite;
        animation: flickerAnimation 1s infinite;
    }
    
    .hustle-modal .hustle-modal-optin_form .wpoi-submit-failure {
        -webkit-animation-name: flickerAnimation;
        animation-name: flickerAnimation;
        overflow: hidden;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -ms-flex-wrap: nowrap;
        flex-wrap: nowrap;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        position: absolute;
        z-index: 1;
        top: 0px;
        right: 0;
        bottom: 0;
        left: 0;
        padding: 20px;
        background: #38454E;
        -webkit-animation-duration: 3s;
        animation-duration: 3s;
        -webkit-animation-fill-mode: both;
        animation-fill-mode: both;
        -webkit-transform-origin: center;
        transform-origin: center;
        -webkit-transform-style: preserve-3d;
        transform-style: preserve-3d;
    }

    Hope that helps you :slight_smile:

    Best,
    Jon

  • Jonjon

    Hi Pierre :slight_smile:

    Thank you for your kind words, I am happy to aid.

    I have managed to make the fields clickable again by updating the keyframes lines to this:

    @keyframes flickerAnimation {
      0%   { opacity:0; }
      50%  { opacity:1; }
      100% { opacity:0; display:none;  visibility: hidden;}
    }
    @-o-keyframes flickerAnimation{
      0%   { opacity:0; }
      50%  { opacity:1; }
      100% { opacity:0; display:none;  visibility: hidden;}
    }
    @-moz-keyframes flickerAnimation{
      0%   { opacity:0; }
      50%  { opacity:1; }
      100% { opacity:0;  visibility: hidden; display:none;}
    }
    @-webkit-keyframes flickerAnimation{
      0%   { opacity:0; }
      50%  { opacity:1; }
      100% { opacity:0; display:none;  visibility: hidden;}
    }

    I have applied it already to your hustle modal. Do let me know if presents any trouble.

    Have a nice day ahead!
    Jon

Thank NAME, for their help.

Let NAME know exactly why they deserved these points.

Gift a custom amount of points.