Customizing the Design of Amelia Booking Forms

The new booking form is here and with it, a new Customize section!

The design of Amelia’s front-end forms and inputs relies on advanced color and style settings. Through every step, customizing the design of your booking forms will allow you to adjust Amelia to match any corporate branding, color styles, and WordPress themes.

Please note:
  • Once you customize the design of the forms and you save the changes, it is recommended to delete the cache on your website.
  • The Step-By-Step booking form v2 is still in the Beta version, so the Customize menu currently offers both the old customize section and the new customize section.
  • As we modernize the look of other booking forms, those will be added to the new Customize section, so at the moment, only the Step-By-Step booking form will be available, while other forms are still customizable through the old Customize section.

Video version

Accessing the Customize section is done through the WordPress menu – Amelia » Customize.

customize-selection

Select the “Step-by-Step Booking Form 2.0” by clicking on the “Continue” button below the name of the form and access the new Customize section. There, you will see a WYSIWYG (What-You-See-Is-What-You-Get) style customizer.

If you have purchased a Pro or Developer license, you will see a selectbox on the left above the form, where you can select whether you’re editing the form for Services or for Packages.

Please note that the Packages feature is not included in the Basic License plan of Amelia.

customize-landing

Everything needed to customize the form is located in the right-hand side menu.

The menu is divided into three parts:

  1. The Settings (where you configure Global Fonts and Colors)
  2. Section (where, currently, you can only configure the sidebar visibility and its labels)
  3. The Steps (where you can individually configure the colors, labels, order of fields, translations, and if some fields will be mandatory or not).

For some elements, you can choose whether they will be shown on the front-end or not, and for some selections like Locations or Employees, you can choose whether they will be mandatory in the booking process or not. All changes are visible in real-time, so you will see changes in the preview as soon as they’re made.

On each step, in the bottom right corner of the side menu, you will be able to access the colors, and see which global colors affect which section of the selected step. For example, in the “Services” step:

services-step-colors

Global Settings and Form Colors

In the Global Settings of the Customize section, you will be able to choose the font you’ll use on the form (you can select one of the default ones, or use your own custom font) and modify the colors which are applied throughout the form.

Available Fonts:

  • Roboto
  • Lato
  • Merriweather
  • Montserrat
  • Mulish
  • Nunito
  • Asap Condensed
  • Open Sans
  • Barlow
  • Oswald
  • Bitter
  • Poppins
  • Carme

Colors

Here, you can define the primary and state colors, the color of the sidebar, the content, input fields, dropdowns, calendar, and buttons within the form.

As mentioned before, if you don’t like some colors when you move through the steps, remember to click on the “Change Colors” button in the bottom right corner of the side menu.

customize-global-colors

Primary and State Colors

This menu consists of “Primary”, “Success”, “Warning”, and “Error” colors which can be found throughout the form.

In this step, the “Primary” color defines the current step circle in the sidebar, the category you’re hovering over when you click on the “Service” dropdown, the color of the service’s price, and the color of the price for each employee in the “Employees” dropdown (don’t forget that the price for Services can be different per employee).

The “Success” color defines the employee’s thumbnail color (unless the employee has a profile photo – in that case, the photo will be displayed in the “Employees” dropdown).

Primary-colors-one
primary-success

The “Error” color (in this step) is used for the mandatory field’s asterisk ( * ), and for a warning that’s displayed if the customer tries to continue without selecting the mandatory field (Service, in this example).

Error-primary

The “Warning” color can’t be displayed in this step, but it is covered here.

The default colors in the “Primary and state colors” section are:

  • Primary: rgba(18, 70, 214, 1)
  • Success: rgba(1, 151, 25, 1)
  • Warning: rgba(204, 162, 12, 1)
  • Error: rgba(180, 25, 15, 1)

Sidebar and Content colors

The “Sidebar” and the “Content” colors are pretty basic. Here you define the background color of the sidebar and the main content, along with text colors within the sidebar, the main content, and the heading text.

Please note that the background colors of the sidebar steps are a shade of the sidebar background color.

sidebar-colors
main-content-colors

The default colors in the “Sidebar” and the “Content” sections are:

  • Sidebar background: rgba(23, 41, 90, 1)
  • Sidebar text: rgba(255, 255, 255, 1)
  • Main content background: rgba(255, 255, 255, 1)
  • Main content heading text: rgba(51, 67, 76, 1)
  • Main content text: rgba(26, 44, 55, 1)

Input fields colors

This defines the dropdowns’ colors, their border colors, the placeholder text colors, and the selected input colors.

Input-fields-colors

The default colors in the “Input fields section are:

  • Background: rgba(255, 255, 255, 1)
  • Border: rgba(209, 213, 215, 1)
  • Text: rgba(26, 44, 55, 1)
  • Placeholder: rgba(128, 138, 144, 1)

