Creating Web Forms - Zoho Desk Knowledgebase

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 LeftRightTop 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 popupweb 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 1510, and 20 web forms per department in the FreeStandardProfessional, 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

  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 fontbackground color, field label alignment and form width.

Notes:

  • The default fields like Last NameEmail, 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="" /




    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 CRM Training
      Redefine the way you work
      with Zoho Workplace

        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 CRM Training

          Create, share, and deliver

          beautiful slides from anywhere.

          Get Started Now


            Zoho Sign now offers specialized one-on-one training for both administrators and developers.

            BOOK A SESSION










                                    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.




                                        Manage your brands on social media

                                          Zoho Desk Resources

                                          • Desk Community Learning Series


                                          • Digest


                                          • Functions


                                          • Meetups


                                          • Kbase


                                          • Resources


                                          • Glossary


                                          • Desk Marketplace


                                          • MVP Corner


                                          • Word of the Day


                                            Zoho Marketing Automation

                                              Zoho Sheet Resources

                                               

                                                  Zoho Forms Resources


                                                    Secure your business
                                                    communication with Zoho Mail


                                                    Mail on the move with
                                                    Zoho Mail mobile application

                                                      Stay on top of your schedule
                                                      at all times


                                                      Carry your calendar with you
                                                      Anytime, anywhere




                                                            Zoho Sign Resources

                                                              Sign, Paperless!

                                                              Sign and send business documents on the go!

                                                              Get Started Now




                                                                      Zoho TeamInbox Resources



                                                                              Zoho DataPrep Resources



                                                                                Zoho DataPrep Demo

                                                                                Get a personalized demo or POC

                                                                                REGISTER NOW


                                                                                  Design. Discuss. Deliver.

                                                                                  Create visually engaging stories with Zoho Show.

                                                                                  Get Started Now









                                                                                                      • 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 ...
                                                                                                      • Customer Ticket History for Zoho Desk

                                                                                                        When new tickets are assigned, it is important to show your agents the past support tickets of the customer so that your agents can have more direct, effective, and meaningful conversations. The Customer Ticket History extension for Zoho Desk ...
                                                                                                      • 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 ...
                                                                                                        Wherever you are is as good as
                                                                                                        your workplace

                                                                                                          Resources

                                                                                                          Videos

                                                                                                          Watch comprehensive videos on features and other important topics that will help you master Zoho CRM.



                                                                                                          eBooks

                                                                                                          Download free eBooks and access a range of topics to get deeper insight on successfully using Zoho CRM.



                                                                                                          Webinars

                                                                                                          Sign up for our webinars and learn the Zoho CRM basics, from customization to sales force automation and more.



                                                                                                          CRM Tips

                                                                                                          Make the most of Zoho CRM with these useful tips.



                                                                                                            Zoho Show Resources