Setting up Advanced Web Forms - Zoho Desk Knowledgebase

Setting up Advanced Web Forms

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.

Note:
  • 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:
  1. Click the Setup icon (  ) in the top bar.
  2. In the Setup Landing page, click Web Forms under Channels.
  3. In the Feedback Widget page, click Advanced Web Form from the left panel.
  4. In the Advanced Web Form page, select a Department (if you have more than one) from the drop-down menu



  5. Click Create Advanced Web Form.
    If you have already created a form, click New Web Form in the upper right area.
  6. 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.

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.

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.


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.

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.

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.

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.
    • Link Only - Specify the help/hint text. For example, the date field can have - MM-DD-YYYY
  5. Click Done.



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.

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 (  ).

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="" /

    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


          Get started with Zoho Sign

          in a few quick steps!

          Download Help Guide





                    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 SalesIQ Resources



                                        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

                                                                          • 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 ...
                                                                          • Setting up Feedback Widgets

                                                                            A portable version of the Advanced Web Form, the Feedback Widget can be added to your website. The widgets can be customized for their field values, language, appearance and their position. Benefits of the Feedback Widget Unlike the Advanced Web ...
                                                                          • 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 ...
                                                                          • 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 ...
                                                                          • Advanced Help Center Customization Using HTML and CSS

                                                                            You can customize the appearance of the Help Center using the basic color themes. However, it has its limitations, as it doesn't allow you to rebuild the header and the footer completely as you like it to be. Here comes the advanced customization ...
                                                                          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