How To Customize Booking Forms In Webflow

FlowBookings lets you customize your booking forms in Webflow with complete design freedom while maintaining full functionality. Our attribute-based system allows you to create any layout or design you envision, as long as the required form elements and their attributes are preserved.

When creating a custom form layout, we recommend starting with a template from our Webflow app. This ensures you have all necessary elements and their required scripts automatically added to your page. Different form configurations (such as radio buttons, dropdowns, or single service forms) require specific scripts and configurations - using a template ensures these are properly included while giving you complete freedom to customize the design.

Getting Started with Form Customization

Template Layouts

To help you get started quickly, FlowBookings provides template layouts through our Form Builder:

• Horizontal Layout: Fields arranged side-by-side

• Vertical Layout: Fields stacked in a single column

These templates serve as starting points - you can modify them freely to create your own custom layouts while maintaining the required form functionality.

Service Display Options

The Form Builder offers multiple ways to display services:

1. Dropdown Select: Traditional dropdown menu

2. Image Buttons: Visual service selection with images and labels

3. Category-based: Optional parent category dropdown for organized service selection

4. Single Service: Dedicated form for one specific service

You can further customize these elements' appearance and arrangement to match your design needs.

Required Form Elements and Attributes

All form elements use attributes for identification and functionality. As long as you maintain these attributes, you have complete freedom to style and arrange the elements. Here's what you need to preserve:

Basic Information Fields

These fields collect customer information and can be fully customized in terms of style:

Field	Webflow Element Type	Attribute Name	Attribute Value
Form Container	Form	fb	book-form
First Name	Text Input	fb	firstName
Last Name	Text Input	fb	lastName
Email	Email Input	fb	email
Phone	Phone Input	fb	phone
Additional Message	Text Input	fb	additional-message
Submit Button	Button	fb	book-button
Custom Fields	Webflow Input	-	-

The Custom Fields above are any regular Webflow form fields that you want to add to your form. The data from all of these fields will group and show up inside your bookings on FlowBookings.

Service Selection Fields

These fields handle service selection and can be displayed in different ways:

Field	Webflow Element Type	Attribute Name	Attribute Value
Category Dropdown / Select Category	Finsweet Dropdown	fb	service-categories
Service Dropdown / Select Service	Finsweet Dropdown/Services Grid	fb	services
Service Radio Button Wrapper	Div Block	fb	service-radio
Service Radio Label	Text/ Label	fb	service-radio-name
Service Radio Image	Image	fb	service-radio-image

Booking Time Fields

These fields manage date and time selection:

Field	Webflow Element Type	Attribute Name	Attribute Value
Date Picker	Plain Input	fb	datepicker
Timezone Display	Text Block	fb	timezone
Timeslot Grid	Div	fb	timeSlots
Timeslot Item	Radio Button	fb-custom-element	radio

There’s only one field that’s not customizable and that is the Date Picker.

It is a default JQuery Datepicker and uses custom CSS in the embed code for it. This makes this field non-customizable. However you can still customize the datepicker input field, as a normal input, and you can also change the icon image to your liking.

The datepicker needs these two additional attributes as well for a better UX: data-toggle = "datepicker" autocomplete = "off"

Summary Fields

These fields display booking summary information based on the selected service:

Field	Webflow Element Type	Attribute Name	Attribute Value
Service Name	Text Block	fb	summary-service
Selected Date	Text Block	fb	summary-date
Price Block Wrapper	Div Block	fb	price-container
Price Display	Text Block	fb	summary-price
Duration Display	Text Block	fb	summary-duration

Customization Guidelines

What You Can Customize

1. Styling: You can modify any CSS properties

2. Layout: Rearrange fields within their respective sections

3. Classes: Add custom classes for styling

4. Spacing: Adjust margins and padding

5. Typography: Change fonts and text styles

6. Colours: Modify all colour properties

7. Animations: Add hover states and transitions

What You Cannot Change

1. Do not remove the required attributes that are mentioned above

2. Do not delete any default fields

3. Do not modify attribute values

4. Do not change input types

Form Messages

To customize form messages, use these classes for the form message wrappers in Webflow:

• Success Message: fb_form_message-success

• Error Message: fb_form_message-error

Best Practices for Customization

1. Keep Required Attributes: Always maintain the fb attributes on elements

2. Test Functionality: After styling changes, verify form submission works

3. Mobile Responsiveness: Ensure your customizations work on all devices

4. Maintain Field Order: While you can adjust the layout, keep logical field progression

Troubleshooting Common Issues

If your form stops working after customization, check:

1. All required attributes are present with proper values

2. Field types haven't been changed

3. No default fields were removed

If you still face problems then check the console and reach out to our team for support here: https://www.flowbookings.io/contact