Clean Lines, Clear Choices: Aligning Labels and Radios

Introduction:  Properly aligning field labels ensures readability, while vertically aligning radio buttons makes choices easier to scan and select. Together, these small adjustments create a smoother, more professional experience for users.

Test Version: Laserfiche Forms Professional Version 11.0.2311.50564 and above

Code Provided by: William Bentley with Texas A&M

Setup: Download codes from Bait and Tackle.

Field Label Alignment and Radio Button Vertical Alignment - Classic Designer

1. Add a Radio Button field to your form.

2. Copy and paste the HTML code from Day 10 into the radio button choices.

Add as many choices as needed and adjust the HTML lines to match your formatting requirements.

3. Add the CSS class .choice to the Radio Button field.

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

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

5. Copy and paste the CSS code from Day 10 Bait and Tackle library.

This applies the Day 10 design styling to your radio button choices.

6. Update the Field IDs as needed.

Replace any placeholder IDs within the CSS with the actual ID of your Radio Button field.