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

    How do I make a responsive form ?

    Asked by Atulbhandari on March 03, 2014 at 06:40 AM

    Hie  My form is responsive  but I am  using some images on my form  which are not responsive  .please help

    Test Form link :-  http://form.jotformpro.com/form/40360636914958

    Here is my CSS

    @font-face {
    font-family: 'Open Sans Condensed';
    font-style: normal;
    font-weight: 300;
    src: local('Open Sans Cond Light'), local('OpenSans-CondensedLight'), url(http://themes.googleusercontent.com/static/fonts/opensanscondensed/v7/gk5FxslNkTTHtojXrkp-xF1YPouZEKgzpqZW9wN-3Ek.woff) format('woff');
    }
    /*--form header background--*/
    .form-header-group {
    background: transparent;
    border-bottom:0px !important;
    padding-top: 0px !important;
    .form-line {
    padding-top: -16px;
    !important;
    }
    color: #D4D4D4 !important;
    }
    body {
    background: url('http://maestro.onproductizing.com/wp-content/uploads/2014/01/pagebackground.jpg') repeat;
    }
    /*--textarea fixed width--*/
    .form-textarea{
    width: 513px !important;
    }/*--form background--*/
    .form-all{
    font-family: 'Open Sans Condensed', sans-serif;
    font-weight: 900;
    background:url('http://www.productleadership.in/wp-content/uploads/2014/01/png-Copy-Copy-4.png') repeat;
    border: 2px #D4D4D4 solid;
    border-radius:5px;
    -webkit-border-radius:5px;
    -moz-border-radius:5px;
    -moz-box-shadow: 0px 0px 5px #D4D4D4;
    -webkit-box-shadow: 0px 0px 5px #D4D4D4;
    box-shadow: 0px 0px 5px #D4D4D4;
    padding-left: 12px;
    margin-top: 0px;
    }/*--textbox, textarea style--*/
    .form-textbox, .form-textarea{
    -moz-border-radius: .5em;
    -webkit-border-radius: .5em;
    border-radius: .5em;
    padding: 8px 8px;
    color: #659F39;
    font-family: open sans;
    font-size: 12px;
    border: 1px #D4D4D4 solid;
    -moz-box-shadow: 0px 0px 5px #D4D4D4;
    -webkit-box-shadow: 0px 0px 5px #F4F4F4;
    box-shadow: 0px 0px 5px #F4F4F4;
    }/*--form label style--*/
    .form-label-top, .form-label-left, .form-label-right{
    color: #190707 !important;
    }/*--remove focus border--*/
    .form-textbox:focus, .form-textarea:focus{
    outline:none;
    }/*--move error below submit button--*/
    .form-button-error{
    display:block;
    }/*--remove error button--*/
    .form-error-message {
    display: none !important;
    }
    .form-line-error {
    background:none repeat scroll 0 0;
    }/*--submit button move slightly left--*/
    .form-submit-button{
    margin-left:2px;
    }/*--add red border on error--*/
    .form-validation-error {
    border: 1px solid red !important;
    }
    .form-line-active {
    background-color:#CEECF5;
    }
    .form-section{
    margin: -5px; !important;
    }
    .form-line-column {
    margin-left:12px; }

     

    /*-----------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: 75%;

    }

    .form-sub-label-container {

    width: 100%;

    display:block;

    }

    }

     

    form background textarea form link form label style
  • Profile Image
    JotForm Support

    Answered by EltonCris on March 03, 2014 at 08:47 AM

    Hi,

    Just insert the following CSS code between the media query.

    img{width:100%;height:100%;}

    So it should be like this:

    @media (max-width: 480px) {

    ...your existing CSS codes here

        img{width:100%;height:100%;}

    }

    Possible output:

    Hope this helps. 

    Regards!