Booking form custom style options

If you’d like to add some custom styles to the appointment booking form, you have three different options. All three options are available for every edition of Simply Schedule Appointments, from Basic to Business.

No code required: Style settings

Does thinking about wrangling with curly brackets make you break out in a cold sweat? No worries! In your WordPress admin, just navigate to Appointments > Settings > Styles.

Screen capture of the button to access the Style settings

The Style setting

There you’ll find a few easy options that help you quickly fit your booking form into any theme seamlessly.

Accent color
By default, Simply Schedule Appointments using a spring color as the accent color for the appointment booking form. You’ll see this spring green color on links, buttons, and form fields throughout the appointment booking process. Select a different accent color to customize the color used.
Background color
By default, Simply Schedule Appointments uses a white background. Change this setting to change the background color of the entire appointment booking form. This helpful if you’re using a theme that has a colored background, or if you’re placing the booking form into an area of the site with a colored background, to help the appointment booking form blend in.
Font Family
By default, Simply Schedule Appointments uses Google’s Roboto typeface. However, you can customize this by selecting a different typeface here. Default system fonts like Arial and Times are listed, as are all available Google Fonts.
Padding
Padding is the space around the appointment booking form. By default, we add 1rem of space around the form, but depending on your theme and where you’re placing the appointment booking form, you might want to adjust that to be larger or smaller.
Contrast mode
Contrast mode should be selected if you’ve set a dark color as your background color. This flips the default font color from black to white.

A little code required: Custom CSS Setting

The easy style settings above are enough for many (if not most) cases, but what if you want to go a little further? We’ve got you covered with the ability to add a bit of custom CSS right in the style settings form.

And we’ve started a collection of CSS snippets to help you accomplish commonly requested customizations in our documentation. You’ll find the area for entering custom CSS tucked away at the bottom of the style settings:

Screenshot of the custom CSS settings toggled to be visible

Custom CSS setting at the bottom of the settings form

Code Wizards: Add your own stylesheet

And then, finally, if you want to take your booking form customizations to the next level and have control over every last detail, you can drop a CSS file into your theme or child theme. We’ve got all the details in our developer documentation.