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

    Mobile site optimization problems

    Asked by cchl on August 07, 2014 at 11:42 AM

    I used the mobile optimizer widget on my form "CCHL Inquiry Form." It works partially. The form enlarges for my iPhone but does not resize to fit the screen after the user finishes inputting to the fields, so it's hard to find the "send" button without wandering around the page. Is there a better widget or a better way to handle this?

     

    I would like the user to input to the fields and when they say they're "done" and the keyboard retracts on the phone, that the page resizes back to original so the "send" button is easy to locate.

     

    THanks!

    Elizabeth

    Page URL:
    https://www.caringcouples.com/contact.htmlANDhttp://www.jotformpro.com<br/>/form/22738237962967

    Mobile site mobile site find thanks and
  • Profile Image
    JotForm Support

    Answered by david on August 07, 2014 at 01:27 PM

    Hi,

    If the formatting for the widget is not what you are looking for, you can use mobile responsive CSS instead and customize that.  Here is our guide on how to inject CSS to your form:

    http://www.jotform.com/help/117-How-to-Inject-Custom-CSS-Codes

    and here is the code you would use for mobile responsiveness:

    @media only screen

    and (min-device-width : 320px)

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

    .form-all {

    width: 320px !important;

    }

    .form-line {

    padding-top: 0px !important;

    padding-bottom: 0px !important;

    padding-left: 3px !important;

    }

    img.form-image {

    max-width: 100% !important;

    height: auto !important;

    }

    #id_1.form-line {

    padding-left: 36px !important;

    padding-right: 36px !important;

    }

    }

    This will force formatting for mobile browsers but you can change the values to make sure your form fits mobile screens the way you would like.

    If you have any trouble setting this up, or this still does not allow you to have your form look the way you would like in mobile, let us know and we will be happy to assist you futher.

    Thank you for using JotForm!