Get the answers to the common questions of our users.
Detailed description of each particularity of the Appointment Hour Booking.
Technical articles with many tips and tricks about the use of Appointment Hour Booking.
Contact Us if the answer is not in the rest of documentation sources.
Installation Instructions:
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 you install the pro version.
Alternative Installation Method:
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's cache.
In most cases it is necessary to prevent the booking of past dates or to require some time in advance for a booking (close time-slots at some given time prior to the appointment). This page explains how to setup the minimum time required before the appointment. The page Minimun available date: min time required before a booking contains detailed information about this settings option.
Use the "Page Break" field on the form builder to indicate the new pages on the form.
The choices of Radio Buttons, and Checkboxes controls, are formed by two input fields, the input field for choice value, and the input field for the text. An IMG tag should be entered in the input field for the choice text, with an absolute URL in the src attribute:
<IMG src="http://..." >
The summary uses two specific class names: cff-summary-title, and cff-summary-value, for the fields labels, and fields values respectively; you only should define both classes in any of css files loaded by your website:
.cff-summary-title{}
.and cff-summary-value{}
These styles will be applied to all summary fields in your form, but what to do if you want to change the styles for only one summary field? The summary field includes two attributes: "Classname for fields titles", and "Classname for fields values", you can enter, through these attributes, the class names you want applied to the labels and values of the fields displayed in a specific summary field, using particular class names for each summary control, allows to show summary fields with different designs.
The form builder does not include a field to insert links explicitly in the form, but you can insert a link through an "Instruct. Text" field. Simply insert an "Instruct. Text" field in the form, and then, enter the tag of the link in any of the field's attributes: "Field Label", or "Instructions for User". For example, to insert a link to our website, you should enter the following tag:
<a href="https://wordpress.dwbooster.com">Visit the website</a>
The controls with access to database are available in the commercial versions of the plugin
This is a step by step about the use of datasource controls
There are different datasources: Database, CSV file, Post Type, Taxonomy, and User Data.
Note: Depending on control selected, all available datasources will be available, or not.
So, suppose we want to populate the field with the data stored in a database table.
Note: If the database is the same as used by WordPress, leave the fields above empty.
Now it's time to define the query to database
If your query is very complex, and you prefer to create it manually; select the option "Custom Query", but in this case you should type all the query. Pay attention because you should use alias in the "SELECT" clause, to indicate the column used to get the values, and the column used to get the texts. For example, a hypothetical query:
SELECT column1 AS value, column2 AS text FROM tablename WHERE column3 > 5 ORDER BY column2 ASC LIMIT 5
To modify the whole styles of the form fields and labels, add the needed styles into the "Appointment Hour Booking >> General Settings >> Edit Styles" area:
#fbuilder, #fbuilder label,
#fbuilder span { color: #00f; }
#fbuilder input[type=text],
#fbuilder textarea,
#fbuilder select {
border: 2px solid #00f;
}
#fbuilder .pbSubmit { color: #00f; font-weight: bold; }
#fbuilder .section_breaks .section_break { border:0px; } #fbuilder .section_breaks label { font-size:18px; } #fbuilder .section_breaks span { font-size:14px; }
#fbuilder .comment_area label { font-size:18px; } #fbuilder .comment_area span { font-size:14px; }
#fbuilder .pbNext,#fbuilder .pbPrevious {color: #00f;font-weight: bold;}
#fbuilder .fform h1 {font-size:32px;} #fbuilder .fform span {font-size:16px;}
#fbuilder label .r {color:#f00;}
.uh_phone .l {display:none;}
#fbuilder .dformat {display:none;}
On the other hand to modify only a specific field into the form:
.specialclass label {color: #00f;}
.specialclass input[type=text],
.specialclass textarea,
.specialclass select {border: 2px solid #00f;}
Use the following CSS style to make the Appointment Hour Booking 100% width / responsive on the page:
#fbuilder .ui-datepicker-inline{max-width:none !important}
Add the styles into the "Appointment Hour Booking >> General Settings >> Edit Styles" area.
Add the following style into the CSS customization area:
#fbuilder .ui-datepicker-header { background:#6cc72b ;color:#444; text-shadow:none}
Add the styles into the "Appointment Hour Booking >> General Settings >> Edit Styles" area.
Add the following style into the CSS customization area:
#fbuilder .pbSubmit{margin:5px auto;float:none;display:inline-block;}
Add the styles into the "Appointment Hour Booking >> General Settings >> Edit Styles" area.
Add the following style into the CSS customization area:
#fbuilder .ui-datepicker th{background:#6cc72b;color: #f00;}
Add the styles into the "Appointment Hour Booking >> General Settings >> Edit Styles" area.
Add the following style into the CSS customization area:
For available dates:#fbuilder td:not(.ui-datepicker-unselectable) a.ui-state-default{background:#dfeffe;color:#1a4a78;}
#fbuilder .ui-datepicker-unselectable .ui-state-default{background:#f4f4f4;color:#ddd;}
#fbuilder .beforemindate.ui-datepicker-unselectable .ui-state-default {background:#f4f4f4;color:#ddd;}
#fbuilder .ui-datepicker-calendar .ui-state-active {background: #e9d99b; color: #f00;}
#fbuilder .notavailslot.ui-datepicker-unselectable .ui-state-default {background:#f00}
#fbuilder .invalidDate.ui-datepicker-unselectable .ui-state-default {color:#b4b3b3}
Add the styles into the "Appointment Hour Booking >> General Settings >> Edit Styles" area.
Add the following style into the CSS customization area:
#fbuilder .ui-datepicker table, #fbuilder .ui-datepicker thead, #fbuilder .ui-datepicker tr, #fbuilder .ui-datepicker th, #fbuilder .ui-datepicker td {border: 0px;} #fbuilder .ui-datepicker{box-shadow:none}
Add the styles into the "Appointment Hour Booking >> General Settings >> Edit Styles" area.
Add the following style into the CSS customization area:
#fbuilder .slots{background:#f6e7bd;box-shadow:none} #fbuilder .slots div{border:0px} #fbuilder .slots div a{background:#e9a32f;color:#f4dba1}
Add the styles into the "Appointment Hour Booking >> General Settings >> Edit Styles" area.
In the case you have opted for displaying the used slots for information purposes ( requires to mark the option "Show used slots" in the calendar field settings ) you can change how they look with a CSS style like the following:
For the slots already booked in previous bookings, add the following style into the CSS customization area:
#fbuilder .slots .htmlUsed a{text-decoration: line-through;background:#ddd;color:#ccc}
For the slots selected by the user in the current booking, add the following style into the CSS customization area:
#fbuilder .slots .currentSelection a{background:#b6befc;color:#000}
Add the styles into the "Appointment Hour Booking >> General Settings >> Edit Styles" area.
Add the following style into the CSS customization area:
#fbuilder .ahb_list{margin:10px 0px} #fbuilder .ahb_list .ahb_list_time{border:0px;background:#3bb880;padding:10px;margin-right:10px;display:inline-block} #fbuilder .ahb_list .ahb_list_service{border:0px;background:#3bb880;padding:10px;margin-right:10px;display:inline-block} #fbuilder .ahb_list a{border:0px;background:#3bb880;padding:10px;color:#fff;display:inline-block}
Add the styles into the "Appointment Hour Booking >> General Settings >> Edit Styles" area.
The class names are assigned to the fields through the attribute: "Additional CSS Class". If you need assign multiple class names to a field, you only should enter the class names separated by space characters. For example: myclass1 myclass2
Use the following CSS style to apply different color or styles to the booked dates:
#fbuilder .notavailslot a{ background:#f00; }
Add the styles into the "Appointment Hour Booking >> General Settings >> Edit Styles" area.
The Up/Down arrows are included by the WebKit browsers (Safari and Chrome ), and Firefox, in the input tags with type="number". To turn off the appearance by default of number fields in WebKit and Firefox browsers you simply should paste the following styles definition in any of CSS files of your website:
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
-webkit-appearance: none;
margin: 0;
}
input[type=number]{-moz-appearance: textfield;}
Into the form editor click a field and into its settings there is one field named "Additional CSS Class". 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:
For example if you want to put two fields into the same line then specify for both fields the class name "column2".
There is another way to display multiple fields in a row. Insert a container field in the form: DIV or FIELDSET, and select the number of columns through the attribute: "Columns". In this case all fields inserted into the container are displayed distributed in columns.
But, what happen if you want create 6, 8, 12 or 14 columns? The answer is simple, use the container controls ( the DIV field ). If you want create 6 columns, a way to do it would be insert two DIV container, and assign to each of them the class name: column2, finally you should insert three fields in each of containers and assign to all of them the class name column3. You will have inserted 6 columns. Following this method you can create as many columns as you want.
To replace the submit button with an image/icon use the following style (replace the image URL with your own image URL):
.pbSubmit{
background-image:url(https://apphourbooking.dwbooster.com/images/logo.png);
width: 212px;
height: 64px;
color:transparent;
}
Add the needed styles into the “Customization area >> Add Custom Styles” (at the bottom of the page that contains the list of forms).
Read more about customizing the form styles.
You should use a custom class name. All fields include the attribute "Additional CSS Class", you only should enter through this attribute a custom class name (the class name you prefer), for example myclass, and then define the new class into the "Appointment Hour Booking >> General Settings >> Edit Styles" area:
.myclass{ display:none; }
If you are using the latest version of the plugin, please enter in the "Additional CSS Class" attribute, the class name: hide, included in the plugin's distribution.
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 Developer and Platinum versions of the plugin include multiple templates that can be assigned to the Forms to display a predefined design: Default template, Letter template, Professional, Natural, Elegant, Decorative and Clean Design.
Each template is stored in its own directory, in the "templates" folder ( "/wp-content/plugins/appointment-hour-booking/templates"). Basically the templates are formed by a CSS file ( style.css ). If you want change the appearance of a predefined template, you simply should modify the style.css file corresponding to the template. The directories of each template are:
To hide the "### ### ####" add this CSS rule into the "Appointment Hour Booking >> General Settings >> Edit Styles" area:
.uh_phone .l{display:none}
In addition to the possibility of editing the email contents you can use the following tags:
For the selected appointments in the page you can use the following tags:
Info about locating the field tags in the form builder:
Email settings area:
There is a tag named %INFO% that is replaced with all the information posted from the form, however you can use also optional tags for specific fields into the form.
For the selected appointments in the page you can use the following tags:
Info about locating the field tags in the form builder:
Email settings area:
Use the tag %itemnumber% into the email content. That tag will be replaced by the submission item number.
The uploaded file is attached to the email and in addition to that you can include a link to it by adding a specific field tag into the email message.
In the form builder select/click the upload field for that field, there is a read-only setting named "Field tag for the message (optional):" that shows the field tag for the "uploaded file name", for example: %fieldname7%. If that is the tag for your file field then copy and paste that tag into the email message, adding the postfix _url, example: %fieldname7_url.
If you want send an image in the notification emails, like a header, you should insert an IMG tag in the "Email notification to admin" and/or "Email confirmation to user" textareas of form settings, with an absolute URL in the SRC attribute of IMG tag:
<IMG src="http://..." >
If you are using the HTML format in the notification emails, you should insert the BR tags for the changes of lines in the emails content:
<BR />
Add the following style into the CSS customization area (example to highlight Oct 29, 2019):
#fbuilder .d2019-10-29 a
{
background: #0093DA;
color: #fff;
box-shadow: none;
text-shadow: none;
}
Add the styles into the "Appointment Hour Booking >> General Settings >> Edit Styles" area.
Add the following style into the CSS customization area:
#fbuilder .cff-phone-field{margin:5px auto;float:none;display:inline-block;}
Add the styles into the "Appointment Hour Booking >> General Settings >> Edit Styles" area.
First, you should activate the WooCommerce Addon in the settings page of the plugin: "Settings/Appointment Hour Booking".
Go to the settings page of the plugin tick the choice "WooCommerce", and press the "Activate/Deactivate Addons" button.
Second, create the form as usual, including the price settings if needed.
Third, After create the form, is time to edit the product in WooCommerce. The addon has included a new section in the product's settings (the section: "Appointment Hour Booking"), that allows:
1. Associate the form with the product, enter the form ID through the "Enter the ID of the form" attribute. The form's id is the number in front to the form, in the list of forms on the settings page of the plugin.
2. If you want get the final price of product through the form, check the option: "Calculate the product price through the form".
3. Define a minimum price for products, to avoid selling the products to a lower price than allowed.
Finally, be sure the product in WooCommerce has defined a "Regular price", because in other case, WooCommerce won't display the "Add to cart" button in the public page
The Metabox in the products page includes a section to define the summary to display in the shopping cart.
You simply should: active the summary, enter a title for the summary, and defines the summary, it is possible to use all special tags supported in the notification emails, and the thank you page.
The developer version of the plugin includes the Webhook addon that allows integrate the forms with the Zapier service. The Zapier service connects two apps (the trigger apps with the action apps).
To export the submitted files to Dropbox follow the steps below:
Each time a file is uploaded through your form, the file is uploaded to the Dropbox account too.
The developer version of the plugin includes the Webhook addon that allows integrate the forms with the Zapier service. The Zapier service connects two apps (the trigger apps with the action apps).
To generate a PDF file with the information submitted through a form, and send an email with the file attached, to the email address entered by the user, it is possible using the WebMerge app in Zapier.
The WebMerge service allows upload an fillable PDF file, or a file of Microsoft Word, Excel, or Power Point, to be used as template, or generate a online document, and merge these files with the information received from the website (in this case, from Zapier).
The WebMerge service allows define many destinations for the merged file, one of them is send the file generated as attachment to the email address entered by the user (there are many other possible destinations)
Simply follow the process below:
That's all, each time the form is submitted, a new PDF file is generated in the WebMerge service, and sent as attachment to the user email.
Zapier is a service that allows to connect two apps. You should use webhook as the trigger app, and activate the addon in the developer version of the plugin for sharing the submitted information with another apps, like: DropBox, Google Drive, etc.
Is possible connecting a file field with multiple selection, with another apps like DropBox? The answer is yes.
For each file field, the plugin shares the variable fieldname#_urls, through the webhook. The new variable include URLs of files, uploaded from the fieldname# field, separated by the comma symbol. If the new variable is selected through Zapier, Zapier is able to share the files with the action app.
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.
Try first using a "from" email address that belongs to your website domain, this is the most common restriction applied in most hosting services.
If that doesn't work please check if your hosting service requires some specific configuration to send emails from PHP/WordPress websites. The plugin uses the settings specified into the WordPress website to deliver the emails, if your hosting has some specific requirements like a fixed "from" address or a custom "SMTP" server those settings must be configured into the WordPress website.
In the "troubleshoot area" (located below the list of forms in the settings area) change the "Script load method" from "Classic" to "Direct".
Use the "troubleshoot area" to change the character encoding.
Set the settings field "Protect cancellation link with captcha?:" to "Yes" into the Cancellation add-on settings (step 6 of the booking form settings), this will avoid the problem.
Technical information: Some customers may have a "link preview" feature in their email software or anti-spam software that is testing the links into the email automatically. If the cancellation link isn't protected with a captcha then that "test link" action causes a cancellation.
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.
Yes, both plugins are compatible, but you should configure the plugins, following the steps below:
Yes, both plugins are compatible, but you should configure the plugins if the option "Load JavaScript defered" in WP Rocket is enabled.
The option "Load JavaScript defered" breaks some scripts in the plugin, so in that case the options are to disable the option "Load JavaScript defered" or to exclude the page that contains the plugin form from the WP Rocket Cache.
For info about excluding pages from the WP Rocket cache you can check the following page:
https://docs.wp-rocket.me/article/54-exclude-pages-from-the-cache
The form builder of the commercial versions has the following additional fields in the form builder:
Using the datasource fields you can load data from the database and other sources into form fields. A common use is to load the logged in user data.
For loading the user's email, add an EmailDS field, in "Define Datasource" select the option "User Data" and mark the checkbox "Display data of logged user". This method is also valid for loading the user ID, login, and display name.
For loading other user data (usually custom fields added to the user by registration/membership plugins) you need to feed the data-source field with a database query to load that info:
SELECT meta_value as value FROM wp_usermeta wheremeta_key='last_name' and user_id=%user_id%
Note that the database prefix "wp_" may be different in your WordPress installation. You have to check also which are the "meta_keys" used by the membership plugin to add the user data in the database table "wp_usermeta".
The commercial versions has the following additional pre-built styles for the form fields:
A list with the appointments set on the calendar can be displayed by using this shortcode in the page where you want to display the list:
[CP_APP_HOUR_BOOKING_LIST]
... it can be also customized with some parameters if needed, example:
[CP_APP_HOUR_BOOKING_LIST from="today" to="today +30 days" fields="DATE,TIME,email" calendar="1"]
... the "from" and "to" are used to display only the appointments / bookings on the specified period. That can be either indicated as relative days to "today" or as fixed dates.
In the "fields" attribute you can define the columns, valid values are:
The parameters "status" and "service" can be used to filter the items in the lists, example:
[CP_APP_HOUR_BOOKING_LIST from="today" to="today +30 days" fields="DATE,TIME,email" calendar="1" status="Pending" service="Service 1"]
The styles for the list are located at the end of the file "css/stylepublic.css":
.cpappb_field_0, .cpappb_field_1, .cpappb_field_2, ...
To display only the bookings of the user currently logged in you can add the parameter onlycurrentuser="yes" to the above shortcode.
To display only the bookings of the an user filtering by the email address (only commercial versions of the plugin) add the parameter email="sample@emailaddress.com" to the above shortcode.
Clear the browser cache if the list isn't displayed in a correct way (to be sure it loads the updated styles).
Yes, you can publish any number of calendars into the same form and/or into the same page.
Yes, you can add parameters to the page indicated in the "Confirmation / Thank you page" to pass some of the data entered into the form to it.
STEP 1:
The parameters can be added in the "thank you" page settings field in this format:
http://sample.com/thank-you?email=%email%&fieldname1=%fieldname1%&fieldname2=%fieldname2%
The field IDs can be get from the form builder.The supported field/form tags are the same tags used for the emails as described in this other FAQ entry.
STEP 2 (optional, valid for commercial versions only):
In addition to the above, if you are using the commercial version of the plugin, you can display those parameters into the content of the "thank you" page by placing shortcodes like the following into the content of the page:
[CP_APP_HOUR_BOOKING_LIST_PARAM param="email"]
[CP_APP_HOUR_BOOKING_LIST_PARAM param="fieldname1"]
[CP_APP_HOUR_BOOKING_LIST_PARAM param="fieldname2"]
...
Those shortcodes will be replaced with the parameter included in the URL of the "Confirmation / Thank you page".
Note: This feature works fine if you want is to resend a small amount of data to the "thank you" page for display or processing purposes, or to send the data to an external system, however if what you need is to re-post the complete form data to another page or to a third party system then a better option is to use the WebHook add-on included in the commercial version of the plugin.
Valid for commercial versions of the plugin: If you use the same calendar in different pages and want to have a different service pre-selected on each page, then publish the booking form using the shortcode and add the "preselect" attribute to the shortcode, example:
[CP_APP_HOUR_BOOKING id="1" preselect="2"]
The value specified in "preselect" will be the index of the service to be pre-selected. The first service in the list has index "0".
These features are valid for commercial versions of the plugin:
For loading data dinamically from the database or CSV files into the form you can use the data-source fields.
If what you need is to pre-fill form fields adding some attributes to the shortcode you can add the field IDs as attributes into the shortcode with the value to fill into that field, example:
[CP_APP_HOUR_BOOKING id="1" email="sample@email.com" fieldname1="sample value" fieldname2="other sample value"]
You can check the field IDs by clicking the fields into the form builder.
That feature is currently available in the commercial version of the plugin. To activate it (valid for the commercial version) all you need is to add the following CSS style into the CSS customization area:
.ahb_slot_availability{display: block !important;}
...the result will be as follows:
The style can be pasted into the CSS customization area of the plugin:
Yes, add the following CSS style into the CSS customization area:
.ahbfield_service { display: none }
Add the styles into the "Appointment Hour Booking >> General Settings >> Edit Styles" area.
Note: This question is related to the "Schedule Calendar views" only. If you are looking for the general date format for the booking form then check the general date format setting.
For the Schedule Calendar views the date formats are imported from the language files located into the plugin folder "appointment-hour-booking\mv\language\". You can edit the date format on those files or overwrite them on runtime as explained below.
To overwrite the Schedule Calendar view date format on runtime paste a script like the following in the "General Settings >> Edit Scripts" area of the plugin:
i18n.dcmvcal.dateformat.Md = "W d/M";
The above sample changes the date format in the day and week views to day/month instead month/day.
The form builder has a "button" field type. Insert it into the form and indicate that it will be a "reset" button in the "select button type" attribute. This will "reset" all the values in the form fields but if you want to clear also the selected times you should copy the script available clicking this link and paste it into the plugin in the "General Settings >> Edit Scripts" area.