How to accomplish mobile integration

  • Profile Image
    kmonastyrsky
    Asked on May 21, 2014 at 01:51 PM

    Hi, please kindly point me out to the article / info / tools that describes the design/implementation of the responsive (i.e. desktop/tablet/mobile) forms.

    Thank you,

     

    Konstantin Monastyrsky

  • Profile Image
    Mike_T
    Answered on May 21, 2014 at 03:36 PM

    I would like to inform you that our forms are mobile friendly by default, and usually look good on different devices. However, there are many factors (i.e., website layout, form layout, used form fields and widgets) that might affect the form appearance, so each case is different.

    We can do custom CSS injections including @media injections for different screen size devices in order to affect the mobile styling and fix related issues.

    If you are facing any issues with your forms on mobile devices, let us know. We will try to check it out and help you.

  • Profile Image
    kmonastyrsky
    Answered on May 21, 2014 at 03:51 PM
    Hi Mike,
    Thank you so much for your support. Please kindly take a look at this link
    from your iPhone or Android:
    http://qtadigital.com/projects/Gutsense/form/contact.html (this is our
    development server with responsive design).
    The form doesn't display the validation code field and the Submit button.
    Thank you again,
    Konstantin Monastyrsky
    ...
  • Profile Image
    Jeanette
    Answered on May 21, 2014 at 04:30 PM

    You are right, I just inspected the form in iphone emulator, and I can see the problem:

     

    To fix the problem, I would recommend you to embed the iFrame code and set the Scrolling property to "yes" rather than "no"

    Otherwise, if you do not wish to show scroll bars, then please try adding this code in your HTML page, before the  </head> tag of your page.

    <style>
    iframe, iframe#JotFormIFrame { height:550px !important; }
    </style>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />

    Then add the code below in your form  (use this guide)


    @media only screen and (max-device-width: 480px) {
    iframe,.form-all { height:550px !important; } }

     

    You can adjust the height accordingly until you see all the fields in the form. Let us know if the issue persist.

  • Profile Image
    kmonastyrsky
    Answered on May 21, 2014 at 09:11 PM
    Hi Jeanette,
    Thank you for your help. Unfortunately, you've been running a wrong link in
    the emulator. Please run this one:
    http://qtadigital.com/projects/Gutsense/form/contact.htm
    We have a problem with vertical display, not horizontal. Please suggest
    what to do in this case.
    Thank you,
    Konstantin
    ...
  • Profile Image
    Cesar
    Answered on May 21, 2014 at 11:55 PM

    Please verify the updated link provided above, as it prompts a 404 error. We will await your response.

    Thank you.

     

    Screenshot:

    https://shots.jotform.com/cesar/screens/404wrong.png

  • Profile Image
    kmonastyrsky
    Answered on May 22, 2014 at 12:21 AM
    It is resolving on my end. Please kindly try once more:
    http://qtadigital.com/projects/Gutsense/form/contact.html
    ...
  • Profile Image
    TitusN
    Answered on May 22, 2014 at 05:43 AM

    Hello,

    We need to make the form responsive first before you place it on your website.

    Do the following:

    1. Add CSS to your form to make the fields that are overflowing to respond to the browser width:

    CSS:

    /*Makes the fields to mainain a 95% width at all times*/

    #input_16,
    #input_16_confirm,
    #input_6 {
    width: 95%!important
    }

    Use this guide to add the CSS above to your form

    2. Get the Iframe code from your form and re-embed it on your website

    Let us know when you do this - and we shall advice what else needs adjusting.

    Open this copy of your form on your mobile device/emulator - how does it look?

    Looking forward to your response.