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

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.

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.

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

i have a few but this is one to start with

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. 

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

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.

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

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.