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

    Extract the CSS portion of this form to get the desired responsiveness of the form

    Asked by digichef on December 05, 2014 at 07:26 PM

    This question is for Elton Cris.

    Hi Elton,

    This injected code displays perfectly in desktop and mobile (centered & no horizontal scrolling)
    EltonCris' Responsive "Contact Us" Template.

    http://form.jotform.us/form/43387469614163

    Is it possible to extract only the portion of this code to achieve centering & no horizontal scrolling only?

    Is it then possible to make edits edits in Forms Designer, color, insert image etc and then STILL have the above code be responsive, either before or after injecting EltonCris' code?

    Thanks
    Brian

    Mobile responsive mobile responsive
  • Profile Image
    JotForm Support

    Answered by EltonCris on December 06, 2014 at 03:05 AM

    Hello Brian :)

    Actually I have turned the mobile responsive CSS code into a widget so everyone can use it. http://widgets.jotform.com/widget/mobile_responsive. Just add it to your form and you're set. The form should become responsive.

    However if you need code specifics like the one on your example, try this. http://pastebin.com/raw.php?i=QHcTyj14. This one is style-less, I have removed all of the styles (colors, background and padding) retaining only the CSS for mobile responsive so you can further customize your form styles on the form designer. However, do take note that Form Designer has its own mobile styles, it may overwrite the responsive CSS code you injected to your form but there's nothing to worry since the form will continue to display perfectly on mobile when you enable "Form Responsive" on the Form Designer.

    Hope this helps. Thanks.

  • Profile Image

    Answered by digichef on December 06, 2014 at 08:48 AM

    I understand and thanks for your help. 

    Number One is the best in Mobile & Desktop!

    (It looks like using the Responsive Widget is the best option.  I just need to know how to increase the height size of the fields) - Is your Widget editable?

    1) This look is what I want to apply to forms going forward:
    MOBILE (no horizontal scrolling, horizontal padding & centered, HEIGHT OF FIELDS are perfect)
    DESKTOP (form is at the TOP of browser)
    http://form.jotform.us/form/43206646769161

    2) This is using the "Responsive Widget" only:
    MOBILE (fields aren't high enough"
    http://form.jotform.us/form/43393188750159

    3) This is using your "Style-Less" code
    MOBILE (no horizontal scrolling but form fields aren't high enough)
    http://form.jotform.us/form/43393136324149

    4) This is using the "Make Responsive" check box in Form Designer
    Mobile (Scrolls horizontally)
    http://form.jotform.us/form/43393916541156

    Thanks again for your time!
    Brian

  • Profile Image
    JotForm Support

    Answered by EltonCris on December 06, 2014 at 02:17 PM

    Great! Glad to hear one of the option works for you.

    Unfortunately the widget isn't editable but it's not a problem since you can also inject media query CSS directly on your form or on the form designer (CSS tab) if you want to add extra styles for mobile.

    You can use the following.

    @media only screen and (max-width:40em){

    /*Place the CSS code for mobile here e.g. height size of the fields by padding*/

    .form-textbox{padding:8px !important;}

    }

    If you have further questions or if you need clarifications, let us know.

    Thanks.

    P.S. Thanks for providing the demo forms by the way, we greatly appreciate it. :)

  • Profile Image

    Answered by digichef on December 06, 2014 at 04:45 PM

    I'm sorry, I'm being lame.

    This form displays properly. 
    (no horizontal scrolling, horizontal padding & centered, HEIGHT OF FIELDS are perfect)
    http://form.jotform.us/form/43206646769161

    Which portion of the code controls the height of the fields?
    I would like to add just that portion to your "style-less" code.  I just need to know specifically where to add it.

    Your "style-less" code:

    .form-textarea,
    .form-textbox,
    .form-dropdown{
    width:100%;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    }
    .form-textarea:focus,
    .form-textbox:focus,
    .form-dropdown:focus{
    outline: 0  !important;
    }
    /*---------form border------------*/
    .form-all{
    margin-top: 3px;
    }/*---------fix yellow active background overlapping-------------*/
    .form-line {
    width:auto !important;
    }


    span.form-sub-label-container + span.form-sub-label-container {
    margin-right: 0;
    }
    .form-address-table select,
    .form-address-state,
    .form-address-table,
    .form-address-line,
    .form-address-table .form-sub-label-container {
    width: 100%;
    }
    .form-address-postal,
    .form-address-city{
    width: 99%;
    }
    .form-address-table {
    width: 100% !important;
    }
    .form-address-table td, .form-address-table th {
    padding-bottom: 10px;
    padding: 0 0 10px 0;
    }
    div span.form-sub-label-container + span.form-sub-label-container{
    width: 49%;
    }
    input[name$="[first]"], input[name$="[last]"]{
    width: 100%;
    }
    .form-sub-label-container {
    margin-right: 1px;
    width: 50%;
    }
    .form-label-left, .form-label-top {
    width: 100% !important;
    }
    .form-input {width: 100% !important;}
    @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-all{width: 98%;}
        .form-sub-label-container {width: 100%;display:block;}}
    .jotform-form{
    padding-bottom:10px;
    }

  • Profile Image

    Answered by digichef on December 06, 2014 at 04:58 PM

    EltonCris,

    I think I may have figured it out, doh!

    I added this at the beginning of your "style-less" code.

    @media only screen and (max-width:40em){

    /*Place the CSS code for mobile here e.g. height size of the fields by padding*/

    .form-textbox{padding:8px !important;}

    }

    Now the fields are larger on mobile!

    http://form.jotform.us/form/43396285005153

  • Profile Image

    Answered by val on December 07, 2014 at 01:47 AM

    Hi,

    Great! you sorted out the issues! :)

    If you have any question please let us know.

    Thanks!