Skip to main content

Contact Form

Catherine avatar
Written by Catherine
Updated over a week ago

Enable, customize, and embed a contact form directly into your website or customer portal. All submitted entries are automatically added as leads in your system.

The contact form is part of the Customer Portal option, but it doesn't necessarily require the Customer Portal add-on to be enabled in order to use it.

Follow these steps to enable and customize your form.

Step 1. Enable the Contact Form Add-on

Navigate to the Add-ons section, look for the 'Contact Form' addon, you can find it directly from the add-on list

OR you can open the Customer Portal add-on and look for the Contact power up.

Step 2: Customize your contact form

If you click on the Contact Form label, you’ll be taken to the Manage page.

On this page, a set of default form fields is already included. Some fields are required by default, while others are optional.

What You Can Customize:

  1. Header Text

    • Update the message at the top of the form

  2. Font Size

    • You can change the size of the header text. It only affects the header text but not the other content of the form.

  3. Submit Button Color

    • Change the Submit button color to match you branch.

  4. Form Fields

    • A variety of fields are included by default, such as:

      • First Name

      • Last Name

      • Email

      • Phone

      • Address, City, State, Zip

      • Message (e.g., How can we help?)

    • Toggle Required: Decide which fields are mandatory by enabling or disabling the Required switch next to each field.

    • Show/Hide Consent Box: For phone contact, you can show a consent message to comply with communication laws.

  5. Add Custom Questions

    • Click + Add Custom Question to include a personalized fields.

    • Field Label

    • Field Type - you can choose from the available field type

      • Checkboxes: Allows customer to select multiple options

      • Short Answer: Ideal for brief responses such as names, phone numbers, or short phrases.

      • Long Answer: Suitable for more detailed responses, like special instructions or comments.

      • Dropdown: Allows customer to select a single selection from the dropdown options

    • Options

      ( Please note that you can only add a maximum of 5 custom question to your form )

Use the Preview button to see how your form will appear to users.

Click Update Form to save your changes.

Embed Contact Form

Click the 'Show Code' button to view the available options for embedding your contact form on your website.

Embed code for:

Widget

Copy the following code and add just before the closing<body>tag.

Note: Your website installation code works for both online booking and customer portal add-ons. There is no need to install it twice. Only embed this code if you are not using the customer portal embed.

Webpage

Switch to the 'Webpage' tab and copy the code.

Social

Switch to the Socials tab and copy the URL link.

Reports > Inbound Leads

  • All submitted forms will be added as leads.

  • All leads can be found under Reports > Inbound Leads.

  • Leads from the contact form will have 'Portal / Contact Us' as the lead source.

Did this answer your question?