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

    Bottom of form missing in Firefox

    Asked by longo on March 07, 2012 at 09:59 AM

    As per the title I have two forms, both of which are being cut short when viewed with Firefox. Both Chrome and IE display both forms as they should be. Both work when using an iframe but I don't like the large gap caused under the form when doing this.

    Thanks in advance for the help.

  • Profile Image

    Answered by ItalyTech on March 07, 2012 at 10:06 AM

    Which Embed Method do you use ? I suggest to use Iframe.. However the form in your site appear correctly.. seems only a little cut in the bottom margin.

     


  • Profile Image

    Answered by longo on March 07, 2012 at 11:15 AM

    Hi

    I'm just using the embeded code, as I said using the iframe produces a gap under the form which then pushes everything else down.

  • Profile Image

    Answered by SeanDavis on March 07, 2012 at 01:09 PM

    Hi,

    This is happening due to a value for the 'min-height' property for your iframe#2 element.. It is set to 300px. Different browsers render code differently, hence for Firefox 300px is not enough to display the entire box with borders.. 

    Solution: Change the 'min-height' property for the iframe to 350px and it will display correctly..

    Hope this helps, let us know how you go..

    Cheers,

    Sean

  • Profile Image

    Answered by longo on March 07, 2012 at 03:07 PM

    Hi Sean

    I'm not using an iframe and if I did it states the height to be 487px so I don't quite understand your answer. I tried a css height attribute in .form all which had no affect. Please could you explain a bit more.

  • Profile Image

    Answered by SeanDavis on March 07, 2012 at 04:51 PM

    <iframe src="" allowtransparency="true" frameborder="0" name="20564235339352" id="20564235339352" style="width: 100%; border-top-style: none; border-right-style: none; border-bottom-style: none; border-left-style: none; border-width: initial; border-color: initial; border-image: initial; height: 325px; " scrolling="no"></iframe>

     

    Above is the code from your page.. If you set the height to 325px then it will display correctly in firefox..

     

    Sean

  • Profile Image

    Answered by fxr on March 07, 2012 at 05:15 PM

    Sean is right,

    It appears your default iframe embed code generated by JotForm is a little off (possibly related to the custom CSS you are using) which resulted in a gap underneath your form. 

    I would definately try out the embed code he has provided.

  • Profile Image

    Answered by longo on March 08, 2012 at 04:05 AM

    Hi to both of you

    I have no idea where on the page you got that code from but as I said I'm not using an iframe, this is the code I'm using

    <script type="text/javascript" src="//form.jotformeu.com/jsform/20564235339352"></script>

    If I was to use an iframe this is the code generated by the form builder

    <iframe allowtransparency="true" src="//form.jotformeu.com/form/20564235339352" frameborder="0" style="width:100%; height:487px; border:none;" scrolling="no">
    </iframe>

    Not the code above, note the height 487px

    This is what happens when an iframe is used

    And this is what happens when the height is decreased to lose the gap, the button dissapears if all or some of the field ar not filled in.

    I hope this has become clearer

  • Profile Image
    JotForm Support

    Answered by abajan on March 08, 2012 at 05:24 AM

    Hi longo

    I see what you're saying and my tests in Firefox versus Chrome produce the same results. Those tests have also shown that embedding the full source of the form will correct that problem. However, If you absolutely need to use the short embed code instead of an iFrame or the full source (due to the latter two methods not automatically updating their content) I'll see if I can come up with a fix (for Firefox and possibly other browsers which might also be exhibiting the issue).

  • Profile Image

    Answered by longo on March 08, 2012 at 05:48 AM

    Please do abajan, thanks

  • Profile Image
    JotForm Support

    Answered by abajan on March 08, 2012 at 06:52 AM

    One solution would be to inject the following CSS:

    .form-all {
    border: 8px solid #D0D0D0;
    float: left;
    padding: 6px;
    }

    .form-line-error {
    background: none repeat scroll 0 0;
    }

    #cid_1 .form-error-message,
    #cid_4 .form-error-message,
    #cid_3 .form-error-message {
    position: absolute;
    top: -2px;
    left: 200px;
    }

    .form-error-arrow,
    .form-error-arrow-inner {
    display: none;
    }

    You would also need to edit the form warning next to the Add to Guestbook button that's triggered if a submission is attempted with empty required fields. You can also remove that warning altogether.

    Alternatively, you can substitute the following CSS for that above and edit the warning next to the submit button as shown here.

    .form-all {
    border: 8px solid #D0D0D0;
    float: left;
    padding: 6px;
    }

    .form-line-error {
    background: none repeat scroll 0 0;
    }

    .form-error-message {
    display: none !important;
    }

    These are not necessarily the best solutions and my colleagues may have better ones.

  • Profile Image

    Answered by longo on March 08, 2012 at 08:44 AM

    Hello Abajan

    Thank you for the reply, I tried your first solution and it didn't work, I assume all that was required was to paste into preferences?

    Your second solutions is using the full source code? which I am trying to avoid.

    I'm not a complete novice but I do have limitations so I may have interrupted your solutions wrongly.

  • Profile Image
    JotForm Support

    Answered by liyam on March 08, 2012 at 10:26 AM

    Have you checked abajan's sample form to be able to view the result out form his instructions?  If not yet, let me post it here again:  http://www.jotform.co/form/20672246516856

    And if you're feeling a bit lazy doing the steps, you might want to try cloing the form instead.  You can learn how to clone abajan's sample form by following the steps from this user guide.

    To explain, what he did was that he used CSS injection to add the CSS codes in to his form sample.  You can learn more about how to inject CSS codes in your form from this user guide.

    I hope this clarifies some of your concerns.  If you have other questions, please do let us know.

    Thanks.

  • Profile Image

    Answered by longo on March 08, 2012 at 10:54 AM

    Yes I have checked abajan's sample form and inserted both his css hacks into form styles and neither work, the second solution is still there.

    I viewed the page source for his sample form and it seems to me that he's using his css in conjunction with the full source code which as I have said I'm trying to aviod.

  • Profile Image
    JotForm Support

    Answered by liyam on March 08, 2012 at 11:16 AM

    abajan's code is not exported.  You can verify it by checking the URL itself: http://www.jotform.co/form/20672246516856

    When you change the URL to:  http://www.jotform.co/jsform/20672246516856, it is already enough to be embedded as:
    <script type="text/javascript" src="//www.jotform.co/jsform/20672246516856" ></script>

    I have just checked your page again and it does seem to work fine now. Can you verify with us that that is your form placed in your web page?

    Thanks.

  • Profile Image

    Answered by longo on March 08, 2012 at 11:35 AM

    Hi

    No its not working, the bottom edge is still being cut off as it has been from the start

  • Profile Image
    JotForm Support

    Answered by NeilVicente on March 08, 2012 at 11:48 AM

    @longo

    The form currently embedded on your webpage looks perfect on my end - using Firefox, Chrome and IE.

     

    Are you seeing something different on your end? Please try clearing your browser's cache.

  • Profile Image
    JotForm Support

    Answered by abajan on March 08, 2012 at 12:02 PM

    @longo

    If you're referring to the bottom gray edge being partly hidden in Firefox (versus Chrome and other browsers that are showing it properly) when the page loads, I'm still trying to find a solution for that. As to the bottom edge vanishing completely when the error notice by the submit button appears, you will need to limit the notice to just a single line, as I've done in my example (although, I must admit that "Complete red fields!" probably isn't the best notice).

    I'm sure there's a CSS hack available somewhere online to make the form behave correctly in Firefox. Of course, the trick is to find it. I'll keep searching and let you know when I find it.

  • Profile Image
    JotForm Support

    Answered by abajan on March 08, 2012 at 12:12 PM

    Incidentally, I've just changed the button's text in my example from "Add to Guestbook" to "Add Comments" which reduced the button's width, allowing me to add "Please" to the notice and still keep it on one line.

  • Profile Image
    JotForm Support

    Answered by abajan on March 08, 2012 at 12:23 PM

    I think you got the idea that I was using the full source in my second example because you may not be aware that the text of that error message can be edited in the form builder. If so, here's how to change it: While on the Setup & Embed tab, click Preferences > Advanced Settings > Edit Form Warnings > click the text that matches what is being displayed next to the "Add Comments" button > change the text to something shorter that can fit on one line > click the Save button and close the preferences window if you're not going to make other changes.

  • Profile Image

    Answered by longo on March 08, 2012 at 03:48 PM

    Hi there abajan

    Firstly thank you for your contining help with this, you are quite right in your last post ref the full source, I have now shortened the text to *Required Field.

    I am still concerned regarding the bottom border but that probably pales into insignificance when compared to the form on the 'Contact Us' page on the same site, the actual button has been cut off but again in IE and Chrome it displays as it should.

    I am aware of different browsers displaying things in differing ways but not to this extent, please take a look at the contact us page and let me know your thoughts

  • Profile Image

    Answered by fxr on March 08, 2012 at 05:48 PM

    @abajan is best placed to sort this out when he gets back on duty. 

  • Profile Image
    JotForm Support

    Answered by abajan on March 08, 2012 at 10:16 PM

    EUREKA!

    After saving a copy of your site to my computer, searching the JotForm forum and experimenting with all sorts of workarounds, I've found the answer. (Well, at least it appears that way because I've only checked Firefox 10 and Chrome 17). Simply changing the rule's selector from .form-all to body will solve the problem. (Also, there's no need for the margin-bottom: -40px; declaration)

    Change this:

    .form-all {
    border: 8px solid #D0D0D0;
    float: left;
    padding: 6px;
    margin-bottom; -40px;
    }

    to this:

    body {
    border: 8px solid #D0D0D0;
    float: left;
    padding: 6px;
    }

    Later tonight I'll use BrowserStack.com to see if this solution works in other browsers but I'm pretty confident that it would (knock wood!). If the results are consistent across platforms and browsers, we (the JotForm Support team) have got our work cut out for us because I think several users have reported this issue over the past year. If it's as many users as I think, perhaps it would be best to just have Aytekin post the solution on the JotForm blog.

  • Profile Image
    JotForm Support

    Answered by abajan on March 08, 2012 at 10:56 PM

    Oops!

    I just discovered that for this to work in IE8, you'll need to add a width to the rule:

    body {
    border: 8px solid #D0D0D0;
    width: 365px;
    float: left;

    padding: 6px;
    }

    (I think W3C states somewhere that if a float is declared in a rule a width must also be declared.)

    Stay tuned for other discoveries!

  • Profile Image
    JotForm Support

    Answered by abajan on March 09, 2012 at 01:44 AM

    The following code works in all browsers I was able to test. (I was only able to check one mobile browser but I think they should be okay too.)

    body {
    border: 8px solid #D0D0D0;
    width: 365px;
    float: left;
    padding: 0 2px 7px 6px;
    }

    #id_1 {
    margin-top: -6px;
    padding-top: 0;
    }

    .form-line-error {
    background:none repeat scroll 0 0;
    }

    .submit-button-error {
    display: block;
    }

    The value of the last declaration in the first rule needed adjusting: 6 pixels of padding wasn't quite right for all four sides.

    Switching the first rule's selector to body necessitated the inclusion of the second rule because there was too much space above the "Title" field.

    Without the last rule, the form's bottom border gets chopped off in IE7 when the submit button's error message is displayed. However, the rule can be omitted if the message is shortened to one line.

    IE6 (the browser all webmasters love ;)  was true to form:


    If you believe that a significant enough portion of your users will be using IE6 to warrant correcting that problem, inlude the following rule:

    .form-error-arrow,
    .form-error-arrow-inner {
    display: none;
    }

    As you've probably figured out, if it's included you'll lose the arrows attached to the error message "text bubbles" (as I like to call them).

    That's all for now. If you need further assistance with this or any other aspects of your form(s), do let us know.

  • Profile Image

    Answered by longo on March 09, 2012 at 03:40 AM

    Well done abajan, this has been excellent and impressive work, thanks