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

    Form doesn't look fully responsive when I see it in my phone

    Asked by riverinatradies on March 04, 2015 at 01:02 AM

    The following form has several set conditions which hide/show certain fields depending on selections made. Initially this form was embedded via the normal embed method which was ideal in that the form height was automatically adjusted according to the viewing device etc however the conditions didn't seem to work consistently across all browsers and some users were able to see fields that should have been hidden.

    So I switched to the ifame embed which seems to have solved the conditions problem, however as the height is fixed and needs to be quite large to accommodate when viewing on a mobile device there ends up being a huge empty space underneath the form when viewing on a desktop.

    Furthermore, I have been using the new designer feature and have selected "make this form responsive" however the form is only responsive to a certain point. When testing the form on my mobile, it wasn't full shrunk to fit the screen.

    PLEASE HELP!

     

     

    Page URL:
    http://www.riverinatradies.com.au/list-your-business-wagga2

    embed method method problem height hidden Mobile
  • Profile Image

    Answered by raul on March 04, 2015 at 08:04 AM

    This is how the form looks on my phone when I viewed it using Firefox for Android.

    Does it look like this when you view it on your phone? If not, could you provide a screenshot of how it looks? Also, please let us know which device/browser are you using to test?

    We'll wait for your response.
    Thanks.

  • Profile Image

    Answered by riverinatradies on March 04, 2015 at 09:55 PM

    Doesn't look like that on my iphone via safari.

    What about the first part of my question, any solution?

  • Profile Image

    Answered by riverinatradies on March 04, 2015 at 10:01 PM

     

  • Profile Image
    JotForm Support

    Answered by Charlie on March 05, 2015 at 04:24 AM

    Hi,

    Could you try setting the "Responsive Form" under Preferences to "Yes", see if that helps the form to be more responsive.

    Regarding the iFrame having an empty space at the bottom, this is because when embedding using this code, you will need to set a fixed height. Could you try adding a min-height attribute in the iFrame with "!important" and see if that fixes the problem, you can adjust it to cover the whole form.

    Example:

    <iframe id="JotFormIFrame" onload="window.parent.scrollTo(0,0)" allowtransparency="true" src="//form.jotformpro.com/form/50631897725969" frameborder="0" style="width:100%; min-height:500px !important; border:none;" scrolling="no"></iframe>

    Do let us know if this works.

    Thank you.

  • Profile Image

    Answered by riverinatradies on March 05, 2015 at 04:37 PM

    I already had responsive form checked in the designer section but I also checked it in the preferences as stipulated above. I re-embedded the form with the new code that came up that includes the javascript code now but still isn't responsive on my iphone (I did clear my cache on the phone before looking again too by the way.

    Haven't tried adding the min-height thing yet as I need to get the responsive side of things fixed first. Why by the way has the the embed code changed from just the straight iframe to now include the javascript code ?? This is so inconsistent :-(

     

    <iframe id="JotFormIFrame" onload="window.parent.scrollTo(0,0)" allowtransparency="true" src="//form.jotform.co/form/50618153997869" frameborder="0" style="width:100%; height:2856px; border:none;" scrolling="no"></iframe>

    <script type="text/javascript">window.handleIFrameMessage = function(e) {var args = e.data.split(":");var iframe = document.getElementById("JotFormIFrame");if (!iframe)return;switch (args[0]) {case "scrollIntoView":iframe.scrollIntoView();break;case "setHeight":iframe.style.height = args[1] + "px";break;case "collapseErrorPage":if (iframe.clientHeight > window.innerHeight) {iframe.style.height = window.innerHeight + "px";}break;case "reloadPage":window.location.reload();break;}};if (window.addEventListener) {window.addEventListener("message", handleIFrameMessage, false);} else if (window.attachEvent) {window.attachEvent("onmessage", handleIFrameMessage);}</script>

  • Profile Image

    Answered by raul on March 05, 2015 at 05:25 PM

    The script portion of the iframe is included to resize its height automatically, so it will automatically increase/decrease its height depending on the content that is shown in your form.

    I've checked your site again using Chrome for Android this time and I'm still able to see it correctly.

    So, I think that this issue might be specific to Safari.
    Do you have another phone to test with? Or a tablet?

    Thanks.

  • Profile Image

    Answered by riverinatradies on March 05, 2015 at 07:40 PM

    But it doesn't resize automatically, and if the problem is related to safari I still need a solution considering how many people use safari

  • Profile Image

    Answered by raul on March 05, 2015 at 07:54 PM

    I did a little research and found this link: http://stackoverflow.com/questions/23083462/how-to-get-an-iframe-to-be-responsive-in-ios-safari#23083463

    Could you please try the workaround provided there?

     

    Let us know if this helps.
    Thanks.

  • Profile Image

    Answered by riverinatradies on March 05, 2015 at 08:16 PM

    So I put the following code into my custom CSS but still no change:

     

    iframe { width: 1px; min-width: 100%; *width: 100%; }
  • Profile Image

    Answered by riverinatradies on March 05, 2015 at 08:35 PM

    From what I can see the problem seems to be with screen resolutions smaller than around the 400px mark as it works on my iphone 6 when in landscape mode but not in portrait mode.

    Furthermore, I just copied the custom CSS from one of my other forms that IS working correctly and responsively (link below) and pasted it into a clone of the above form and the problem still remains. As the custom CSS is the same, the only difference with these forms is that this one has a lot of conditions that hide/show certain fields so perhaps that is where the problem lies? Perhaps there's a conflict making the responsive elements in the custom CSS not work properly ??

    http://www.riverinatradies.com.au/requestaquote

  • Profile Image

    Answered by riverinatradies on March 05, 2015 at 08:59 PM

    With regard to the above I actually tried the form with ALL conditions removed and it has the same CSS as another form that is working fine, yet STILL the same problem, it makes no sense, there is no consistency!

    This is doing my head in :-(

  • Profile Image

    Answered by riverinatradies on March 05, 2015 at 10:43 PM

    So I seem to have figured this out by myself. The radio fields which had text longer than a certain point (of which I am unable to determine) seemed to be causing the problem, as once I shorted these fields the form was responding correctly. In the screen shot below for example, I changed the options to just "Full upfront payment" and "monthly repayment plan"

  • Profile Image

    Answered by riverinatradies on March 05, 2015 at 11:35 PM

    In addition to the above, I just realised the form below also has radio fields where the text is quite long, yet it seems to be working fine.

    These problems with jotform are so inconsistent it makes it near impossible to get a definitive answer on what the problems are and how to fox them, so while my form above seems to be working correctly for now, who knows ?!?!

    http://www.riverinatradies.com.au/get-a-website-form

  • Profile Image
    JotForm Support

    Answered by Jan on March 06, 2015 at 07:08 AM

    Hi there,

    We're glad to hear that you were able to found a solution to your issue and that is by shortening the radio fields. Your form should be working properly since your shortened the fields. Just like what you said, this issue happens in Safari only.

    Let us know if you need any more help.

    Thank you very much for your patience.

  • Profile Image

    Answered by riverinatradies on March 06, 2015 at 07:11 PM

    Did you not read my last post though, shortening the radio fields on this form solved my issue but on another form I have very long radio fields and it works just fine.

    There seems to be no consistency with jotform forms and it makes it difficult each time I need to create or edit one !?!

  • Profile Image

    Answered by Ben on March 07, 2015 at 04:24 AM

    Please note that the difference might be as much as a single CSS entry - since there are several CSS codes running, ones that are added manually by us, those added by Form Designer and those that are there either by some widgets or by a theme.

    Now I understand the confusion and usually you will get the same experience if setting the forms in the same way, so we would be happy to assist you if you want to find what might be the difference.

    Could you just confirm which field was not working properly on jotform here: http://www.riverinatradies.com.au/list-your-business-wagga2 and is working on this page: http://www.riverinatradies.com.au/get-a-website-form?

    Thank you.

  • Profile Image

    Answered by riverinatradies on March 09, 2015 at 08:57 PM

    For the form on this page: http://www.riverinatradies.com.au/list-your-business-wagga2 

    The fields that had check boxes we causing the form to not be responsive, once I shortened the text however, it seemed to resolve the issue.

     

    However, on this form: http://www.riverinatradies.com.au/get-a-website-form

    There are check box fields which have text that is quite long, for example "Upfront Payment - 25% deposit + remaining balance due on completion of website" - yet it seems to be functioning just fine.

     

    ??

     

  • Profile Image
    JotForm Support

    Answered by Charlie on March 09, 2015 at 10:19 PM

    Hi,

    I saw the forms embedded in both web page, but I'm currently getting a "404 Not Found" error, it seems that you are currently setting up your forms in your website?

    If everything seems to be working as expected and the difference is that the check boxes in both form displays differently, then it might be a code conflict related to pre-loaded CSS style sheets, just what my colleagues have mentioned. The first webpage may have a better CSS styling that directly affects your form, while the second webpage has a different one. Although, most of the time the styling on one page are the same unless you loaded your own.

    If you have finalized the setting of your web page and you are still getting problems, do let us know.

    Thank you.

  • Profile Image

    Answered by iStore on June 06, 2016 at 11:07 PM

    I had the same problem with my form cutting off the right side in portrait mode on iphone 6. The cause was that I was using a Scale Rating survey scale of 1-10 using labels for 'Worst Text' and "Best Text". If I removed the 'worst' text and 'best' text, the form showed correctly. I was able to figure this out because of you figuring out the radio button issue. Thanks and I hope this helps someone in the future and helps Jotform fix the code.
  • Profile Image
    JotForm Support

    Answered by liyam on June 06, 2016 at 11:21 PM

    Hello iStore,

    I have moved your question on a different thread. We'll handle your concern there.

    Thanks.