Dropdowns colors

As simple as it sounds, this section allows you to define the background, border, and text colors of all your dropdown selections.

Step-By-Step-Package-selected

The default colors in the “Input fields section are:

  • Background: rgba(255, 255, 255, 1)
  • Border: rgba(255, 255, 255, 1)
  • Text: rgba(14, 25, 32, 1)

Calendar colors

Since the calendar view can’t be displayed in the first step, we’ll back away from the “Colors” section in the “General Settings”, and we’ll move to “Steps” (we’ll access the “Date & Time” step).

Hint: You can navigate back to the right sidebar’s main menu by clicking on the < symbol on top of the sidebar, next to the section’s name.

access-date-time-step

The default view of the “Date & Time” step shows you the calendar and available options for this step. In the screenshot below, you can see that the “Success” color from “Primary and state colors” is applied to the background of the sidebar circle, showing that all selections and inputs of that step have been met.

As mentioned before, in the bottom right of the right side menu, you can access the color settings to see the colors that apply to the step you’re on (Date & Time).

Calendar-step-default

When you click on the “Change colors” button, you’ll notice that the same menu from General Settings is opened. Here, you will be able to navigate to the “Calendar” section, and configure the colors of the calendar.

calendar-colors

Changing the colors of the “Calendar” step allows you to modify the calendar cell colors (these colors apply both to the calendar and the time slots, and therefore, the available time slots are not visible in the “Customize” section preview).

  • Init Cell is the background and the border color of available cells. This color also applies to the “Current time zone” field which is located above the calendar.
  • Init Cell Text configures the text color of available dates and the “Current time zone” field.
  • Cell Selected Background defines the background of a selected cell.
  • Cell Selected Text defines the text color of a selected cell.
  • Cell Disabled Background applies to non-available dates (days off, fully booked days).
  • Cell Disabled Text configures the text color within disabled cells.

The default colors in the “Calendar section are:

  • Init Cell: rgba(38, 92, 242, 1)
  • Init Cell Text: rgba(18, 70, 214, 1)
  • Cell Selected Background: rgba(18, 70, 214, 1)
  • Cell Selected Text: rgba(255, 255, 255, 1)
  • Cell Disabled Background: rgba(180, 25, 15, 0.05)
  • Cell Disabled Text: rgba(140, 149, 154, 1)

Buttons colors

In order to see what “Buttons Colors” do, we’ll again move back to the main menu of the right side menu and access the “Services” step.

services-step

To properly configure button colors, in the “Services” step, select one of the sub-steps. In this example, we’ve chosen the “Bringing anyone with you” sub-step.

bringing-anyone-customize

The form preview will automatically expand the “Bringing anyone with you” section where you’ll be able to configure options, labels, and colors. Remember that you can access the colors within each step by clicking on the “Change Colors” button in the bottom right of the right side menu.

When you access the colors, navigate to the “Buttons” section. In there, you’ll be able to configure the following colors:

  • Primary background applies to all primary buttons (“Continue” and “Yes” buttons in all steps).
  • Primary text configures the text color within primary buttons.
  • Secondary background modifies the background color of all secondary buttons (“No” buttons in all steps).
  • Secondary text applies to the text of secondary buttons.
Please note: As you can see in the screenshot below, the secondary button’s background color currently applies to the secondary text. This is not a bug, but instead an intentional modification due to the style of the secondary button. We’ll cover it below.
primary-button-colors

In order to modify the secondary button colors, and to understand why the colors are switching between background and text colors, we’ll need to go back a step.

Remember, we’re configuring the sub-step “Bringing anyone with you” within the “Services” step, so while you’re in the Colors section of the right side menu, just click on the “<” button next to “Colors”, and you’ll be taken back to the “Bringing Anyone With You” customization menu.

In there, click on “Options”.

bringing-options

In here, you can see why the colors of the secondary button are reverted. The button’s type is set to “Text” by default.

secondary-button-type

So, in order for the secondary button colors to apply to the background and the text colors from the previous step, change the button’s type to “filled” and you’ll see the colors from the previous step.

secondary-filled

