Articles in this section
Category / Section

Embedding Contact Us Form on External Site

Published:

The Contact Us web form allows you to embed the contact form and knowledge base in your company’s website or Help Center. The user can see the articles and create a ticket using the web form. The created tickets will be shown in both the agent and customer portals.

Note: The web form is fully brand-based, and you can create multiple web forms for a single brand.

Check out this video to learn more about web form.

How to add a new web form

To add a new web form, follow these steps:

  1. Open the Web Forms module.
  2. Click the Add Web Form button on the right side.

MicrosoftTeams-image (15).png

It has three sections,

  • Name and Brand section – Allows you to choose the web form’s name and brand.
  • Form Option – Allows you to choose the form type, such as a simple contact form or a simple contact form with ticket fields, as well as other properties, such as a file attachment, Google reCAPTCHA, etc.
  • Submit Button – Allows you to customize the submit button styles.
  • Advanced Customization – Allows you to add Custom CSS and Custom JS.

Form option

There are two types of form options.

  • Contact form – Shows basic fields (Name, Email, Phone Number, Subject, and Description)
  • Contact form with ticket fields – Shows the above basic fields, along with all custom and system fields that are mapped to the chosen brand.

Note: The Contact Us Form only displays the ticket fields that are set to be visible in the customer portal. Field dependency and field display conditions are also applicable.

  • Form Title – The text that appears as the form title.
  • Form Description – The text that appears as the form description.
  • Footer Message – The text that appears in the form footer.
  • Confirmation Message – The text is shown after the creation of a successful ticket.

image.png

MicrosoftTeams-image (12).png

Submit button customization

The submit button customization feature allows you to customize the following fields.

  • Name– The text that appears in the submit button.
  • Background Color – Allows you to choose the background color of the submit button.
  • Text Color – Allows you to choose the text color of the submit button.

image.png

  • The form height property allows you to set the web form’s height.
    Apart from this, there are a few other options you can enable/disable on the form:

image.png

  • You have an option to enable GDPR consent in forms.
  • You can allow users to attach files while submitting the form. When attachments are enabled, the end user can attach up to five files.
  • Enable Google reCAPTCHA to prevent spam.

Advanced customization

The advanced customization feature allows you to add Custom CSS and Custom JS, which help to overwrite the styles and script.

image.png

Knowledge base customization

The knowledge base customization feature has the following options,

  • Enable Knowledge Base - By enabling this feature, the knowledge base article will be displayed in the web form pop-up.
  • Header Text - Text that appears as the knowledge base title.
  • Category - Allows you to choose the categories to be listed in the web form pop-up.

MicrosoftTeams-image_18.png

Refer to this article to learn more details about enabling a knowledge base within the web form.

Embed code

The embed code option is shown in the dialog box after the web form has been successfully created. You can copy the code and embed it into your help center or website.

image.png

You can also find the embed code on the web form’s list page.

image.png

Ticket history properties

By using the ticket history properties, you can identify the site through which the user made contact. On the ticket history tab, you can find two properties.

  • Source: Form name will be displayed if you have created multiple web forms.
  • Source Site URL: If it is possible to fetch, it will fetch the web page URL where the web form is hosted.

Site_URL.png

Permission for creating a web form

For creating a new web form, you should enable the Manage settings permission.

image.png

Was this article useful?
Like
Dislike
Help us improve this page
Please provide feedback or comments
Comments (0)
Please  to leave a comment
Access denied
Access denied