How can I make the overall size of the form smaller to fit on a webpage?

  • Profile Image
    d_lane
    Asked on June 12, 2016 at 09:29 PM

    How can I make the overall size of the form smaller to fit more nicely on a web page. Is there a css code to make the whole form appear smaller. Also to make the background of my form transparent.

     

  • Profile Image
    liyam
    Answered on June 12, 2016 at 11:18 PM

    Hello, 

    The solution I could think of is to resize the font, as well as to lessen the line-height of texts by using CSS and injecting the CSS into your form. But for us to be able to give you an accurate code to use on your form, can you provide us a link to the page where the form is embedded (also the link to the form if in case the form you're working on is still not embedded on the said page)?

    You can also set the background of your form to transparent following this user guide: https://www.jotform.com/help/87-Making-the-Form-Background-Transparent

    We'll be looking forward to your response.

    Thanks.

  • Profile Image
    d_lane
    Answered on June 13, 2016 at 10:15 AM

    https://www.jotform.com//?formID=61587962610159#

     

    i have a few but this is one to start with

  • Profile Image
    BJoanna
    Answered on June 13, 2016 at 12:04 PM

    I am not exactly sure what you are trying to achieve. Do you want to make your form smaller by changing the width of your form? You can achieve that inside of Form Designer under Form Layout tab.

    You can also make your form to be responsive. Responsive form will adjust to the width of the device on which a form is viewed. You can make your form responsive by adding Mobile responsive widget to your form. 

    How to make mobile friendly forms on JotForm

    Hope this will help. Let us know if you need further assistance. 

  • Profile Image
    d_lane
    Answered on June 13, 2016 at 02:47 PM

    I have a lot of text and I want to make all of it smaller than the 8 that you provide .

  • Profile Image
    BJoanna
    Answered on June 13, 2016 at 03:21 PM

    Inside of this guide you can find how to change font size on forms:

    https://www.jotform.com/help/186-How-to-change-font-size-on-forms 

    I case that you want to change font size only when you form is viewed on mobile devices than Inject this CSS code to your form:

    @media screen and (min-width: 10px) and (max-width: 480px){

    .form-all, .form-label-top, .form-label-left, .form-label-right, .form-html span{

    font-size: 8px!important;

    }}

    Inside of this guide you can find how to Inject Custom CSS codes to your from:

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

    If you add this CSS code to your form, text on your form will look like this on mobile devices.

    Here is my demo form: https://form.jotform.com/61645825562966 

    Feel free to clone it.

    Hope this will help. Let us know if you need further assistance.

  • Profile Image
    d_lane
    Answered on June 13, 2016 at 05:14 PM

    its not working... Typed in transparent, saved the changed and published the code.. this is what i get..

  • Profile Image
    Welvin
    Answered on June 13, 2016 at 06:45 PM

    Please share us the page where the form is currently embedded so we can check and try adjusting the size to our end. Please publish the page if it's not yet published. It seems like you are using Wix or Adobe Muse, the issue could be because of the responsive view of the editor.