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

    How can I get this form to be responsive and fluid on mobile devices?

    Asked by entechjax on November 24, 2013 at 08:49 PM

    No matter what I try, I cannot get it to format properly on my iPhone 5s. The url to my iframe embedded form is:http://entechjax.com/schedule-service/

    Please help :)

    I am using the latest wordpress self hosted site with customizr theme. I need this to retain the themes responsive settings.

    I have form width set to 100% in preferences/formstyles

    I have the following code injected in the settings/custom css area of jotform:

    .form-all input,select {
    border: 1px solid #b7bbbd;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    padding: 4px;
    width: 140px;
    }

    @media only screenand (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 is what it looks like on my phone ...

    Page URL:
    http://entechjax.com/schedule-service/

    Screenshot
    Mobile form width JotForm uploads height
  • Profile Image
    JotForm Support

    Answered by EltonCris on November 25, 2013 at 03:41 AM

    Hi there,

    I was checking your form on iPhone and was able to reproduce the problem. This mostly occurs when the form is embedded since the form itself is made responsive. Please try to replace your current CSS codes for mobile with the following.

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

    @media (max-width: 480px) {

    .form-textarea,

    .form-textbox,

    .form-dropdown{

    width: 90% !important;

    -webkit-box-sizing: border-box;

    -moz-box-sizing: border-box;

    box-sizing: border-box;

    }

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

    width: auto;

    }

    .form-buttons-wrapper{

    margin-left:0 !important;

    }

    .form-input {

    width: 90% !important;

    }

    .form-all{

    width: 90% !important;

    margin-left:0 !important;

    }

    .form-sub-label-container {

    width: 90%;

    display: block !important;

    }

    }

    Please let us know if you need further assistance about this. Thanks!

  • Profile Image

    Answered by leeqin1022 on January 24, 2014 at 11:44 PM

    Hi Friends,

    I think I have same problem also. 

    Same theme as you and it is a responsive theme.

    http://www.sgmytaxi.com/jotform-testing/

    When i minimize the browser window of chrome, all forms disappear..

     

    What can i do to recover it ?  

  • Profile Image
    JotForm Support

    Answered by EltonCris on January 25, 2014 at 02:59 AM

    @ leeqin1022 

    I have replied to your other thread here http://www.jotform.com/answers/323219.

    Thanks!


  • Profile Image

    Answered by ljdream00 on March 07, 2014 at 01:19 PM

    Oh WOW, thanks @EltonCris, I was looking for this solution. Your CSS Script Worked PERFECTLY