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.
Help with responsive design in embedded formAsked 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.htmliframe wrapper page: https://s3-us-west-2.amazonaws.com/jeffesonm/iframe-test.htmlAny ideas?
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.
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.
Thanks Raul, your test page with the source code is rendering correctly on mobile and desktop.
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.