Form Appearance on Mobile Phone

  • Profile Image
    ronshuller
    Asked 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?

  • Profile Image
    Boris
    Answered 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.