Customizing Cloneable Forms

FlowBookings lets you customize your booking forms in Webflow. But there are a few configurations you need to know about before you start customizing forms.

There are 2 different types of cloneable and 5 different types of fields based on the level of customization available.

Types of forms

1. Simple Forms - Cloneables 1, 2, 3, 5, 6, 7, 8, 9, 10, 11, 12, 14, 15

2. Forms with RadioButtons and images for services - Cloneables 4 & 13

General Setup:

This is the general configuration necessary for your cloneable forms to work properly.

1. Your Form element needs to have an ID of book-form

2. The submit button needs an ID of bookBtn

3. The success message needs a class of fb_form_message-success

4. The error message needs a class of fb_form_message-error

Field Customization Levels

There are 3 levels of customization available for the fields, and based on that we’ve categorized the fields below:

1. Basic Fields (No Configuration Required) - Basic Info, custom fields

2. Customizable Fields (Requires Configuration) - Service Select / Service RadioButtons, Timeslot Select

3. Non-Customizable Fields - Datepicker

Let’s learn more about each type of field and how you can customize them and the different parameters that you can/cannot change.

Basic Fields:

These include (First Name, Last Name, Email, Phone Number, Additional Message, etc).

They all have the same class name fbx_form-input (x being the cloneable number) and you can customize these fields as you customize any typical Webflow form field.

You can even rename the class they’re using but we recommend using the provided class name for better clarity. The only thing you can not change for these fields is their Field Name.

Here’s a table showing the specific Field Names that every field needs to have in order for the booking form to work.

Field	HTML Field Name	Required Field
First Name	firstName
Last Name	lastName
Email	email
Phone Number	phoneNumber
Additional Message	additionalMessage
Custom Fields	not required

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 in your bookings on FlowBookings.

Customizable Fields (Requires Configuration):

These fields are customizable but they require proper configuration for them to work.

This includes the following fields:

1. Service Select

2. Service RadioButtons

3. Timeslot Select

4. Timezone

All of these fields work using CSS IDs and not field names like the other fields.

Here's a detailed breakdown of these fields:

Service Select:

This field is built using Finsweet’s Custom Form Select in order to have a custom dropdown. You can read all about it here.

You need to add the ID services to the dropdown input element inside this field to make it work. It also needs a single default choice that you can rename as per your liking.

Customizing its design is completely done as Finsweet has instructed so no changes there.

Timezone:

The Timezone field has a background and text.

The background is part of its design and can be customized without any configuration.

The text requires an ID timezone. It can be customized normally as you would customize any text with a background.

Timeslot Select:

The Timeslot Select has 2 items: the grid and the radio button items.

You need to give the grid an ID timeSlots.

The radio button items require an attribute fb-custom-element='radio’ to the radio button inside the item.

Besides that, you can customize the radio buttons and grids as per your design needs.

All of the required IDs for Customizable Fields are summarized below in a table:

Field	ID	Attributes ( if any)	Required Field
Service Select Dropdown (form input)	services
Timezone Text	timezone
Timeslot Grid	timeSlots
Timeslot Radio button input		fb-custom-element='radio’

Non-Customizable Fields:

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

It is a default JQuery Datepicker and is using 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 input field requires an ID of datepicker.