When embedding forms on a website, one of the priorities has always been the look and feel of the form. Any website owner would prefer to build a form that matches their website’s design. Although the Card Form layout doesn’t support CSS injection, there’s a cool feature that you can enable to compensate for this.
It’s called Smart Embed – in a nutshell, the form will automatically try to adapt to your website’s design. These are subtle changes that will help in making the embedded form look seamless within a page.
This is only available on the Card Form layout. If you’re using the Classic Form layout, you can switch over to the new layout by following this guide.
Enabling Smart Embed
- Go to the Form Builder’s Publish tab.
- Click Embed on the left.
- Set the Smart Embed option to On.
So, what are the things that will change once this option is enabled?
- Button colors, header fonts, and the buttons’ border radius will adapt with the styles of the related website.
- Form background color will become transparent.
- If there is a page background image on the form, it remains on embed as well.
- If the form header exists somewhere on your website, the header will be removed from the embedded form automatically.
- Cards that are taller than usual, such as the address or payment fields, will automatically hide the header and progress bar.
- For Starter (Free) Plan users, the Jotform branding will only be shown on the Welcome Page and Thank You Page but not on the cards themselves.
It’s worth noting that there is no need to re-embed your codes after toggling this option. All you need to do is refresh or reload the page where your form was embedded.
If you’re not seeing the changes taking effect after refreshing or reloading the page, this could be a cache-related issue so try clearing your form cache to see if that will help. Otherwise, let us know by posting a thread so we can have a closer look.
Send Comment:
Comment: