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

    Make JotForm Responsive to smaller display device

    Asked by Umesh91 on October 08, 2014 at 08:38 AM

    Hello following is my jotform url

    http://form.jotform.us/form/42304354795154

     

    I have injected the following css classes using inject css feature of the jotform but i want to make my jotform responsive for the mobile,iphone,ipad like devices so for small device i have added the media query at the end but it is not applying for the small device resolution 386px.

    so please let me know where it is wrong?

    i have also taken reference of the following url

    http://www.jotform.com/answers/381293-How-to-make-a-Responsive-form-for-my-website-Revolution-Slider-Wordpress-CMS

     

    .form-submit-button

    {

    background: none;

    background-color: #3cb371;

    outline: none;

    padding: 10px;

    text-transform: uppercase;

    box-shadow: none;

    font-weight: normal;

    font-size: 14px;

    color: #fff;

    border: 1px solid #000;

    border-radius: 0;

    text-shadow: 0 0 #fff;

    }.form-submit-button:hover

    {

    background: none;

    background: -moz-linear-gradient(top, #3cb371 0%, #3cb371 100%);

    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#3cb371), color-stop(100%,#3cb371));

    }.form-header-group

    {

    background: transparent;

    border: none;

    margin: 0 0 10px;

    }.form-label-left

    {

    width: 100% !important;

    }

    .form-line

    {

    padding-left: 0;

    }

    .form-header

    {

    font-family: 'Arial';

    font-size: 18px;

    color: #000000;

    background: none;

    text-transform: uppercase;

    margin-top: 0;

    }.form-all

    {

    margin: 0px auto;

    width: 100%;

    padding-top: 0px;

    display: block;

    float: left;

    color: #000000 !important;

    font-family: 'Arial';

    font-size: 13px;

    }

    .form-textbox

    {

    width: 100%;

    }

    .form-textarea

    {

    width: 100%;

    }

    strong

    {

    font-weight: normal;

    }@media only screen and (max-width: 386 px)

    {

    .form-submit-button

    {

    width: 61% !important;

    }

    }

    Thanks in advance

    Umesh,

     

     

     

     

    JotForm textarea size inject CSS label responsive mobile display
  • Profile Image
    JotForm Support

    Answered by Charlie on October 08, 2014 at 10:19 AM

    Hi Umesh,

    If you would like to make your form responsive to smaller display devices, like mobile phones, you can use this widget, http://widgets.jotform.com/widget/mobile_responsive.

    It is an easy to use widget, there is no additional configuration required. However, please consider not adding any extra CSS customization on the form after creating it in the form builder, as this might affect how the widget works.

    Let us know if this helps.

    Thank you.