How to add your form into a floating bar?

August 26, 2016

This tutorial is part of the - recommended scenarios 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! 😉

How to display tooltips in your online form?

How to display tooltips in your online form?

Aug 26 2016

This tutorial is part of the - recommended scenarios for your marketing and WordPress. With this post, you will understand…

How can I access my contacts?

How can I access my contacts?

Aug 26 2016

All your contacts can be found by accessing the application. We have divided this information into 3 pages: Companies page,…

How to display entities in separate columns?

How to display entities in separate columns?

Aug 26 2016

This tutorial is part of the - recommended scenarios for your marketing and WordPress. With this post, you will understand…

How to add an online form to your WP widgets?

How to add an online form to your WP widgets?

Aug 26 2016

This tutorial is part of the - recommended scenarios for your marketing and WordPress. With this post, you will understand…

Why do I need the Company section?

Why do I need the Company section?

Aug 26 2016

How does this page me? The ,,Company Type'' settings page can be found by accessing owl Contacts / Tweaks / Company and…

What are filter tags?

What are filter tags?

Aug 26 2016

When you want to see contacts from a certain online form it's not very useful to stare at a list of 1000+…

No comments

Leave a Reply

Your email address will not be published. Required fields are marked *

How to add your form into a floating bar?

time to read: 2 min
0