How to Embed a Card Form as a Floating Feedback Button?

The arrival of Jotform Cards has changed the general look and feel of online forms built with our platform. With the Classic Form layout, forms were usually embedded within a page, displayed as a button or link, or served as a lightbox popup. You may also be familiar with the feedback button which also opens the embedded form as a modal popup.

But what if you wanted to prioritize your site content and allow your users to fill out forms without covering your entire page? Or, what if you don’t want to add too much noise on your page and want something that’s unobtrusive?

Meet the new Floating Feedback Button!

The short screencast above demonstrates how the feedback button will behave on your website. It’s sleek, clean, unobtrusive, and simple. Plus, it only takes up a small section of your page so your site’s content gets all the attention.

To get started…

1. Go to the Form Builder’s Publish tab.
2. Click Embed on the left.
3. Select the Floating Feedback Button option.

From there, you can use it as is and grab the codes at the bottom.

Or, you can step it up a notch and customize it further.

Following the image above, here’s a short description of what each option means:

• Button Title – this will be the actual text of the floating feedback button.
• Select Button Icon – selecting an icon will shrink the button down to just that icon. The Button Title will only show up once the visitor places the mouse over the icon. If you don’t want to display an icon and prefer to show the text, just pick the first icon (Tt).
• Button Background – this will allow you to change the background color of the button.
• Button Text – this will allow you to change the text color.
• Button Position – you can pick any of the four corners of the screen where you want the button to be displayed. In most use cases, the bottom-right corner works pretty well.
• Quick View – a quick preview of how it all turned out.

Finally, at the very bottom (right below the embed codes), you can also utilize the Preview button. This will open a page on a new tab so you can get a feel of how the button will behave on an actual page.