What is JotForm?
JotForm is a free online form builder which helps you create online forms without writing a single line of code. No sign-up required.

At JotForm, we want to make sure that you’re getting the online form builder help that you need. Our friendly customer support team is available 24/7.

We believe that if one user has a question, there could be more users who may have the same question. This is why many of our support forum threads are public and available to be searched and viewed. If you’d like help immediately, feel free to search for a similar question, or submit your question or concern.


  • Profile Image

    Error message pushing the form fields down on the web page

    Asked by lumiarts on September 23, 2016 at 05:42 PM

    When a field isn't filled an error message appears and when it does, it pushes the other fields down and the form is expanded. The form changing sizes messes up my website, since it can't adapt to a new size.

    Anyway, instead of pushing, it could hover over. How do I do this with CSS? Thanks!

    Page URL:
    https://form.jotformz.com/62616721002646

    message fix size thanks and
  • Profile Image
    JotForm Support

    Answered by Kiran on September 23, 2016 at 09:22 PM

    Could you let us know how is the form embedded on your web page? Generally, the height of the form will be automatically adjusted when the form is embedded using default javascript embed method.

    You may also try embedding the form using iframe embed method. Please provide us with the web page URL where the form is embedded so that we can take a look and assist you further.

    Thank you! 

  • Profile Image

    Answered by lumiarts on September 28, 2016 at 04:33 PM

    I use Wix to build my websites and although the form adjusts, the website page does not.
    I tried both javascrip and iframe embed method.

    Só is it possible to do the hover thing? :)

  • Profile Image
    JotForm Support

    Answered by Kiran on September 28, 2016 at 07:20 PM

    There are methods to embed the form as a lightbox or feedback button. Since you are using Wix, it is recommended to use iframe embed method to avoid any conflicts with the other scripts. You may also use the direct link to display the form on the web page instead of iframe.

    You'll also need to enlarge the frame of HTML widget on the web page to fit the form correctly. Please give it a try and let us know how it goes. If you are still experiencing any issue, please get back to us with the web page URL where the form is embedded so that we can take a look.

    Thank you! 

  • Profile Image

    Answered by lumiarts on September 29, 2016 at 06:28 AM

    Like I said Kiran, Wix websites do not automatically adjust, they simply won't, no matter what. It's not an error or anything, they are just build that way. I have already tried embedding as an Iframe and as a web page. I already contacted there support. The only changes I can make is with Jotform.

     

    Enlarging the Html widget is a solution, but one I do not wish to use if possible, since it leaves a awkward and big blank gap in my page.

    I'm almost giving up on this, but could you please take a look at this and see if it is possible? Thanks! :)

    Enter the link below, if you would, and press submit without filling in. You will see the error message just hover over the field. It's a good example. Doesn't have to be exactly the same.

    http://grainandmortar.com/contact/new-business/

     

     

  • Profile Image

    Answered by sevkiyontem on September 29, 2016 at 09:15 AM

    The following css code make the error massage disappears, hence may be it serves for your problem.

     

    .form-error-message {

    display: none;

    }

     

    This would be a partial solution for your design problem.

    I hope this helps for now.

     

    Cheeers :)

  • Profile Image
    JotForm Support

    Answered by Kiran on September 29, 2016 at 12:09 PM

    You may try changing the error displaying style from the Form designer. Please see the screencast below that can help you with this.

    Alternatively, you may try the solution provided by @sevkiyontem also by injecting the CSS code to hide the error message only.

    Let us know if you need any further assistance. We will be happy to assist.  We will be happy to help.