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
    JotForm Support

    How to make the form mobile responsive?

    Asked by EltonCris on July 08, 2013 at 11:00 PM

    Hi,

    Our forms are already optimized for mobile views so it is built in on the forms already. However, if you like to customize it further, you can use these CSS codes to make your form mobile ready! :)

    You can copy the entire codes here http://pastebin.com/raw.php?i=s3bBtCh2 or you can get it below.

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

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

    .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;

    }

    .form-buttons-wrapper{

    margin-left:0 !important;

    }

    .form-input {

    width: 100%;

    }

    .form-all{

    width: 98%;

    }

    .form-sub-label-container {

    width: 100%;

    display:block;

    }

    /*--for the address table--*/

    span.form-sub-label-container + span.form-sub-label-container {

    margin-right: 0;

    }

    .form-address-table select,

    .form-address-state,

    .form-address-table, 

    .form-address-line,

    .form-address-table .form-sub-label-container {

    width: 100%;

    }

    .form-address-postal,

    .form-address-city{

    width: 99%;

     

    }

    .form-address-table td, .form-address-table th {

    padding-bottom: 10px;

    padding: 0 0 10px 0;

    }

    }

    Simply inject this CSS to your form. How to Inject Custom CSS Codes to your Form

    Here's a demo: http://www.jotformpro.com/form/31362999175971, try resizing the browser window width and see how the form reacts.

    Let us know if you have further questions. Thanks!

    Mobile JotForm textarea Inject Custom CSS style label
  • Profile Image

    Answered by fatfishgames on October 29, 2013 at 09:16 AM

    Hi

    The form seems to be mobile optimised but the images aren't. i.e. I uploaded an image and on mobile, the image doesn't fit in the screen and users had to scroll to the right.

    How do I make the image responsive to the screens too?

    Many Thanks

  • Profile Image

    Answered by pinoytech on October 29, 2013 at 09:31 AM

    @fatfishgames,

    Can you please share to us URL of the Form that you are referring for further assistance?

    Thank you!

  • Profile Image

    Answered by fatfishgames on October 29, 2013 at 10:14 AM

    http://jotformeu.com/form/32892944156363

  • Profile Image

    Answered by fatfishgames on October 29, 2013 at 11:50 AM

    can we make the width 100% for the screen without restricting the height?

    The image is currently distorted at the moment.

    Ideally we want the image to stay proportionate as it is

     

    Many Thanks

  • Profile Image

    Answered by pinoytech on October 29, 2013 at 12:41 PM

    Yes! you can. Please remove current css code that I've provide and replace with this code(updated):

    @media only screen

    and (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;

    }

    }

    Here's how it looks like:

    If you need further assistance, please let us know.

    Thank you!

  • Profile Image

    Answered by fatfishgames on October 29, 2013 at 12:59 PM

    that's great!  Thanks very much

  • Profile Image

    Answered by pinoytech on October 29, 2013 at 01:02 PM

    It's my pleasure! If you need our assistance again, please don't hesitate to contact us at anytime.

    Have a nice day!

  • Profile Image

    Answered by entechjax on November 24, 2013 at 06:48 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 ...

  • Profile Image
    JotForm Support

    Answered by jonathan on November 24, 2013 at 08:02 PM

    @ entechjax

    Please create a new thread with regards to your issue. Use this link http://www.jotform.com/contact/

    You can just copy and paste you entire message on this thread and provide the appropriate subject/title on your post. This will make it easier to post your question.

    I am sorry if I have to request you to do this, but since this thread was only hijacked, I am not able to view all the necessary details concerning your account and form, that will allow us to assist you right away.

    We will await for your post.

    Thanks.

  • Profile Image

    Answered by kosirm on January 23, 2014 at 11:36 AM

    Thanks for this example! It was the only missing bit in my jotforms experience - to make forms responsive. Now I can do this. I feel great! Thank you again!

  • Profile Image

    Answered by uibreakfast on February 05, 2014 at 04:13 PM

    Dear JotForm team,

    The responsive CSS injection works great, but I have one issue with the iPhone (desktop looks great). Form title and subtitle seem to have different (zero) margins, while I'd like them to be in line with the rest of the form. Could supply a screenshot if needed.

    Could you please help with that?

  • Profile Image

    Answered by pinoytech on February 05, 2014 at 04:21 PM

    @uibreakfast

    Can you please open/create a separate thread with regards on your query for further assistance? Kindly include also URL of your form in your thread/post.

    Thanks,

  • Profile Image

    Answered by hendra45 on April 09, 2014 at 11:22 AM

    How can make this form responsive http://www.waktu pulang.com/cerita-pulang/ for mobile

    Thanks,

  • Profile Image

    Answered by Carina on April 09, 2014 at 12:13 PM

    @hendra45

    Please open a new thread  so we can be of assistance.

    Thank you

  • Profile Image

    Answered by waktupulang on April 09, 2014 at 11:13 PM
  • Profile Image

    Answered by waktupulang on April 09, 2014 at 11:18 PM

    @Carina

    Okay, please to be able to solve my problem

    Thanks,

  • Profile Image
    JotForm Support

    Answered by ashwin_d on April 10, 2014 at 03:54 AM

    Hello waktupulang,

    My colleague is responding to you on the following thread of yours: http://www.jotform.com/answers/360592-How-can-make-this-form-responsive-http-www-waktu-pulang-com-cerita-pulang-for-mobile#0

    Thank you!

  • Profile Image

    Answered by prpalaska on May 21, 2014 at 08:15 PM

    Hello,

    I got small form that I added to revolution slider (wordpress CMS), now I need some how make this form responsive 

    Current form code

    <script type="text/javascript" src="//form.jotformpro.com/jsform/41405796054961"></script>

    http://awesomescreenshot.com/0eb2ufkl6d

    http://prpalaska.com/ - my website

  • Profile Image

    Answered by mobt.ap on August 02, 2014 at 04:39 PM

    Thanks! 

  • Profile Image

    Answered by klicco on May 19, 2015 at 10:30 AM

    Excellent (copied from the first code pasted here).

    Thanks