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

    looks different on mobile devices

    Asked by supersnapz on October 19, 2015 at 08:45 AM

    hey my form:

     

    http://www.supersnapz.com/contact.html

     

    looks fine on when viewing it on a computer.  But i've looked at it on my iPhone and iPads and it looks either a lot longer and wider than the original, or else the bottom of the form is cut off (iPad mini and air)

    I used iframe to embed it as I build my website using Everweb

    Page URL:
    http://www.supersnapz.com/contact.html

    Mobile different devices ipad www wider and
  • Profile Image
    JotForm Support

    Answered by beril on October 19, 2015 at 11:01 AM

    Hi,

    You need to make your form Responsive. It is possible with JotForm.

    Please check the user guide on how to make forms mobile responsive

    In addition to that, if it doesn't work, please add the code below to your CSS.

    /*-----------RESPONSIVE LAYOUT-----------*/

     

    .form-line.form-line-column {

    width: 100% !important;

    margin-left:0

    }

    .form-line{

    width: 100%;    

    }

    .form-textarea,

    .form-textbox,

    .form-dropdown{

    width: 100% !important;

    -webkit-box-sizing: border-box;

    -moz-box-sizing: border-box;

    box-sizing: border-box;

    }

    .form-label-left, .form-label-right{

    width: auto !important;

    }

    .form-buttons-wrapper{

    margin-left:0 !important;

    }

    .form-input {

    width: 100% !important;

    }

    .form-all{

    width: 75% !important;

    }

    .form-sub-label-container {

    width: 100% !important;

    display: block  !important;

     

    }

    Here is how to do this:

    1) Click on Setup & Embed.

     

     

    2) Click on Designer.

     

    3) Click on CSS.

     

    4) Copy & paste the code above to CSS.

    5) Click on Save button.


    If you have any question or issues, please do not hesitate contacting us. We will be glad to assist you.