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

    Why my form is not mobile responsive?

    Asked by prowrestlingtees on May 05, 2016 at 01:33 PM
    The only other issue I was having is when I'm using the embed code, it doesn't become responsive. Same with the full code. So I have to write a bunch of media queries for different fields. Any thoughts?
  • Profile Image
    JotForm Support

    Answered by Kevin_G on May 05, 2016 at 01:54 PM

    Your form is mobile responsive by default, it means that you do not have to do anything else to make it responsive. 

    Now, if you are embedding your form using the source code then here might be a conflict with the style in your website, may be that some CSS code is affecting the HTML elements in the form, so if this is the case, you will need to double check the code in your website and the code in the form in order to ensure that there is not any conflict between them. 

    If you are embedding your form using another embed method such as the default one(Javascript code) or iFrame method then there should not be conflict; however, if your form is not loading responsively you may add a widget to your form that will help you with that, the widget is on the link below: 

    Mobile_responsive

    The guide below will help you to add the widget to your form: 

    How-to-Add-a-Widget-to-your-Form

    Here is also a CSS code that may help you to make your form mobile responsive as well: 

    /*-----------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;

    }

    The guide below will help you to inject the code to your form: 

    How-to-Inject-Custom-CSS-Codes

    If this does not work, please provide us the link to your website, we will take a look and will identify why your form is not loading responsively. 

     

  • Profile Image

    Answered by prowrestlingtees on May 05, 2016 at 02:27 PM

    This is the page where the entire source code is embedded. I did this so I can delete certain countries.

     

    http://www.prowrestlingtees.com/tagteampaypalonly

    I had to create this page because of the issue with payflow

    http://www.prowrestlingtees.com/tagteamfull

    That was my old page and the responsiveness works fine

    Any idea?

  • Profile Image
    JotForm Support

    Answered by Welvin on May 05, 2016 at 03:11 PM

    I'd suggest copy/pasting the CSS of the responsive form to the second form which is not yet responsive. The fields are identical and the CSS targets the control boxes as well the classes so the CSS should work in the second form. Please try that.