Are all forms compatible with Mobile Devices?

  • Profile Image
    hayescook
    Asked on February 26, 2013 at 02:33 PM

    I have two forms that will not act properly on mobile.  I am using iWeb to build the site.  There are two forms listed below:

    1.) My Home Page Form:

    http://www.dirtbaseball.com/DIRT_BASEBALL/Home_Plate.html

    2.) My Player Info Form will look correct, but when I apply a condition to a question and the form expands; I sometimes loose the submit button.  I have made sure that the place holder for my snippet is long enough to expand.  Look at the question in the legal guardian section that asks if the address is the same as the players.  Choose "no." Then go to the last question and that asks have you taken a standardized test.  Choose "yes." Doing this will allow the form to expand to other questions.  Here is the link for this one:

    http://www.dirtbaseball.com/DIRT_BASEBALL/Forms.html

    3.) The last form for mobile is a registration form that keeps covering other links.  I have included a screenshot of this.

    http://www.dirtbaseball.com/DIRT_BASEBALL/Registration_Form.html

     

    FORMS 1 AND 3 SEEM TO HAVE ISSUES ON MOBILE.  FORM 2 SEEMS TO HAVE ISSUES ON MOBILE SOMETIMES, BUT ALWAYS ON A REGUALR DESKTOP OR LAPTOP.

     

    THANKS FOR THE HELP!

    Hayes Cook

  • Profile Image
    EltonCris
    Answered on February 26, 2013 at 03:57 PM

    Hi,

    First off, let me please inform you that your form is a bit cut off on the bottom part, so submit button is not viewable. This is a common problem when an iWeb site is viewed on Windows PC. To fix this, just simply drag to increase the HTML Snippets height holding the form embed code. Publish your site afterwards.

    --

    JotForm Forms are already optimized for mobile views. The reason why the form is longer than on it's orginal view (desktop view) is because the form width changes (less wider than on the desktop view) to fit exactly on the mobile device. If you'd like to make the form's mobile view look the same on the desktop view, simply inject the following CSS codes to your form.

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

    .form-all{

    width: 690px !important;

    }

    .form-label-left, .form-label-top{float:left !important;display:inline !important;}

    }

    Hope this helps. Thanks!