How to Create Appointment Form

You can install WordPress plugin Easy appointment scheduling to create your Appointment, it is easy to add it by several steps.

Install Plugin

You can install the plugin on your WordPress admin page directly. Please go to Appearance > Install Plugins, find Easy appointment scheduling, click Install. Follow the plugin installing guide to finish the installation.

Go to Plugins > All Plugins, activate Easy appointment scheduling:

Create an appointment form

Go to Appointment, you will enter the plugin interface. Click APPOINTMENT TYPES, click CREATE A NEW APPOINTMENT TYPE

Enter a name and duration, you can define other options also. Click Save, then you will get the shortcodes

Place the appointment form

You can paste the shortcodes into your webpage by BM content builder, you need to add a Text module. Click Text tab on the editor, paste the shortcodes.

Style

You can define the style of the appointment form

To get a dark style like the Tattoo demo. You can paste the custom CSS codes:

html .md-theme-default.time-select.md-button:not([disabled]).md-raised:not(.md-icon-button) {
  color:#000;
}html body, html body.md-theme-default,
html .book-day button.md-whiteframe.selectable:hover,
html .book-day button.md-whiteframe.selectable:focus,
html .md-theme-default.time-select.md-button:not([disabled]).md-raised:not(.md-icon-button):hover,
html .md-theme-default.time-select.md-button:not([disabled]).md-raised:not(.md-icon-button):focus,
html .md-theme-default.md-button:not([disabled]).md-primary.md-raised,
html .md-theme-default.md-button:not([disabled]).md-primary.md-raised:hover,
html .md-theme-default.md-button:not([disabled]).md-primary.md-raised:focus {
   background-color:#000;
    color: #fff;
}
html .md-theme-default.md-button:not([disabled]).md-primary.md-fab {
 background-color:#333;
}
html .md-whiteframe-2dp {
box-shadow:none;
color:#000;
}