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
Simple Forms - Cloneables 1, 2, 3, 5, 6, 7, 8, 9, 10, 11, 12, 14, 15
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.
Your Form element needs to have an ID of book-form
The submit button needs an ID of bookBtn
The success message needs a class of fb_form_message-success
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:
Basic Fields (No Configuration Required) - Basic Info, custom fields
Customizable Fields (Requires Configuration) - Service Select / Service RadioButtons, Timeslot Select
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.
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:
Service Select
Service RadioButtons
Timeslot Select
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:
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.
Last updated