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 Appearance on Mobile Phone

    Asked by ronshuller on December 22, 2015 at 12:58 PM

    On the following page ( http://www.weddingsandmore.com/MiniOrderForm.html), I have the following code:

     <iframe

          id="JotFormIFrame"

          onload="window.parent.scrollTo(0,0)"

          allowtransparency="true"

          src="https://form.jotform.com/53505135472956"

          frameborder="0"

          style="width:100%;

          height:1539px;

          border:none;"

          scrolling="no">

        </iframe>

    This page when viewed on a computer looks great as you can see if you view http://www.weddingsandmore.com/MiniOrderForm.html on a computer

    However when viewed on my Samsung S4, the fields stretch to the edge, the fonts change, etc. as you can see in file SamsunS4.png attached.

    How do I get this form to look the same on the phone as it does when viewed on a computer?

    Page URL:
    http://www.weddingsandmore.com/MiniOrderForm.html

    Screenshot
    Mobile appearance form appearance mobile phone
  • Profile Image
    JotForm Support

    Answered by Boris on December 22, 2015 at 02:29 PM

    I'm afraid that your screenshot from Samsung S4 didn't get through to our forum software, but we can see the screenshot of your desktop with the form opened.

    When I open your form over its direct link, it looks more or less fine, except that the header image is being cut off:

    https://form.jotformpro.com/53505135472956

    In order to make the form mobile responsive, you can try adding a Mobile Responsive widget to your form (guide: How to Add a Widget to your Form). This would make the fields and header image responsive to the size of the screen, when the form is accessed directly:

    When it comes to the problems with the way the form looks on your website, it seems to be because of the website itself. The table element in which the form is embedded, has a fixed width set to it that may be overflowing the screen size of your mobile device.

    There are also many other issues with the page itself not being entirely valid: https://validator.w3.org/check?uri=http%3A%2F%2Fwww.weddingsandmore.com%2FMiniOrderForm.html&charset=%28detect+automatically%29&doctype=Inline&group=0

    I would highly recommend (1) adding a Mobile Responsive widget to your form, and (2) either removing the table element that is holding the form's iFrame at the moment, or to make the table itself responsive.

    When the iFrame is embedded outside the table and directly inside the <body> tag, it should be able to use its own widths and look correctly on mobile device as well. Please let us know how it goes.