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

Last Update: August 28, 2018

The arrival of JotForm Cards has changed the general look and feel of online forms built with our platform. With the Classic Layout, forms were usually embedded within a page, linked as a button/link, or 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, head over to your FORM BUILDER > click PUBLISH at the top > EMBED on the left > then click 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:

1. BUTTON TITLE - This will be the actual text of the floating feedback button.

2. 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].

3. BUTTON BACKGROUND - This will allow you to change the background color of the button.

4. BUTTON TEXT - This will allow you to change the text color.

5. 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.

6. 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.