Web Forms in Zoho Desk
Web Forms simplify the process of capturing support tickets from your website into your Zoho Desk. The tickets can be from customers requesting your help or simply leaving feedback about your product. Either way, the Web Forms are easy to design and publish for both technical and non-technical users. There are two kinds of Web forms available in Zoho Desk:
- Feedback Widget
- Advanced Web Forms
Let's consider a scenario where an e-commerce company wants to streamline their customer support process using Zoho Desk Web Forms. They create a "Support Ticket Submission Form" embedded on their "Contact Us" page. This form includes fields such as "Subject" for describing the issue, "Category" to specify the type of problem (e.g., delivery, product inquiry, technical issue), and "Contact Information" fields for the customer's name, email, and phone number. With a clear, easy-to-fill form, customers can efficiently communicate their concerns, enabling the support team to address them promptly.
Similarly, they also set up a "Feedback Form" on their product pages, allowing customers to leave comments, suggestions, or reviews. This feedback can be instrumental in understanding customer sentiments, which aids in improving their services and products.
Availability
Permission Required Users with the Administrator permission profile can create web forms in Zoho Desk.
Check Feature Availability and Limits
Feedback Widget
The Feedback widget allows you to embed the Web Form support channel in your company's website or the Help Center. The widget can be displayed as a pop-up, web embed or in an iFrame. This way your customers can seek help without leaving your website or Help Center.
The widget allows your customers to:
- Fill in the predefined fields to raise a support request
- Find answers to their questions using the suggested articles and discussions from your Help Center and Community respectively
- Engage with your agents over Live Chat
- Take screen grabs and upload them to add more context to their support requests
Once you create a widget, you can add it to your website as a web embed; load it in pop-up or display in an iframe.
Create a Feedback Widget in three simple steps
- Customize the form - Rename the default form fields according to your requirements.
- Specifying the form details - Add details such as department (where the tickets will be created after the form is submitted), language and the message to be displayed on form submission.
- Use source code to embed - Embed the form using the HTML code generated for Popup, Embed or iFrame.
Create a Feedback Widget
You can create Feedback Widgets as you may require and map them to your departments in Zoho Desk. Please keep in mind that you can add only one feedback widget per department.
To create a feedback widget
- Go to Setup (
) > Channels > Web Forms.
- Click Create Feedback Widget.
If you have already created a widget, click New Feedback Widget in the upper right area. - In the Widget Details page, do the following:
- Customize the form,
- Click the Edit icon (
) corresponding to the default field values to edit them.
You cannot edit the Name and Email fields as they are mandatory for a ticket. - Click the toggle button corresponding to Word Verification to turn off or on the captcha in the widget.
- Click the toggle button corresponding to Attachment to allow or disallow your customers to upload files.
- Click the toggle button corresponding to Screen Shot to allow or disallow your customers to attach screen grabs.
- Click the toggle button corresponding to Live Chat to allow or disallow your customers to initiate chat sessions.
- Specify the form details,
- Select a Department from the drop-down menu.
The tickets created from customer feedback will be added to this department. - Click the Language drop-down menu and choose a language for your widget.
The widget will appear in the language specified here. - Specify the Success Message to be displayed upon valid completion of the form.
- Enter the Title for the Feedback Widget.
The title you enter will be displayed on the floating widget when you use pop-up as the embed option. - Pick a color for the Background and the Font.
If you know the Hex value, you can enter that, or select a color from the palette. - Specify which Position on the screen the widget should appear on your website.
You can choose between Left, Right, Top and Bottom. - Specify the Offset for the widget.
The offset value will determine the distance between the widget and the edge of the screen. - Click Save.
- Use source code to embed,
- Copy the HTML code and paste it in the website where you want the widget.
You can choose to embed the widget; as a popup, web embed or in an iFrame.
Important: Embed the widget as a popup for your customers to receive contextual help from the Knowledgebase and Community. - Click Done.
Notes:
- Your customers can attach up to 5 files (including attachments and screenshots) when they submit the form.
- The size of the file to be attached should be within 20 MB.
- The knowledge base section can be hidden from the widget by disabling Display your knowledge base in your Help Center option.
You can manage this setting under Knowledge Base [Module] >> Manage KB >> Access Settings. - The knowledge base section can be hidden for unregistered users by enabling Customers must register to access Help Center option.
You can manage this setting under Setup >> Help Center >> Access Settings. - The Community section can be hidden from the widget by disabling Display community in the Help Center option.
You can manage this setting under Setup >> Help Center >> Access Settings. - The Live Chat option is displayed only when the channel is enabled, and at least one agent is available to answer chat messages.
Advanced Web Form
Unlike the Feedback widget, the advanced Web Form allows you to customize the form to your liking. You can include custom ticket fields to capture tickets in more detail. Advanced Web Forms simplify the process of capturing support tickets from your website into your help desk system. Before setting up the Web Form, complete the following checklist:
- Create an email template to send automated replies to your customers upon submission of their ticket.
- Create an Assignment Rule if you wish to assign the incoming tickets to specific agents. By default, the incoming tickets will stay unassigned unless specified otherwise in the form.
- Configure the web form further to suit your requirements.
- Customize the fields to be added in the web form.
- Test the entire workflow of the web form, before publishing on the website.
Notes:
- Only users with Profile permission for managing Support Channels [Web Forms] can access this feature.
- You can create a maximum of 1, 5, 10, and 20 web forms per department in the Free, Standard, Professional, and Enterprise plans, respectively.
Create a Web Form in three simple steps
- Building the form - Drag and drop fields to build a form and format it easily with the WYSIWYG editor.
- Specifying the form details - Add details such as form name, return URL (where the visitor needs to be redirected after the form is submitted), etc.
- Generating the code for the form - Embed the form using the generated code format.
While building a web form, the following elements are available in the form:
| Option | Description |
| Add Fields | Drag and drop the fields that are required in the form. By default, some of the fields are already added when you build a new form. |
| Set fields' font and form layout | Use the WYSIWYG editor to change the font style and size, background color, alignment of the fields, etc. in the form. |
| Attachments | Capture files through your web-to-ticket forms, such as screenshots of an issue, tax invoice, etc. The size of the file should be within 20 MB. |
| Mark fields as mandatory | Collect important information such as name, email address, mobile number, etc. from the customers who fill up the web form by marking fields as mandatory. |
| Mark fields as hidden | Add a hidden field and its value in the form. These hidden values are submitted along with the web form but are hidden to the customers who fill the form. |
| Add help link for a field | A field you provide may require data to be filled in a specific format. For such requirements, you can use the option to add a tip or hint to help the visitor who fills the form. |
| Change button name | The name of the call to action button can be Save, Submit, or another name. You can easily change the name as per your requirements. |
| Specify domain name | The Domain Name is the web page URL where you plan to host the web form. Specifying the URL helps prevent spam and allows only forms submitted through the particular domain to be captured as valid information. |
| Specify return URL | This is the URL of the web page to which the visitor needs to be redirected once the web form is submitted. |
| Embed form code | Embed the Web Form's code in your web page. The code is available in HTML format. |
Generate Advanced Web Forms
You can generate and embed Advanced Web Forms under Setup.
To generate advanced web forms
- Go to Setup (
- Click Advanced Web Form from the left panel.
- In the Advanced Web Form page, select a Department (if you have more than one) from the drop-down menu
- Click Create Advanced Web Form.
If you have already created a form, click New Web Form in the upper right area. - In the Web Form builder, do the following:
- Build a form,
- Drag and drop the fields that you need in the web form.
- Add the option to attach files.
- Mark fields as mandatory.
- Make fields hidden in the form.
- Provide hint or help links for fields.
- Set font and layout of the form.
- Change button names.
- Specify form details and other options,
- Add form details such as form name, return URL, domain name.
- Set ticket owner.
- Specify the success message.
- Copy web form code,
- Build a form,
- Get code to embed on your site and other third-party sites.
The code is available in HTML format.
Step 1: Build a Form
Drag and drop fields in the WYSIWYG editor, which also provides various other options to build a form.
1.1 Add Fields
Drag and drop the fields you need in the form and change the font style and size, background color, alignment of the fields, etc.
To add fields and set font and layout of the form
- Under Fields List tab, click on a field and drag and drop it in the form builder.
- Make changes to the font, background color, field label alignment and form width.
Notes:
- The default fields like Last Name, Email, and Subject will be auto-added to the form. You cannot remove these fields, as they are mandatory for a ticket.
- To have custom fields, you need to first create them in the Tickets module.
1.2 Add Attachments
Capture attachments through your web-to-ticket forms, such as screenshots of an issue, tax invoice, photo of a product, etc. The size of the file should be within 20 MB. If the file size exceeds the limit, the form will not be submitted and the record will not be added in Zoho Desk. Visitors can attach up to five files at a time.
To add the option to attach files
- Click the Advanced Tools tab.
- Drag & drop the Attachment field.
You can use the help link option in the Field Settings to provide the hint about the file size.
1.3 Insert Captcha
Add captcha to prevent unauthorized automated spamming programs from filling the web form.
To insert captcha
- Click the Advanced Tools tab.
- Drag and drop the Captcha field.
1.4 Mark Fields as Mandatory
Collect important information such as name, email address, mobile number, etc. from the visitors who fill up the Web Form by marking fields as mandatory.
To mark fields as mandatory
- Move your mouse pointer to the field that you want to mark as mandatory.
- Click on the Settings icon (
).
- In the Field Properties pop-up, select the Mark as required field checkbox.
- Click Done.
1.5 Mark Fields as Hidden
Add a hidden field and its value in the form. These hidden values are submitted along with the Web Form but are not visible to the visitors who fill the form. For example, if you have hosted the same form in various web pages, the hidden field will help you identify the form from where the ticket was created.
To make fields hidden in the form
- Move your mouse pointer to the field that you want to hide in the form.
- Click on the Settings icon (
).
- In the Field Properties pop-up, select the Mark as hidden field checkbox.
- Specify the Value for the field and click Done.
1.6 Provide Help Link
A field you provide may require data to be filled in a specific format. For example, the date format may need to be specified in DD-MM-YYYY. For such requirements, you can use the option to add a tip or hint to help the visitor who fills the form.
To provide hints or help links for fields
- Move your mouse pointer to the field for which you want to provide hint or help link.
- Click on the Settings icon (
).
- In the Field Properties pop-up, select the Include help link checkbox.
- Choose one of the following:
- Link & Text - Specify text for the link and provide the link URL.
- Text Only - Specify the help/hint text. For example, the date field can have - MM-DD-YYYY
- Click Done.
1.7 Change Button Name
By default, there are two call-to-action (CTA) buttons - Submit and Reset. You can rename these buttons as per your requirements.
To change button names
- Move your mouse pointer to the action buttons that you want to rename in the form.
- Click on the Settings icon (
).
- In the Button Properties pop-up, modify the button name.
- Click Done.
1.8 Remove Field from the Form
Easily remove unwanted fields from the Web Form and add them whenever required.
To remove a field from the form
- Move your mouse pointer to the field that you want to remove from the form.
- Click on the Delete icon (
).
1.9 Preview the Web Form
Take a look at the Web Form before publishing it on your website.
To preview the form
- In the form builder, click on the Preview link.
A preview of the form will be available.
Step 2: Specify Form Details
- Enter a Form Name (Example: Feedback, Contact Us, etc.).
- Specify a Return URL. The visitor who submits the form will be redirected to the URL specified here. It should start with " http:// or https:// ".
The length of Return URL should not exceed 255 characters. (Example: https://www.zylker.com/thank-you.html) - Specify a Domain Name. This should be the domain URL where the Web Form will be hosted. It should start with " http:// or https:// ". (Example: https://www.zylker.com/)
If you plan to host the Web Form in multiple websites or you are not sure where the web form will be hosted, enter * in this field. This prevents spam and allows only forms submitted through the particular domain to be captured as valid information. - Assign Ownership to the tickets that are submitted via Web Form. By default, the user who creates a form will also become the owner of the tickets unless otherwise chosen from the drop-down list.
- Specify the Success Message to be displayed upon valid completion of the form. You can leave this field blank to redirect your visitors to the Return URL without a message.
- Click Save.
Step 3: Use Web Form Source Code to Embed
The code for the Web Form is available in HTML Source Code format.
- Copy the code and paste it in the website where you want the Web Form.
- Click Done.
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="" /
Access your files securely from anywhere
Zoho CRM Training Programs
Learn how to use the best tools for sales force automation and better customer engagement from Zoho's implementation specialists.
Zoho DataPrep Personalized Demo
If you'd like a personalized walk-through of our data preparation tool, please request a demo and we'll be happy to show you how to get the best out of Zoho DataPrep.
- Zoho Workerly Home
- Forums
- Connect With Us:
- Zoho Recruit Home
- Forums
- Connect With Us:
New to Zoho CRM Plus?
Deliver unforgettable customer experiences
New to Zoho CRM Plus?
Deliver unforgettable customer experiences
New to Zoho Marketing Plus?
Everything you need to run your marketing
New to Zoho Marketing Plus?
Everything you need to run your marketing
You are currently viewing the help pages of Qntrl’s earlier version. Click here to view our latest version—Qntrl 3.0's help articles.
New to Zoho Survey?
Zoho Sheet Resources
Zoho Forms Resources
New to Zoho Sign?
Zoho Sign Resources
Sign, Paperless!
New to Zoho TeamInbox?
Zoho TeamInbox Resources
New to Zoho ZeptoMail?
Zoho DataPrep Resources
Design. Discuss. Deliver.
New to Zoho Workerly?
New to Zoho Recruit?
New to Zoho CRM?
New to Zoho Projects?
New to Zoho Sprints?
New to Zoho Assist?
New to Bigin?
Related Articles
Introduction to Zoho Desk
Help Desk is a department in an organization that is in charge of providing the support needed by customers while using the company's product or a service. Customers contact the help desk when they have a question or a problem and a product expert ...FAQs: Working on Tickets
What are Tickets Tabs in Zoho Desk? Tickets Tabs in Zoho Desk are designed to organize and provide contextual information about support tickets within the help desk system. These tabs enable users to connect tickets with other standard modules of ...Get Advanced Reports with Zoho Analytics Integration
The Reports module of Zoho Desk allows you to generate reports to know most of the important metrics in your help desk. Even though they address the requirements of a majority of businesses, there is always a need for some advanced customization ...Tracking Form Analytics using PageSense Integration
You can use web forms to capture feedback and support tickets directly from your website, portal or any third party web page. All it takes is to configure the form in Zoho Desk and embed the code snippet on your website. So far so good! But what if ...Events Supported in the Get Ticket History API
Introduction The Get ticket history API returns details of the actions — called events — performed on a ticket. In this document, you will learn about the different events supported and the variations of each event. Ticket History Events Each event ...
New to Zoho LandingPage?
Zoho LandingPage Resources