> ## Knowledge Base Index
> Fetch the complete knowledge base index at: https://support.uplisting.io/sitemap.xml
> Use this file to discover available pages before exploring further.
> Pure-Markdown content can be obtained by appending a '.md' suffix to the content URLs listed in the sitemap (without the trailing slash).

# Widgets: Contact Forms

# Widgets: Contact Forms

**Widget Categories:** Business

Use the Contact Form widget to add a web form to your site. The Contact Form widget allows you\
to provide visitors with a variety of input areas; specific text, drop-down, radio buttons, check boxes,\
date, time, email, and phone numbers. You can use the form for email newsletter opt-ins, customer\
questions, or simply to gather feedback from your site visitors.

![](https://files.readme.io/2a4c878b43f1a5e8628a2a58961b431a6bf0be8e9fd9ff461edf4322d75ca515-image.png)

> **📘**
> WARNING\
> We do not recommend duplicating contact forms, as this typically results in issues in\
> the duplicated contact form.

For information on adding widgets, see [*Add Widgets*](https://uplisting.crisp.help/en/article/widgets-library-and-overview-1918cmc/)

> **📘**
> TIP\
> Fore more information on widgets and the widgets library, see [Widgets: Library and   Overview](https://uplisting.crisp.help/en/article/widgets-library-and-overview-1918cmc/)

## Setting up and Configuring Forms

### Content Editor: Configuring the Form

To access the content editor, right-click the widget and select *Edit Content*. Or, if you are in flex mode\
or Editor 2.0, the option to access the content editor is available in the floating menu. Click the element\
to open the floating menu, then click the option for the content editor.

### Tabs in the Content Area

#### Form Items (On-Site Form Components)

##### Contact form Fields

Modify the existing fields by clicking the name of the field in the list.

To add new fields, click *Add Field.*

After clicking an existing field or adding a new field, additional settings will appear. Many settings will\
depend on the Field type selected.

> **📘**
> NOTE\
> On radio buttons and check boxes, you can add images to display for the options.\
> The images will not appear in the email received from the form submissions, but the\
> selected label appears (even if hidden on the site).

### Contact Field Settings and Considerations

* Most field types will have these options:
  * *Required field*. If a required field is left blank, upon trying to submit the form, a red box will appear\
    around it. While there isn't currently an indicator added (for example, an asterisk, one can be\
    manually added to the Field label or Placeholder.
  * Start new line at this field.
  * *Field size.* Customize the width of the field
* *On radio buttons* and *check boxes*, you can add images to display for the options. The images will\
  not appear in the email received from the form submissions, but the selected label appears (even if\
  hidden on the site).
* *Time field:* the Use 24-hour clock toggle only affects the time displayed in submissions; the time\
  picker format site visitors see will be dependent on their browser settings.
* **File attachment field:**
  * The file name must not include a space when uploaded.
  * The file size limit for attachments is 10MB.
  * Only one file can be uploaded per file attachment field (if multiple files will need to be uploaded, a\
    field will need to be included for each).
  * The following file formats are supported: .pdf, .xls, .xlsx, .doc, .docx, .zip, .ppt, .pptx, .psd, .txt, .xml, .mp3, .ttf, .otf, .woff, .eot, .svg, .odt,\
    .ott, .js, .css, .png, .jpg, .gif, .jpeg, .rar in addition to all video file formats.
  * Submitted file attachments expire after 90 days.
  * Files are not added to the Media Manager.
* *Phone number field:* The Phone number field will check for validation to ensure formatting conditions\
  are met, if they are not, an error with a message will appear. The conditions are at least one number\
  and no invalid characters. In addition to numbers, valid characters are spaces, plus signs (+), dashes\
  (-), and periods (.).

### Submit Button

Customize the text you want to appear on the *Submit button*.

### reCAPTCHA

By default, reCAPTCHA validation is added to new forms. This protects your form from spammers and\
speeds up the form submission process for site visitors.

Select a reCAPTCHA position.

Select to display the reCAPTCHA as an icon or text in the form.

> **📘**
> NOTE\
> reCAPTCHA cannot be disabled.

### Form title

Type a Form title. To hide the form title, click the **eye** icon.

> **📘**
> NOTE\
> If you change the title of the form, the title only changes after a new response is\
> submitted. To change the form name quickly, we suggest you submit a test response\
> and wait a few minutes for the form to update.

### Submissions (Options and settings for after a form is submitted)

#### New submission notification

To set the email address and subject for receiving form responses, click **New Submission notification.**

Make sure to enter the email address in the Form submissions will be sent to field in order to have a\
copy of the information submitted.

If the Form submissions will be sent to is empty, the primary email in the content library will be used. If\
no such email exists, the account owner will be used as the default submission recipient. All responses\
go to the form responses page.

#### Actions after submission

Click **Actions after submission** to set up the following:

* *Thank you and Error messages.* Use the Rich Text Editor to add color, emphasis (bold, italics and\
  underline), and bullets to add text in the boxes.
* *Redirect settings.* You can redirect to a page on your website or an external website.
* *Email settings:* an auto-reply, by default, will be sent to the form submitter along with a copy of their\
  submission (as long as their provided email address is valid). When toggled on, there are additional\
  settings listed below.
* *Auto-reply to form submitter*. By default, an auto-reply will be sent to the form submitter (as long\
  as their provided email address is valid). To turn this off, toggle the **Auto-reply to form submitter**
  option off.
* *Form name*. You can also set the Form name (the name you enter here will show in the sent\
  email’s “From” field). If the Auto-Reply setting has been toggled off, this setting will not be available.
* *Email subject line.* If the Auto-Reply setting has been toggled off, this setting will not be available.
* *Email message.* If the Auto-Reply setting has been toggled off, this setting will not be available.
* *Include a copy of submitter’s form response in the email.* This is on by default. Uncheck box to\
  disable it. If the Auto-Reply setting has been toggled off, this setting will not be available.

### Tracking

To add tracking code to your form, click **Tracking**, and paste conversion code or AdWords in the field\
provided.

### Integrations tab (third-party offerings)

On the Integration tab, send successful submission data to a third-party service. For more information,\
see the section below, **Contact Form Integrations (Additional Configuration Options)**

## Contact Form Integrations (Additional Configuration Options)

To extend the reach of your Contact Form, integrate it with various third-party solutions.

To add an integration, in the content area, click the **Integrations** tab.

> **📘**
> NOTE\
> We no longer offer Mailchimp or Constant Contact as contact form integrations. If you\
> previously had them installed, they will still be available for your site.

### Google Sheets Integration

Use the Google Sheets integration to instantly add contact form submission data to a spreadsheet in\
Google Sheets. All contact fields in the form will be populated into the spreadsheet, including a time\
stamp of when the form was submitted.

1. Click Google Sheets, and click **Sign in with Google.**
2. Click **Allow** to grant permissions to connect to your Google account. If your computer is connected\
   to multiple Google accounts, select the account you would like to connect to this form.
3. Select if you want to add data to an existing spreadsheet or to a new one.
4. Select the spreadsheet you would like to submit the form data to. You can select the spreadsheet\
   from a list, or use the search bar to find a specific sheet.

> **📘 NOTE**
> * If you have multiple forms on the site you can connect each one to a different\
> spreadsheet, including spreadsheets in different Google accounts.
> * You can connect a couple of forms to the same spreadsheet. In this case, make sure\
> that the fields and order in the form are identical to fit the information submitted.
> * Submitting form data to a Google spreadsheet does not prevent you from downloading the data as a .csv file, or from receiving form submission emails.

## Webhooks Integrations

Numerous online and cloud services offer integrations through a path called Webhooks. Webhooks
send notifications to a specific web address called the endpoint URL. You can connect the contact form
to send an event when the contact form is submitted.

To connect the contact form to another service using Webhooks, you need to create a custom endpoint
URL with your desired service and paste it into the Webhooks integration field in the contact form. Once
you add a Webhook URL, and the form is submitted, a POST request is sent to the endpoint with the
data in the body in JSON format. The following is an example of the JSON data:

The following is an example of the JSON data:

![](https://files.readme.io/13fe591988ed1529fe28a975bca7f806c5569537d490e22b4748c53e0ae1c774-image.png)

350

> **📘 NOTE**
> Submission Date and Form Title will always be provisioned. The other fields
> ( field_name : value) are based on the fields configured in the form.
> All field information is set as a string and contained in quotation marks. For example, 7 is sent as "7".

## Create an Endpoint URL

Endpoints are set up on third-party services (for example, Zapier or Slack), or another server that you
control. These endpoints are specifically set up to receive notifications from the Webhook.

## Integration Ideas

• *Slack*. A robust messaging app that you can connect to receive notifications as soon as form data is
submitted.
•*Custom Integration*. Create your own custom Webhooks to integrate with the contact form. For
example, save submissions into a database or connect to custom apps or third-party services.

## Example Webhooks/Endpoint URL Setup on Slack

1. In the Slack app, open the main account drop-down, then *click Apps & Integrations*.
2. The slack website opens. In the upper-right corner, click *Build*.
3. Click *Make a Custom Integration*
4. Select *Incoming Webhooks.*
5. *Select an existing channel*, or *create a new channel* where your messages will post to.
6. Copy your Webhooks URL.
7. Adjust the settings and options to your liking, then click *Save Settings.*
8. Open the Content Form editor and paste your Webhooks URL into Webhooks field.
9. Click *Done*. Preview your site and submit the contact form to test the integration.

You will receive a message on Slack each time your contact form is submitted.

## HubSpot (App)

The Hubspot connector is designed to seamlessly integrate your web design projects with Hubspot's
powerful CRM capabilities, our connector is the bridge between your website activities and customer
relationship management.

Note that Hubspot is an app and will need to be managed through the app store after installation.

## MailChimp (App)

This connector is designed to integrate your web design projects with Mailchimp's powerful marketing
automation capabilities, forming a vital link between your website activities and email marketing strategies.

Note that MailChimp is an app and will need to be managed through the app store after installation.

> **📘 NOTE**
> We no longer offer Mailchimp or Constant Contact as contact form integrations. If you
> previously had them installed, they will still be available for your site.

## ActiveCampaign (an App)

The ActiveCampaign connector is crafted to integrate your web design projects with ActiveCampaign's
robust email marketing and automation capabilities, establishing a crucial link between your website
activities and sophisticated marketing strategies.

Note that ActiveCampaign is an app and will need to be managed through the app store after installation.

## Automation Builder by Albato (an App)

The Automation Builder is your gateway to seamless integration between your Website Builder and a
myriad of marketing and CRM platforms. This powerful tool allows for bidirectional data flow, enabling
not just data transfer from your Website Builder to platforms like MailChimp and ActiveCampaign but
also vice versa. It's designed to enhance flexibility and efficiency, simplifying complex workflows across
various services.

Note that Automation Builder is an app and will need to be managed through the app store after
installation.

## Design Editor: Designing the Form

To access the design editor, right-click the element, and click *Edit Design*. Or if you are in flex mode
or Editor 2.0, select *Edit Design* from the floating menu to open the design panel. Click the element\* to
open the floating menu, then click the option to edit design.

## Layout

On the Layout tab:
• Click the  *layout*  icon to select a layout design for the contact form.
• To change the form alignment, click *Left* or *Right*.

## Item

On the Item tab:
• To make edits to the field style and field text, click *Fields*.
• To edit the button style and button text, click *Button*. To revert back to the theme style, click *Revert
to theme button*.

## Frame

On the Frame tab:
• To make edits to the frame style, click *Frame Style*. You can change the background by adding a
color or image.
• To change the text style of the title, click *Form Title*.
• To change the text style of the submission notification, click *Submission Message*.

For information about design options that are not specific to this widget (for example, layout, style, or
spacing), see [Widget Design](https://uplisting.crisp.help/en/article/edit-widget-content-and-design-zxjgfj/)

## Add Connected Data (Dynamic Content)

You can connect the email address to the content library, or to an email field in collections. Additionally,
you can add collection fields such as apartment ID or team member name to the email subject or as
external fields sent in the form. Those additional fields will be available not just in the form email but
also when accessing the form responses data from site overview tab in the Site Dashboard.

> **📘 NOTE**
> Only possible on dynamic pages.

To add connected data to a contact form:

1. Right-click the widget, and *click Connect to Data*.

   ![](https://files.readme.io/81d817cc2541a0c915cbd9d695fa3d5a518394ac5fe1b8724c1a5e6407fa0ca0-image.png)
2. *Select the email address* from the Connect Email to drop down.
3. (Optional) *Select additional fields* you want to include in the contact form email.
4. (Optional) Click *Edit Content* and make any necessary changes to the content. All changes will be
   synced with your content library.
5. Click *Done*