Error message increases the height of the embedded form causing alignment issues on my webpage

  • anzh78
    Asked on August 25, 2016 at 8:59 AM
    There are also problems with the other elements of the site, they move. What i shoud to do? The platform is Muse
  • John_Benson
    Replied on August 25, 2016 at 1:03 PM

    I saved your webpage to my computer and cloned your form. I embedded the cloned form to the saved webpage using the iFrame method. I injected a custom CSS so that the error message will not create an extra space causing the form height to adjust. Here's the result:

    Error message increases the height of the embedded form causing alignment issues on my webpage Image 1 Screenshot 20

    If this solution is okay with you, then please refer to the steps below:

    First, please try injecting this custom CSS to your form.

    .form-line-error .form-error-message {
    padding: 0px !important;
    margin-bottom: 0px !important;
    }

    .form-error-message {
    max-width: 400px !important;
    position: absolute !important;
    bottom: 0px !important;
    }

    Here's a guide on how to inject custom CSS. After that, please refresh your webpage and check if the issue is fixed or not.

    If not, then please try to re-embed the form using the iFrame method. Here's a guide: https://www.jotform.com/help/148-Getting-the-form-iFrame-code. You need to remove the <script> element and just use the <iframe> code itself.

    <iframe id="JotFormIFrame-62374922480963" onDISABLEDload="window.parent.scrollTo(0,0)" allowtransparency="true" src="https://form.jotform.com/62374922480963" frameborder="0" style="width:100%; height:539px; border:none;" scrolling="no"> </iframe>
    <script type="text/javascript"> ...</script>

    Hope that helps. Let us know if you need further help. Thank you