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:

1. Feedback Widget
   
2. 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

1. Go to Setup (  ) > Channels > Web Forms.
2. Click Create Feedback Widget.
   If you have already created a widget, click New Feedback Widget in the upper right area.
3. 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.
  
• The maximum number of web forms that can be created per department varies based on the pricing plan.
  
• Free: 1 web form
• Standard: 5 web forms
• Professional: 10 web forms
• Enterprise: 50 web forms

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

1. Go to Setup (  ) > Channels > Web Forms.
2. Click Advanced Web Form from the left panel.
   
3. In the Advanced Web Form page, select a Department (if you have more than one) from the drop-down menu
   
   
   
   
4. Click Create Advanced Web Form.
   If you have already created a form, click New Web Form in the upper right area.
5. 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,
     
• 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

1. Under Fields List tab, click on a field and drag and drop it in the form builder.
   
2. 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

1. Click the Advanced Tools tab.
   
2. 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

1. Click the Advanced Tools tab.
   
2. 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

1. Move your mouse pointer to the field that you want to mark as mandatory.
   
2. Click on the Settings icon (  ).
   
3. In the Field Properties pop-up, select the Mark as required field checkbox.
   
4. 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

1. Move your mouse pointer to the field that you want to hide in the form.
   
2. Click on the Settings icon (  ).
   
3. In the Field Properties pop-up, select the Mark as hidden field checkbox.
   
4. 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

1. Move your mouse pointer to the field for which you want to provide hint or help link.
   
2. Click on the Settings icon (  ).
   
3. In the Field Properties pop-up, select the Include help link checkbox.
   
4. 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
  
5. 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

1. Move your mouse pointer to the action buttons that you want to rename in the form.
   
2. Click on the Settings icon (  ).
   
3. In the Button Properties pop-up, modify the button name.
   
4. 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

1. Move your mouse pointer to the field that you want to remove from the form.
   
2. 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

1. In the form builder, click on the Preview link.
   A preview of the form will be available.

Step 2: Specify Form Details

1. Enter a Form Name (Example: Feedback, Contact Us, etc.).
   
2. 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)
3. 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.
4. 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.
   
5. 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.
   
6. Click Save.
   
   
   

Step 3: Use Web Form Source Code to Embed

The code for the Web Form is available in HTML Source Code format.

1. Copy the code and paste it in the website where you want the Web Form.
   
2. 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="" /

---

See Also: Tracking Form Analytics using PageSense Integration.

• Related Articles

• Zoho Desk

  A help desk is a department in an organization that is responsible for providing the support customers need when using a company's product or service. When a customer has a problem or problem, they will contact the help desk and the product expert ...

• Rebranding Zoho Desk Account

  Organizations have unique identifiers such as logos, portal names, access links for customers etc. that bring them exclusivity and recognition among several other companies. Such organization specific details must also reflect in the applications ...

• Adding Field Translations Using Zoho Desk's Multilingual Capability

  With most businesses offering their services to a global clientele it is imperative to set up a robust and enthusiastic support service team to provide support in different regions. As companies grow and extend their facilities in different locations ...

• Creating Functions in Zoho Desk

  Functions are pluggable workarounds that let you accomplish tasks that is not doable out-of-the-box. For example, let' s assume that you want to prioritize customer tickets based on their sales probability in Zoho CRM. However, this option cannot be ...

• Ticket archiving in Zoho Desk

  To enhance your help desk performance and allow the day-to-day ticketing operations to happen much faster, Zoho Desk will automatically archive closed and inactive tickets. Archiving tickets speeds up the loading time for views that have gotten ...