How Can I Make My Form a Dynamic Size?

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

  • Profile Image
    Answered on January 07, 2016 at 08:40 AM


    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:


    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:


    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;





    width: 100%;    







    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;




    margin-left:0 !important;



    .form-input {

    width: 100% !important;




    width: 75% !important;



    .form-sub-label-container {

    width: 100% !important;

    display: block  !important;



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


  • Profile Image
    Answered 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:
    Rachel Linder
    Blue Barn Photography
    (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
    Answered on January 09, 2016 at 01:54 PM


    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){


            height:820px !important;




    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.


  • Profile Image
    Answered 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

  • Profile Image
    Answered 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:














    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.