Plugin Documentation

Detailed documentation about all features and settings of Appointment Booking Calendar.

How it works?

From the dashboard/configuration area the process is as follows:

  1. Insert data fields into the form
  2. Configure the calendar time-slots, availability, prices, form processing, emails and PayPal settings if needed
  3. Publish the form from a post or page (go to edit posts/pages or to the widgets area).

From the end user (visitor) point of view, the process is as follows:

The website's visitor will reach to the form where the first step will be to select the date and after clicking the date a floating dialog will be displayed for selecting the time slots available for the clicked date.

After selecting the date and filling the other form fields (phone, name, email and open comments field) the visitor will click "continue".

If the PayPal payment was enabled, the customer will be automatically redirected to PayPal to make the payment and confirm the booking. After completed the PayPal payment the booking will become automatically confirmed, the time slot selected will become unavailable and two emails will be sent: a notification email to your email address and a confirmation/thank you email to the customer that completed the payment.

If the PayPal wasn't enabled, the customer will be redirected to a "thank you" page and the notification/confirmation emails will be sent immediately.

You will be able to check the booking details from the WordPress administration area (Appointment Booking Calendar Settings) by clicking on the selected time slot and also into the bookings list with options to export the bookings to CSV/Excel files and to iCal files.

Installation

To install the WordPress plugin follow these steps:

  1. Download the plugin to your computer.
  2. Go to the plugins section in WordPress
  3. If has been installed installed another version of the plugin, deactivate it, and then press the corresponding "Delete" button.
  4. Press the "Add New" button at top of section.
  5. Press the "Upload Plugin" button, and select the zipped file downloaded in the first step.
  6. Finally, install and activate the plugin.

Inserting the form on Page

  1. Configure the settings at the administration menu >> Settings >> Appointment Booking Calendar.
  2. To insert a form into some pages or posts, uses the icon that will appear when editing contents:

    Insert Form

  3. After doing that, the tag [CPABC_APPOINTMENT_CALENDAR calendar="1"] will be inserted into your content. The "id" is optional, if not specified the first form will be used. When you preview the content in the public website that tag will be replaced by the reservation form:

    Form

Managing Forms

After going to the WordPress administration menu >> Settings >> Appointment Booking Calendar you will see the list of forms/calendars like in the following image:

Forms List

For each form you will see the following options:

  • ID: Identification number of the calendar/form, useful when publishing an specific calendar or form.
  • Calendar Name: Some name to identify the calendar/form.
  • Owner: WordPress user that can edit the calendar. An user with "Editor Access Level" will see/manage only its own calendars.
  • Published: Specify if the calendar can be published.
  • iCal Link: Link for the feed in iCal format. Use this link to export the reservations to another calendar that supports this iCal: OutLook, Google Calendar, etc...
  • Update: Update the specified name, owner and public status for the calendar.
  • Manage Settings: Go to the main settings area for the calendar.
  • Bookings List: Printable list of bookings.
  • Clone: Duplicate a calendar with its settings.
  • Delete: Delete the calendar and all its bookings and settings.
  • Shortcode: An alternative way for publishing the calendar.
Defining the available time-slots

To define the available time slots go to the "WordPress administration menu >> Settings >> Appointment Booking Calendar >> Manage Settings" and you will see a calendar area like this one:

booking calendar slots

The first step is to un-check the non-working days, for example Sunday and Saturday.

The second step (important!) is to click on each weekday tab and add the time slots available for each day. Each time slot has a defined capacity (number of bookings it will accept), you can indicate that in this step. There are options to add many time slots in one single step.

There is also a "Restricted Dates" tab that allows disabling specific days, for example holidays and a "Special Dates" tab for overwriting the available time-slots for specific dates.

Finally you can click a date and manually add appointments or check the appointments made into the selected date. Time slots with at least one appointment added will be shown strike-out. Click a time slot to see/edit/delete its appointments. To delete an appointment click the button "clear" and then "submit".

Below the calendar there are several configuration settings that are explained in the section below.

Check the submissions

Press the "Bookings / Contacts" button, corresponding to the calendar/form. The messages screen displays the list of submissions, and a filtering section to reduce the submissions by form, a time interval, or a text in the data

From the messages screen it is possible remove a submission, or submissions group, change its status to paid/unpaid and also export all submissions to a CSV file

