How To Create Booking Forms In Webflow Using FlowBookings
Last updated
Was this helpful?
Last updated
Was this helpful?
FlowBookings lets you create booking forms in Webflow in just a few clicks using our official Webflow app.
With this app, you can use our form builder wizard to create booking forms that are built using native Webflow form elements. This allows you to customize the forms with full design freedom.
Here are the instructions on how to create booking forms in Webflow using FlowBookings:
Open the FlowBookings app on your Webflow site (learn how to install the FlowBookings Webflow app).
If you're not logged in, use the FlowBookings account credentials to log in to the app.
Once logged in, you can access the form builder where you can select the type of booking form to insert to the page.
Then, click on the 'Copy Cloneable & Insert Script' button. This will automatically insert the FlowBookings form script to the page and the form cloneable will be copied to your clipboard. You'll see a success notification message once the clonable is copied and the script is inserted.
Lastly, insert the cloneable you just copied to your page by clicking Ctrl+V (Cmd+V). Your form will be added to the page and then you can customize its design according to your needs.
Note: Do not delete any classes, IDs, or attributes assigned to the fields in the cloneable forms. Also, do not delete any existing fields that are included by default in the cloneable form. These fields, classes, IDs, and attributes are necessary for the form to work correctly in Webflow.
Here are the options that you can choose when creating your booking form using FlowBookings:
Display Single Service: This option lets you create a booking form for an individual service you've created in FlowBookings. When enabled, you can choose the service from the dropdown to display on the booking form.
Display Category: This option displays a category dropdown on the booking form. It's useful if you offer a wide range of services under different categories and want users to choose a category before selecting the service.
Service Input Type: You can choose between a Dropdown and an Image Button for the service input.
Form Layout: You can choose between a Horizontal and a Vertical layout for the form.
You can learn more about customizing cloneable forms in the article here.
