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

    Help with responsive design in embedded form

    Asked by jmerchan on March 04, 2015 at 09: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

    JotForm style size Mobile
  • Profile Image

    Answered by raul on March 04, 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.

  • Profile Image

    Answered by raul on March 04, 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.

  • Profile Image

    Answered by jmerchan on March 05, 2015 at 08: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>

     

     

  • Profile Image
    JotForm Support

    Answered by KadeJM on March 05, 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