The Contact Form Widget can be fully customized to best match your website's look and feel. To get started, open the Online Presence menu and select Website Widgets. Then, scroll down to Additional Widgets > Contact Form. 

Clicking Edit / View opens the Contact Form Widget Editor, where you can customize the widget's settings and content. When you are ready to embed the widget in your website, click Add To Website. 

Note: To learn more about your integration options, please visit our Website Integration forum.

Using the Contact Form Widget Editor

The left side of the Contact Form Widget Editor is where you control the different settings. As you make changes, you will see a preview of your Contact Form Widget on the right.

When you are finished making changes, clicking Done will automatically apply the changes to previously installed widgets. To add the widget to a new site, or to reinstall the widget, click Add To Website.

The following sections explain how to work with the Client Portal Widget Editor: 

• Layout and Profile Options
• Working with Form Fields
• Selecting Colors and Fonts

Layout and Profile Options

The settings in this section determine the size and general content of the widget. Available settings vary according to the layout you select.  

The settings are: 

• Layout: Select one of the four contact form layout options. If you want your widget to be a custom size, clear the Auto fit to content checkbox and set the width and height manually. The Labels layout options let you control where the field labels are displayed (inside, above, or to the left of the fields). 
• Scheduling: For convenience, these links let you quickly review and update the following settings:
  * Services
  * Business Hours & Availability
  * Advanced Options (online booking options)
• Profile: Click the link to update your image, business name or business description.
  
  
• Text: Type a customized invitation text.
• Schedule button: Update the label of the call-to-action button.

Working with Form Fields

This section of the Contact Form Widget Editor lets you control the fields that appear on your form. The First Name, Last Name, Email and Message fields are mandatory and cannot be removed.  Other fields may be removed by clicking the Delete icon. You can present the fields in any order of your choice by simple drag-and-drop.

Clicking the Edit icon displays additional options and settings for the field: 

The options are:

• Label: The text displayed for the field.
• Instructions: Directions or explanations for completing the field. 
• Watermark: Placeholder text that is displayed in the field before the client types input. 
• Required: Check the box to make the field mandatory.

The following example shows a watermark (in the Email field), instructions, a default value (in the Subject field) and several custom fields that were added to the form. 

To add a custom field, choose the field type from the Add field dropdown and click Add. 

Then, complete the settings for the field and click Save. 

Important: For more information about adding fields, refer to Working with Client Fields.

Selecting Colors and Fonts

To use a predefined theme for the Contact Form Widget, open the Theme list and select the theme that best matches the look and feel of your website.

 Once you have selected a theme, you can click Create new theme based on current to further customize the widget.

Clicking the link opens a more configurable color selection screen and gives you the option to change font style and size and customize the look and feel of different portions of the widget. You may name the theme as you wish.

Custom themes are added to your Theme list and can be used for other vCita widgets if desired.