How to shrink my form?

  • bdawgs1
    Asked on October 4, 2016 at 2:38 PM

    How can I shrink this jot form to atleast 60-75% smaller. Also i do not want a backround border. How do i remove the light blue backround border?

  • Kevin Support Team Lead
    Replied on October 4, 2016 at 4:57 PM

    How can I shrink this jot form to atleast 60-75% smaller.

    You may decrease the actual form's width with this CSS code: 

    .form-all {

        width: 30%;

    }

    Do note that you may either increase or decrease the value depending on how you want the form to look. 

    Also i do not want a backround border. How do i remove the light blue backround border?

    Please inject this CSS code to remove the background color of the form: 

    html.supernova{

        background: none;

    }

    This guide will help you to inject all the code to your form: How-to-Inject-Custom-CSS-Codes

    If you have any question, please let us know. 

  • bdawgs1
    Replied on October 12, 2016 at 9:51 AM

    Where do I put the CSS code in???

  • bdawgs1
    Replied on October 12, 2016 at 9:54 AM

    I want to shrink the width as well as the height. what is the code for that?

  • John_Benson
    Replied on October 12, 2016 at 11:17 AM

    Where do I put the CSS code in?

    Please follow this guide: https://www.jotform.com/help/117-How-to-Inject-Custom-CSS-Codes

    1. Open your form and click the Preferences button in the Form Builder.

    How to shrink my form? Image 1 Screenshot 40

    2. In the General tab, click the Form Styles link below.

    How to shrink my form? Image 2 Screenshot 51

    3. Go to the Inject CSS and paste the CSS code in the text area. Click the Save Changes when you're done. 

    How to shrink my form? Image 3 Screenshot 62

    We will be answering your next question in a minute. Please wait for our reply. Thank you.

    If you need any further assistance, let us know. We'll be happy to help you.

  • John_Benson
    Replied on October 12, 2016 at 11:39 AM

    I want to shrink the width as well as the height. what is the code for that?

    .form-all {

        width : 400px !important;

    }

    .form-line {

        margin-top : 0px !important;

        margin-bottom : 0px !important;

        padding-top : 0px !important;

        padding-bottom : 10px !important;

    }

    Please add this CSS code by following the guide given on my last post. Thank you!

  • bdawgs1
    Replied on October 12, 2016 at 1:56 PM

    I appreciate your help,

    The width is fine but I need the form to be shorter. Can you send me a new code.

  • John_Benson
    Replied on October 12, 2016 at 4:14 PM

    You can change the font size to decrease the height of your form in the Designer. Here's how:

    1. In the Form Builder, click the Design button.

    How to shrink my form? Image 1 Screenshot 40

    2. In the Form Designer, go to Font Options and decrease the Base Font Size to your own preferences.

    How to shrink my form? Image 2 Screenshot 51

    3. After that, click the Save Changes button.

    How to shrink my form? Image 3 Screenshot 62

    Hope that helps.