Appointment Hour Booking Blog

The easy way to create powerful booking forms for WordPress websites.

Blog / How to customize the contact form styles?

How to customize the contact form styles?

The Appointment Hour booking plugin for WordPress features various options to customize the booking form styles: form design templates and easy ways to apply custom CSS styles.


The easiest way is to select the form templates:

selecting form templates

The plugin includes some predefined designs to apply to forms. To use the predefined designs:

1- Click the "Form Settings" tab in the Form Builder

2- ...and select the predefined design from the drop-down list.

The form templates are described more in detail (including screenshots) into the form templates section.

For further customization of the form we have the possibility to apply custom CSS styles to them. The design section of the FAQ contains some commonly requested CSS samples and tips, so here we will proceed directly to explain where to apply those CSS styles in a safe way.

There is always the option to place the styles in-line into the page (not very clean option) or to put the styles into the theme or plugin CSS files, however in these cases you may lost the CSS in a plugin or theme update. To make this process easier and secure we have included a CSS customization area in the plugin.

The customization area is located under the "General Settings" page of the plugin (sidebar menu) and it points to the following CSS editor:

CSS editor

It can be as easy as using the sample styles provided below the CSS editor, the styles from the FAQ or any other style of your preference. In this case the custom CSS will be kept safe during the plugin updates.

Feedback about these features will be welcome, feel free to open a support ticket for any question.