Booking Calendar Contact Form

Frequently Asked Questions



Please read the instructions on this Google page:

To get the iCal feed URL right click the "iCal" link on the calendar list and click "Copy Link Address" or "Copy Link Location" (depending of the browser you are using).

Note: This will automatically export the bookings stored in the plugin to the Google Calendar. The inverse process (import the items on Google Calendar into the plugin) isn't currently available.

Into the form editor click a field and into its settings there is one field named "Add Css Layout Keywords". Into that field you can put the name of a CSS class that will be applied to the field.

There are some pre-defined CSS classes to use align two, three or four fields into the same line. The CSS classes are named:

  • column2
  • column3
  • column4

For example if you want to put two fields into the same line then specify for both fields the class name "column2".

In addition to the possibility of editing the email contents you can use the following tags (pro version):

  • <%itemnumber%>: Request ID.
  • <%startdate%>: Selected start date for the appointment.
  • <%enddate%>: Selected end date for the appointment.
  • <%coupon%>: Coupon code entered, if any.
  • <%discount%>: Discount applied, if any.
  • <%service%>: Selected service, if any.
  • <%totalcost%>: Total cost.
  • <%email%>, <%subject%>, <%message%>, <%fieldname1%>, <%fieldname2%>, ...: Data entered on each field.
How can I apply CSS styles to the form fields?

To modify the whole styles of the form fields and labels, edit the styles file "wp-content/plugins/booking-calendar-contact-form/css/stylepublic.css" and add these rules at the end of that file:

  • Change all the labels:
        #fbuilder, #fbuilder label, #fbuilder span {
            color: #00f;
  • Change all the input, textarea and select fields:
        #fbuilder input[type=text], #fbuilder textarea, #fbuilder select {
            border: 2px solid #00f;
  • Change the submit button:
        #fbuilder .pbSubmit {
            color: #00f;
            font-weight: bold;
  • Change the "Section Break" field:
        #fbuilder .section_breaks label { font-size:18px; }
        #fbuilder .section_breaks span { font-size:14px; }
  • Change the "Instructions Text" field:
        #fbuilder .comment_area label { font-size:18px; }
        #fbuilder .comment_area span { font-size:14px; }
  • Change the "next" and "previous" buttons:
        #fbuilder .pbNext,#fbuilder .pbPrevious {
            color: #00f;
            font-weight: bold;
  • Change the "form title" and "header description":
        #fbuilder .fform h1 {font-size:32px;}
        #fbuilder .fform span {font-size:16px;}

On the other hand to modify only a specific field into the form:

  • Step #1: Into the form editor, click a field to edit its details, there is a setting there named "Add CSS Layout Keywords".

  • Step #2: You can add a class name into that field, so the style specified into the CSS class will be applied to that field.

  • Step #3 (Note): Don't add style rules directly there but the the name of a CSS class.

  • Step #4: You can place the CSS class either into the CSS file of your template or into the file "wp-content/plugins/booking-calendar-contact-form/css/stylepublic.css" located into the plugin's folder.

  • Examples: Add a class named "specialclass" into the setting "Add CSS Layout Keywords" and add one of these CSS rules into the mentioned file:

    • Change the field label:
          .specialclass label {
             color: #00f;
    • Change the input, textarea or select of the field:
          .specialclass input[type=text],.specialclass textarea,.specialclass select {
              border: 2px solid #00f;

If the form doesn't appear in the public website (in some cases only the captcha appear) then change the script load method to direct, this is the solution in most cases.

That can be changed in the "troubleshoot area" located below the list of calendars/items.

Into the form builder in the administration area, click the "Form Settings" tab. That area is for editing the form title and header text.

It can be used also for different alignment of the field labels.

The reminder sent "X hours BEFORE the booking" is sent approximately "X hours" before the start date of the booking (first hour of the day) using the server time. The first hour of the day (midnight) is used as reference for both "partial days" and "complete days" mode.

Some website activity is needed to lauch the pending reminders notification, so if the website has a very low number of visits a cron should be set to load the website homepage at least once every hour (not needed in most cases).

Edit the styles file "wp-content/plugins/booking-calendar-contact-form/css/stylepublic.css" and add these rules at the end of that file:

#dex_bccf_pform .ui-datepicker{width:auto}
#dex_bccf_pform .rcalendar .ui-datepicker{max-width:300px}
#dex_bccf_pform tr th,#dex_bccf_pform tr td {padding: 8px;}

Edit the cell padding and width values to get the expected size.

To hide the cost add this style into the file "booking-calendar-contact-form\css\stylepublic.css":

#bccf_display_price { display: none }

Fot styles modifications add a rule like this one into the file "booking-calendar-contact-form\css\stylepublic.css" (sample changing the colot and font size):

#bccf_display_price { color: #ff0000; font-size: 16px; }

The way for publishing various calendars into the same page is to assign the calendars to the same user (ex: admin) and then use a shortcode like this one:

[CP_BCCF_FORM user="admin"]

... that way a drop-down select field will appear above the calendar allowing to select the calendars assigned to the user indicated in the shortcode.

Installation Instructions:

  1. If you already have installed the free version or an old version of the pro version then delete it before installing the new pro version.
  2. Install the pro version via the Plugins area >> Add New >> Upload

Note: The above is a safe process, the plugin's data and settings won't be lost during the process and will appear again after installed the pro version.

Alternative Installation Method:

  1. Overwrite (or copy if not previously installed) the plugin files into the WP plugins folder through a FTP connection. This is also a safe process, the plugin's data and settings won't be lost during the process.

Upgrade Instructions:

The upgrade instructions are exactly the same instructions mentioned above but be sure to make a backup copy of your current files if you have made custom modifications to the files or translations since the files will be overwritten.

After upgrading the plugin remember to clear your browser cache.

The free version must be deleted before installing the pro version.

If you are upgrading the pro version to a new version you should also remove the previously installed version.

This is a safe step, the plugin's data and settings won't be lost during the process.

Another alternative is to overwrite the plugin files through a FTP connection. This is also a safe step.