Beyond Default Alerts: How to Use SweetAlert2 for Stylish Popups

Introduction:  Default browser alerts can feel outdated and disrupt the user experience. SweetAlert2 offers a sleek, customizable alternative that makes popups visually appealing and interactive. With just a few lines of JavaScript, you can replace plain alerts with modern, responsive dialogs that match your form’s design.

Test Version: Laserfiche Forms Professional Version 11.0.2311.50564 and above

Code Provided by: Brian Minter with City of Arlington

Setup: Download codes from Bait and Tackle.

Pop-up Alert - Classic Designer

1. Add a Table to your form and assign the CSS Class .demoTable.

2. Add a Single Line Field and a Checkbox Field. Assign the CSS Class .checkMe to the Checkbox Field.

3. Download the SweetAlert2 JavaScript file and place it in your js directory inside Laserfiche Forms:

Program Files>Laserfiche>Laserfiche Forms>js

4. Open the form’s CSS and JavaScript panel.

In Laserfiche Forms Classic Designer, select CSS and JavaScript at the top of the designer interface to access the styling editor.

5. Copy and paste the JavaScript code from Day 14 Bait and Tackle library.