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 change the width and height size of my form?

    Asked by ReenaChohan on November 12, 2013 at 08:56 AM

    I need to create a form which has a width of 198px and a height of 208px. I can adjust the width but not the height. How can I change the height?

    Page URL:
    http://form.jotform.co/form/33153550868862

    create a form height create
  • Profile Image

    Answered by EliezerN on November 12, 2013 at 10:48 AM

    Thanks for contacting us.

    That is no way to change the height size from the form builder as it will change accordint to the number if fields you add to the form. However, you change the widht and height size to the desired one at the same time by insertuing CSS code. Please insert the next CSS code to your form:

    .form-all

    {

    width:198px !important;

    height:208px !important;

    }

    That will make the width to 198px and the height to 208px. Please follow the next guide to know how to insert CSS codes to your form: How to Inject custom CSS codes

     Please let us know if you need further assistance or kindly open a new thread to make unrelated questions.

    Thanks for using Jotform.

  • Profile Image

    Answered by ReenaChohan on November 12, 2013 at 10:52 AM

    Many thanks for this!

    Will this also change the iframe code?, i.e. the new width and height will be reflected in the iframe code?

  • Profile Image

    Answered by pinoytech on November 12, 2013 at 11:34 AM

    Yes, that would automatically reflect on your form's iFrame code that you have embedded into your website.

    Feel free to contact us again if you need further assistance.

    Thank you!

  • Profile Image

    Answered by ReenaChohan on November 12, 2013 at 11:35 AM

    Hi there!

    The changes have not been reflected in my iframe code. I am also tried to shift my submit button up higher but this is also not working.

     

    My form is http://form.jotform.co/form/33153550868862

     

    Thanks

  • Profile Image
    JotForm Support

    Answered by ardy0689 on November 12, 2013 at 12:17 PM

    Thanks for the reply.

    In order to accomplish that you need to insert the Custom CSS code what my colleague EliezerN has posted.

    .form-all

    {

    width:198px !important;

    height:208px !important;

    }

    In order to adjust the submit button's margin please add this as well:

    #id_2{
    margin-top:-30px !important;
    }

     

    Please refer to this user guide on How to Inject custom CSS codes.

    You may use this iFrame embed code. I already adjusted the sizes.

    <iframe id="JotFormIFrame" onload="window.parent.scrollTo(0,0)" allowtransparency="true" src="//support.jotform.com/form/33153550868862" frameborder="0" style="width:198px; height:208px; border:none;" scrolling="no"></iframe>


    Please let us know if the above suggestions has worked on your end. Thank you