How to display Joomla form in lightbox?




Balbooa Joomla Forms Builder allows displaying forms in the lightbox. The lightbox has different triggers, a user-friendly position selector, 10 types of animation, and other settings. In this tutorial, we will show you how to open Joomla forms in the lightbox with Balbooa Joomla Forms Builder.




Enabling lightbox


  1. Open Design Settings by clicking on the icon Design.
  2. From the dropdown Layout select Lightbox.




Lightbox settings


Lightbox settings can be opened by clicking on the icon Settings.


General

Trigger

  • Click - starts displaying after mouse click on
  • or link
  • Time Delay - starts displaying after the specific time delay in milliseconds
  • Scrolling - starts displaying after the user scrolls the specific percentage of the page
  • Bottom of Page - starts displaying when the user scrolls to the end of the page
  • Exit Intent - starts displaying after the mouse cursor moving out of the browser page

Show Once Per Session

Display the lightbox once per session. The number of days in session can be configured using an additional option Session Duration, Days.

Embed Code

The CSS class for inserting to the link or button to open a lightbox.


Display

Position

Sets the position of the lightbox on the screen.

Animation

Adds lightbox animation:


  • Fade In
  • Fall In
  • Flip Horizontal
  • Flip Vertical
  • Scale In
  • Slide In Bottom
  • Slide In Left
  • Slide In Right
  • Slide In Top
  • Spinner


Advanced

Class Suffix

Adds a CSS class for the item.

Lightbox background color


To set a lightbox backdrop color click on the icon Color Picker.




Opening a lightbox with a link or button


  1. Select the lightbox trigger Click.
  2. Copy lightbox Embed Code.
  3. Paste embed code value instead of URL or Class Suffix in the link or button.



Example:

<a href=”#ba-click-lightbox-form-id”></a>
<a class=”ba-click-lightbox-form-id” href=”#”></a>

Related articles