Creating Web Forms - Zoho Desk Knowledgebase

Creating Feedback Widget and Advanced Web Form

Web Forms provide a structured way to capture customer inputs from a website or application and convert them into tickets. They can be used for quick feedback and simple requests or for detailed ticket submissions that require specific fields and structured information.
Two types of web forms are available:
  1. Feedback Widget - A ready-to-use form for collecting quick feedback or creating simple tickets.
  2. Advanced Web Form - A customizable form for collecting detailed, structured information using layouts and configurable fields.

Choose the right web form

Feedback WidgetAdvanced Web Form
Suitable for quick feedback and simple ticket submissionsSuitable for detailed and structured ticket submissions
Uses a predefined form layoutUses fields from the selected layout
Requires minimal configurationProvides greater control over field configuration
Supports attachments, screenshots, CAPTCHA, and Live ChatSupports configurable fields, attachments, CAPTCHA, help links, and form styling
Can be displayed as a pop-up, embed, or iFrameCan be embedded using generated HTML code


Availability

Feedback Widget

The Feedback Widget is a default layout styled layout provides a quick and interactive way to collect user feedback directly from a website or application. It offers a ready-to-use interface with essential fields, along with options like attachments, screenshots, CAPTCHA, and live chat, making it ideal for capturing instant feedback with minimal setup.

When to use Feedback Widget?

  1. Collecting general feedback (e.g., “How was the experience?”)
  2. Simple ticket creation with limited fields
  3. Embedding a quick feedback widget on websites or apps
  4. Non-technical users who need a straightforward submission experience
Notes
Note:
  1. Each department can have only one feedback widget in the Professional and  Enterprise editions.
  2. When Live Chat is enabled, end users can initiate real-time chats through the Zoho SalesIQ widget. To enable this, the Chat channel must be configured for the respective department.
  3. Since Live Chat is available only in the Enterprise edition, only feedback widgets in this edition can access the Live Chat feature.

To create a Feedback Widget
  1. Navigate to Setup > Channels > Web Forms > Feedback widget.
  2. Click New Feedback Widget.
  3. Edit the Subject and How can we help you? fields in the form. These act as placeholder texts and will disappear once the user starts typing.
  4. Enable CAPTCHA to ensure that users must complete verification before submitting the form.
  5. Enable Attachment to allow users to upload files along with their submission.
  6. Enable Screenshot to allow users to capture and attach screenshots directly from the interface.
  7. Enable LiveChat to allow users to initiate a real-time conversation with an agent.
  8. In General tab:
    1. Select the Department for which the form should create tickets.
    2. Select the Language in which the form should be displayed.
    3. Enter the Success Message that will be displayed after form submission.
  9. In Tab Settings:
    1. Enter the Tab Title to be displayed on the widget.
    2. Select the Background Color of the tab.
    3. Select the Font Color for the tab text.
    4. Choose the Position (left or right) where the tab should appear on the interface.
    5. Specify the Offset (in pixels) to define the vertical placement of the tab on the page.
  10. Click Save.

Embed the Feedback Widget

The configured feedback widget has to be integrated and deployed into the HTML to display in the required HTML page for the user to access.

Notes
Note: The embed code needed to be pasted in the every page of the HTML page.
Feedback widget can be integrated into the HTML using three options:
  1. Pop-up - Displays the feedback form as a floating widget on the webpage, allowing users to open it without leaving the current page.
  2. Embed - Places the feedback form directly within the webpage content, making it a fixed part of the page layout.
  3. iFrame - Loads the feedback form inside an inline frame, displayed as a separate embedded window within the webpage while maintaining isolation from the main page.

To copy the embed code

  1. Hover over the required Feedback Widget.
  2. Click Display Options () icon.
  3. Select the embedding type:
    1. Pop-up
    2. Embed
    3. iFrame
  4. Copy the generated code.
Paste the code into the respective HTML source to display the feedback widget to the users.

Deleting feedback widget

A feedback widget can be deleted when it is no longer required. Deleting the widget permanently removes it from the any embedded HTML, and it will no longer be available for collecting customer feedback.
To delete a feedback widget
  1. Hover over the required Feedback Widget.
  2. Click Delete icon  ).
  3. Click Delete to confirm.
 

Disable feedback widget

A feedback widget can be disabled when it needs to be temporarily taken out of use. Disabling hides the widget from the any embedded HTML, while retaining its configuration for future use.
To disable a feedback widget
  1. Click the toggle to Disable the desired Active feedback widget.
  2. Click Yes to confirm.

