I was looking for a tutorial on creating a floating button that would “stick” to the lower right of a browser window. When this button is selected, a popup (lightbox) would open to show a Contact form. I’m using Gravity Forms.
With a little help from Jun at BB, I got through it.
For this functionality, you’ll need to have the Beaver Themer plugin.
First, create a simple page that will not be published. It will include some text describing the form and the shortcode for the form itself. You’ll need this unless you’re willing to just code it in straight HTML during a later step.
Create a new Themer Layout. Give it a Title, set the Type to Themer Layout and set the Layout to Part.
Add the Themer Layout.
For the Themer Layout Settings, I set the Position to be Page Close since I figured it would be close to where I wanted the button to be. For the Location, I just set it to Entire Site, but you can pick and choose here as you can with any other Themer Layout. You can also add an Exclusion Rule if you’d like. (Why have a floating “Contact Us” button on the Contact Us page that already has the form?)
Publish the Themer Layout
Launch Beaver Builder.
You’ll see the editable area at the bottom of the page. Drag and drop a button into the area.
For the button. you’ll need to change some settings.
Set the Click Action to be Lightbox
At this point, you’ll be able to add HTML including text and the shortcode for the form. Just copy and paste from the simple page you created before. Of course, you can also just hard code the HTML, but I did everything on the page, saved the page as a draft and copy/pasted.
Position and style the button as you wish. I placed it Right Justified, but I’m going to tweak it with CSS below.
Under the Advanced tab - set the ID to contactbutton
Do not add the # ID prior to the characters.
Save the Part you’ve created and Publish it.
Go into the Customizer > Custom CSS section and add the following:
#contactbutton {
position: fixed;
z-index: 100;
bottom: -4px;
right: 10px;
}
I needed to add the z-index since some of the page contents was overlaying the button as you scrolled down the page.
Obviously, you can change things up a bit, including having the button just open another page on the site.
The lightbox opens in the center of the page. I have not asked or played with styling the lightbox that opens up. There might be some customization you can do here as well.