IMPORTANT: Starting Webba Booking 6.x.x version, Custom Form Fields have to be setup using our new custom form builder (explained how to – below). This version doesn’t support CF7 anymore, so any custom forms will have to be rebuilt using Webba Custom Booking Forms. We are sorry for the inconvenience, however be assured – creating custom booking form is even easier now and you don’t have to use an extra plugin!

(Also, let us know your ideas how to improve the custom booking form builder!)

Webba Booking Form builder allows you to create fully customizable booking forms to collect the exact information you need from your customers. You can add different field types, adjust their behavior, and design the layout to suit your booking process.

Creating a custom booking form

Go to Form Builder, press “Add Form+”. On the left side popup, set up your booking form settings:

1. Add booking form name (for internal use only): Enter a descriptive name for your form, e.g., “Form with all fields”. This name is visible only to administrators.
2. Add and Configure Fields: You can add new fields or edit existing ones to match your booking needs:
   • Click Add custom field to insert a new field.
   • Enter a field label (this appears above the input box on the form).
   • Choose a Field type (see below for full list). Fill the fields for each field type.
   • Full width/Half width toggle – displays two fields side by side on larger screens.
   • Use the Required/Optional toggle to define if the field must be completed.
3. To rearrange fields, use the drag-and-drop handle (⋮⋮ icon) on the left.
4. Click Create form/Save form when done.
5. Link the form to the service. Read here.

Note: Name and Email fields are added to each form by default and cannot be deleted.

Field types and their use cases

Webba Booking provides multiple field types to meet different data collection needs. Here’s explanation of each field and their settings:

1. Text

• Purpose: Collect short, single-line text inputs.
• Examples: Name, City, Company Name.

Settings:

• Placeholder text:
  The text displayed inside the field before the user types anything. It helps guide the user about what kind of information is expected.
  Example: “Enter your name” or “Type city name”.
• Default value:
  The value pre-filled in the field when the form loads. This is useful when a common value is often used or to save time for the customer.
  Example: Pre-filling a city field with “New York” if most bookings are from there.

2. Email

• Purpose: Collect and validate email addresses.
• Examples: Customer email, alternative contact email.

Settings:

• Placeholder text:
  The hint text displayed inside the field before the user types anything. Helps indicate the expected format or purpose of the field.
  Example: “Enter your email address”.
• Default value:
  A pre-filled email address that appears when the form loads. Useful when a common or previously known email is relevant to the booking.
  Example: Pre-filling with “customer@example.com” for repeat clients.

3. Textarea

• Purpose: Collect longer text input over multiple lines.
• Examples: Additional comments, special requirements, notes.

Settings:

• Default value:
  A pre-filled text that appears in the textarea when the form loads. This can provide an example response or frequently used text.
  Example: “Please describe your requirements here…”.

4. Number

• Purpose: Collect numeric values only.
• Examples: Number of guests, membership ID, order quantity.

Settings:

• Placeholder text:
  Displays a hint inside the field before the user enters data. Helps clarify what type of number is expected.
  Example: “Enter number of guests” or “Enter age”.
• Default value:
  Pre-fills the field with a number when the form loads. Useful if there is a common default (e.g., 1 guest).
  Example: Default value set to “1” for bookings that typically start with one participant.

5. Phone

• Purpose: Collect phone numbers with proper formatting.
• Examples: Mobile phone, office phone.

Settings:

• Placeholder text:
  Shows example text inside the field before the user enters any value. Helps indicate the expected phone number format.
  Example: “Enter phone number” or “+1 555 123 4567”.
• Default value:
  Pre-fills the field with a phone number when the form loads. Useful for country codes or returning customers.
  Example: Default value set to France country code“+33”.

6. Description

• Purpose: Display text or instructions; does not collect user data.
• Examples: “Please arrive 10 minutes early for your appointment.”

Settings:

• Default value:
  The text displayed in the form. This acts as the message content.
  Example: “Appointments are non-refundable after 24 hours.”

7. Dropdown

• Purpose: Present a list of predefined options; user selects one.
• Examples: Choose service type, select country.

Settings:

• Placeholder text:
  Text displayed before a selection is made, guiding the user.
  Example: “Select a service type”.
• Options:
  Add predefined selectable items by clicking Add option. Each option can represent one choice for the user.
  Example options: “Haircut”, “Massage”, “Facial”.

8. Radio

• Purpose: Display multiple predefined options as radio buttons; user selects one.
• Examples: Choose gender, pick preferred location.

Settings:

• Placeholder text:
  Optional hint text displayed before selection.
• Options:
  Add selectable radio button choices using Add option.
  Example options: “Male”, “Female”, “Other”.

9. Checkbox

• Purpose: Allow one or multiple selections or simple agreement confirmation.
• Examples: Accept terms & conditions, select add-ons.

Settings:

• Text next to checkbox:
  The text label that appears next to the checkbox.
  Example: “I agree to the terms and conditions”.

10. File

• Examples: Attach ID, upload resumes, submit design files.
• Purpose: Allow customers to upload files.

Settings:

• Placeholder text:
  Text displayed to indicate what file should be uploaded.
  Example: “Upload your resume”.

How to link the form to a service?

After creating a custom form you need to assign it to a every service you would like this form to be used. You can create different booking forms for different services or use the same one for all your services.

To add a form with custom fields to a service, follow these steps:

1. Navigate to the Service page.
2. Either create a new service or edit an existing one.
3. In the Service popup window “General” tab look for the “Form” field.
4. Click the dropdown menu in the “Form” field.
5. Select the desired booking form from the available options.
6. Save your changes.

Now, the selected form with custom fields is linked to the service, allowing customers to use this form when making bookings for this particular service.