The “plain” style of the button will show the button with a transparent background (so the “Main content background” will be the background of the “plain” button, while the “Secondary background” color of the button will be applied to the border, and the text of the secondary button.

secondary-plain

The default colors in the “Buttons section are:

  • Primary background: rgba(38, 92, 242, 1)
  • Primary text: rgba(255, 255, 255, 1)
  • Secondary background: rgba(26, 44, 55, 1)
  • Secondary text: rgba(255, 255, 255, 1)

We “owe” you the “Warning” color from the “Primary and state colors” section. In order to see the warning color, access the main screen of the right side menu and access the “Recurring Summary” section.

You’ll be able to access the colors using the “Change colors” button in the bottom right. Here you can see that the warning color applies to the messages that require the customer’s attention.

Click here to go back to the “Primary and State” section.

warning-color

As you already noticed, the colors within forms apply to a lot of places. We don’t want you to get lost in our documentation, so we’ve covered only a few examples where you can see the colors you’ve applied, but please feel free to play around with the form, and check multiple steps to see which color applies where.

Section

At this stage, the Section customization setting allows you to hide the booking form’s left-hand sidebar:

hide-sidebar

And it also allows you to change the labels for “+more” and “Get in Touch”.

customize-more-git

The “+more” string is only shown when a customer purchases a Package after more than 3 appointments have been booked.

Steps and Options

Every step in the Step-By-Step booking form can be individually configured through the Customize section. The options available are:

  • Changing the order within the “Services” and “Your Information” steps
  • Configuring the fields so they are mandatory or not
  • Choosing the button types
  • Modifying the default labels for all steps
  • Accessing sub-steps and configuring their options and labels (where applicable)
Steps-and-options
We won’t be covering each step, since the options within them are similar.

Services Step

When you access the Services” step, you will see “Order”, “Options”, and “Labels” settings, and below that you’ll be able to access the sub-steps “Bringing anyone with you” and “Packages” (please remember that the Packages feature is not included in the Basic License plan of Amelia).

In the “Order” section, you will be able to change the order of fields (by default, the “Service” dropdown is the first field, “Employees” is the second field, and the “Locations” is the third field).

You can reorder the fields with a simple drag-and-drop function.

services-order-drag-drop

The “Options” section allows you to change the “Continue” button’s style, hide the “Employees” and the “Locations” drop-downs, and make them mandatory.

If a field is set to be mandatory, you will not be able to hide it.

services-options

Within the “Labels” settings of each step, you will be able to change all default labels in that step, along with providing translations for those labels for other languages you added to Amelia.

The offered language labels will be pulled from Amelia’s General Settings, so if you only add the German language, only that language will appear when you access each label.

The following screenshot will give you an idea of how editing labels works throughout the new Customize section.

The title of each section is set above the label fields, so in the example below, the “Service Selection” is the title of the label you’re modifying. If the field next to the “Default Label” entry box is empty, the title of the label will be applied as the label (in this case – “Service Selection”).

labels-default

We’ll modify some labels here, so you see how they are applied. Whenever you change a label, you’ll see it being modified in real-time in the preview window on the left.

modified-labels

Please remember that the “Default label” applies to the default language of WordPress. Amelia picks up that language if there’s a translation for that language in our plugin (you can read more about languages in Amelia and see the list of translated languages here), so if you want to change the default label, it won’t always be in English, but in your language.

If your language is not translated in Amelia, you can continue changing the strings to your language, so your front-end customers see everything in your language. The same applies to additional languages (German in this case) – since German translation exists in Amelia, if we leave the German labels empty, the default strings will be pulled from the translation file, but you can always override that with the labels in the Customize section.

As you can see in the screenshot above, the German strings are currently not being displayed. This is because German is an additional language added to Amelia’s General Settings. If it was set to be the default language, we would’ve added English as the additional language, and the entire form would be in German.

In order to see the modified German labels, we need to change the language in the “Language” dropdown above the form preview.

Every label seen in every step can be changed, you just need to go through the steps and access the “Labels” section in order to do that.

language-labels

Please note that the form will not be automatically displayed in the language you’ve chosen from the “Language” dropdown even if Amelia is completely translated into German (in this case). This is why the rest of the form preview is still in English. On the front-end, default German strings would be displayed where you see English strings in the screenshot above and the ones we modified here would override the default German strings Amelia has.

We’re aware that in some languages, the “Continue” button should have a different label depending on the step, so we’ve included that option as well!

From now on, you will be able to change the label of every button in every step.

Package Customization

Please note that the Packages feature is not included in the Basic License plan of Amelia.

In order to change the appearance, labels, and options for the Packages form, you’ll first need to change the steps from “Service” to “Package” in the top left above the form preview.

On the right side menu, you’ll notice that the steps are a bit different than the steps when you’re customizing the Service steps.

package-customization

Remember the screenshot from the Step-By-Step Booking Form 2.0 documentation page, where after selecting the service the form mentions there are packages with the selected service included?

In order to change the label of that message, access the “Package” form above the form preview and access the “Package” step / Labels / Sub Step Title.

package-offer

The flow is exactly the same – you can navigate through the side menu and adjust the colors, options, buttons, and the order of the “Your Information” section.

Simply go through each section and check if the global colors are what you want them to be in the Package purchase form.