Cards Layout: Option to inject custom CSS

Original title: `Empty space when embedding on a website`

Hi,

I am testing Jotforms and made a sample form and embedded it in a sample page:

https://hnieto00.wixsite.com/sandbox

There is a lot of empty space around the form itself, which produces a scroll bar within the container.

If I upgrade to a paid plan, can that be eliminated? Ideally the container should have just the form and not so much space and no footer etc.

Kind regards

Hello there,
We recommend embedding your form on your website using iFrame. As we can see below, you can either edit heights and enable/disable scrolling

https://www.jotform.com/help/148-getting-the-form-iframe-code/

Hi,

Thanks for the quick reply but I think you missed the point.

1. I have set the height at 200px both in the CSS inline style and also as a height parameter in the iframe tag. However your javascript dynamically sets the height so whatever I set actually doesn't matter.
   
   
2. The iframe tag already has scrolling="no" not again, the javascript dynamically sets it.

But even if the iframe height worked and the scrollbar disappeared, the content inside the frame would be too tall.

That is the main point I am asking.

Is it possible to eliminate the space and the footer INSIDE the iframe?

This is what I am referring to:

Hi,

Please try to embed your form with code design specifically for Wix.

Let us know how it goes.

Thank you.

Hi,

Thanks again for the very quick replies, I truly appreciate them.

I made the iframe a LOT bigger and the scrollbar is gone. However, my question remains:

How could I eliminate the padding above/below the actual form card so that the iframe doesn't need to be so huge?

I see no reason for all that padding and for the life of me, I cannot find where to eliminate it.

https://hnieto00.wixsite.com/sandbox

Just to show what I mean, I have marked the iframe with an outline here, see how much space there is.

And if I make it any smaller, then the scrollbar pops up.

Where this would be the ideal (no unnecessary padding around the card form)

Hi,

Please try to apply this CSS:

div#cid_3 {

max-height: 10rem important;

}

Let us know how it goes.

Thank you.

Thanks that did it!

:)

Question, I tried this on the browser console because I cannot insert CSS in the Form Designer.

I presume it is because I am on the free plan but if I upgrade I can add CSS to the forms?

That's because Cards Layout doesn't support CSS injection. If you wish to inject custom CSS codes, you can convert your form to the Classic Layout.

Related Guide: Cards-or-classic-which-one-should-i-use/

Is there a reason why it can't be done in cards layout?

To force the user to change layout to do it doesn't make sense.

Card forms are intended to be more of a straightforward easy to use form. I understand your frustration though so I'm escalating this ticket as a Feature Request. While we can't give you an ETA, rest assured you'll be apprised here of any news.