Support Help

Setting up 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 Web Forms

To generate web-to-ticket forms

  1. Click Setup.
  2. In the Channels section, click Web form.
  3. In the Web Forms page, choose the Department(if you have more than one) from the drop-down list.
  4. Click Create Web to Ticket Form.
  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.
    • Copy web form code
      • Get code to embed in your site and other third-party sites.
        The code is available in HTML format.

Step 1: Build a Form

Drag & drop fields in the WYSIWYG editor, which also provides various other options to build a form.

Add Fields

Drag & 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 the Fields List tab, click on a field and drag & drop it in the form builder.
  2. Make changes to the font, background color, field label alignment and form width.

Note:

  • By default, some of the fields like Last Name, Email and Subject are already added in the form.
  • You cannot remove the above mentioned default fields, as they are mandatory for a ticket.
  • To have custom fields, you need to first create them in the Tickets module.
  • When you add the Account Name field in the web form, and ticket details are submitted, an account will automatically be created in Zoho Support. A new account will be created even if it already exists by the same name in Zoho Support.

Add Attachments

Capture attachments through your web-to-ticket forms, such as screenshots of an issue, tax invoice, photo of a product, etc.

To add the option to attach files

  1. Click the Advanced Tools tab.
  2. Drag & drop the Attachment field.

Note:

  • Visitors can attach a file not more than 20 MB. This information will be prominently displayed alongside the attachment field. If the file size exceeds the limit, the form will not be submitted and the record will not be added in Zoho Support.
  • Visitors can attach as many as five files at a time.

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 hidden 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 which record is generated for a web form hosted in a specific web page.

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 hint 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 a 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 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 in your web site.

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 created from that form. However, you can select an agent from the drop-down list.
  5. 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="" /

Top