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

    Haw can I make the form mobile responsive

    Asked by ionutindreica on January 28, 2014 at 10:49 PM

    I wonder if there is any way to make the form responsive,or to have acces to code to make it myself?

    Page URL:
    http://www.impulstraining.ro/inscrieri/inscrieri-eveniment-de-leadersh<br/>ip-studenti

    Screenshot
  • Profile Image
    JotForm Support

    Answered by EltonCris on January 29, 2014 at 03:27 AM

    Hi,

    FYI, form is already responsive when you view it on an actual mobile device. However, if you want it to respond according to the browser width, inject these CSS codes to your form, this might help.

    /*-----------RESPONSIVE LAYOUT-----------*/

    @media (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-postal, .form-address-city, .form-address-state, .form-address-table, .form-address-line, .form-address-table .form-sub-label-container { width: 100%; } .form-address-table td, .form-address-table th { padding-bottom: 10px; padding: 0 1px 10px 1px; } }

    You can also get the code here: http://pastebin.com/raw.php?i=XhbG31CA

    Guide on How to Inject CSS Codes to your Form: https://www.jotform.com/help/117-How-to-Inject-Custom-CSS-Codes

    Result:

    Hope this helps.

    Regards!

  • Profile Image

    Answered by prpalaska on April 04, 2014 at 06:26 PM

    How can make this form responsive http://prpalaska.com/services/forms/ach-enrollment-form/ for iphone + make signature to be response too?

  • Profile Image
    JotForm Support

    Answered by EltonCris on April 04, 2014 at 07:04 PM

    @prpalaska

    Insert the following CSS codes into your existing CSS codes between the media query.

    Example:

    @media (max-width: 480px) {

    /*INSERT IT HERE*/

    #sig_pad_24, #sig_pad_24 > canvas, #signature_pad_24{

    width:250px !important;

    }

    .form-all button {

    margin-left: 0 !important;

    display: block;

    }

    }

    Hope this helps!

  • Profile Image

    Answered by prpalaska on April 07, 2014 at 02:43 PM

    Thank you!

    Couple more improvements I need to make, see printscreen http://awesomescreenshot.com/0bf2m5kr62 

     

    Current code:

    /*-----------RESPONSIVE LAYOUT-----------*/@media (max-width: 480px) {

     

    /*INSERT IT HERE*/

     

    #sig_pad_24, #sig_pad_24 > canvas, #signature_pad_24{

     

    width:250px !important;

     

    }

     

    .form-all button {

     

    margin-left: 0 !important;

     

    display: block;

     

    }

     

     

    .form-line.form-line-column {width: 100%;}.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 !important;}.form-buttons-wrapper{margin-left:0 !important;}.form-input {width: 100% !important;}.form-all{width: 75% !important;}.form-sub-label-container {width: 100% !important;display: block  !important;}}

  • Profile Image
    JotForm Support

    Answered by Mike_T on April 07, 2014 at 05:23 PM

    You can try the following CSS on your form. I have highlighted added/updated code:

    /*-----------RESPONSIVE LAYOUT-----------*/
    @media (max-width: 480px) {
    /*INSERT IT HERE*/
    #sig_pad_24, #sig_pad_24 > canvas, #signature_pad_24 {
    width: 250px !important;
    }

    .form-all button {
    margin: 0 auto !important;
    display: block;
    }

    .form-line.form-line-column {
    width: 100%;
    }

    .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 !important;
    }

    .form-buttons-wrapper {
    margin-left: 0 !important;
    }

    .form-input {
    width: 100% !important;
    }

    .form-all {
    width: 75% !important;
    }

    .form-sub-label-container {
    width: 100% !important;
    display: block !important;
    }

    .form-address-table {
    width: 250px;
    }

    .form-address-line {
    width: 230px;
    }

    .form-address-city, .form-address-state {
    width: 110px;
    }

    .form-address-table td, .form-address-table th {
    padding-bottom: 10px;
    }

    .form-address-table select {
    width: 100px;
    }

    }

    Thank you.

  • Profile Image

    Answered by prpalaska on April 07, 2014 at 05:49 PM

    Thank you!

  • Profile Image

    Answered by sbohler on May 05, 2014 at 01:09 PM

    This thread is very helpful.

  • Profile Image

    Answered by gahsa on September 14, 2014 at 10:51 PM

    I'm having the same issue

     

    georigahealthsavings.com/quote

  • Profile Image

    Answered by crystaloftruth on July 21, 2015 at 11:35 PM

    Thanks for this, you are a life saver.