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 Can I Make My Form a Dynamic Size?

    Asked by bluebarn on January 07, 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. 

    Page URL:
    www.bluebarnphotography.com/contact

    size Make how a
  • Profile Image
    JotForm Support

    Answered by mert on January 07, 2016 at 08: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.

  • Profile Image

    Answered by bluebarn on January 08, 2016 at 08: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
    ...
  • Profile Image
    JotForm Support

    Answered by Kevin_G on January 09, 2016 at 01: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.

  • Profile Image

    Answered by bluebarn on January 11, 2016 at 07: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:


    ...
  • Profile Image
    JotForm Support

    Answered by mert on January 11, 2016 at 09: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:

     

    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"

    onload="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.