Booking Calendar Contact Form

Frequently Asked Questions

Questions


Answers

Please read the instructions on this Google page:

https://support.google.com/calendar/answer/37100?hl=en

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.

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.