# 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.

{% hint style="warning" %}
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.
{% endhint %}

### 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        | -              | -                  |

{% hint style="info" %}
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.
{% endhint %}

#### 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           |

{% hint style="danger" %}
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"`
{% endhint %}

#### 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: <mark style="color:green;">`fb_form_message-success`</mark>
* Error Message: <mark style="color:red;">`fb_form_message-error`</mark>

### 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>


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.flowbookings.io/knowledgebase/product-tour/webflow-app-overview/how-to-customize-booking-forms-in-webflow.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.