How to remove card/long form

Hi, I was wondering if it's possible to embed a single form field on a website. Supposing I want just the field to overlay on a hero image. Otherwise the card or form style boxes look really clunky on top of a hero image. Example attached.

Hi windriverchimes,

Thanks for reaching out to Jotform Support. It's possible to embed a single form field on your website and style it to overlay cleanly on a hero image. To achieve this, you can use the Classic Form layout, and then embed just the field you need using the iFrame embed code. You can add custom CSS to adjust the size, spacing, positioning of the field and remove the background so it blends seamlessly with your design. Let me show you how:

1. First, copy this code:

.form-all {

    background : transparent !important;

}



.form-textbox, .form-submit-button {

    height : 50px;

    width : 300px!important;

    margin-bottom : -30px;

}

2. In Form Builder, click on the Paint Roller icon on the right side of the page to open Form Designer.

3. Now, in the Form Designer menu, click on the Styles tab, scroll down and paste the code into the Inject CSS Code box. That’s it. The code is automatically saved.

Check out my sample form, and you can clone it as well.

Give it a try and let us know how it goes.