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 is not mobile responsive

    Asked by tester2017 on June 15, 2017 at 01:41 AM

    Hi,

     

    I'm trying to make my form mobile responsive, however I can't seem to find the tick box in the designer to make the form responsive.

     

    Please help!

     

    Thank you,

    Debbie

  • Profile Image

    Answered by WilliamR on June 15, 2017 at 01:51 AM

    By default, the forms supports mobile device browsers. If this is not the case on your end, the please try adding a Mobile Responsive Widget on your form and see it helps?

    Let us know if you need further assistance.

  • Profile Image

    Answered by tester2017 on June 15, 2017 at 04:25 AM

    Thanks for your reply.

    my form is embedded on a webpage and it is no mobile responsive.

    Thanks,

    Debbie

  • Profile Image
    JotForm Support

    Answered by Jan on June 15, 2017 at 04:55 AM

    May I know what form are you referring to? I checked the stand-alone version of your forms and I can see that they are mobile responsive.

    Please try to re-embed the form using the iFrame method. Here's a guide: https://www.jotform.com/help/148-Getting-the-form-iFrame-code.

    If the issue persists, let us know. Also, please provide the URL of your web page where the form is embedded so that we can further check.

    Thank you.

  • Profile Image

    Answered by tester2017 on June 15, 2017 at 09:25 AM

    I wonder if it could be because of the CSS code that is preventing the forms to be mobile responsive?

     

    Also, here's the url to the webpage:

    https://www.uwcsea.edu.sg/Impact-of-Giving-Gala

    It's under the "Buy Tickets" and "VIP Table" tabs.

  • Profile Image
    JotForm Support

    Answered by BDAVID on June 15, 2017 at 11:39 AM

    Try injecting the following CSS code to make it mobile responsive:

    @media screen and (max-width: 480px), screen and (max-device-width: 767px) and (orientation: portrait), screen and (max-device-width: 415px) and (orientation: landscape){

    .form-input, .form-input-wide, .form-textarea, .form-textbox, .form-dropdown {

        width: 100% !important;

    }

    }

    Result:

    Let us know if you need more help.

  • Profile Image
    JotForm Support

    Answered by BDAVID on June 15, 2017 at 11:42 AM

    Inject the code as shown on this guide: https://www.jotform.com/help/117-How-to-Inject-Custom-CSS-Codes 

  • Profile Image

    Answered by tester2017 on June 15, 2017 at 11:48 AM

    Hi there,

     

    Thanks for that. It looked like it worked great, however the credit card payment is still chopped off on the mobile device.

    Debbie

  • Profile Image

    Answered by tester2017 on June 15, 2017 at 11:51 AM

     

  • Profile Image

    Answered by tester2017 on June 15, 2017 at 11:56 AM

    As soon as I click on the Credit Card payment option, the form suddenly loses its mobile responsiveness.

    Thank you for your time.

    Debbie

  • Profile Image
    JotForm Support

    Answered by BDAVID on June 15, 2017 at 01:43 PM

    After further testing, I figured out the that the problem is caused due to an injected CSS code, please remove the following code from your form:

    #cid_24 label.form-sub-label:nth-child(2) {

    width : 593px !important;

    }

    Example:

    Let us know if you need more help.

  • Profile Image

    Answered by tester2017 on June 15, 2017 at 08:22 PM

    The reason why I included that code is because of the line, which is now next to "SGD". I wanted the line to be below the "Gala-Table" text box. Is there no other way of formatting the line or just remove it completely?

    Thanks,

    Debbie

  • Profile Image
    JotForm Support

    Answered by BDAVID on June 15, 2017 at 09:58 PM

    Use this code instead:

    #cid_24 hr{

    width : 100% !important;

    }

    Let us know if you need more help.

  • Profile Image

    Answered by tester2017 on June 15, 2017 at 10:39 PM

    Perfect! Thank you so much for your prompt assistance!