Forminator Pro loses formatting in Hustle Pop Up

When I test the popup either in hustle or in Forminator in the backend, the font is correct. But when it actually opens on the page, the text I inserted at the top of the text block is the correct font, and the form itself is in another font, plus all the formatting I've added has gone away. Please help.

Backend: https://monosnap.com/file/81SaLJWAsHJszjozc1XT7EC0njvSpI
Frontend: https://monosnap.com/file/UaOQYATUXPEXI70xGbLu0IY5VaLOrf

  • mary

    ... And I figured, though this may be a separate question, I'd stick this here because it's Forminator.

    I would like the closing message that shows after the form is submitted to be the only thing on the page, not appear as a box above a repeat of the form, as it does in the attached screen shot. I don't want to show the form anymore on that particular implementation once it's been submitted. And I would like that message to stay onscreen, instead of briefly flashing. I don't want it to redirect anywhere, and I don't want it to cause a reload of the underlying page. I just want the thank you message to show up and stay on the popup.

    Also, if someone returns to the popup, it should not have the thank you message. they should be able to start over and fill out the form again if they want to. Even on an icognito page, when I reload and navigate to the popup, it shows as having already been deployed.

  • Ash

    Hello mary

    About the request you made, would you please create a new ticket so that we can focus on one issue in per thread? That will help us to provide better and faster support as well as it won't have any confusion :slight_smile: Thank you for your understanding.

    About the original issue, would you please enable support access so that I can check? Please follow this article to enable support access: https://premium.wpmudev.org/docs/getting-started/getting-support/#chapter-5

    Also, please share a link with me where we can see the popup with form in action?

    Have a nice day!

    Cheers,
    Ash

  • mary

    Funny you should say that because the second issue was already addressed and fixed by someone today. Support access is and has been enabled since well before this ticket was made.

    URL is y5i.89d.myftpupload.com. Popup is on a slider so to get to it, hit "skip intro" or wait for the intro text to play. This will bring oyu to a menu page. Click "request a care conference" to see the popup.

    Main issues are as follows:
    - Top 2 sections should be side-by-side, not one after the other.
    - Text should be in Roboto font, which is what's selected. That font is offered when creating the form, but if for some reason it can't be used (though it is being used in the text portion of the popup that precedes the form shortcode), any sans-serif font is preferable to whatever this serif font is. Please note that, for me anyway, all the standard "web safe" sans-serif fonts are missing from forminator. No arial, no helvetica.

  • Jonjon

    Hello mary,
    Hope you are doing great.

    I have indeed reproduced the behavior you mentioned in my own test website when I imported your form. However we can’t replicate the font problem with newly created forms on our installation only when your form is imported. We are unsure why at the moment.

    So we will have our developers investigate it further. But we have a workaround for now.
    Please follow the steps below to apply CSS rules that are being applied to the Forminator form on the front-end as well.

    If I understood you correctly, you want to keep the form style present in the back-end on the Hustle Popup Preview correct? With the Roboto font? With a bit of effort I have managed to copy most of the important CSS present in the Admin-Hustle Preview Page and applied it to the Forminator custom CSS, to achieve a similar look. Below are instructions and the code showing how to do it.

    1. Go to (Admin Menu - Forminator PRO - Forms ) choose your form from the list and open it on edit mode. On the bottom right you will see a button showing form settings, please click there:

    2. It will open a new page with form settings, on the appearance tab scroll to the bottom and find a radio button saying Enable custom CSS for this module. After you enable custom CSS you can add the below code there and click on the save button there as well.

    CSS Code:

    .forminator-label, .forminator-checkbox--label, .forminator-radio--label {
        display: inline-block;
        cursor: text ;
        color: #888 ;
        font: 600 12px/22px "Roboto",Arial,sans-serif ;
        letter-spacing: -0.25px ;
    }
    .forminator-checkbox--design, .forminator-radio--design {
        background-color: transparent;
    }
    .forminator-textarea, .forminator-input ,.forminator-textarea::placeholder, .forminator-input::placeholder{
        color:#333;
         -webkit-border-radius: 5px;
        -moz-border-radius: 5px;
        border-radius: 5px;
    }
    #select-1,#checkbox-1{
        max-width: 50%;
        margin: 0px;
        float: left;
    }
    #checkbox-1 .forminator-field .forminator-field--label{
        margin-left:15px;
    }

    About your questions regarding Forminator:

    1.

    I would like the closing message that shows after the form is submitted to be the only thing on the page, not appear as a box above a repeat of the form, as it does in the attached screen shot. I don't want to show the form anymore on that particular implementation once it's been submitted. And I would like that message to stay onscreen, instead of briefly flashing. I don't want it to redirect anywhere, and I don't want it to cause a reload of the underlying page. I just want the thank you message to show up and stay on the popup. Also, if someone returns to the popup, it should not have the thank you message. they should be able to start over and fill out the form again if they want to. Even on an incognito page, when I reload and navigate to the popup, it shows as having already been deployed.

    -> Unfortunately, the hiding of the form after submission is not a feature yet on our current version, but it is being considered for implementation soon. The "permanent" thank you message is not a feature as well. However, the workaround below might help, it consists in hiding the form as well as making the message stick using custom JavaScript coding. I was able to achieve both using the script below using jQuery. You should insert that script in the header or footer of the page. In this example, I have inserted that script in your page using the Insert Headers and Footers plugin (https://wordpress.org/plugins/insert-headers-and-footers/), but you may do it however best for you :slightly_smiling_face: (Please see screenshot below)


    <script type="text/javascript" >
    jQuery(document).ready(function($){
            $( "#forminator-module-4396" ).submit(function( event )
            {
            $( ".forminator-row").hide();
            $( ".forminator-cform-response-message" ).show();
            $( ".forminator-cform-response-message" ).stop();
            console.log('forminator form was hidden');
            });
    });
    </script>

    I hope to have been of help. Let me know if you need any further help.

    Best,
    Jon

  • mary

    Thanks. What is really confusing to me, though, is that the second part of this was actually working yesterday. Submitting the form generated a message that stayed on the screen until closed on purpose with the "X," and it included only the thank you message. I tested it multiple times, and the only part that wasn't working was the re-generation of the form after submission, if someone returns to fill it out again. Is there more than one person working on this at once? If it was you, I'm confused as to why it wasn't left the way it was, as it was almost exactly what I asked for. Is this the code you're giving me? I think there is some confusion. I contacted support because someone had created a "click here" link that was appearing in the footer of the page. I asked if that was something necessary for working on the ticket, and if the person doing it could please remove it when they were done. Instead, it looks like you removed this perfectly functioning code, and left the visible "click here" link, which is what was concerning me, on the page. I discovered that the link is just created by short code, so I deleted it, but if you were under the impression I wanted you to remove the code you'd inserted that was causing the popup to work properly, that isn't correct. Is there any way you could just reset it to what was there yesterday, instead of giving me instructions how to do it? I am so up to my eyeballs right now that frankly, I'm probably just going to switch to a competitor's product if not.

  • Jonjon

    Hi mary,

    I apologize for the confusion. I might have misunderstood your question. I have reactivated and completed the JavaScript code so it will show again when users exit modal and re-enter it by clicking the "Request a Care Conference" button. I have also adapted CSS as you mentioned you wanted it via live chat.

    Hope to have helped and let me know if you need anything else.

    Best Regards,
    Jon

Thank NAME, for their help.

Let NAME know exactly why they deserved these points.

Gift a custom amount of points.