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

  • riverinatradies
    Asked on March 4, 2015 at 1: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!

     

     

  • raul
    Replied on March 4, 2015 at 8:04 AM

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

    Form doesnt look fully responsive when I see it in my phone Image 1 Screenshot 20

    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.

  • riverinatradies
    Replied on March 4, 2015 at 9:55 PM

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

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

  • riverinatradies
    Replied on March 4, 2015 at 10:01 PM

    Form doesnt look fully responsive when I see it in my phone Image 1 Screenshot 20

     

  • Charlie
    Replied on March 5, 2015 at 4:24 AM

    Hi,

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

    Form doesnt look fully responsive when I see it in my phone Image 1 Screenshot 20

    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" onDISABLEDload="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.

  • riverinatradies
    Replied on March 5, 2015 at 4: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" onDISABLEDload="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>

  • raul
    Replied on March 5, 2015 at 5: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.

    Form doesnt look fully responsive when I see it in my phone Image 1 Screenshot 20

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

    Thanks.

  • riverinatradies
    Replied on March 5, 2015 at 7: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

  • raul
    Replied on March 5, 2015 at 7: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.

  • riverinatradies
    Replied on March 5, 2015 at 8:16 PM

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

     

    iframe { width: 1px; min-width: 100%; *width: 100%; }
  • riverinatradies
    Replied on March 5, 2015 at 8: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

  • riverinatradies
    Replied on March 5, 2015 at 8: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 :-(

  • riverinatradies
    Replied on March 5, 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" Form doesnt look fully responsive when I see it in my phone Image 1 Screenshot 20

  • riverinatradies
    Replied on March 5, 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

  • Jan
    Replied on March 6, 2015 at 7: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.

  • riverinatradies
    Replied on March 6, 2015 at 7: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 !?!

  • Ben
    Replied on March 7, 2015 at 4: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.

  • riverinatradies
    Replied on March 9, 2015 at 8: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.

     

    ??

     

  • Charlie
    Replied on March 9, 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.

  • iStore
    Replied on June 6, 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.
  • liyam
    Replied on June 6, 2016 at 11:21 PM

    Hello iStore,

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

    Thanks.