Force form not to be responsive on mobile phones

  • axcbiz
    Asked on March 19, 2015 at 11:47 AM

    Hi All

    I'm new to JotForm, switched from adobe Formscentral lately, and I'am about to get in to jotforms. There is one thing that confuses me quite a bit. When setting the option "Responsive Form" to "No" and deleting out any additional CSS Code in the "Inject Customm CSS" field, it seems to me that the form still acts responsive on smartphones. Here's what makes me think of that:

    Printscreen from the Preview in the Designer:
    Force form not to be responsive on mobile phones Image 1 Screenshot 40

    Exactly how I would expecting it to be shown on the smartphone, with the possiblity to "scroll". Same for landscape view:

    Force form not to be responsive on mobile phones Image 2 Screenshot 51

    But if I than open up URL of the Form (https://secure.jotformeu.com/form/50770989340362) on my smartphone in portrait view it looks like this:

    Force form not to be responsive on mobile phones Image 3 Screenshot 62

    I was looking at the form on three different smartphones:

    - HTC, running Android 4.4.3
    - Fairphone, running Android 4.2.2
    - iPhone, running iOS 8

    The results was on every phone the same, as shown in the printscreen above. Could you please advice me on how I can really ensure that the form does not act "responsive" at all?

    The reason I need to ensure a "fix size" is given through the way how we embed the form in our Website. We're using a CMS "Concrete five" that works with so called "content blocks". We finally want to embed the form, alongside with other content, in one such content-block. A block is fix in size and no "scroll" option is available.

    The form has been built from scratch with an empty template.

    Thanks a lot and I'm looking forward for your answer(s).

    Best Regards,

    Diego

  • Charlie
    Replied on March 19, 2015 at 1:26 PM

    Hi Diego,

    I believe this is because mobile browsers forces the page to be mobile responsive. But, if you are embedding the form to a website, I believe the form should be able to stay on a fixed display. You can try embedding the form using iFrame code. Here's how you can get it: http://www.jotform.com/help/148-Getting-the-Form-iFrame-Code.

    Another method that you can use is to inject a custom CSS code to force specific width and height to your form. Example code:

    @media screen and (min-width: 10px) and (max-width: 1800px) {

    .form-all {

    width: 700px !important;

    height: 500px !important;

    }

    }

    You can add that code to under Form Designer->CSS tab. That should force your form to have that specific width and height whenever it is being viewed on a display screen with a minimum of 10px up until a max with of 1800px. You can adjust the values depending on your preference.

    I hope this helps.

    Thank you.

  • axcbiz
    Replied on March 20, 2015 at 5:22 AM

    Hi there JotForm Support

    Thanks for your answer and your advice. Unfortunately, the result is the same when embed the form via iFrame on to our site. I made up a public testsite on our site, click here to have a look. Click on the tab "Jetzt mitwirken" to see the form.

    Actually if I add the custom CSS to the form, the preview of the smartphone portrait mode does show quite crappy:

    Force form not to be responsive on mobile phones Image 1 Screenshot 30

    Looking with my smartphone at the test site it looks as seen in the preview above:

    Force form not to be responsive on mobile phones Image 2 Screenshot 41

    I understand what you potentially see as the reason of why the forms acting responsive on the smartphone. But as pointing back to adobe Formscentral, they seemed to have found a way to force mobile browsers to not act responsive at all. If you look here, click again on the tap "Jetzt mitwirken", you find a formscentral form embeded via javascript that is shown exactly the same on any device.

    So is there any other way to achieve the aim of having a completly non responsive form?

    Thanks for your further assistant and best regards,

    Diego

  • Charlie
    Replied on March 20, 2015 at 10:03 AM

    Hi Diego,

    That's actually weird, the form form not be mobile responsive especially if it's embedded on a website and while the options are disabled. 

    I'll check this out and come out with working custom CSS to force it. 

    Another one, if you are using the iFrame code, could you remove the <script> code that was included on it. Example:

    My iFrame:

    <iframe id="JotFormIFrame" onDISABLEDload="window.parent.scrollTo(0,0)" allowtransparency="true" src="https://secure.jotformpro.com/form/50784171970965" frameborder="0" style="width:100%; height:487px; 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>

    When you use the iFrame code, don't include the one highlighted in pink. 

    So these are the changes that we made:

    1. Remove the custom CSS code (including mine).

    2. Disable the "Responsive Form" found in Preferences and "Make this form responsive" in the "Form Designer".

    3. Paste using the iFrame code without the script code.

     

    See if that works.

    Kind regards

  • axcbiz
    Replied on March 20, 2015 at 10:22 AM

    Hi Charlie

    Thanks a lot for your update. I did follow you steps, embeded the form withouth the including the script. The result is actually promissing but not quite perfect. Check out the demosite. On my smartphone the input field nam's are still shown on top of the input field instead of left:

    Force form not to be responsive on mobile phones Image 1 Screenshot 20

    Thanks a lot for your help and I'm looking forward to your further advices.

    Best Regards,

    Diego

  • Charlie
    Replied on March 20, 2015 at 12:10 PM

    Hi,

    I've cloned your form for testing purposes and so that I can apply my custom CSS codes.

    Could you try cloning this form: http://form.jotformpro.com/form/50784595039971. You can clone it using this guide: http://www.jotform.com/help/42-How-to-Clone-an-Existing-Form-from-a-URL.

    After you clone it, use my form and embed it to your website using iFrame, but using my cloned form. See if it works for  you.

    Here's what I'm seeing in my test site:

    Displaying Screenshot 2015 03 21 00 08 43 Screenshot 10

    You can adjust the values of my custom CSS code, or if you need assistance on it do let us know.

    I hope this one works.

    Thank you.

  • axcbiz
    Replied on March 23, 2015 at 6:15 AM

    Dear Charlie

    Thanks for your reply and the added custom CSS code. I did import your cloned form and honestly it looks pretty promising. The form is shown correctly no mather in which mode I hold the smartphone. But these are the points I'll have to improve before publishing the form to the live site:

    - The send button is to big (in terms of hight and width) in both smartphone view and Desktop view
    - The position of the send Button I would expect to be aligned left
    - There's too much space on the top of the formular in both smartphone view and Desktop view
    - There's too much space on the left of the form in smartphone view
    - The background of the form should be transparent

    To be honest I'm not really in to css at all. So it is hard to reconstruct which parameter of your custom css code stands for what. So would it be possible to get a short explanation of what you've added? Thinking of more forms I'll have to create in the future I'm pretty sure that's something I can reuse quite often.

    Thanks for your help and your effort.

    Best Regards,

    Diego

  • Charlie
    Replied on March 23, 2015 at 10:06 AM

    Hi Diego,

    Here's the edited version of the cloned form: http://form.jotformpro.com/form/50784595039971.

    As previously mentioned, you can use it by cloning.

    Unfortunately, I can't discuss all of the custom CSS code I used in the form, it would be better if you study the basics of CSS, you can check W3Schools for a basic CSS introduction

    You can find the custom CSS code that I injected inside the form Designer:

    Force form not to be responsive on mobile phones Image 1 Screenshot 30

    Inside the form Designer, navigate to the CSS tab to find the custom CSS code that I injected:

    Force form not to be responsive on mobile phones Image 2 Screenshot 41

     

    I added a few comments or notes in my custom CSS code that you can use as a guide.

    I would also like to recommend that you check our Form Designer video tutorials here: http://www.jotform.com/help/300-Form-Designer-Tutorial-Let-s-create-fantastic-forms-. You can design your forms without using CSS code, although there are times that you need to use CSS for advanced styling.

    I hope that helps. 

    So basically, what I have done with your form is that we gave it specific widths and heights, we also gave it specific display and position so that if would show correctly even in mobile devices. 

    Another thing that I would like to suggest, if you are using the custom iFrame code, make sure to specify the width and height to avoid excess spaces.

    Here's how I embed mine:

    <iframe id="JotFormIFrame" onDISABLEDload="window.parent.scrollTo(0,0)" allowtransparency="true" src="https://secure.jotformpro.com/form/50784595039971" frameborder="0" style="width:100%; height:487px; border:none;" scrolling="no"></iframe>

    You can change the value of the width and height above that would best fit your website.

    Do let us know if this works and if you needed more help.

    Thank you.

  • axcbiz
    Replied on March 23, 2015 at 12:07 PM

    Dear Charlie

    Thanks a lot for the detailed information in your last post. That seems to work perfectly. Thanks as well for the comments, that truley helps. I will try to use it other forms and will see if I succeed.

    A great thanks as well for the hints about CSS and the designer. I'll have a look at the refered documentation online and try to extend my knowledge in this area.

    I also added this to the custom css block:

    .form-all {
        padding-top : 0;
        margin-top : -15px;
        margin-left : -20px;
    }

    With that I succeed reducing the space on the top and the left of the form. When importing your edits it was still shown - as it seemed - middle centred. I found the css code in another post of the forum.

    Thanks again for your help. I will try to come along with that. If there is anything I need further assitance, I will come back to you again.

    Best Regards,

    Diego

  • Charlie
    Replied on March 23, 2015 at 1:24 PM

    Hi Diego,

    I'm glad that you're already starting to learn CSS, it's good to know that you are extending your knowledge on this. 

    Regarding the alignment of the form, I'm glad that you found the right CSS for it, I might have missed it, you could also try adding this code inside the .form-all:

    position:absolute;

    left: 0;

    This should position your form to the farthest left.

    I hope this helped you to get started in creating wonderful forms. If you needed any assistance again or a follow up on this, please do not hesitate to contact us, we'll be more than happy to help you.

    Kind regards.