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

    CSS to make form responsive is not working

    Asked by pewple on August 12, 2016 at 12:28 PM

    Lastly, I included your provided code in the CSS and I checked the "Make form responsive" option in the designer platform, but its still not responsive.

     

  • Profile Image
    JotForm Support

    Answered by John_Benson on August 12, 2016 at 02:10 PM

    I will attend to this thread shortly, I need more time to create a custom CSS to make the form responsive. Thank you.

  • Profile Image

    Answered by pewple on August 12, 2016 at 02:59 PM

    Ok, thank you for your time.

  • Profile Image
    JotForm Support

    Answered by John_Benson on August 12, 2016 at 03:10 PM

    Thank you for waiting. These are the problems with the form that needs to be fixed:

    1. The small space under the State field. We need to remove the left margin in order to fix this.

    2. The "This field is required." field pop up is stretching the form horizontally in mobile devices. In order to fix this, we need to position the pop-up near the text box.

    The solution is to insert this custom CSS on your form:

    .form-address-table td:last-child .form-sub-label-container {
    margin-left: 0 !important;
    width: 100% !important;
    }

    @media (min-width:320px) {
    .form-line-error .form-error-message {
    left : 60% !important;
    }
    }

    On top of that, you also need to insert the widget called Mobile Responsive. In the Form Builder, just click the More Fields option and then search for the Mobile responsive widget. Once you find it, drag it to the form.

    Here's the result:

    Thank you for your patience. Let us know if you need further assistance. Thank you.

  • Profile Image

    Answered by pewple on August 12, 2016 at 03:48 PM

    Thank you again for your time and detailed response. In brief, I'm saddened to report that all of the directives given to me have been applied and its still displaying the same.

     

  • Profile Image
    JotForm Support

    Answered by Welvin on August 12, 2016 at 05:55 PM

    It turns out that you are using our lightbox embed method. Please note that our lightbox embed method is not yet designed to be responsive. We suggest embedding the form using our default embed method or the iframe method. Or, you can also install a plugin for WordPress that opens a page on a responsive modal window. I personally used Colorbox plugin: https://wordpress.org/plugins/wp-colorbox/

  • Profile Image

    Answered by pewple on August 12, 2016 at 08:45 PM

    Hello and thank you for sharing. In response: I understand. I will give the other suggested options a try.... I'm sure one/both would prove sufficient. Continued success and thanks (to all) for your assistance.

    Bill

  • Profile Image
    JotForm Support

    Answered by liyam on August 12, 2016 at 09:02 PM

    On behalf of the team, you are welcome.

    Feel free to get back to us anytime for any concerns, questions, or when you need assistance in any of your forms or your account.

    Warm regards,
    Liyam