Forms

Forms allow you to acquire leads, collect the customer's requests, etc...

There are 3 forms created by default:

1. callback - usable for collecting callback requests on your site.

2. email - useful for the direct email option.

3. offline - special form to display in the LiveChat offline mode.

Here is what these forms look like by default

You can modify existing forms, modify form fields, buttons, remove forms or create new forms.

Creating new form

To create a new form please navigate to the Settings / Forms page in the left navigation and click the Add new form button at the right top corner of the page.

You will see a creation form dialog

AnyChat settings - form dialog

General settings

In this section, you will be able to enter the general settings of your form

• Form ID - unique id of the form. This ID is required by our system. Please use lowercase alpha-numeric symbols only (ex: myform123).

• Header layout - layout of the form header. Can be No header, Text only, Text with icon left, Text with icon center.

• Form header - the text of the form header. Applicable only if Header layout one of Text only, Text with icon left, Text with icon center.

• Header icon type - the type of the header icon. Applicable only if Header layout is Text with icon left or Text with icon center.

• Header icon - the header icon or uploaded image. Applicable only if Header layout is Text with icon left or Text with icon center.

• Success content - this content will be shown if the form is submitted successfully.

• Fail content - this content will be shown if the form submission is failed.

Button icon

In this section, you can set up the icon which will replace the main button icon when the form is opened. You can use the built-in SVG icon or uploaded image here.

Actions

The content of this tab depends on your current integrations configured and enabled in the Settings / Integration section.

The full set of options look like this

AnyChat settings - form setings

Send email on success

Using this option you can receive emails about form submissions.

To enable this option follow these steps:

1. Enable Send email on success option.

2. Enter the email addresses where you want to receive emails. Each email address is on a new line.

3. Select the email template which will be used to compose an email. You can manage email templates in the Settings / Email settings section. Please read the docs article about email settings.

4. Enter email subject.

Send SMS on success

Please note: this functionality requires an integrated Twilio account. You can find more information about Twilio integration in this article.

You can receive an SMS notification about a form submission.

Follow these steps to enable this option:

1. Enable Send SMS on success option.

2. Enter a phone number where you want to receive SMS notifications.

3. Enter SMS text. You can use the ID of the form field as a variable. For example: {phone} will be replaced with the Phone field value. Also, you can use built-in variables: {site} token will be replaced to site widget, {referer} token will be replaced to page URL which used for the form submission.

Send Telegram message

Please note: this functionality requires configured Telegram integration. You can read an article about Telegram integration.

Follow these steps to enable this option:

1. Enable Send Telegram message option.

2. Enter Telegram chat ID. Messages will be received to this chat ID. To know your chatID please write to bot t.me/userinfobot. You can set a few chat IDs comma-separated. Please note that each chatID must be subscribed to your bot to receive messages from the bot. To subscribe please find your bot in telegram and write /start to the bot.

3. Enter Telegram notification. You can use the ID of the form field as a variable. For example: {phone} will be replaced with the Phone field value. Also, you can use built-in variables: {site} token will be replaced to site widget, {referer} token will be replaced to page URL which used for the form submission.

Send WebPush message on success

Please note: this functionality requires a subscription to web push notifications on the AnyChat dashboard. You can find more information about web push subscription in this article.

Follow these steps to enable this option:

1. Enable Send WebPush message on success option.

2. Enter web push notification title. You can use the ID of the field as a variable. For example: {phone} will be replaced with the Phone field value. Also, you can use built-in variables: {site} token will be replaced to site widget, {referer} token will be replaced to page URL which used for callback request.

3. Enter web push notification message. You can use the ID of the field as a variable. For example: {phone} will be replaced with the Phone field value. Also, you can use built-in variables: {site} token will be replaced to site widget, {referer} token will be replaced to page URL which used for callback request.

Create PerfexCRM lead on success

Please note: this functionality requires configured PerfexCRM integration and at least one field added to the form. You can find more information about PerfexCRM integration in this article.

Follow these steps to enable this option:

1. Enable Create PerfexCRM lead on success option.

2. Enter Source ID. You can get source ID from Setup / Leads/ Sources in your Perfex CRM dashboard.

3. Enter Status ID. You can get status ID from Setup / Leads / Statuses in your Perfex CRM dashboard.

4. Now you need to assign current form fields to PerfexCRM internal fields.

Webhook on success

This option allows you to send form data to the external URL. The data will be sent via POST method using this format:

{
    '{phone}' => "[phone]"
    '{name}' => "John Doe"
    '{gdpr}' => 1
    '{site}' => "domain.com"
    '{referer}' => "https://domain.com/page-name.html"
    '{date}' => "2022-02-02 17:35:49"
}

Real POST data can differ depending on the current form fields.

Advanced options

In the Advanced options tab, you can set form width (for desktop) in pixels and timeout for automatic form close in milliseconds.

After the form is saved you will see the empty form like this

AnyChat settings - newly created form

Now it's time to set form fields and buttons.

Form fields

To create a new field, you need to click Add New Field button if you have no fields yet in this form or click the menu button and select Add field

AnyChat settings - newly created form

You will see the Field dialog

AnyChat settings - form field dialog

There are the field options:

• Field ID - the internal ID of the field. It should be unique for the particular form. Then you can use this ID as a variable in the email templates and other places where it is allowed.

• Required - should this field be required or not.

• Field type - the type of the field. Can be one of these values

  • Text field

  • Phone field

  • Email field

  • Textarea

  • Checkbox

  • Select

• Label - the label for the field.

• Placeholder - the placeholder of the field.

• Value - the default value of the field.

• Values - list for select values. Each value on the new line. Applicable for select field type only.

• Validation - validation rule for the field. Can be:

  • None - no validation

  • Email - check for the valid email address

  • Enable only letters and spaces

  • Enable only numbers and spaces

  • Enable only letters, numbers and spaces

  • Advanced (regular expression) - check if the entered value passes the regular expression.

    • Regular expression

• Include to report - include this field in the Inbox report table. You can find more information in this article.

• Report column label - the name of the column in the Inbox report table. You can find more information in this article.

Once you created all the form fields you can start to configure form buttons.

Form buttons

To create a new field, you need to click Add New Button button if you have no fields yet in this form or click the menu button and select Add button

AnyChat settings - newly created form

You will see the form button dialog

AnyChat settings - form button dialog

Let's see the options:

• Button ID - internal unique button ID.

• Button type - the type of the button. Can be:

  • Submit - button for submitting the form

  • Link - custom link to another page, site, etc...

• Label - the text label of the button.

• URL - the URL of the link button. Applicable to link buttons only.

• CSS class - you can add a custom CSS class to the button using this field.