Export the submissions to a CSV File

For exporting the submitted information to a CSV file, press the "Bookings / Contacts" button corresponding to the calendar/form, and press the "Export to CSV" button, select the location where will be saved the CSV and that's all. The first row of CSV file allows identify each of fields, the text used to identify the field will be the short label, defined in the field, or the label in case that the short label is not defined.

Blocking / Unblocking a Specific Date

You can block a slot by clicking on the date (in the settings area), click the time-slot and enter the block reason.

You can also restrict a whole day using the "Restricted dates" tab.

Another alternative is to overwrite the available slots for specific days using the "Special Dates" tab.

The Form Builder

Enable the form builder in the "troubleshoot area" located below the list of calendars and after that a visual form builder will appear on each calendar settings page to visually add/modify fields and set the validation rules.

The Form Builder lets you to add/edit/remove fields into the form and also to specify the validation rules for your form (required fields, email fields, etc...).

Form Builder

Form title and predefined designs

The "Form Settings" tab allows define the form's title and description, as the placement of labels respect the fields (at top, at left, aligned to the right). In the "Form Settings" tab is possible to decide the form's design. The plugin includes multiple predefined designs.

Form Settings Tab

The following field types are currently available(*):
  • Single Line Text: Classic text input.
  • Number: This field can validate if only digits or a valid number was entered.
  • Slider: Numeric field whose value is modified sliding a handle.
  • Currency: A classic input field for currency values, that allows separator for thousands, and currency symbols.
  • Hidden: A hidden field.
  • Email: This field validates that the email address has a valid format.
  • Date/Time: Date-picker. Can be setup also to show also a selectable year and month, for example for birth date fields, and time fields.
  • Checkboxes: Classic checkboxes, select one or more on a group.
  • Multiple Choice: Radio buttons, select one of many.
  • Dropdown: Classic select / dropdown field.
  • Upload File: For uploading files.
  • Password: A field that shows * instead the typed letters. You can also add a confirm password validation.
  • Phone field: Supports international formats line ###-###-#####. The format is configurable.
  • Comment area: It's a comment to introduce to a section of the form or give instructions to the user.
  • Summary: Displays a summary of form fields with the values entered.
  • Section Break: It's a line for separating areas group of fields
  • Page Break: Useful for creating multi-page forms. The "page break" marks the start of a new page in the form builder
  • Instruct. Text: Text field to display instructions for users.
  • HTML Content: Field for general purpose, to include HTML tags in the form.
  • Media: Allows insert images, audios or videos.
  • Button: Insert a button in the form.

* Note: Some of the field types are available only in the Developer and Platinum versions of the plugin.

Container Fields

The form builder includes some container controls. The container controls allow to insert another controls in them:

  • Fieldset Container: Allows insert a fieldset control in the form, with a legend.
  • Div Container: Inserts a container very useful for grouping related controls, and not modifies the appearance of the form.
DataSource Fields

In addition to the above, the following fields are available only in the Developer and Platinum versions of plugin:

  • Line Text DS: An input field that gets its default values from one of following datasources - Database, Posts information, Taxonomies information or Users information.
  • Number DS: An input field that gets its default values from one of following datasources - Database, Posts information, Taxonomies information or Users information.
  • Email DS: An input field for Email address that gets its default values from one of following datasources - Database or Users information.
  • Text Area DS: A text area field that gets its default values from one of following datasources - Database, Posts information.
  • Checkboxes DS: Checkboxes for selecting one or more options into the same field that gets its options from one of following datasources - Database, CSV, Posts information, Taxonomies information or Users information.
  • Radio Btns DS: Radiobuttons for selecting one option between the options available for the field that gets its options from one of following datasources - Database, CSV, Posts information, Taxonomies information or Users information.
  • Drop-down DS: A select / drop down list for selecting one of the values listed that gets its options from one of following datasources - Database, CSV, Posts information, Taxonomies information or Users information.
  • Hidden DS: A hidden field that gets its value from one of following datasources - Database, Posts information, Taxonomies information, or Users information.
Editing the field settings in the Form Builder

Field Settings

