Perfecting Checkbox Alignment: Indent Like a Pro

Introduction: Indenting checkboxes is a small design tweak that makes a big difference in form readability. When checkboxes are grouped under a heading or nested within related options, adding an indent creates a clear visual hierarchy. This helps users quickly understand which choices belong together and improves overall user experience by making forms look cleaner and more organized.

Test Version: Laserfiche Forms Professional Version 11.0.2311.50564 and 12.0.2503.10378

Code Provided by: William Bently with Texas A&M University

Setup: Download codes from Bait and Tackle.

Indent Checkbox Formatting - Classic Designer

1. Add a Checkbox field to your form.

2. 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.

3. Insert the Day 4 CSS. Copy and paste the CSS code from Day 4 Bait and Tackle library. This will apply the custom design to your checkbox element.

4. Update the field-specific CSS selectors. Locate any placeholder or example field IDs (e.g., #Field1, #Field10). Replace these with the actual ID of your Checkbox field to ensure the styling is applied correctly.