Helpy allows you to build and customize any number of ticket creation forms, or use a standard “simple form” that includes the bare essentials to capture a customer’s issue. This article details the various options that are available when designing or customizing forms.

Often it may be helpful to offer your customers a choice of several different forms to create tickets. A customer with a billing question could be prompted with a different set of questions compared to a customer support question. Here are a few examples of different forms with different goals (and likely different fields):

The custom forms feature enables you to create and customize multiple forms for customers to use when creating new tickets. There is also an agent form that has limited customization capabilities.

Specifically, the following topics are covered:

• Upgrading to the new custom forms editor
• Creating a form
  • Form Information
  • Form Design
  • Submit Settings
• Creating/editing new fields
• Embedding a form

Creating a new form

Creating a new form involves first configuring information about the form and its behavior, and then adding fields to the form. Once you have completed setting it up, you can switch it to live and it will appear on the site. Alternatively, the form can be kept “hidden” or embedded on your site with a Javascript widget. To create a new form, follow these steps:

1. Go to the system settings. This is an administrator only option.
   
   
2. Click on Custom Forms to see the list of forms.
   
   
3. Choose “New Custom Form”
   
   
4. Complete the first set of options describing the form:

   
   Active: This determines whether or not the form is active and publicly accessible on the site

   Restrict to Authenticated Users: This determines whether the form should only be shown to authenticated (signed in) users.

   External Name: Give the form a name that will be used to reference the form in the UI and reports.

   External Description: The description helps you identify the form in the admin UI and on the customer-facing help center.

   Permalink: The permalink is used to link to the form on the web, or embed the form on another site. When you create a new form, a random permalink is created for you, or you can replace this with something more recognizable. Private forms should use a difficult to guess permalink.

   Form Location: Use this dropdown to determine where the form will be accessible. You can opt to make the form private, which means that users (or you) would need to know the permalink to find it.

   
   

Form Design

The form design section controls how the form will actually look on your site, including whether or not it is listed with an icon (as shown above) or includes specific instructions or uses custom behavior with javascript or css.

Next, you will configure the form design- how it looks and behaves when submitted by the customer:

Subject: If you want all form completions to include the same subject, you can provide it in the subject setting. Leaving this blank will cause the subject field to be shown on the customer-facing form, prompting the customer to complete the field.

Auto Answer: Forms have the option to auto-suggest related articles from the knowledge base, depending on what customers have typed into the form. This can deflect tickets that would otherwise end up in the help center. You can choose whether or not to enable this here.

Allow Attachments: Use this option to control whether or not your form allows attachment uploads. This is a good idea for support forms, but may not be needed for other types of forms.

Title: The title lets you determine how the form will be listed on the customer-facing site. It also appears at the top of the form page itself.

Form instructions: You can use form instructions to provide additional details on how to complete the form on your help center form page.

Icon: You can choose an icon to represent the form in the UI.

Icon Color: If you have chosen an icon, you can also provide a color to further customize the icon.

Custom CSS: Use the custom CSS field to add style rules to your form. This could let you customize the look and feel of the form.

Custom JS: Use the custom javascript field to add additional javascript behaviors to the form.

Form Submit Settings:

The form thank you page is displayed after the form has been successfully submitted. You have the ability to customize the text displayed or redirect the user to a custom URL. In addition, you can assign the ticket created by the form to a specific team or tag.

Submit button text: The default configuration for the form labels the submit button with “Create Ticket.” Use the submit button text to change this to something else.

Assign Groups: If you want to the ticket created by a specific form assigned to a team group, use the “assign groups” field to control this.

Assign Tags: Use the “assign tags” option to select one or more tags any form submissions should include.

Thank you header: Specifies the header of the form thank you page.

Thank you body: Specifies the body text of the form thank you page.

Thank you page URL: If provided, this will cause the form submission to redirect to the provided URL. This would override any thank you header or body.

Adding Fields

Request forms are used to gather information from a customer, and are made up of a number of form “fields”. In the case of the agent form, it is the agent instead of the customer filling out the request, but the field types are the same.

When you create a new form, some basic fields are created for you automatically. If you wish to collect additional information from the customer, the following additional field types can be added to the form:

• Single Line
• Multiple Line
• Select
• Checkbox
• Hidden

To add a new field, click on the “Fields” Tab of the form designer. On a new form, you will see basic fields that cannot be edited- “Email”, “Name” and “Subject” along with the “Message” text field. Add fields with the form to the right labeled "New Field." The following options are available:

Field Type: This is the field type you are creating.

Field Label: This is the field label- the text shown adjacent to the field on the form.

Required: Whether or not completion of the field is required to submit the form

Advanced options.

There are additional advanced options you can use to further define the field or add additional behavior or styles. Under normal circumstances you would not need to change these unless directed by support.

Name: The name is auto-assigned and can be used to refer to the field with code or by passing params to the form.

Valid Value: If the field expects a certain value, you can provide it here.

Field Group: You have the option to group fields into logical sets by giving them the same field group name.

Toggle Target: Enter a field group name if this field is a toggle.

Class names: Specify any class names to be added to the generated input. This can be useful for interacting with custom javascript you are providing with the form.

Click “save changes” to save the field and add to the form. Upon saving the new field, you will immediately see it appear on the left. Drag and drop it to reorder.

Reordering Fields 

To reorder fields on the form, simply hover over the field you wish to move, and use the mouse to drag and drop into the order you wish for the form to be in.

Editing Fields

To edit a field, first click it and then use the form on the right to edit the fields properties:

Field Type: This is the field type you are creating.

Field Label: This is the field label- the text shown adjacent to the field on the form.

Required: Whether or not completion of the field is required to submit the form

Advanced options.

There are additional advanced options you can use to further define the field or add additional behavior or styles. Under normal circumstances you would not need to change these unless directed by support.

Name: The name is auto-assigned and can be used to refer to the field with code or by passing params to the form.

Valid Value: If the field expects a certain value, you can provide it here.

Field Group: You have the option to group fields into logical sets by giving them the same field group name.

Toggle Target: Enter a field group name if this field is a toggle.

Class names: Specify any class names to be added to the generated input. This can be useful for interacting with custom javascript you are providing with the form.

Deleting a Field

To delete a field, first click on the field, then use the button on the right labeled “delete”.