When you click a field already added, you can edit its details and validation rules. The following properties are useful:

  • Field Label: Label for the field in the public form and into the email.
  • Field tag for the message: In addition to the general <%INFO%> tag, you can use this tag to show the field value into a specific tag of the email.
  • Specific settings: The settings depends of the field type, for example the format of the phone number, the date format, etc...
  • Validation rule: The validation rules depends of the field type, example: required, only digits, valid email, valid number, etc...
  • Predefined value: Pre-filled value for the field, if any.
  • Instructions for user: This text will appear in a smaller form below the field. It's useful for giving instructions to the user.
  • Add CSS layout keywords: Customize the look & feel. If used, this field must contain the name of the CSS class and not the styles rules directly.
Other features in the form builder:
  • Equal fields validation: Use it for example to confirm if the email or password typed in two different fields are the same. This is valid for "Single Line Text", "Password" and "Email" fields.
  • Dependent fields: Use this feature for show/hide fields (any field type) based in the selection made on other fields (checkboxes, radiobuttons or select/drop-down fields).
For DataSource controls (only available in the Developer and Platinum versions of plugin)

This is a step by step about the use of datasource controls

  1. Insert in the form the control with access to external datasources (these controls are represented with the DS at the end of its names)
  2. Select the control in the form, and pays attention to the "Define Datasource" section.

    There are different datasources: Database, CSV file, Post Type, Taxonomy, and User Data.

    • Database, allows populate the field with the data stored in database.
    • CSV, allows populate the field with the data stored in a CSV file (Datasource available only in fields with multiple entries: DropDown DS, Checkbox DS, Radio Button DS).
    • Post Type, allows populate the field with the information associated to a specific post type (like the products names in a Woocommerce, etc.)
    • Taxonomy, allows populate the field with the information of taxonomies.
    • And finally the User Data, with the data of users in WordPress.

    Note: Depending of control selected will be available all available datasources, or not.

So, suppose we want populate the field with the data stored in a database table.

  1. Select Database, from the list of datasources.
  2. If the database is different that used by WordPress, will be required enter the Host's address, the authentication data to connect to the database (username and password), and the name of database(a host can include multiple databases). There is a button for testing the database connection.

    Note: If the database is the same used by WordPress, leave empty the fields above.

Now its time to define the query to database

  1. Enter the name of table's column, that store the control's values. If you are using the Drop-down DS control, it has multiple options; each option of drop-down list includes a value and text; in this option you determine the column in the table that includes the values of options.
  2. Enter the column's name that stores the control's texts. Similar to the previous step, but in this case the column stores the texts of the options (in case of checkbox or radio buttons, this column contain the label of options)
  3. Type the table name, a database can include multiple tables, you should identify the table you are using.
  4. Type a condition if required. If you want filtering the values to display in the control, type the condition in this attribute. For example, suppose you want load the data of posts that are public, the condition in this case would be: post_status='publish', where post_status is the name of column, and publish is the value for filtering.
  5. The "Order by" is used to order the query results by the values in columns, and not by the order that data were stored in database. For example, suppose you want populate the control with the users names of WordPress, and you want order the results alphabetically, in this case the "order by" would be: display_name ASC, where display_name is the column's name, and will be ordered in ascending way.
  6. Limit, enter an integer number to reduce the number of query results.

If your query is very complex, and you prefer create it manually; selects 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 colum 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

The use of database as datasource, allows filtering the information to populate the fields with the values on other fields in the form, or javascript variable. The use of variables are only accepted in the "Condition" section ("WHERE" clause), and requires the format: <%varname%>. For example, to get the title of a post, filtering by its ID, if the id is defined through the fieldname3 field, the "Condition" attribute of the query would be: ID=<%fieldname3%>

How to use CSV files as datasource?

The CSV files can be used as data sources for fields with multiple choices (DropDown DS, Radio Btns DS, Checkboxes DS). The initial steps are similar to the previous section, but selecting the "CSV" option as data-source instead of selecting "Database".

A comma-separated values (CSV) file stores tabular data (numbers and text) in plain text. Each line of the file is a data record. Each record consists of one or more fields, separated by commas. The use of the comma as a field separator is the source of the name for this file format.

For CSV files, the plugin includes the attributes:

Select CSV file: file field to select the CSV file.

Use headline: tick the checkbox if the first line of CSV file is a headline to identify the data in the next records.

Delimiter: enter the delimiter symbol used as the field separator on each record.

