Floating Inputs - Setup Guide

Overview

Floating inputs provide a modern UI pattern where input labels animate from placeholder position to above the field when users begin typing. This creates a cleaner interface while maintaining field context throughout form completion.

How to Enable Floating Inputs

Step 1: Navigate to Style Settings

1. Go to https://admin.heavyset.tech/settings/appointment-page/style/edit
2. Select your organization from the dropdown if not already selected
3. Choose the appointment form style you want to edit

Step 2: Enable the Feature

1. Scroll down to the checkbox options section
2. Locate the "Floating Inputs" checkbox
3. Check the box to enable floating input labels
4. Click Submit to save your changes

Step 3: Preview Your Changes

1. Use the Preview button at the bottom of the form
2. Test the form to see floating labels in action
3. Enter text in any input field to see the label animate to the top

What Gets Updated

When enabled, floating inputs apply to all text entry fields:

• Email input
• Phone input
• Name input
• Address input
• Zip/Postal code input
• Home year input
• Member ID input (if enabled)

Customizing Floating Inputs with CSS

Overview

You can customize the appearance of floating inputs by adding CSS to your appointment form style. All overrides should be prefixed with #root to ensure they apply correctly.

Common Customizations

Change Label Colors

Default label color:

#root .floating-label {
  color: #6b7280;
}

Focused/active label color:

#root .floating-input:focus + .floating-label,
#root .floating-input:not(:placeholder-shown) + .floating-label {
  color: #2563eb;
}

Adjust Border Styling

Change border color:

#root .floating-input {
  border: 1px solid #d1d5db;
}

#root .floating-input:focus {
  border-color: #10b981;
}

Increase border thickness:

#root .floating-input {
  border: 2px solid #ccc;
}

Adjust border radius:

#root .floating-input {
  border-radius: 8px;
}

Modify Font Sizes

Input text size:

#root .floating-input {
  font-size: 18px;
}

Floating label size:

#root .floating-input:focus + .floating-label,
#root .floating-input:not(:placeholder-shown) + .floating-label {
  font-size: 14px;
}

Adjust Spacing

Input padding:

#root .floating-input {
  padding: 18px 16px;
}

Field spacing:

#root .floating-field {
  margin-bottom: 20px;
}

Change Animation Speed

Slower animation:

#root .floating-label {
  transition: 0.4s ease all;
}

Faster animation:

#root .floating-label {
  transition: 0.1s ease all;
}

Background Colors

Label background:

#root .floating-label {
  background: #f9fafb;
}

Input background:

#root .floating-input {
  background-color: #ffffff;
}

Applying Your CSS

1. Navigate to your appointment form style edit page
2. Locate the Form Colors & Style section
3. Click the style configuration button
4. Add your custom CSS snippets
5. Save and preview your changes

Important Notes

Floating inputs are always compact - they automatically use a compact layout style with labels that float above the input field when typing begins.

Not compatible with:

• ❌ Input Icons - icons will not display with floating inputs
• ❌ Horizontal Layout - floating inputs use vertical layout only

Tips:

• Test your form on mobile devices after enabling
• Floating inputs provide a clean, space-efficient design perfect for mobile experiences
• Use the preview feature to ensure the styling matches your brand

Compatibility

Floating inputs work with these form features:

• ✅ Single Step Form
• ✅ All CRM integrations
• ✅ Address Auto-Complete
• ✅ Product Selection

Troubleshooting

Labels not appearing correctly?

• Ensure you've saved your changes after checking the box
• Clear your browser cache and refresh the preview

Want to disable?

• Simply uncheck the "Floating Inputs" box and submit

---

If you’re not yet using HeavySet Tech, you can schedule a live demo here to see how our platform can benefit your business.