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

    Form Causing Text To Be Displayed Differently In Browsers

    Asked by David on November 22, 2011 at 04:02 AM

    My form on the stated page is causing the text to display differently when using various browsers, when viewed using IE9 and FF8 the text is as it should be. When viewed using the latest Google Chrome a gap appears in the text, I deleted the form and the gap was gone. The code appears to be different in Chrome than it is in FF, unfortunatley I'm not knowledgable enough to know if this is how it should be or not. The screenshots below will explain better.

    Viewed using chrome

    Viewed using IE AND FF


    Chrome code

    FF code

    Any help would be appreciated

    Page URL:
    http://www.leathersolutions.org/the-guestbook.php

  • Profile Image
    JotForm Support

    Answered by idarktech on November 22, 2011 at 06:26 AM

    Hi David,

    Please try to use and iframe code and see if that makes any differences. 

    We'll await for your feedback. Thanks.

  • Profile Image

    Answered by David on November 22, 2011 at 11:01 AM

    Hello and thanks for your quick reply, just a little extra background, my site is Yola built and the last two text entries on the left are in a seperate widget so the text will appear to 'wrap' around the form. I did try your suggestion before I posted here and because a height attribute of 471px is specified it increased the gap in chrome and created one using FF/IE, I did decrease this but when submitting with no entries the warning text spills over my written text. I beleive chrome is reading the code as if the form as been submitted with no entries so has expanded to show the 'this field is required text', as to why though I have no idea.

  • Profile Image
    JotForm Support

    Answered by idarktech on November 22, 2011 at 04:03 PM

    Hi David,

    Please try injecting this css code:

    Lets try setting a fixed height and see if that makes any differences.

    .form-all{

    max-height:336px; 

    }

     

    If you like, you can also remove the error display by adding this code:

     

    .form-error-message {

    display: none !important;

    }

    .form-line-error {

    background:none repeat scroll 0 0;

    }

     

     

    After doing that, please edit your embed code by changing form.jotform.com to www.jotform.com, so your embed code should like this:

    <script type="text/javascript" src="//www.jotform.com/jsform/12562506957"></script>

    Preview your website. If the above fix doesn't work, please let us know so we can assist you further. Thank you so much!

  • Profile Image

    Answered by David on November 23, 2011 at 04:00 AM

    Hi. still the same unfortunatley, should I keep the new edits in place?

  • Profile Image
    JotForm Support

    Answered by idarktech on November 23, 2011 at 06:27 AM

    David,

    Yes, just keep the new changes. Sorry if I couldn't give you further workaround, that's actually the nature of using Script Embed code, it increases height when form error comes out. With regards to your browser compatibility problem, I suggest to leave it like that in order to maintain form's functionality. If some of my colleague has solution for this, then we'll just let you know.

    Thank you once again for waiting and have a great day!