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

    Making the Form Display Properly on Mobile Devices

    Asked by gbodle1972 on November 02, 2013 at 04:23 PM

    Is there something similar to jotform for making a form specific "app" specifically for iPhones and/or Droids?  I have pretty much created exactly what I want in jotform for computer based users but am having issues as it relates to formating and making the forms optimized for mobile usage (Especially iPhones).  Does your company have something like this so I could make an app as easily for iPhone or Droid as easily as I created my forms in jotform?  

    I would need to be able to create the app to do the same thing as the form I created http://www.jotform.com//?formID=32884539105964


    Thanks

    Geoffrey

    Page URL:
    http://www.jotform.com//?formID=32884539105964

    JotForm app My Forms Mobile
  • Profile Image

    Answered by Cesar on November 02, 2013 at 05:59 PM

    Hello, 

    JotForm has the ability to display on mobile devices, sometimes it just may take additional steps to have the form working as desired.

    This can be achieved by injecting the proper CSS code into your form, this way the form can be properly sized for iPhone and Android devices.

    In any case, do also provide the URL to where the form is located, that way we can help you making it display properly on mobile devices.

     

    If you need additional assistance, do let us know.

     

    Related Articles:

    How-to-Inject-Custom-CSS-Codes

    The-Importance-of-Form-Widths

  • Profile Image

    Answered by gbodle1972 on November 02, 2013 at 06:37 PM
    How Do I make the Custome-CSS-Codes the specs of an iPhone or Android app?
  • Profile Image

    Answered by Cesar on November 02, 2013 at 07:53 PM

    Depends on how the form has been embedded/added to the site. If the form has been embedded to the site. I would suggest the iFrame Method to be the optimal way to achieve this.

    Also, if possible, kindly provide the URL where the form has been embedded to. This way we can help you further.

    Related Articles:

    Getting-the-Form-iFrame-Code

  • Profile Image

    Answered by pinoytech on November 02, 2013 at 10:49 PM

    Hi Geoffrey,

    Can you please take a look at this image bellow if this is something you want to achieve in your form?

    If yes, use and inject this custom css into your form:

    @media only screen 

    and (min-device-width : 320px) 

    and (max-device-width : 480px) {

    .form-all {

    width: 320px !important;

    }

    .form-line {

    padding-left: 5px !important;

    }

    .form-textarea {

    width: 300px !important;

    }

    .form-dropdown {

    width: 310px !important;

    }

    #subHeader_56.form-subHeader {

    text-align: center !important;

    }

    }

    If you need further assistance, please let us know.

    Thank you!

  • Profile Image

    Answered by gbodle1972 on November 03, 2013 at 08:05 AM
    Yes. That is what I want but want it to work that way on my site when I
    use the jotform embedded. The CSS you gave ONLY works when I have it in
    Jot Form Preview which I do not want that web address showing. I need it to
    show up under our website of www.poop911.com/franchise_support which I have
    embedded the jot form into. However the page shows up way too small to be
    usable by users instead of in the app like format you have. I have tried
    using it on my site by using "Embed" and "iFrame" but both seem to show up
    the same on my iPhone 5 which is too small to be usable. The jotform I am
    trying to embed is http://form.jotformpro.com/form/33034366973963?
    Please let me know if there is something I can do to fix this.
    Thanks
    Geoffrey
  • Profile Image

    Answered by gbodle1972 on November 03, 2013 at 08:08 AM
    The CSS I put in ONLY works when I have it in Jot Form Preview which I do
    not want that web address showing. I need it to show up under our website
    of www.poop911.com/franchise_support I have tried using it on my site by
    using both "Embed" and "iFrame" but both seem to show up the same on my
    iPhone 5 which is too small to be usable. The jotform I am trying to embed
    is http://form.jotformpro.com/form/33034366973963?
    Please let me know if there is something I can do to fix this.
    Thanks
    Geoffrey
  • Profile Image
    JotForm Support

    Answered by EltonCris on November 03, 2013 at 09:50 AM

    @gbodle1972 

    You're html code is lacking the meta data that should autofit/zoom the page on mobile. Please add the following code between the head tag of your page where the form is embedded.

    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />

    So your entire source code should look like this. I have also added some missing tags (blue color) for a basic HTML structure like the head and body. :)

     

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 transitional//EN">

    <html>

    <head>

    <title>POOP 911 Franchise Support</title>

    <meta name="description" content="">

    <meta name="keywords" content="">

    <META NAME="ROBOTS" CONTENT="NOINDEX, NOFOLLOW">

    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />

    </head>

    <body>

    <script type="text/javascript" src="//form.jotformpro.com/jsform/33034366973963"></script>

    </body>

    </html>

    Thanks!

  • Profile Image

    Answered by gbodle1972 on November 03, 2013 at 10:39 AM
    THANK YOU SOO MUCH!!! You guys are awesome. I truly mean that!
    Thanks again
    Geoffrey