Menu

Menu

Using custom fields in the booking form

Using custom fields in the booking form


Since version 1.2, Webba Booking is integrated with Contact Form 7. You can create forms with an unlimited amount of custom fields in the CF7 form editor and use created forms as Webba Booking form. To create a form with custom fields, please do the next steps:

Step 1.

Create a new form in the CF7 form editor (CF7 documentation is available at http://contactform7.com/docs/). The current version of Webba Booking plugin supports the following CF7 input fields:

CF7 Field type Webba Booking class Validation
text wbk-text Required/not required
checkbox wbk-checkbox-custom Required/not required
select wbk-select Required/not required
textarea wbk-textarea Required/not required
file wbk-file Required/not required

To work correctly, you need to include four basic fields: Name, Email, Phone, Comment. Below is an example of a basic contact form that will work with Webba Booking:

<p><label for="wbk-name">Your First Name (required)</label>[text* wbk-name class:wbk-text id:wbk-name]</p>
<p><label for="wbk-email">Your Email (required)</label>[text* wbk-email class:wbk-text id:wbk-email]</p>
<p><label for="wbk-phone">Your phone (required)</label>[text* wbk-phone class:wbk-text  id:wbk-phone]</p>
<p><label for="wbk-comment">Your comment</label>[textarea wbk-comment class:wbk-textarea id:wbk-comment]</p>

Now let’s add a custom field with the “text” type. The code of this custom field type is:

<p><label for="custom-field1">Custom field 1</label>[text* custom-field1 class:wbk-text  id:custom-field1] </p>

You can add this code to your custom form directly or use CF7 form editor buttons to insert the fields. Adding class is necessary, if you don’t specify the class, Webba Booking won’t process this field.

To add the select box to the form, insert the next code:

<p><label for="custom-field2">Custom field 2</label>[select custom-field2 id:custom-field2 class:wbk-select "option 1" "option 2" "option 3"]</p>

For the second custom field, we used class wbk-select.

As the third custom field, let’s add the checkbox field:

<p><label for="custom-field3">Custom field 3</label>[checkbox custom-field3 class:wbk-checkbox-custom id:custom-field3 "option1" "option2" ]</p>

The final code of our booking form is:

<p><label for="wbk-name">Your First Name (required)</label>[text* wbk-name class:wbk-text id:wbk-name]</p>
<p><label for="wbk-email">Your Email (required)</label>[text* wbk-email class:wbk-text id:wbk-email]</p>
<p><label for="wbk-phone">Your phone (required)</label>[text* wbk-phone class:wbk-text  id:wbk-phone]</p>
<p><label for="wbk-comment">Your comment</label>[textarea wbk-comment class:wbk-textarea id:wbk-comment]</p>
<p><label for="custom-field1">Custom field 1</label>[text* custom-field1 class:wbk-text  id:custom-field1]</p>
<p><label for="custom-field2">Custom field 2</label>[select custom-field2 id:custom-field2 class:wbk-select "option 1" "option 2" "option 3"]</p>
<p><label for="custom-field3">Custom field 3</label>[checkbox custom-field3 class:wbk-checkbox-custom id:custom-field3 "option1" "option2" ]</p>

All examples above uses labels, it’s important to use correctly “for” argument for the custom fields, because label texts are used as a data description for the custom fields.

If you need to add acceptance field insert the following code:

<p>[acceptance wbk-acceptance]Check the acceptance field <span class="wbk-acceptance-error" style="display:none;" >acceptance not checked</span></p>

Step 2.

Go to the Services page:



Open the service for edit or create new service and select the form:


Attachment in custom forms


In order to work with attachment, you need to set the two following options you will find in Mode tab of Settings page.

Allow using attachments (enable or disable attachments).

Attachments file types (set the file type of file input control).

Example: file_extension. A file extension starting with the STOP character, e.g: .gif, .jpg, .png, .doc
Example: audio/* all sound files are accepted.
Example: video/* all video files are accepted.
Example: image/* all image files are accepted.
Example: media_type. A valid media type.
Example of file field in the custom form:
<p><label for="wbk-file">Your attachment</label>[file wbk-file-1 class:wbk-file id:wbk-file-1]</p>

Important: class: wbk-file is required, id is required.

Once the attachments are enabled, files, uploaded by customers will be attached to the notification sent to the administrator.

Service parameter in url


Allow using the service id in URL (Dashboard > Webba Booking > Settings > Mode)

This option handles using service id in URL. If this last enabled, you can add service id to the URL of booking page. for example, example.com/booking?service=1 will show booking form for service 1 (works same as service in shortcode).

Customer group fields


Since version 2.2.0, Webba Booking supports sending emails not only to the administrator or to the client who is booking, but also to other people provided in custom fields. The feature can be useful if an appointment is for two or more people. To send the email notification to another person you need to add two custom fields for name and email and mark them as used for sending notification by setting the id of fields to:
wbk-secondary-name_x, wbk-secondary-email_x, where x is any digit unique to this customer fields.

The code below demonstrates the use of custom fields for providing name/ email for two additional clients and one primary client who is booking:

<p><label for="wbk-name">Your First Name (required)</label>[text* wbk-name class:wbk-text id:wbk-name]</p>
<p><label for="wbk-email">Your Email (required)</label>[text* wbk-email class:wbk-text id:wbk-email]</p>
<p><label for="wbk-phone">Your phone (required)</label>[text* wbk-phone class:wbk-text  id:wbk-phone]</p>
<p><label for="wbk-secondary-name_1">Partner name</label>[text* custom-field1 class:wbk-notify-name_1 class:wbk-text  id:wbk-secondary-name_1]</p>
<p><label for="wbk-secondary-email_1">Partner email</label>[text* custom-field2 class:wbk-text id:wbk-secondary-email_1]</p>
<p><label for="wbk-secondary-name_2">Partner name 2</label>[text* custom-field3 class:wbk-notify-name_1 class:wbk-text  id:wbk-secondary-name_2]</p>
<p><label for="wbk-secondary-email_2">Partner email 2</label>[text* custom-field4 class:wbk-text id:wbk-secondary-email_2]</p>

Contact Form 7 Dynamic Text Extension


Since version 3.0.4 Webba Booking supports Contact Form 7 Dynamic Text Extension.

For example, to use dynamic fields in your forms, please, use the shortcode:

“CF7_POST key=’customer_name'”

After that, if you set the parameter to your URL of booking form like

your_booking_page.html?customer_name=Eric

customer name field will be auto-filled.