Help with responsive design in embedded form

  • jmerchan
    Asked on March 4, 2015 at 9:23 AM

    I'm having trouble with getting my form to show up correctly when it's embedded and viewed through a mobile device. I am displaying this form to people inside my company and want it to be transparent where it's hosted, so I created a simple wrapper html page with nothing but the embed code.  I've tried both the js and iframe embed methods but the same result... on mobile, iPhone specifically, it loads the regular page instead of the responsive design.

    Here is the form:  http://www.jotform.com//?formID=50277440948158#

    When I go to that URL directly from the iPhone, it looks good... response, text big, buttons fit, etc.  When I access through the wrapper page, it does not show up as responsive.

    js wrapper page:  https://s3-us-west-2.amazonaws.com/jeffesonm/js-test.html

     
    Any ideas?
    Page URL: http://www.jotform.com//?formID=50277440948158
  • raul
    Replied on March 4, 2015 at 10:54 AM

    I did some testing on my side and I'm still unable to find the reason as of why it looks different when the form it's embedded.

    Please let me do more testing and I'll get back with you later.

    Thanks.

  • raul
    Replied on March 4, 2015 at 12:35 PM

    After I completed more tests, I found that the best way to make your form fully responsive was using its full source code and embed the code into the web page.

    Please test the following URL: https://shots.jotform.com/raul/526719/source.html and let us know if it looks correctly on your phone.

    Thank you.

  • jmerchan
    Replied on March 5, 2015 at 8:01 AM

    Thanks Raul, your test page with the source code is rendering correctly on mobile and desktop.

    When you extract the source code from the Embed options, do you just copy/paste from the window there?  Or do you download the compressed/refined version?  It looks like you have an HTML wrapper, whereas when I download the source code it starts with <script src="https://d2g9qbzl5h49rh.cloudfront.net/static/prototype.forms.js" type="text/javascript"></script>

     

     

  • KadeJM
    Replied on March 5, 2015 at 10:32 AM

    When you are looking at the form's source trying to figure it out this is mostly dependent upon what you intend to do with it.

    In most cases a simple copy and paste would work. However, if you wish to make any modifications and host including speed up the process within your site then downloading it would be more ideal. If you download it though then this means you'll need to reupload those files and then paste the source into your site to run it correctly otherwise if not hosted with the adjustments it will not work.

    https://www.jotform.com/help/67-Which-Form-Embed-Code-Should-I-Use 

    https://www.jotform.com/help/104-How-to-get-the-Full-Source-Code-of-your-Form