Form is not mobile responsive

  • Profile Image
    howardballinger
    Asked on June 04, 2017 at 03:56 PM

    Checking this form on my phone (iPhone 4S) the fields show as way too long. I can zoom them with two fingers but then the 'last name' field is lost off to the right.

    I put it in a iframe at the bottom of the page because otherwise the "Thank You" message ends up offscreen at the bottom of the page and wouldn't be found by the user.

  • Profile Image
    EltonCris
    Answered on June 04, 2017 at 06:20 PM

    I've figured out the problem. It is the reset button that is breaking the responsiveness of the form.

    Please inject this CSS codes to your form, this should fix it.

    @media screen and (max-device-width:768px){

    .form-submit-button {

    display: block !important;

    }

    .form-submit-button + span {

    display: none !important;

    }}

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

    --

    Additionally, if you want to scale your page content properly including the form on mobile, add this meta code between the header tag in your page.

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

    Example:

    Hope this helps!