How to make the form mobile responsive?

  • Profile Image
    EltonCris
    Asked 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!

  • Profile Image
    fatfishgames
    Answered 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
    pinoytech
    Answered 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
    fatfishgames
    Answered on October 29, 2013 at 10:14 AM

    http://jotformeu.com/form/32892944156363

  • Profile Image
    fatfishgames
    Answered 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
    pinoytech
    Answered 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
    fatfishgames
    Answered on October 29, 2013 at 12:59 PM

    that's great!  Thanks very much

  • Profile Image
    pinoytech
    Answered 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
    entechjax
    Answered 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
    jonathan
    Answered 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
    kosirm
    Answered 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
    uibreakfast
    Answered 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
    pinoytech
    Answered 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
    hendra45
    Answered 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
    Carina
    Answered on April 09, 2014 at 12:13 PM

    @hendra45

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

    Thank you

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

    @Carina

    Okay, please to be able to solve my problem

    Thanks,

  • Profile Image
    ashwin_d
    Answered 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
    prpalaska
    Answered 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
    mobt.ap
    Answered on August 02, 2014 at 04:39 PM

    Thanks! 

  • Profile Image
    klicco
    Answered on May 19, 2015 at 10:30 AM

    Excellent (copied from the first code pasted here).

    Thanks