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 make the overall size of the form smaller to fit on a webpage?

    Asked by d_lane 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.

     

    size size of form uploads css code
  • Profile Image
    JotForm Support

    Answered by liyam 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

    Answered by d_lane 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
    JotForm Support

    Answered by BJoanna 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

    Answered by d_lane 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
    JotForm Support

    Answered by BJoanna 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

    Answered by d_lane 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
    JotForm Support

    Answered by Welvin 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.