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

    The Mobile Responsive Widget is not helping my form be mobile friendly - can you help?

    Asked by Jdelrossi on May 25, 2016 at 12:41 PM

    I dragged the mobile responsive widget to the top of my form..In preview, the form looks great on tablet, laptop, desk top but on mobile the heading and comment boxes are cut off.  The rest of the form displays nicely.

    Mobile mobile responsive responsive widget mobile friendly
  • Profile Image
    JotForm Support

    Answered by Charlie on May 25, 2016 at 02:24 PM

    As mentioned in this guide: https://www.jotform.com/answers/846510, where you have also posted almost the same concern, please also try enabling the mobile responsive option in your Form Designer Tool, here's a guide about it: https://www.jotform.com/help/322-How-to-make-mobile-friendly-forms-on-JotForm 

    Here's my cloned form with the changes I made: https://form.jotform.com/61455613741959. You can clone it to your account to have a copy of it. Here's how to clone it: https://www.jotform.com/help/42-How-to-clone-an-existing-form-from-a-URL. For the comment and the header image, try adding this custom CSS code below:

    @media screen and (max-width: 600px), screen and (max-device-width: 768px) and (orientation: portrait), screen and (max-device-width: 768px) and (orientation: landscape) {

    #cid_1 > div {

        display: inline-block !important;

        width: 100% !important;

        height: auto !important;

    }

     

    #cid_1 > div > div {

        display: block !important;

    }

     

    #cid_1 > div > div > div.header-logo {

        display: block !important;

        width: 100% !important;

    }

     

    #cid_1 > div > div > div.header-text.httac.htvam {

        display: block !important;

        width: 100% !important;

        height: auto !important;

    }

    #cid_1 > div > div > div.header-logo > img {

        display: block !important;

        width: 100% !important;

        height: auto !important;

    }

     

    /*Make the text area to get 100% of width*/

    #cid_40 > div:nth-child(1), #cid_40 > div:nth-child(2) {

        width: 100% !important;

    }

     

    }

    Paste it under the CSS tab in your Form Designer Tool.

     

    I presume you don't want the header image to shrink in mobile device? In my case, what I did is to move the text beside it at the bottom of the image header when the screen size is small. Just like this:

     

    Let us know if that works.

  • Profile Image

    Answered by Jdelrossi on May 25, 2016 at 03:45 PM

    Thanks you - I copied your CSS code and the form looks great in preview. I appreciate your help!
    Justine M. Del Rossi
    Vacation Specialist/Franchise Owner
    Sewell, NJ
    T:1-844-2SETSAIL
    T:(856) 270-6405
    F:(856) 283-0061
    E:[ jdelrossi@cruiseone.com ]( mailto:jdelrossi@cruiseone.com )
    [ Sign Up for Exclusive Offers & Promotions ]( http://jdelrossi.cruiseone.com/travel/cruises/Editorial.html?edType=Custom+Page&pagename=emailOffers )
    [ ]( http://jdelrossi.cruiseone.com/travel/HomePage.html )
    Website:
    [ http://www.setsailworldwide.com ]( http://www.setsailworldwide.com )
    Family Cruises:
    [ http://www.setsailfamily.com ]( http://www.setsailfamily.com/ )
    Luxury Cruises:
    [ http://www.setsailvip.com ]( http://www.setsailvip.com/ )
    [ ]( http://jdelrossi.cruiseone.com/travel/cruises/Editorial.html?edType=Custom+Page&pagename=More_Information_CruiseOne )
    Each CruiseOne Franchise is independently Owned and Operated
    ...
  • Profile Image
    JotForm Support

    Answered by Charlie on May 25, 2016 at 03:48 PM

    I'm glad to hear that the custom CSS code worked.

    Should you need further assistance on this, please do let us know.

    Thank you.