# Booking form

<figure><img src="https://3756443945-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FB6MFqxyFEkMr6ffOGnO0%2Fuploads%2F0LkBOr6EfRu9K3C2kloq%2Fimage.png?alt=media&#x26;token=9c3c4c96-511d-4f27-a734-502716d632f3" alt=""><figcaption></figcaption></figure>

When a service is created, its reservation form by default contains the *Name*, *Email* and *Phone* fields, so those are the data required to the customer during the reservation process.

The service booking form is **fully configurable** thanks to a very powerful **form builder**.

<figure><img src="https://3756443945-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FB6MFqxyFEkMr6ffOGnO0%2Fuploads%2FK7VOOcjAj5SapmHozkO1%2Fimage.png?alt=media&#x26;token=4f46eb7a-2a9c-42f5-a85f-bcb915eaecbc" alt=""><figcaption></figcaption></figure>

## How to add a new field

Click on any label to the left of the form builder to add the corresponding form field.

At the moment, those are the available fields:

* Input text
* Checkbox
* Number
* Options (dropdown)
* File upload
* Paragraph (informative text, no input)

## How to add a validation rule to a text field

If you need to add a validation rule to a certain text field, you can do that by expanding the properties of the form field (clicking on the *caret* icon to the right) and then expanding the *Validation* section.

<figure><img src="https://3756443945-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FB6MFqxyFEkMr6ffOGnO0%2Fuploads%2Fong8Dg8wKxjL1LesKR5Y%2Fimage.png?alt=media&#x26;token=ee45eb88-abd3-4ea4-afb7-305e134eda07" alt=""><figcaption><p>Adding a validation rule to a text field</p></figcaption></figure>

A validation rule is a [Regex expression](https://regex101.com/). Under the Regex field you can find some buttons to add the most common Regex validation expressions. If you want to use a custom Regex expression, just write it in the field.

If a regex expression is provided, the booking form will display an error below the field if the data provided by customer doesn't pass the Regex validation.&#x20;

{% hint style="info" %}
Please note that if the field is not required, an **empty value** will always pass the validation.
{% endhint %}

## How to add a conditional rule

You can add a conditional rule to a form field to control the **dynamic behaviour of the field**. For instance you may want a field to be shown only when another field assumes a certain value.

In order to set a conditional rule, the booking form must contain at least one field which is capable of driving conditional behaviour. Those fields are:

* Options (dropdown)
* Checkbox
* Number

So any other field may depend on their values. Inside the **`Conditional`** section of the form field you can set the status of the field (*Visible*, *Hidden*, *Required*, *Not required*), the control field (one of the above) and the value which triggers the status.

<figure><img src="https://3756443945-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FB6MFqxyFEkMr6ffOGnO0%2Fuploads%2FaRCt1d9fa2DqrsVFTxRd%2Fimage.png?alt=media&#x26;token=23872dc5-8b86-48f8-9a6f-a5d9abb0a2f4" alt=""><figcaption><p>Adding a conditional rule to a field</p></figcaption></figure>

## How to hide a field from registered users

To hide a form field from a registered user (read: to made it available only to guest users) just turn on the setting inside the **`Advanced`** section of the form field settings panel.

<figure><img src="https://3756443945-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FB6MFqxyFEkMr6ffOGnO0%2Fuploads%2FD6VI7HDAEgGVhT4hvAJD%2Fimage.png?alt=media&#x26;token=1490997d-99a2-427a-b47d-ac81cc0c3501" alt=""><figcaption><p>Hiding a field from registered users.</p></figcaption></figure>

## How to deactivate a form field

There are certain situations in which you may want to deactivate one or more form fields, for example in case you don't need the built-in phone field, or in case you need to temporary turn off a field.

The active state of a form field is controlled by the switch in the form field header.

{% hint style="info" %}
The **Email** field can't be deactivated.
{% endhint %}

<figure><img src="https://3756443945-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FB6MFqxyFEkMr6ffOGnO0%2Fuploads%2FXJAVRKER7TvKQP8kNjeR%2Fimage.png?alt=media&#x26;token=17519ec9-a804-4f44-950e-6a01968f24ff" alt=""><figcaption><p>Toggle field activation.</p></figcaption></figure>