Notes
Notes:
  1. Customers can attach up to 5 files, including attachments and screenshots, when submitting the form.
  2. Each attached file must be 20 MB or smaller.
  3. To hide the Knowledge Base section from the widget, disable Display your knowledge base in your Help Center under Knowledge Base > Manage KB > Access Settings.
  4. To hide the Knowledge Base section from unregistered users, enable Customers must register to access Help Center under Setup > Help Center > Access Settings.
  5. To hide the Community section from the widget, disable Display community in the Help Center under Setup > Help Center > Access Settings.
  6. The Live Chat option is displayed only when the Chat channel is enabled and at least one agent is available to respond to chat messages.

Advanced Web Form

The Advanced Web Form enables structured and customizable ticket creation by leveraging predefined layouts and field configurations. It allows precise control over data capture, routing, and validation, making it suitable for scenarios that require detailed input, alignment with workflows, and secure form embedding.

When to use Advanced Web Form?

  1. Creating tickets with specific layouts and custom fields.
  2. Capturing detailed, structured information for different use cases.
  3. Aligning submissions with department workflows and automation.
  4. Embedding forms in products where precision and validation are important.
Notes
Note:
  1. All configurations are applied at the department level, ensuring that each department can maintain independent feedback workflows.
  2. To enable Live Chat within the widget settings, Live Chat must be enabled at the department level.
  3. Advanced Web Forms are available across all plans; however, the level of customization and feature access varies:
    1. Free Plan: 1
    2. Express Plan: 1
    3. Standard Plan: 5
    4. Professional Plan: 10
    5. Enterprise Plan: 50

To create an advance webform
  1. Navigate to Setup > Channels > Web Forms > Advanced Web Forms.
  2. Click Create Advanced Web Form.
  3. Select the required Department and Layout. The fields listed will correspond to the selected layout.
  4. The Last Name, Email, and Subject fields are automatically added, as they are mandatory for ticket creation.
  5. Drag and drop additional required fields from the Field List into the form.
  6. Click the (Settings icon) on a field to configure its properties:
  7.  Edit the Label to rename the field.
  8.  Select Mark as Hidden Field to hide it from users.
  9.  Set a Default Value if required.
  10.  Select Mark as Required Field to make it mandatory in the form.
  11.  Enable Include Help Link.
    1. Choose Link & Text or Text Only.
    2. Enter the Link Text.
    3. Provide the Help URL.
  12. Click the Advanced Tools tab:
    1. Drag and drop Attachment to allow file uploads.
    2. Drag and drop CAPTCHA to enable spam protection.
  13. Customize the form appearance using styling options:
    1. Click Font Family and select the required font .
    2. Click Font Size and choose a value between 11 and 16.
    3. Click Font Color and select from the color picker or enter a HEX value.
    4. Click Background Color and select from the color picker or enter a HEX value.
    5. Click Form Align and choose Left, Right, or Top.
    6. Click Form Width, enter the required pixel value, and click OK.
  14. Click Next.
  15. Provide the Form Details:
    1. Enter a name for the web form.
    2. Specify the webpage where the form will be hosted.
    3. Enter the URL to which users will be redirected after submission.
    4. Select a ticket owner or mark the ticket as unassigned.
    5. Enter the message to be displayed after successful submission.
  16. Once satisfied with the preview, click Save.

Embedding advanced web form

The configured  advanced web form has to be integrated and deployed into the HTML to display in the required HTML page for the user to access.
Notes
Note: The embed code needed to be pasted in the every page of the HTML page.
To copy the embed code
  1. Hover over the required Advanced Web form.
  2. Click Embed Code icon.
  3. Copy the generated HTML code.
Paste the code into the respective HTML source to display the feedback widget to the users.

Deleting advanced web form

A feedback widget can be deleted when it is no longer required. Deleting the widget permanently removes it from the any embedded HTML, and it will no longer be available for collecting customer feedback.
To delete the advanced web form
  1. Hover over the required Feedback Widget.
  2. Click Delete icon.
  3. Click Delete to confirm.

Disable advanced web form

The advanced web form can be disabled when it needs to be temporarily taken out of use. Disabling hides the widget from the any embedded HTML, while retaining its configuration for future use.
To disable the advanced web form
  1. Click the toggle to Disable the desired Active feedback widget.
  2. Click Yes to confirm.

Notes
Notes:
  • In order to avoid spam, the generated Web Form (HTML file) must be published in an active web server (Apache, Microsoft, IIS, etc).
  • The web form will not work if you submit the form values from your desktop.
  • When the HTML code is generated for the Web Form, certain entities are hidden by default. If you remove those hidden entities, the Web Form will not work. Here is the code snippet that should not be removed from your web form code.
<input type="hidden" name="xnQsjsdp" value="" />
<input type="hidden" name="xmIwtLD" value="" />
<input type="hidden" name="actionType" value="" /