Haw can I make the form mobile responsive

  • Profile Image
    ionutindreica
    Asked 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?

  • Profile Image
    EltonCris
    Answered 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
    prpalaska
    Answered 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
    EltonCris
    Answered 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
    prpalaska
    Answered 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
    Mike_T
    Answered 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
    prpalaska
    Answered on April 07, 2014 at 05:49 PM

    Thank you!

  • Profile Image
    sbohler
    Answered on May 05, 2014 at 01:09 PM

    This thread is very helpful.

  • Profile Image
    gahsa
    Answered on September 14, 2014 at 10:51 PM

    I'm having the same issue

     

    georigahealthsavings.com/quote

  • Profile Image
    crystaloftruth
    Answered on July 21, 2015 at 11:35 PM

    Thanks for this, you are a life saver.