Documentation

BookWell Documentation

Find guides, tutorials, and answers to help you install, configure, and manage BookWell.

Booking Form Appearance

The Booking Form Appearance tab provides comprehensive styling tools to customize the colors, font styles, sizes, and layout parameters of the front-end scheduling wizard to match your website’s design.

Step 1 — Open the Appearance Designer

Navigate to: BookWellNow → Settings and select the Booking Form Appearance tab.

[screenshot]

Step 2 — Customize Brand Palette

Set custom colors for active items, buttons, and titles using the color picker inputs:

  • Main Color: Sets the primary color for buttons, active state indicators, and icons.
  • Title Color: Controls the color of step headings.
  • Detail Text Color: Controls sub-headings and supporting descriptions.
  • Sidebar Title / Text Color: Styles the navigation sidebar.
  • Category / Price Badge / Button Text Color: Adjusts specific checkout highlights.

Step 3 — Select Google Fonts

Customize the typography used on the front-end wizard:

  • Select a font from the **Google Font Family** dropdown list (e.g. “Poppins”, “Inter”, “Montserrat”).
  • This setting applies only to the front-end booking form, keeping it independent from your WordPress admin panel font style.

Step 4 — Fine-Tune Font Sizes

Use the slider controls or input boxes to adjust element font sizes in pixels (px):

  1. Title Font Size: Sets the size of standard step labels (default: 14px).
  2. Detail Font Size: Sets the size of supporting texts (default: 13px).
  3. Section Title Font Size: Sets the size of step titles (e.g. “Service”, default: 18px).
  4. Sidebar / Category / Button Sizes: Fine-tune visual proportions.

Step 5 — Revert Changes (Optional)

If you want to discard your custom styling and return to the plugin’s default design, simply click the Reset Default Color button at the top of the form.

💡 Styling Tip: Set the **Main Color** to match your website’s primary branding color. This integrates the booking form widget seamlessly into your pages!

Need Help?

Can't find what you're looking for? Our support team is ready to help.

Was this article helpful to you?

How can we help?