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
    • Code Killa

    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
    • New Recruit

    Thanks a lot, I’ll be looking into it today ! You are the best !

    Regarding the second point, no, she hasn’t, but I think it is just .css and .js animation to implement to the error message class, no ? I was looking to get the specific code to implement it, but I can also check on the Chrome Inspect Consol

  • Jonjon
    • Code Killa

    Hi there Pierre. :slight_smile:

    Hope you are doing great and thank you for your kind words.

    I believe you will need to use JavaScript to replicate the effect of the success message.

    However, I did notice that you changed the layout of the page right?

    Best,

    Jon

  • Pierre-Antoine
    • New Recruit

    Hi Jon,

    I barely changed the layout, why ? I just added some form I created with Forminator and deleted some section I did not need.

    Yes, I would definitely need js and css from, but could you explain me how to replicate it for the error message, please ? Specific code and classes which need to be modified.

    Thanks a lot for your help !

  • Pierre-Antoine
    • New Recruit

    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
    • Code Killa

    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

  • Pierre-Antoine
    • New Recruit

    Hi Jon !

    That is (nearly) perfect !

    I just made a few cange in the css just in order to get the design right :

    I added :

    max-width:90%;
    margin-left:5%;
    border-radius:5px;

    I deleted :

    padding: 20px;

    I just have one last issue : when the error message disapear, you can’t click anymore on any field !

    Thanks again for the awesome work !!

  • Jonjon
    • Code Killa

    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.