Setting up Advanced Web Forms

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.

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.
Note:
  • 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.

Note:
  • 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="" /