How to shrink my form?

  • Profile Image
    bdawgs1
    Asked on October 04, 2016 at 02: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?

  • Profile Image
    Kevin_G
    Answered on October 04, 2016 at 04: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. 

  • Profile Image
    bdawgs1
    Answered on October 12, 2016 at 09:51 AM

    Where do I put the CSS code in???

  • Profile Image
    bdawgs1
    Answered on October 12, 2016 at 09:54 AM

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

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

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

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

    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.

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

  • Profile Image
    bdawgs1
    Answered on October 12, 2016 at 01: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.

  • Profile Image
    John_Benson
    Answered on October 12, 2016 at 04: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.

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

    3. After that, click the Save Changes button.

    Hope that helps.