Working with custom fields


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 n/a
select wbk-select Required / not required
textarea wbk-textarea Required / not required

To work properly, you need to include four basic fields: Name, Email, Phone, Comment. Below is the example of 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 from 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:


custom fields


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-notify-email_1 class:wbk-email-custom  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-notify-email_1 class:wbk-email-custom  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.


WEBBA BOOKING | WORDPRESS BOOKING PLUGIN