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

November 26, 2021

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.

Was this guide helpful?
Contact Support:

Our customer support team is available 24/7 and our average response time is between one to two hours.
Our team can be contacted via:

Support Forum: https://www.jotform.com/answers/

Contact Jotform Support: https://www.jotform.com/contact/

Send Comment:

Jotform Avatar
This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.

Comment:

Podo CommentBe the first to comment.