How Can I Make My Form a Dynamic Size?

  • bluebarn
    Asked on January 7, 2016 at 12:43 AM

    I would like to make a form dynamic in sizing so that when the web page is viewed on a mobile browser, it fits accordingly. 

  • mert JotForm UI Developer
    Replied on January 7, 2016 at 8:40 AM

    Hi,

    There are several methods are provided to make your form mobile friendly. For the quick solution, you can add this feature to your form by simply following the tutorial from the link below:

    http://www.jotform.com/help/311-How-to-make-Forms-Mobile-Responsive

     

    If it won't work, you can try adding some custom CSS to make your form mobile responsive. This method is the more advanced one to solve this issue.

    To do that,

    1) First, you need to know about injecting custom CSS to your form. The detailed information about it is given from the following link below:

    http://www.jotform.com/help/117-How-to-Inject-Custom-CSS-Codes

     

    2) Add the following custom CSS code to your form by using the method above.

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

     

    .form-line.form-line-column {

    width: 100% !important;

    margin-left:0

    }

     

    .form-line{

    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;

    }

     

    Please, try this method and let us know the results.

    Thanks.

  • bluebarn
    Replied on January 8, 2016 at 8:46 PM
    Thank you for your assistance. I tried all three methods (the first worked) but am still having an issue with the bottom of my form being cut off without text being written in the last text box as well as the borders being cut off on the right side. Please see attached photo for the example or visit yourself: www.bluebarnphotography.com/contact
    xo
    Rachel
    Rachel Linder
    Blue Barn Photography
    www.bluebarnphotography.com
    rachel@bluebarnphotography.com
    (919) 624-7139
    Office Hours: Tuesday - Thursday 9:00 AM - 4:00 PM; Friday - Monday by appointment only.
    As recently seen on...
    Style Me Pretty
    Southern Weddings
    The School of Styling
    Wedding Chicks
    ...
  • Kevin Support Team Lead
    Replied on January 9, 2016 at 1:54 PM

    Hi,

    Try pasting this CSS code in your website, paste it between the <head> tag : 

    <style type="text/css">

        @media screen and (max-width: 480px), screen and (max-device-width: 768px) and (orientation: portrait), screen and (max-device-width: 415px) and (orientation: landscape){

        #JotFormIFrame{

            height:820px !important;

        }

      }

    </style>

    It should change the height of the IFrame where the form is embedded and it should be displayed properly in your website in mobile devices.

    Do let us know if it works, if not , we will be glad to assist you.

    Regards.

  • bluebarn
    Replied on January 11, 2016 at 7:46 AM
    I only have the ability to adjust code on each individual page, so I've
    tried placing this code in a few different places and none seem to work.
    Here is what the page has
    currently:


    ...
  • mert JotForm UI Developer
    Replied on January 11, 2016 at 9:00 AM

    Hi again,

    According to my tests, the last state of your embedded form on your web page is similar with the original form. Please, see it from the below:

    How Can I Make My Form a Dynamic Size? Image 1 Screenshot 20

     

    However, if you are experiencing this problem on different screen resolutions, you can try to embed your form with iFrame method, then you can adjust its height value as it is shown from the below:

     

    <iframe

    id="JotFormIFrame"

    onDISABLEDload="window.parent.scrollTo(0,0)"

    allowtransparency="true"

    src="https://form.jotform.co/33435446461858"

    frameborder="0"

    style="width:100%;

    height:800px;

    border:none;"

    scrolling="no">

    </iframe>

     

    Above, you can adjust the "height" value and also, you can copy and paste that one, because it is coming from your form. Please, let us know the results.

     

    Thanks.