Using the Inline Embed Features in Card Forms

With Jotform Cards, you can make additional adjustments when you embed the form into your website. It’s an offsite feature called Inline Embed, where you can adjust the overall design of the form and set the visibility of the additional form elements, such as the form title, logo, etc.

To use the Inline Embed features, you need to make sure that:

• You build the form in the Card Forms layout.
• Your form is embedded using the script method.

The default embed option in our form builder is the script method. For more information, visit: Adding a Form to a Web Page.

After embedding your card form into a website, you will see a blue Pencil icon at the top-left of your form. Click on it to open the Inline Embed settings.

There you will see various embed options from the Design and Options tabs.

Design Tab

You will find the following options in the Design tab:

• Form Title Options — It’s the form title on the form’s welcome page and at the top of the cards.
• Frame Size — You can make the form smaller or larger by adjusting its frame.
• Form Background Color — This changes the background color of the form regardless if you have a custom image or video background. You can choose from pre-added colors or a new color by clicking the square icon next to the pre-added colors.
• Card Color Options — Change the color of the next and back button of the cards.
• Overview Button Color Options — This changes the button color of the overview page. It’s the button below the form.

You must click the Save button for the changes to take effect.

Options Tab

In the options tab, you can change the visibility of the card form elements and enable the Smart Embed option. You can set the visibility of the following:

• Form Title — The form title is at the top of the cards.
• Logo — The logo is at the top-left of the form.
• Progress Bar — The progress bar is at the bottom of the form showing the number of cards you have in a form.
• Overview Button — The overview button displays the number of questions you have, and clicking it will allow you to navigate through the cards without leaving the current card you’re filling.
• Card Shadow — The shadow around the cards.

If you mark the option Show Only Card and Hide All Other Elements, the other options in the image above will be automatically unticked, and the form will only display the card.

The Smart Embed can make the design of the form match the design of the website where it’s embedded. For more information about the Smart Embed feature, visit: How to Enable the Smart Embed Feature in Jotform Cards.

Do you have suggestions regarding this feature? Please click the Help us to Improve button to send us your feedback. You can also comment below or head to our support page to create a ticket.