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 Cards 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 with your website’s design. These are subtle changes that will help in making the embedded form look seamless within a page.
IMPORTANT: This is only available with the Cards Layout. If you’re using the Classic Layout, you can switch over to the new layout by following this guide. Afterwards, you can turn this on by following the rest of the guide below..
To enable this feature, go to your FORM BUILDER > navigate to PUBLISH at the top > EMBED on the left > then toggle 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 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 enabling/disabling this option. All you need to do is refresh/reload the page where your form was embedded.
If you’re not seeing the changes taking effect after refreshing/reloading the page, this could be a cache related issue so try clearing your Form Caches to see if that will help. Otherwise, let us know by posting a thread so we can have a closer look.