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.
Changed width of form, HTML for IFRAME was garbageAsked by tsolomita on July 15, 2014 at 06:11 PM
I changed the width of my form from 700-500 so that it could possibly appear correctly in mobile phone. Once I did this, however, the HTML for IFRAME did not resemble the original HTML.
The form in question is my Singles Discussion Group Registration Form. I changed the width directly on my website.
The form looks great in iPAD now, but it still does not work on my mobile phone (iphone5).
So, I guess there are two questions here - what happened to the HTML code for my form? and Why is this not working on a smart phone?
registration form ipad Mobile does not work
I guess when you are referring to "the HTML code to my form?", you are referring to the width set on the embedded method:
Once you copy it, you can change it, and it should reflect on your webpage when embedded. Regarding the mobile viewing, please add the "Mobile Responsive" widget on your form:
1) Click on Widgets
2) Type "Mobile Responsive"
3) Drag and drop the widget in your form
Please try that, and let us know what happens, we will be glad to assist you.
Thanks, I've added the mobile widget and it comes up correctly. However, it bounces all over the place as I attempt to enter the fields and will not allow me to submit form.
Also curious about the embedded HTML code.
This is the previous code HTML code that I had on my page. Somewhat readable to this novice.:
windowTitle:'Singles Discussion Group Registration Form',
<a class="lightbox-41594127553154" style="cursor:pointer;color:blue;text-decoration:underline;">Singles Discussion Group Registration Form</a>
This is the code that is currently being generated:
<iframe id="JotFormIFrame" onload="window.parent.scrollTo(0,0)" allowtransparency="true" src="//form.jotform.us/form/41594127553154" frameborder="0" style="width:100%; height:1776px; border:none;" scrolling="no"></iframe>
What do you think?
The first one is the Lightbox Embed Codes and the second one is our iFrame Embed Codes. Note that responsiveness CSS codes will not work on a lightbox-ed form like it would on a regularly embedded form or standalone form as lightboxes have a different HTML structure.
iFrame method should work so I would advise to use it instead.
Thanks Welvin. However, I was using iFrame. The code came from iFrame. I tried it a number of times. I tried rebooting my computer (MAC) as well to see if it was a storage issue.
Can you look at the form? Could my form have gotten corrupted somehow? Or a bug in Jotform?
Looks like the webpage looks OK on Android:
But not on Iphone 5 (safari browser):
This is because I phones usually have a greater width pixel density than most smart phones (480px and 568px).
The view-port you have on your web-page supports 320px wide devices:
Please add two more viewports to support 480px and 568 px wide screens. This will help display properly on Iphone devices.
I'm sorry if all this is too technical - but please let us know where you get stuck and we'll do our best to assist.
Looking forward to your response.
Thank you Titus. Unfortunately, you've gone over my head! I am using Wix's editor, which has no view-port mention in the help forums or on it's menus. Any ideas? Teresa
(I have posted this question to Wix as well)
Well, that involves modification to the source codes of your website. I'm not sure, but I think there's no way you can edit it, right?
Please send a screenshot: http://www.jotform.com/answers/277033 of the current look of the form using your mobile device so we have the idea on what to adjust to your form. I guess we'll have to manually add the custom CSS codes to your form instead of using the mobile responsive widget.
I submitted a screenshot earlier. The issue is not just the alignment on the screen, but the ability to fill in the fields and press the Submit button. The screen behaves in a way that it jumps all over the place and when you attempt to hit submit, it bounces to the top. So a user is unable to submit this (could this be an iphone5 setting?)
I also tested your form on mobile (android also) and everything appeared to be working fine:
I appears the whatever is running at the bottom of your page that shows a phone icon, twitter icon, and a few other things, causes the form to load a bit slow and even lags my phone a bit when scrolling the form which makes it jump around a bit. When viewing the form itself without aside from the page, everything works perfectly though. Adding in different view ports would help this, but unfortunately Wix source code comes out as a ton of gibberish and is very much so against allowing users to modify it and I could not find a way of doing so.
If you could give us a bit more detail about the "jumping around" issue specific to the form, we may be able to set something up to resolve that portion. Let us know and we will be happy to look into it further.
Thank you for using Jotform!