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

    Can't get form to display properly across browsers

    Asked by riverinatradies on April 13, 2013 at 12:51 AM

    Just using the simple embed code my forms display correctly in chrime, IE and safari but the botoom of the forms gets cut off in firefox. So I tried embedding using iframe, which displayed the form in full in firefox however the layout was all messed up and then it would display properly in chrome, almost all of the form was cut off.

    HELP!

    http://www.riverinatradies.com.au/contact.html

    Page URL:
    http://www.riverinatradies.com.au/contact.html

    My Forms layout www
  • Profile Image
    JotForm Support

    Answered by Welvin on April 13, 2013 at 05:51 AM

    Hi,

    I am able to replicate the same. This is maybe because of the update made by Firefox (if you notice that).

    Please try re-embedding your form using our iframe method, on this codes:

    <iframe id="JotFormIFrame" allowtransparency="true" src="//www.jotform.co/form/22741619522856" frameborder="0" style="width:100%; height:523px; border:none;" scrolling="no"></iframe>

    Let us know for results.

    Thanks

  • Profile Image

    Answered by riverinatradies on April 15, 2013 at 05:05 AM

    That method seems to allow the form to show in full across all browsers however the layout is still messed up in firefox. In chrome you will see that the label is on the same line as the text box, however in firefox it shifts the text box to the line below making the form as a whole much longer and doesn't look as good either. This isn't a huge problem but as I have a number of other forms (most of which are longer than this one) it does mess up the look of my website a bit. Anyway around this or is this as good as I can get it?

    You can see at the test link I have made here:

    http://www.riverinatradies.com.au/contact2.html

  • Profile Image
    JotForm Support

    Answered by Welvin on April 15, 2013 at 05:50 AM

    Hi,

    Change the width value of the iframe codes from 100% to 438px or higher until you'll see the same on both Chrome and FF.

    Or, use this codes;

    <iframe id="JotFormIFrame" allowtransparency="true" src="//www.jotform.co/form/22741619522856" frameborder="0" style="width:438px; height:523px; border:none;" scrolling="no"></iframe>

    Let us know for the results.

    Thanks

  • Profile Image

    Answered by riverinatradies on April 15, 2013 at 06:10 AM

    Nope, same issue, I even cleared my history just to be sure.

    Here's a screen cap of how they are looking with the second code you sent through.

    Damn firefox :-(

  • Profile Image

    Answered by riverinatradies on April 15, 2013 at 06:20 AM

    PS - Tried widths right up to 700px. Made no difference

  • Profile Image
    JotForm Support

    Answered by Welvin on April 15, 2013 at 06:24 AM

    Hi,

    Increase your form width to 448px or change that from the codes.

    Then, inject this codes to your form;

     

    #input_4, #input_10, #input_6 { width: 192px !important; }

    #input_13 { width: 350px !important; }

     

    Guide: How to Inject Custom CSS Codes

    Results;

    Thanks

  • Profile Image

    Answered by riverinatradies on April 15, 2013 at 06:37 AM

    Awesome, fixed it. Thanks!!!

    How do I find out what each label is called and what the widths need to be as I have a number of other forms where I'll need to apply this as well.

  • Profile Image
    JotForm Support

    Answered by Welvin on April 15, 2013 at 06:54 AM

    Hi,

    Great! It's my pleasure to help! As far as I know, this issue happens when FireFox is updated to version 20.0.1.

    Find field ID: How to Find Field IDs & Names

    You can also use "Inspect Element" Feature by Google Chrome or FireFox to see these field ID's and Names.

    When you inject custom widths, this will override the settings you have on the form.

    I think, the field widths can't be found using this method, you will have to edit the form and click "Size" button to see the field widths;

    Anyway, we can help you more about this. Let us know if you need any other information on how to achieved the same.

     

    Thanks

  • Profile Image

    Answered by riverinatradies on April 15, 2013 at 06:57 AM

    Damn, just doubled checked and with above method form was appearing as it should on IE Chrome and Firefox, but when I checked on my phone it wasn't displaying correctly on Safari now.

    Arrrggh

  • Profile Image
    JotForm Support

    Answered by jonathan on April 15, 2013 at 09:23 AM

    Hi,

    I used an iphone emulator to test the form. It seems fine though. 

    Can you give us more details about the phone you tested the page. 

    We will check further if the issue remains. Please update us.

     

    Thanks.

  • Profile Image

    Answered by riverinatradies on April 15, 2013 at 06:16 PM

    My phone is an iphone 4s. Just to clarify did you use your emulator at this link:

    http://www.riverinatradies.com.au/contact2.html

     

    Because it works fine with the original code I was using at http://www.riverinatradies.com.au/contact.html but not with the ammended code at the link above. Here's a screen shot from my phone:

  • Profile Image

    Answered by pinoytech on April 15, 2013 at 06:29 PM

    Hi,

    I have check your form and I found out that the alignment of label is set to Auto. Can you please try to change it to Left and see if the said issue still persist or not.

    Thanks.

  • Profile Image

    Answered by riverinatradies on April 15, 2013 at 06:34 PM

    Changed them to left and still showing up the same in Safari.

  • Profile Image
    JotForm Support

    Answered by Welvin on April 15, 2013 at 08:01 PM

    Hi,

    Copy and Inject this codes to your form; http://pastie.org/7594811

    Guide: How to Inject Custom CSS Codes

    Result:

     

    Thanks

  • Profile Image

    Answered by riverinatradies on April 15, 2013 at 08:25 PM

    That's done it! Woop Woop, you're a legend, thanks!

  • Profile Image
    JotForm Support

    Answered by Welvin on April 15, 2013 at 08:27 PM

    Great to know that! It's my pleasure! Let us know if you need any assistance again. Please create a separate thread, if ever.

     

    Thanks

  • Profile Image

    Answered by riverinatradies on April 15, 2013 at 10:07 PM

    Just one last question on this topic. How did you know what lengths were required for each label and text box?? I have another form below and I have tried to replicate what you did in my contact form but haven't been able to get it right:

    http://www.riverinatradies.com.au/requestaquote2.html

  • Profile Image
    JotForm Support

    Answered by Welvin on April 16, 2013 at 03:40 AM

    Hi,

    To be honest, I have done a various test on the form. :) 

    I have adjusted the size until everything is align according to your preference. I have use the same methods provided on my previous responses;

    1. Get the Form ID: How to Find Field IDs & Names <- This is important, meanly because it targets the right fields.

    2. Set the sizes through the CSS, given above. <- main CSS are the Width and Positioning, second the display.

    3. Inject to your form: How to Inject Custom CSS Codes

    ----------

    I suggest you to decrease the size of the fields for the form on this page: http://www.riverinatradies.com.au/requestaquote2.html until it fits with FF.

    For mobile for this page, that's a bit of advance customizations. We can help you about that. But, I've check the form on mobile and it works well. The alignments are good. 

     

    Thanks