Press the "Import CSV" button to import the records into the form. This action will feed the lists "Select column for texts" and "Select column for values", that are used for selecting which fields will be used texts and values of the choices in the DS field.

Create dependencies between fields

Some fields, like radio groups, checkboxes and drop-down menu, allow dependencies in function to the option selected.

For example, suppose your form includes a radio-group control with multiple choices: - House, - Car, - Electrodomestics, and each of them, uses different attributes. The house requires fields for address, number of rooms, etc; the car requires a field for trademark, model, etc. and finally the electrodomestics, will need type of electrodomestic,and more. So, if you want display the fields, depending of choice selected:

  1. Select the radio group fied in the form editor.
  2. Press the "Show dependencies" link, in the choices area.
  3. and select the field to display if the choice is selected. If you need associate multiple fields to the choice, press the plus button and select the new fields.

Settings area of the forms

For each calendar/form you will be able to edit the following settings:

full calendar settings
* Click image to see full screenshot.

Each setting means:

  • Public Calendar Settings:
    • Calendar language: The calendar language. Currently supports Czech, German, Dutch, English, French, Italian, Japanese, Portuguese, Russian, Spanish, Slovak, Swedish, and Turkish.
    • Calendar visual theme: Select one of the pre-built CSS themes for the public calendar.
    • Date format: The date format mm/dd/yyyy or dd/mm/yyyy.
    • Calendar pages: The number of calendar months to be shown at the same time
    • Military time: Sets am/pm or military time.
    • Start weekday: The start weekday of the week. Default is Sunday.
    • Minimum available date: You may want some time to review the booking, so you can set the minimum selectable date as a fixed date (Ex: 2012-10-25) or as a relative date like "today" or "today + 3 days".
    • Maximum available date: Similar to the previous field, in this case for selecting the maximum selectable date.
    • Open calendar in this initial month/year: This can be used to display the calendar initially in a specified month.
    • Minimum slots to be selected: This is the minimum number of slots that the customer must select in the booking form
    • Maximum slots to be selected: This is the maximum number of slots that the customer can select in the booking form..
    • Close floating panel after selecting a time-slot?: Default: "Yes". Set to "No" in the case the user have to select various slots in the same date. The price should be set for each total number of slots below (request cost setting).
  • Form Builder:
    • Appears only in the pro version if enabled. It displays a visual form builder for customizing the form.
  • Validation Texts:
    • Appears only if the Form Builder is enabled. Contains the validation texts for the fields.
  • PayPal Payment Configuration:
    • Enable PayPal Payments: Allows to enable/disable the PayPal payment option.
    • PayPal email: The email of the PayPal that will receive the payments.
    • Request cost: Payment amount requested to confirm a booking.
    • PayPal product name: The name that will appear to the customer at PayPal.
    • Currency: The currency, example: USD, EUR, GBP, etc...
    • URL to return after successful payment: After the PayPal payment the user may go back to a page into your website (usually a "thank you" page). Paste here the complete address of that page. This URL will be used as the "thank you" page even if the PayPal payment is disabled, be sure to specify it.
    • URL to return after an incomplete or cancelled payment: After a canceled/incomplete PayPal payment the user may go back to a page into your website, usually a page with more instructions or requesting feedback. Paste here the complete address of that page.
    • PayPal language: The language that will be used for the PayPal payment. It's any PayPal supported language.
    • Discount Codes: This section lets you to define discount codes. A 100% discount means that the payment isn't required. The discount codes can have an expiration time.
  • Notification Settings to Administrators:
    • Notification "from" email: The email used as from in the notifications.
    • Send notification to email: The email address where the notification will be sent to (ex: your email address).
    • Email subject notification to admin: Subject of the notification email that you will receive.
    • Email Format: Indicates if the email will be sent as plain text or HTML formatted.
    • Email notification to admin: Content of the notification email that you will receive. Keep the tag %INFORMATION% that will be replaced automatically by the booking information.
  • Email Copy to User/ Auto-reply:
    • Email subject confirmation to user: Subject of the thank you/confirmation email sent to the user (customer) after completing the payment.
    • Email Format: Indicates if the email will be sent as plain text or HTML formatted.
    • Email confirmation to user: Content of the thank you/confirmation email sent to the user (customer) after completing the payment. Keep the tag %INFORMATION% that will be replaced automatically by the booking information.
  • Captcha Verification:
    • Use Captcha Verification?: Indicate if the captcha anti-spam protection will be used.
    • Other various settings: There are multiple fields in this section that let you to define how the captcha image will look, including size, colors, base font, etc...
  • Reminder Settings:
    • Use this area to activate the reminder settings, customize the content of the reminder email and indicate how many hours before the appointment it should be sent.
  • Custom Settings:
    • Options: This special section, if some data is entered, generates a drop-down select list with items where each item can have a different price, ex: for multiple different services each one with its own price. This is an optional field that appears only if some option is specified. There is a sample format beside the field that you can copy & paste.

