Enjoy priority support and immediate help for your WordPress sites!

How to add your form into a floating bar?

This tutorial is part of the owl Contacts - recommended features for your marketing and WordPress. With this post, you will understand why and how to add your form into a floating bar.

This is a floating bar, which contains a few fields from the owl CONTACTS form. It is meant to show above your main menu (in the website's header). Click on image for a bigger version.

myfloatingbar

Advantages of floating bars:

  • They allow viewing their content while also viewing the entire screen
  • Highly visible in the parent window, can be hidden, dismissed or always visible.
  • Users tend to interact more with simple or easy forms, with lesser fields.

Disadvantages of floating bars:

  • Restrict information to a one-line display (although a multi-line floating bar could be used).
  • They take space away from the screen for their own display.
  • Their location at the edge of the display may make them less noticeable in collapsed view.
  • Annoying on small mobile screens.

WHY should you use a form in a floating bar:

  • To capture leads
  • To convert with a nice CTA
  • To receive users contact details
  • To convince users to sign-up or subscribe
  • To offer special/hidden/promotional offers, discounts

HOW TO add a form in a floating bar:

  1. install a WordPress floating bar plugin. We recommend one of these: WPFront Notification Bar, Sticky Notification Bar For WordPress, Top Bar.
  2. configure the floating bar to display form above menu, always visible - even when you scroll down the page.
  3. generate your form using a few fields and the following settings:
    • Display form fields: HORIZONTAL
    • Form segment name: HIDE
    • Input field name: HIDE
    • WordPress column code: HIDE
    • Company info tab: HIDE
    • Brand info tab: HIDE
  4. Add your form into the floating bar, SAVE, REFRESH and done!

Example of settings for a few fields from Customer segment. Click on image for a bigger version.

foating bar

 

Example for TOP floating bar. Click on image for a bigger version.
TOPfloatingbar

Example for BOTTOM floating bar. Click on image for a bigger version.
BOTTOMfloatingbar

Useful TIP: you can use shortcodes to add your online form if the floating bar is acting up! 馃槈

Related Posts

Leave a comment