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

    Form appearance in Mobile Browser

    Asked by totesmobile on October 08, 2014 at 02:40 PM

    I'm trying to incorporate a form I've created into my website. On the desktop version, the form appears as intended, however on the mobile version, the fields are slightly cut off (on the right-hand side). I've using the html embed code dropped directly into my site, as such:

     

    I've already tried using the Responsive Mobile Widget, and revising the form width, but to no avail. 

     

    Are there any other methods I can try to improve how the form shows up on a mobile device??

    Page URL:
    http://totes-test.weebly.com/driver-application.html

    Screenshot
    Mobile mobile browser appearance form appearance
  • Profile Image
    JotForm Developer

    Answered by hasan on October 08, 2014 at 03:17 PM

    Hello,

    I suppose you have made some changes on your form. Your form seems fine now. Also I'm happy to say that our development team is currently working on more mobile friendly forms.

    If you have any problem after finished configuring your form please let us know. We'll happily help you to make your form mobile.

    Thanks.

  • Profile Image

    Answered by totesmobile on October 08, 2014 at 03:21 PM

    Unfortunately, it isn't fine. The Address fields, and the Credit Card information fields are cut-off on the right hand side. I've been using an iPhone 5S to check the mobile version, so perhaps you were seeing it on a larger device?

    Also, the form isn't cutoff in landscape view (due to the larger width of the screen). It's only in portrait...

     

    Thank you though!

  • Profile Image
    JotForm Developer

    Answered by hasan on October 08, 2014 at 04:53 PM

    Hi again,

    I prepared some custom css for your form. With that your form will looks much solid in mobile devices. Please check our How to Inject Custom CSS Codes guide to apply below CSS Code.

    This CSS code is only for your form. Changing your inputs may break this. However we can make this again after your changes.

    Thanks.

     

    @media only screen and (max-width: 760px) { /* Force table to not be like tables anymore */ table, thead, tbody, th, td, tr { display: block; } td { /* Behave like a "row" */ border: none; border-bottom: 1px solid #eee; position: relative; } #cid_9 > span, #cid_10 > span, .form-input { display: block; } #id_7 .form-sub-label-container, #input_8, #input_9_full, #input_10_full, #input_13, #input_14, #input_17, #input_19, #input_20, #input_20_confirm, #input_21, #input_22, #input_23, #input_24, #input_29 { width: 90%!important; } #id_7 .form-address-table, #id_7 .form-address-line, #id_7 .form-address-city, #id_7 .form-address-state, #id_7 .form-address-country, #id_7 .form-address-postal { width: 100%!important; } #cid_7 > table > tbody > tr:nth-child(3) > td:nth-child(1), #cid_7 > table > tbody > tr:nth-child(4) > td:nth-child(1) { width: 100%!important } }