Special tags in the notification emails

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

  • <%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.

Add-Ons

The list of add-ons available in the plugin, appear in the "Add-ons area" of settings page of the plugin. For enabling the add-ons, simply should tick the corresponding checkboxes, and press the "Activate/Deactivate Addons" button.

Add-ons

WooCommerce add-on (Beta Version)

The Platinum version of the plugin includes the WooCommerce add-on, to integrate the forms created by the "Appointment Booking Calendar" with the WooCommerce products. The add-on inserts an additional metabox in the WooCommerce products, with two settings fields:

  • Enter the ID of the form: Allows select the form that will be associated to the product.
  • Calculate the product price through the form: Allows calculate the price of the products through the form.
  • Minimum price allowed: The minimum price applied to a product.
  • Activate the summary: Allows customize the fields included in the cart page of WooCommerce.
  • Summary title: Enter the summary title.
  • Summary: Define the summary, are accepted all special tags supported by the notification emails and the thank you page.

Note: If you want calculate the price of products through the form, will be required that you select the field of the price in the attribute: "Request cost" in the form's settings.

WooCommerce Add-on

SalesForce add-on (Beta Version)

The add-on allows create new leads in the SalesForce account with the data submitted by the forms.

To create new leads in SalesForce with the data submitted by a form, be sure that the SalesForce account has enabled the Web-to-lead option, and then go to the form's settings:

  • Enter the OID (Organization ID)
  • For debugging the lead creation, tick the "Enabling debug" option, and enter the email address where receive the information. For production, untick the debugging option.
  • Press the "Add attribute" button, select the Lead attribute, and enter a fixed text, or the name of the field in the form (fieldname#)

Note: The Add-on includes the list of predefined attributes of Leads, but it is possible to enter custom attributes too.

SalesForce Add-on

WebHook add-on (Beta Version)

The add-on allows posting the submitted information by the forms to WebHooks URLs. With the WebHook add-on it is possible integrate the forms created by the plugin with services like Zapier. The Zapier connects services as important and popular as Zoho CRM, Dropbox, Mailchimp, Evernote, Google Drive, Facebook, Twitter, and more than 300 services(Zapier apps)

Use this add-on is as simple as entering the WebHooks URLs, through the WebHook section in the forms settings. To associate a form with multiple WebHooks, simply press the "Add new url" button, to add a new input field.

Note: About Zapier service, select Webhook as the Trigger app, and "Catch Hook" as the trigger for this app.

WebHook Add-on

reCAPTCHA add-on (Beta Version)

The add-on allows to protect the forms using the Google reCAPTCHA instead of the captcha distributed with the plugin. reCAPTCHA is more visual and intuitive than the traditional captcha, with just a single click the users confirm they are not a robot.

reCAPTCHA (its official name is No CAPTCHA reCAPTCHA) as they define themselves:

reCAPTCHA is a free service that protects your website from spam and abuse. reCAPTCHA uses an advanced risk analysis engine and adaptive CAPTCHAs to keep automated software from engaging in abusive activities on your site. It does this while letting your valid users pass through with ease.

reCAPTCHA offers more than just spam protection. Every time our CAPTCHAs are solved, that human effort helps digitize text, annotate images, and build machine learning datasets. This in turn helps preserve books, improve maps, and solve hard AI problems.

To use reCAPTCHA in your forms, activate the add-on in the the settings page of the plugin, through the menu option: "Settings/Appointment Booking Calendar", tick the checkbox: "reCAPTCHA", and press the "Update" button.

The activation of reCAPTCHA displays a new section for entering the site key, and the secret key, two keys provided by Google reCAPTCHA to protect the website, and validate the forms submissions respectively.

reCAPTCHA Add-on

Mollie (iDeal)

The Mollie addon provides integration with iDeal, the most popular Dutch payment method. The integration is made via Mollie: www.mollie.com.

You're easily connected to iDEAL through Mollie without the dreaded technical and administrative hassle. The iDEAL platform combines the online banking systems of 10 of the largest Dutch banks (ABN AMRO, ASN Bank, Bunq, ING, Knab, Rabobank, RegioBank, SNS Bank, Triodos Bank and van Lanschot) into one payment method.

After the consumer selects the iDEAL payment method the consumer's bank is selected. The actual payment then takes place in the bank's trusted online banking environment - for which security is guaranteed by the bank. Through iDEAL buyer and seller are guaranteed a transparent transaction without hidden fees or other unpleasant surprises.

Mollie iDeal Add-on

In the settings area the following information is needed to activate and link the Mollie - iDeal account to the form:

  • Enable iDeal-Mollie?: Select "Yes" to enable the Mollie - iDeal addon. This selection will disable automatically the PayPal Standard option.
  • Mollie API Key: The API Username provided by Mollie for your account, it may be the test key or the production key.
  • If payment fails return to this page: If the payment fails the customer is redirected to the page indicated in this field.

When enabled, the customer will be redirected to the Mollie - iDeal payment form after the submision. The process will be similar to the way PayPal Standard works.

RedSys (Servired, Sermepa, TPV for most banks in Spain)

The RedSys / Servired / Sermepa addon provides a secure interface for accepting credit card payments through most banks in Spain (Sabadell, Banco Popular, BBVA, Santander, Bankia, Caixa, Bankinter, etc...). You can read more about RedSys at www.redsys.es.

RedSys Add-on

In the settings area the following information is needed to activate and link the RedSys account to the form:

  • Enable TPV: Select "Yes" to enable the RedSys TPV. This selection will disable automatically the PayPal Standard option.
  • CÓDIGO COMERCIO: The API Username provided by RedSys or your bank.
  • CLAVE SECRETA: The API Password provided by RedSys or your bank.
  • Mode: Select "Sandbox" for testing purposes and "Production" for charging real payments.

When enabled, the customer will be redirected to the RedSys payment form after the submision. The process will be similar to the way PayPal Standard works.

Troubleshoot Area & General Settings

Throubleshoot Area

The "Troubleshoot Area & General Settings" section, allows correct some possible issues, or conflicts with third party plugins, and define the general settings.

  • Form rendering: Select to use a basic HTML form or the advanced form builder.
  • Script load method: Changes the script load method if the form doesn't appear in the public website.
  • Character encoding: Updates the charset, if you are getting problems displaying special/non-latin characters. After updated you need to edit the special characters again.
  • iCal time-zone difference vs server time: Update if needed to match the desired time-zone used for exporting the iCal file. Difference is calculated using the server time as reference.
  • iCal time-slot size in minutes: Update if needed to have a specific duration for the time-slots in the exported iCal file.
Printing a Form

For printing only the form, but not the rest of page, please, follows the steps below:

  1. Inserts a "HTML Content" field in the form, and enter as its content the piece of code:
    <SCRIPT>
    function printForm(){
    	var w = window.open(null, 'Print_Page', 'scrollbars=yes');
    	jQuery('#fbuilder input').each(function () {
    		var e = jQuery(this);
    		e.text(e.val()).attr('value', e.val());
    		if (e.hasClass('large'))
    			e.css('width', '100%');
    		if (typeof e.prop('checked') != 'undefined')
    			e.attr('CHECKED', e.prop('checked'));
    	});
    	var html = jQuery('#fbuilder').html();
    	jQuery('#fbuilder TEXTAREA').each(function () {
    		var e = jQuery(this).parent().html();
    		html = html.replace(e, jQuery(this).val());
    	});
    	jQuery('#fbuilder SELECT').each(function () {
    		var e = jQuery(this).parent().html();
    		html = html.replace(e, jQuery(this).find('option:selected')[0].text);
    	});
    	w.document.write(html);
    	w.document.close();
    	w.print();
    }
    </SCRIPT>
    
  2. Inserts a button field in the form and call the function defined previously from its onclick event:
    printForm();