HAPPY – Helpdesk Support Ticket System

Support Purchase

System Requires:

Make sure that those limits are to a minimum as follows for free-trouble while installing:

• WordPress 5.0 or higher
• Woocommerce 7.0 or higher 
• PHP Version 7.0 or higher

 

Install the plugin: 

Go to Dashboard >> Plugins >> Add New Plugins.

1. Upload the zip file happy-helpdesk-support-ticket-system.zip downloaded from this official source.
2. Or search the keyword HAPPY and install it directly from the list

See this instruction for more details.

 

 

HAPPY – Helpdesk Support Ticket System is your all-in-one solution for managing customer support efficiently and effectively. HAPPY is designed to streamline your support operations with a range of powerful features that ensure both your support team and customers have a seamless experience.

For ones that are new to helpdesk plugins, here’s a simple overview for what a helpdesk plugin does: Think of your website as a store where customers can come with questions or issues. A helpdesk plugin acts like a dedicated customer service desk on your site.

• When a customer has a question or issue, they can submit a “ticket” through the plugin. This ticket is like a digital support request
• Your support team can see all the tickets in one place, assign them to different team members, prioritize urgent issues, and track their progress.
• Then you can respond to tickets directly through the plugin, either by email or through an in-built messaging system.
• To further reduce the workload, considering:
  • Creating a self-help section: Add a Knowledge Base or FAQ to help customers find answers without submitting a ticket.
  • Use canned responses: Prepare pre-written replies to common questions to save time and improve efficiency

HAPPY empowers your support team by providing a flexible and efficient ticket management system. With the plugin installed, you have your ticket management streamlined, you’ll receive effective communication, and be provided with comprehensive customization options. From there, you’ll be able to manage support tickets way better, reduce your team’s workload with automated tools and self-help resources, and create a more personalized support experience for your customers.

Core Features:

1. Ticket Management System:
   • Ticket Labels: Organize and categorize tickets efficiently to keep track of various support issues.
   • Ticket Status: Monitor the progress of tickets through different stages to ensure timely resolution.
   • Ticket List: Access a user-friendly interface that provides a clear overview of tickets on both the backend and frontend for admins and users.
   • Multiple Ticket Forms: Create custom ticket forms with an easy drag-and-drop builder and various settings and customization options.
   • Pagination Settings: Manage ticket and reply pagination to keep your ticket lists organized and easy to navigate.
   • Page Settings: Configure pages for viewing all tickets, creating new tickets, accessing the knowledge base, and FAQs based on user roles.
2. Support Features:
   • File Attachments: Allow customers to attach files when creating tickets or replies, providing more context and detail.
   • Working Hours and Holidays: Set up working hours and holidays to manage support availability and customer expectations.
   • Email Notifications: Automate email updates for ticket submissions, replies, and closures, ensuring prompt communication between your support team and customers.
   • FAQs, Knowledge Base, and Canned Replies: Reduce workload by providing self-help resources and pre-written responses for common queries.
3. Customization and Additional Features:
   • Style Settings: Customize the appearance of your forms and support pages with multiple styling options.
   • Personalized Messages: Set up tailored messages for various events to enhance communication with your users.
   • Flexible Form Creation: Create forms with rules, customization options, and various field types to suit your specific needs.

 

 

Once you activate the plugin, you’ll be  redirected to our Setup Wizard, which is designed to guide you through the initial configuration process with ease. The Setup Wizard is your key to quickly getting started, allowing you to set up essential components and customize your support system without hassle.

HAPPY will automatically create three critical pages and three key roles for you:

• Pages Created:
  • Support Page: The central hub where customers can view support options.
  • Create Ticket Page: Allows customers to submit their support requests effortlessly.
  • Knowledge Base Page: A comprehensive resource for customers to find answers independently.
• Roles Assigned:
  • Support Manager: Oversees and manages the support operations. An administrator of WordPress will have Support Manager capabilities by default.
  • Customer Support: Handles and resolves incoming support tickets. This role is auto assigned to new customer
  • Blocked: Manages users who are restricted from accessing certain features. This role can only be set manually

 

Step 1: For new users, start by configuring these settings to set up your ticket management system:

1. Ticket Labels : Help organize and manage incoming support tickets effectively.
2. Ticket Status: Define the stages of ticket resolution to track progress.
3. Ticket Forms: Customize the forms for capturing ticket details.
4. Set up three key pages for ticket submission, ticket viewing, and FAQs. Make these pages easy to find so customers know where to submit tickets, check their status, and find answers.

Once configured, on front end, customer will be able to open a ticket via a ticket form:

And customer can start viewing their created tickets through the Ticket List

 

Step 2: To reduce the workload and streamline ticket management process, consider

• Use FAQs
• Use Knowledge Base
• Use Canned Replies
• Configure Email notifications upon ticket submission, new reply, and ticket closure
• Set up your working hours and Holidays

 

And that’s it! You now have a basic ticket system set up. You can start receiving tickets and get to work. Now let’s move on to see how HAPPY will appear to your customers once your configuration is complete. Enjoy the smooth, efficient support experience with HAPPY!

 

 

Tickets

This section provide view of all support tickets one can see – depending the role you have. E.g. the Support Manager can see all tickets – from both front end and back end – and manage them both ways. But customers can only see tickets they created themselves.

• Back-End Ticket List
• Front-End Ticket List

 

Back-End Ticket List 

Go to Dashboard >> Happy >> Tickets

For Support Manager, the back-end ticket list offers overview of all tickets and advanced management and administrative features, including:

• View All Tickets
• Filter and Search
• Ticket Details
  • Ticket title linked to the ticket editing page
  • Label: Which label a ticket is assigned to
  • Problem: Indicate the ticket form used
  • Assign: Assignee can be either Customer Support or Support Manager
  • Ticket Status
  • Customer: Name of the ticket starter
  • Date Updated: Date of the latest reply or closure
  • Date Created: When the ticket is created

 

Front-End Ticket List

Ticket List on front end can be access by the Support Page setup under Page Setting

• Customers
• Supporters

Customers

For customers, the front-end ticket list displays all their submitted tickets in a user-friendly interface.

They can:

• Click “Create tickets” on the ticket list to open a new ticket
• Click the button   on the ticket page to reply the ticket
• Click the red    button on the ticket page to close the ticket

Supporters

For admin, other than viewing the tickets on the list, they can take actions to manage or make it easier to manage them, like:

• Use the search and filter widget on the left, including:
  • Search field: Enter the key word and search for tickets that contains that key word
  • Filter “Problem”: This is to filter by ticket forms
  • Filter “Label”: This is to filter by ticket labels
• Bulk change ticket status
• Create a new ticket
• Access HAPPY author page

 

 

1. On the ticket page, the supporter can:

• Click the button  to reply the ticket
• Click the red   to close the ticket
• Use the grey arrow   on the right to open the widget for:
  • Ticket details overview
  • Ticket actions: Update ticket label and ticket status

 

2. After replying, there is an edit button on the top right corner, for the admin to edit the reply. 

 

 

Tickets Labels

Go to Dashboard >> Happy >> Ticket Labels

This feature allows you to organize support tickets into different tags. This helps in managing and prioritizing tickets more effectively, ensuring that they are routed to the appropriate support staff and handled efficiently.

• Ticket label list
• Ticket editing page

 

Ticket labels list

This is the page where the Support Manager can see all the available ticket labels, take an overview, change their position or visit a list of tickets with specific label assigned.

1. Add new: Click this button to create new ticket label
2. No.: The value under this column is changed when you hover over the icon to drag and drop to change the position of the label.
3. Name: Label name – Click the name to go to the label editing page
4. Assign: This reflects the Assign Supporter settings inside the ticket label editing page
5. Conditional rule: This reflects the Condition Type and Conditions settings inside the ticket label editing page
6. Count: Ticket counts – Shows the number of tickets assigned to each label. Click the number to see the list of those tickets

 

Ticket label editing page

This page is to configure a specific label.

1. Label Name: Enter name for the label
2. Priority: This value can only be changed when you drag and drop the label to change the position from the Label list
3. Assign Supporter: Assigned supporters are notified via email when a ticket with this label is created. And the supporter can only see tickets that are assigned to them
   Note: If no assignee, this label is assigned to all supporters. And email notifications will be sent to all of them.
4. Conditions type: Define rules that determine how tickets are assigned to this label. You can set multiple rules based on keywords in the ticket subject or content, or customer details. The rules can be configured using And or Or logic:
   • And: All conditions specified must be met for a ticket to be assigned this label.
   • Or: Any one of the specified conditions must be met for a ticket to be assigned this label.
5. Conditions: Set specific criteria that tickets must meet to be assigned a particular label automatically
   • Ticket Form: Select the ticket form to which the condition applies.
   • Form Field: Choose the specific field within the selected ticket form that will be evaluated. This can include fields such as subject, description, or other fields.
   • Value in the form field: Specify the value that the form field must contain for the condition to be met. This can be a specific word, phrase, number, or any relevant value based on the field type. Leave empty for all values, no exclusions.
   • Action:
     1. Add new condition: Click this button to create a new condition. You can define multiple conditions to refine how tickets are labeled.
     2. Remove the condition: Click this button to delete an existing condition. This allows you to update or simplify your condition rules.

 

 

Tickets Status

Create and manage different statuses for support tickets. These statuses provide clear visibility into the progress and current state of each ticket.

After creating your status, assign specific status to events in “Ticket status” section under General tab.

On the Status list:

1. Add new: Create a new ticket status with the following options
2. Name: This status name will show up on frontend.
3. Icon: Choose an icon to visually represent the status. This icon will replace the status name on the front end.
4. Counts: Ticket counts – Determine how many tickets this status is included in. Click the number to see those tickets.
5. Actions: Specify any actions associated with this status
   •   Edit status
   •   Remove status

 

When you click the green Edit button under “Action” column. A popup for status settings appears, allowing you to customize the settings for each ticket status to ensure they align with your support workflow:

1. Status Name: Define the name of the status.
2. Priority: Set the priority level for this status. This is to reorganize the status list.
3. Color: Choose a color for the status label and status icon
4. Background Color: Select a background color for the status label and status icon.
5. Choose icon: Pick an icon to represent the status. If a status has an icon, the icon will replace the status name on the front end.

 

 

Tickets Forms

Go to Dashboard >> Happy >> All Ticket Forms

The Ticket Forms feature lets you create and manage various forms for ticket submission. Customize forms for specific needs, such as technical support or feature requests, with tailored fields to collect essential information efficiently. This helps your support team address issues effectively.

• All Ticket Forms
• Ticket Forum template editor

 

All Ticket Forms

The All Ticket Forms page provides an overview of all the ticket forms you have created. This page allows you to manage and organize your forms effectively.

• View Forms: See a list of all ticket forms, including their titles and the created date.
• Shortcode: Each form has a shortcode. Copy and place this shortcode anywhere you want to show the form.
• Edit Forms: Click on a form title to modify its fields and settings.
• Delete Forms: Remove forms that are no longer needed.
• Add new Ticket Form: Click the button to create a new ticket form tailored to specific support needs.

This page helps you maintain and organize your support ticket forms, ensuring you can easily manage and update them as needed. Click the Edit button or “Add new Ticket Form” to go to the template editor.

Ticket Form template editor

The Ticket Form Template Editor allows you to create and customize the layout and content of your ticket forms.

Refer to this documentation for more details.

 

 

FAQs

The shortcode to display list of published FAQ posts on front end is: [happy_list_faq]

The FAQs feature allows you to create and manage a comprehensive list of frequently asked questions to help users quickly find answers to common queries. This self-service resource can reduce the volume of support tickets and provide immediate assistance to your customers.

Creating and Managing FAQs

• Add New FAQ: Easily add new questions and answers to your FAQ section.
  • Title: You should enter the question that users frequently ask.
  • Answer: Provide a detailed response to the question in the input field below the FAQ title.
• Edit FAQ: Modify existing FAQs to update information or improve clarity.
• Delete FAQ: Remove outdated or irrelevant FAQs from the list.
• Search and Filter: Use the search and filter options to quickly find specific FAQs or organize them by category.

By utilizing the FAQ feature, you can improve user experience by providing clear and accessible information, reducing the need for direct support and enhancing overall efficiency.

 

 

Canned Replies

Go to Dashboard >> HAPPY >> All Canned Replies

This feature allows support staff to create and use pre-written responses for common queries. This can significantly speed up response times, ensure consistency in communication, and improve overall efficiency in handling support tickets.

 

When responding to a ticket, support staff can choose from the list of canned replies which they’re assigned to, to insert a pre-written response.

 

 

Settings

Refer to this documentation for details.

 

 

 

 

Setup Wizard

Go to Dashboard >> Happy >> Setup Wizard

The Setup Wizard in HAPPY guides you through the initial configuration of your helpdesk system to ensure it meets your specific needs. Here’s a step-by-step overview of the setup process:

 

Step 1: Setup User

Configure user roles and permissions within the system:

• Support Manager: Assign this role to users who oversee support operations and manage the support team. A Support Manager has full access to all HAPPY settings. Administrators automatically have the Support Manager role
• Customer Support: Assign this role to users who will handle customer inquiries and manage tickets. Ensure each role has the appropriate permissions to perform their duties effectively.

Step 2: Ticket Labels

Create and manage Ticket Labels to categorize and organize incoming tickets:

• Define labels to help classify tickets based on their nature or issue type.
• Assign supporters if needed – The assignees will receive email notification whenever there’s a ticket with this label assigned is created.

Step 3: Ticket Status

Set up Ticket Statuses to track the progress of tickets:

• Create various statuses such as “Open,” “In Progress,” “Resolved,” and “Closed” to reflect different stages in the ticket resolution process.
• Customize statuses to fit your workflow and ensure clear communication of ticket progress.

Step 4: Generate Ticket Forms

Create Ticket Forms to collect detailed information from users when they submit a ticket. Quick generate forms using 3 built-in templates.

 

The setup wizard guides you through basic configuring HAPPY in clear, easy stages.

 

Knowledge Base articles are displayed on front end by the shortcode [happy_list_kb]

Place the shortcode to a page >> All published KB articles will be displayed there. Then use the option under Page Setting to assign the page.

 

The Knowledge Base is a helpful resource where users can find solution to common problems and issues. It provides articles, guides, and tutorials to assist users without needing to contact support.

While FAQs address common questions that users frequently ask. It’s designed to quickly provide answers to the most common queries. They typically includes brief, straightforward answers to common questions. FAQs are usually concise and focus on the most frequent issues or concerns.

Knowledge Base provides a comprehensive collection of articles, guides, and tutorials on various topics. It’s a broad resource designed to address a wide range of issues and questions. A KB post can include detailed information, step-by-step troubleshooting guide, how-to articles, and in-depth explanations. It may cover complex topics and offer solutions to a variety of problems.

Moreover, KB posts can be categorized into different sections or topics, making it easier to navigate and find specific information.

 

All Knowledge Base

Go to Dashboard >> Knowledge Base >> All Knowledge Base

The All Knowledge Base page provides an overview of all the available Knowledge Base articles. This page helps you manage and maintain your Knowledge Base effectively by providing easy access to all your content in one place.

• Filter Knowledge Base by date or by KB Categories (Click the category name under the KB Categories column to view those articles)
• Bulk edit/remove Knowledge Base articles
• Search specific article using the search field
• Click a KB title to go to the KB edit page
• Add new Knowledge Base

 

 

Add new Knowledge Base

The Add New Knowledge Base page allows you to create and publish new articles to expand your Knowledge Base.

• Title: Enter a descriptive title for the new article.
• Content: Write the detailed content of the article, including instructions, solutions, or explanations.
• Category: Assign a category to the article to organize it by topic. Categories are created in KB Categories page or can be created write here using the Add New Category button.
• Save and Publish: Save your article as a draft or publish it directly to make it available to users.

This page is where you can add new resources to your Knowledge Base, helping to keep your support documentation current and useful.

 

 

Knowledge Base Categories

The Knowledge Base Categories page lets you create and organize your KB categories.

• Add new category
• KB Categories list

Add New Category

Use the options under “Add New Category” section on the left to create new KB categories

• Name: Enter the name of the category
• Slug: Slug can be auto generated by categories name. Should be entered in lowercase, typically separated by hyphens.
• Parent Category: Select a parent category if you want to create a hierarchical structure. This allows you to nest subcategories under a main category, helping to organize articles more effectively.
• Description: Provide a brief description of the category. This helps users understand what type of articles or content they can expect to find in this category.

 

KB Categories list

The KB Categories list section on the right provides an overview of all the categories used in your Knowledge Base, allowing you to manage and organize them efficiently.

• View Categories: See a list of all Knowledge Base categories. This view includes the category name, slug, parent category (if applicable), and description.
• Edit or Delete: Modify existing categories or remove those that are no longer needed. Click the edit button to update details or the delete button to remove a category.
• Search and Filter: Use search and filter options to quickly find specific categories or view only those that meet certain criteria.
• Category Details: Click on a category name to view and manage the articles associated with it. This allows you to easily access and organize the content within each category.
• Count: Number of KB articles with a specific category assigned. Click the number to see the list of those articles.

 

This page is essential for managing the structure of your Knowledge Base, making it easier for users to find relevant information and improving the overall user experience.

 

 

Go to Dashboard >> Happy >> Settings

The Settings page is where you can configure various aspects of the HAPPY, to ensure it operates smoothly and meets your support requirements. Scroll down to read explanation of each section within the Settings page:

 

General

Go to Dashboard >> Happy >> Settings >> General

Configure basic settings for your helpdesk system, including User login form, ticket/reply pagination and ticket status for specific action.

Use login:

1. User login: Set up the page or form where customers can log in
   • Default: This form is HAPPY’s.
   • WP Login: Redirects customers to the WordPress login form.
   • Custom: Enter a custom URL for a login page. Customers will be redirected to this page to log in.

Tickets: This is the Ticket Pagination settings – Configure how tickets and replies are displayed

1. List ticket per page: Specify how many tickets to show per page in the ticket list.
2. List replies per page: Specify how many replies to show per page within a single ticket.

Ticket status: Set the status for each ticket action:

1. After Ticket Created: Status to assign when a ticket is created.
2. After Customer Reply: Status to assign when a customer replies.
3. After Supporter Reply: Status to assign when a supporter replies.
4. Close Ticket Status: Status to assign when a ticket is closed.

 

 

Page Setting

HAPPY uses shortcodes to create three essential pages:

1. Support page: Displays a list of all tickets.
2. Create Ticket Page: Provides a form for customers to create new tickets.
3. Knowledge Base Page: Shows your knowledge base articles.

After creating these pages with the respective shortcodes, assign them here. Customers will be redirected to these pages for ticket lists, knowledge base articles, and new ticket creation.

 

 

File attachments

Configure how file attachments are handled in tickets and replies:

1. Reply File Upload: Turn on this option to allow users to attach files in their replies. This must be enabled to use the features below.
2. Reply external link: Enable this option to allow file uploads via an external link in the reply form.
3. Upload Button Text: Enter the label you want for the upload button.
4. Max Upload File Number: Specify how many file a customer can upload at a time.
5. Max Upload File Size: Set the maximum file size for uploads.
6. Allowed File Types: Specify which file extensions are permitted for uploads.

*Here’s the file attachment on a real reply form

 

 

Working hours

Settings in this page allow you to define your support team’s availability and manage holidays effectively. These settings help ensure that your customers are informed about when they can expect support and when your team is unavailable.

• Working hours
• Holiday

 

Working Hours

Configure your support team’s availability by setting specific working hours for each day of the week.

1. Day: Select the day of the week (Monday to Sunday) to configure working hours.
2. Start Hour: Set the starting hour for your support team’s availability.
3. End Hour: Set the ending hour for your support team’s availability.
4. “Fill to Below Fields” Button: Apply the configured hours to all days below.

 

Holiday

Define specific holidays when your support team will be unavailable.

1. Title: Enter the name of the holiday.
2. Date: Specify the duration of the holiday by selecting the starting and ending date/hour.
3. Message: Write a message to inform customers about the holiday.
4. “Add Holiday” button: Add new holiday.

Toggle the arrow on the top left corner to open/close the current event. The holiday title is displayed right next to that arrow. Use the X button on the top right corner to remove a holiday.

 

 

*Working hours

 

*Holidays

 

 

Messages

The Messages settings page allows you to customize the various messages displayed to users during form submission, attachment uploads, thank you responses, and error handling. These messages ensure clear communication and guidance for users interacting with your support system.

• Form submit
• Attachments
• Thank you
• 404

 

Form submit

Customize the messages shown to users when they submit forms.

1. Message Submit Form Error: Message displayed when there is a general error in form submission.
2. Message Submit Form Error Nonce: Message shown when there is a nonce validation error during form submission.
3. Message Message Accept Terms: Message prompting users to accept the terms and conditions.
4. Message Validation Error: Message displayed when there is a validation error in the form.
5. Message Subject Required: Message indicating that the subject field is empty and the customer must fill in value for it.
6. Message Invalid Email: Message shown when the email entered is invalid.
7. Message Invalid Required: Message displayed when a required field is not filled out correctly.
8. Message Invalid Date: Message indicating that the date entered is invalid.
9. Message Invalid Number: Message shown when the number entered is invalid.

 

Attachments

Set the messages related to file attachments in support forms.

1. Message Upload File Type Invalid: Message displayed when the uploaded file type is invalid or not supported.
2. Message Upload Failed: Message shown when the file upload fails.
3. Message Upload Max File: Message indicating that the maximum number of files has been reached.
4. Message Upload File Too Large: Message displayed when the uploaded file size exceeds the allowed limit.

 

Thank you

Customize the thank you message shown to users after successfully submitting a form.

1. Message Thank You: Message displayed to thank users for their ticket submission after they successfully submit.

 

404

Set the message displayed when a user encounters a 404 error.

1. Message 404: Message shown when a requested page is not found.

 

 

Email

The Emails settings page allows you to configure and customize the email notifications, which ensure that both your support team and customers stay informed about ticket activities and updates through clear and consistent email communications.

• Global settings
• Admin notifications
• Customer notifications
• Placeholders supported

 

 

Global settings

The Global Settings allow you to customize the visual and general appearance of your email notifications to ensure they align with your brand’s identity. Here’s a breakdown of each setting:

1. Base color: Choose the primary color for your email notifications
2. Background color: Set the background color for your email. This color will be visible behind all content
3. Body background color: Select a color for the main content area of your email. This ensures that the text and other elements stand out clearly against the background.
4. Body text color: Define the color for the text within the email body. Choose a color that contrasts well with the background to enhance readability.
5. Footer text: Fill in any custom content you want for the email footer.
6. Default Admin Subscriber: Select users that will receive notifications when new ticket is created.

 

Admin Notifications

Admin Notifications keep your support team informed about ticket activities and updates. Configure these settings to ensure timely and accurate communication:

• Reply Ticket
  1. Enable: Toggle this option to turn on or off the notification for ticket replies
  2. Email Subject: Enter the subject line for the reply ticket notification email
  3. Email Heading: Define the heading that will appear at the top of the email. This can provide a brief summary or context about the ticket reply.
  4. Email Content: Customize the body of the email to include relevant information about the ticket reply. Personalize it to provide a clear and actionable message.
  5. To address: Specify the primary recipient of the notification – Bcc Addresses (one per line) and Cc Addresses (one per line)
• Close Ticket
  1. Enable: Activate this option to send notifications when a ticket is closed
  2. Email Subject: Define the subject line for the ticket closure notification email
  3. Email Heading: Set the heading for the closure notification email
  4. Email Content: Write the content of the closure notification email
  5. To address: Bcc Specify the primary recipient for the closure notification – Addresses (one per line) and Cc Addresses (one per line)

 

Customer Notifications

Customer Notifications ensure that your users are kept informed about their tickets and interactions with your support team. The email settings for these notifications are similar to those for admin notifications, with the primary difference being the recipient. So you can refer to the explanatory of Admin Notifications settings above.

 

Placeholders supported in Email Content

• {home_url}
• {ticket_id}
• {customer_display_name}
• {customer_first_name}
• {customer_email}
• {last_reply_on}
• {last_reply_user_name}
• {last_reply_user_email}
• {last_reply_user_first_name}
• {last_reply_user_last_name}
• {guest_token}

 

An email sent to customer/user may look like this: 

*Without custom footer text

 

*With custom footer text

 

 

Style

The settings page allows you to customize the appearance and functionality of your Helpdesk Support Ticket System, including:

• Global Style
• Tickets
• Replies
• Custom CSS

 

Global Style settings

1. Title table header color: Set the color for table headers’ text.
2. Table header background color: Choose the background color for table headers.
3. Title table footer color: Define the color for table footers’ text.
4. Table footer background color: Select the background color for table footers.

 

Tickets

1. Tickets pagination color: Set the text color for pagination links.
2. Tickets hover pagination color: Define the text color for pagination links on hover
3. Tickets selected pagination color: Choose the text color for selected pagination links.
4. Tickets pagination background color: Select the background color for pagination links.
5. Tickets pagination hover background color: Set the background color for pagination links on hover.
6. Tickets pagination selected background color: Define the background color for selected pagination links.

 

Replies

1. Replies pagination color: Set the text color for pagination links.
2. Replies hover pagination color: Define the text color for pagination links on hover.
3. Replies selected pagination color: Choose the text color for selected pagination links.
4. Replies pagination background color: Select the background color for pagination links.
5. Replies pagination hover background color: Set the background color for pagination links on hover.
6. Replies pagination selected background color: Define the background color for selected pagination links.

 

Custom CSS

Add your custom CSS to the input field, to further style and customize your helpdesk interface.

 

 

 

Miscellaneous

The Miscellaneous settings page allows you to configure various important options to enhance your support system’s functionality and compliance. These settings cover:

1. Terms and conditions
2. GDPR compliance
3. Google reCAPTCHA integration.

After you enable and configure the required settings, these fields will show up in the reply form, right above the Submit button. Scroll down to read the details.

 

1. Term and Conditional: Ensure that customers acknowledge your terms and conditions before submitting a ticket.
   • Enable: Toggle this option to require customers to agree to your terms and conditions.
   • Checkbox text: Fill in the content and Customize the text that appears next to the checkbox for terms and conditions agreement.
2. GDPR: Make sure your support system is compliant with GDPR regulations by obtaining customer consent.
   • Enable: Toggle this option to require customers to agree to GDPR compliance.
   • Checkbox text: Customize the text that appears next to the GDPR compliance checkbox.
3. Google reCAPTCHA: This is not only in the ticket form, but also in the HAPPY login form. Once properly configured the Google reCaptcha keys, it will be visible under HAPPY login form by default. For ticket creation form, you must enable it in the form template. 
   • Allow reCaptcha: Toggle this option to enable Google reCAPTCHA for your support forms.
   • Version: Select the version of Google reCAPTCHA you want to use.
   • Site key: Enter your Google reCAPTCHA site key. Following steps in number 5. Guide below to get this information.
   • Secret key: Enter your Google reCAPTCHA secret key. Following steps in number 5. Guide below to get this information.
   • Guide: Access a guide to help you configure and integrate Google reCAPTCHA

By setting up these options, you can ensure that your support system is secure, compliant with regulations, and clear about terms and conditions, providing a better experience for both your support team and customers.

*An example of a ticket form with all

 

 

WooCommerce

Refer to this documentation

The Ticket Form Template Editor allows you to create and customize the layout and content of your ticket forms.

• Overview
• Detailed explanation: Ticket Form Options & Fields Settings
• How to build Ticket Form

 

Overview

The template has a clean interface for creating and customizing your support ticket forms. It consists of 4 section – with 3 main ones:

1. Ticket Form title
2. Builder Panel/Toolbox (Left)
3. Workspace/Template Area (Middle)
4. Structure Panel/Template Tree (Right)

Form title

Enter the title of the form to specify its purpose.

Builder Panel/Toolbox (Left)

• Contains all the elements and fields you can add to your form.
• Provides options for editing and customizing for the whole form and for each element.
• Preset Template: Choose a built-in template instead of building an empty form.
• Shortcut Buttons: Quick access to go back to the Ticket Forms list, add a new Ticket Form, trash the current form, view in full screen, and save the form template.

Workspace/Template Area (Middle)

• The main working area where you design and arrange your form.
• Allows you to see a live preview of your form as you build it.

Structure Panel/Template Tree (Right)

• Displays an overview of the form’s structure.
• Shows how components are arranged within rows, columns, and sections.
• Helps you navigate and manage the layout of your form efficiently.
• You can drag and drop to change field position in this panel.

 

 

Ticket Form Options and Fields Supported

• Ticket Form settings
• Ticket Form customizing options
• Preset Template
• Field settings
  1. Heading
  2. Gap
  3. Divider
  4. Paragraph
  5. Text input
  6. Number input
  7. Textarea
  8. Select
  9. Checkbox
  10. Radio
  11. Upload
  12. Editor

 

Ticket Form settings

1. Captcha: Add a Captcha to your form to prevent spam and ensure submissions are from real users. Configure Captcha settings in Miscellaneous settings page
2. Subject: Add a text input field. These fields will then be available for you to choose in this option
   Note: Ticket subject is a required field in a form
3. Show form to: Control who can view and access the form. Options may include:
   • All: Anyone can view and submit the form.
   • Only User Login: Only users who are logged in can access the form.
   • Only Guest: Only users who are not logged in can access the form

   Note: If you select ‘All‘ or ‘Only Guest,’ the form must include a Customer Email field. Add a text input field and set the type to ‘Email.’ This field will then be available for selection under Customer Email options.

4. Customer Email: This field is available and required when you select “All” or “Only Guest” in option 3 above.
5. Notice to admin: Click the Edit email button to edit email notification sent to admin.
   • Enable Admin notification email: Send an email notification to admin when a ticket is submitted.
   • CC/BCC: Additional recipients who will receive a copy of the notification, or who will receive the notification without other recipients knowing
   • Email Subject: Customize the subject line for admin notification emails.
   • Email Body: Configure the content of the email sent to admin, including dynamic placeholders supported.
6. Notice to user: Click the Edit email button to edit email notification sent to admin.
   • Enable User notification email: Send an email notification to admin when their ticket is submitted.
   • CC/BCC: Additional recipients who will receive a copy of the notification, or who will receive the notification without other recipients knowing
   • Email Subject: Customize the subject line for user notification emails.
   • Email Body: Configure the content of the email sent to users, including dynamic placeholders supported.

An email to admin/user upon ticket creation looks like this

 

 

Ticket Form customizing options

1. Width: Adjust the overall width of the form to fit your design requirements
2. Padding: Set the internal spacing between the form’s content and its edges to ensure content is not too close to the borders
3. Margin: Define the external spacing around the form to control how it is positioned relative to other elements on the page
4. Color: Choose a global color for the entire form. You can also customize the color of individual fields within their settings
5. Background color: Select a background color for the form
6. Border:
   • Width: Set the thickness of the form’s border in pixels
   • Color: Choose the color of the border to match your design
   • Style
     • None: No border
     • Solid: A single, continuous line
     • Dotted: A line made of dots
     • Dashed: A line made of dashes
     • Double: A line with a double border
   • Radius: Adjust the roundness of the border corners by setting the radius in pixels

 

Preset Template

The Preset Template option allows you to quickly create a new ticket form using pre-designed templates. At the moment, we have 3 built-in templates.

 

Field settings

Each field in your ticket form has three setting pages:

• General: Configure basic properties such as field label, placeholder text, and whether the field is required or optional.
• Style: Adjust the visual appearance of the field, including font size, text color, and background color, to match your form’s design.
• Advanced: You can configure conditional logic for showing or hiding a field based on user input.

Heading

Displays a title or heading in the form, ranging from h1 to h6, and p. Useful for organizing and labeling different sections

General

1. Enable: Toggle this option to show/hide the field
2. Content: Label the field how you want
3. Heading type: Define the importance and hierarchy of headings, ranging from h1 to h6 and p

Style

1. Width: Adjust the overall width of the form to fit your design requirements
2. Padding: Set the internal spacing between the form’s content and its edges to ensure content is not too close to the borders
3. Margin: Define the external spacing around the form to control how it is positioned relative to other elements on the page
4. Color: Choose a color for the heading text
5. Background color: Select a background color for the field
6. Alignment: Align the field – Left, Center or Middle
7. Border: Customize the field border – refer to Ticket Form customizing options for more details
8. Custom class: Define a class for this field for custom CSS if needed

Advanced

1. Enable: Turn on or off the conditional display settings for the field
2. Display: Choose whether to show or hide the field based on specific conditions below
3. Relation: Define how multiple conditions are combined:
   • And: All specified conditions must be met for the field to be displayed.
   • Or: Any one of the specified conditions must be met for the field to be displayed.
4. Rules: Set up the criteria for displaying or hiding the field by selecting
   • Element: The specific field that will be used to trigger the condition.
   • Operation: The type of comparison to apply (e.g., is, is not, is empty, is not empty).
   • Value: The value that the selected element or field must meet for the condition to apply.

Gap

Adds spacing between form elements to improve layout and readability. Helps separate sections visually

General

1. Enable: Toggle this option to show/hide the field
2. Gap: Adjust the gap space by px

Style

1. Width: Adjust the overall width of the form to fit your design requirements
2. Padding: Set the internal spacing between the form’s content and its edges to ensure content is not too close to the borders
3. Margin: Define the external spacing around the form to control how it is positioned relative to other elements on the page
4. Color: Choose a color for the field
5. Background color: Select a background color for the field
6. Alignment: Align the field – Left, Center or Middle
7. Border: Customize the field border – refer to Ticket Form customizing options for more details
8. Custom class: Define a class for this field for custom CSS if needed

Advanced

1. Enable: Turn on or off the conditional display settings for the field
2. Display: Choose whether to show or hide the field based on specific conditions below
3. Relation: Define how multiple conditions are combined:
   • And: All specified conditions must be met for the field to be displayed.
   • Or: Any one of the specified conditions must be met for the field to be displayed.
4. Rules: Set up the criteria for displaying or hiding the field by selecting
   • Element: The specific field that will be used to trigger the condition.
   • Operation: The type of comparison to apply (e.g., is, is not, is empty, is not empty).
   • Value: The value that the selected element or field must meet for the condition to apply.

Divider

Inserts a horizontal line to separate sections within the form. Useful for clearly demarcating different areas of the form.

General

1. Enable: Toggle this option to show/hide the field
2. Thickness (px): Set the thickness of the divider line in pixels
3. Line style: Solid, Dotted, Dashed, or Double
4. Line color: Select the color of the divider line to match your form’s design

Style

1. Width: Adjust the overall width of the form to fit your design requirements
2. Padding: Set the internal spacing between the form’s content and its edges to ensure content is not too close to the borders
3. Margin: Define the external spacing around the form to control how it is positioned relative to other elements on the page
4. Color: Choose a color for the field
5. Background color: Select a background color for the field
6. Alignment: Align the field – Left, Center or Middle
7. Border: Customize the field border – refer to Ticket Form customizing options for more details
8. Custom class: Define a class for this field for custom CSS if needed

Advanced

1. Enable: Turn on or off the conditional display settings for the field
2. Display: Choose whether to show or hide the field based on specific conditions below
3. Relation: Define how multiple conditions are combined:
   • And: All specified conditions must be met for the field to be displayed.
   • Or: Any one of the specified conditions must be met for the field to be displayed.
4. Rules: Set up the criteria for displaying or hiding the field by selecting
   • Element: The specific field that will be used to trigger the condition.
   • Operation: The type of comparison to apply (e.g., is, is not, is empty, is not empty).
   • Value: The value that the selected element or field must meet for the condition to apply.

Paragraph

Provides a text block for instructions, explanations, or any additional information needed for users filling out the form. This field is defined by admin and customer can’t edit it.

General

1. Enable: Toggle this option to show/hide the field
2. Content field: Add the content you want here. This field supports media, visual/text editor and text customizing options.

Style

1. Width: Adjust the overall width of the form to fit your design requirements
2. Padding: Set the internal spacing between the form’s content and its edges to ensure content is not too close to the borders
3. Margin: Define the external spacing around the form to control how it is positioned relative to other elements on the page
4. Color: Choose a color for the field
5. Background color: Select a background color for the field
6. Alignment: Align the field – Left, Center or Middle
7. Border: Customize the field border – refer to Ticket Form customizing options for more details
8. Custom class: Define a class for this field for custom CSS if needed

Advanced

1. Enable: Turn on or off the conditional display settings for the field
2. Display: Choose whether to show or hide the field based on specific conditions below
3. Relation: Define how multiple conditions are combined:
   • And: All specified conditions must be met for the field to be displayed.
   • Or: Any one of the specified conditions must be met for the field to be displayed.
4. Rules: Set up the criteria for displaying or hiding the field by selecting
   • Element: The specific field that will be used to trigger the condition.
   • Operation: The type of comparison to apply (e.g., is, is not, is empty, is not empty).
   • Value: The value that the selected element or field must meet for the condition to apply.

Text input

Text input is meant to receive any small string of characters such as: Username, Name, Last Name, Date of birth, etc

General

1. Enable: Toggle this option to show/hide the field
2. Required: Enable to make this field mandatory for users to complete before submitting the form
3. Label: Enter the text that will appear as the label for the text input field
4. Slug: This value can be auto-generated by the label, or admin can manually enter a unique identifier or name for the field
5. Type: Specify the type of input expected. This influences the keyboard layout on mobile devices and validation. These supported formats are commonly used by HTML5
   1. Text: Basic text input for general text entry
   2. Email: Validates that the input is in the format of an email address (e.g., example@domain.com)
   3. Tel: Designed for phone number input, often with a numeric keypad on mobile devices
   4. URL: Ensures the input is formatted as a valid URL (e.g., https://www.example.com)
   5. Date: Allows users to select a date from a calendar picker
   6. Time: Provides a time picker for selecting a specific time
   7. Date time: Combines date and time inputs into a single field, allowing for both date and time selection
6. Default value: Set a pre-filled value (placeholders supported) that appears in the field by default. This can provide users with a starting point or example.
7. Placeholder: Add placeholder text that appears in the field when it is empty, giving users a hint about the expected input.
8. Set as subject field button: Click this option if you want the text input field to be used as the subject field for the ticket, without the need to go back to the form settings to set up. Once selected, it becomes “Is subject field” button.

Style

1. Input are style: These settings are for the input information – the content which is filled in the input field
   1. Text Color: Adjust the color of the text that users input into the field
   2. Background Color: Set the background color of the input field.
   3. Border (px): Define the thickness of the input field borders in pixels
   4. Border Color: Choose the color of the input field borders
   5. Border Style: Specify the style of the input field border, such as solid, dotted, or dashed
   6. Radius (px): Set the curvature of the input field’s corners in pixels, giving it a rounded appearance
2. Field area style : These settings are for the entire field
   1. Width: Adjust the overall width of the form to fit your design requirements
   2. Padding: Set the internal spacing between the form’s content and its edges to ensure content is not too close to the borders
   3. Margin: Define the external spacing around the form to control how it is positioned relative to other elements on the page
   4. Color: Choose a color for the field
   5. Background color: Select a background color for the field
   6. Alignment: Align the field – Left, Center or Middle
   7. Border: Customize the field border – refer to Ticket Form customizing options for more details
   8. Custom class: Define a class for this field for custom CSS if needed

Advanced

1. Enable: Turn on or off the conditional display settings for the field
2. Display: Choose whether to show or hide the field based on specific conditions below
3. Relation: Define how multiple conditions are combined:
   • And: All specified conditions must be met for the field to be displayed.
   • Or: Any one of the specified conditions must be met for the field to be displayed.
4. Rules: Set up the criteria for displaying or hiding the field by selecting
   • Element: The specific field that will be used to trigger the condition.
   • Operation: The type of comparison to apply (e.g., is, is not, is empty, is not empty).
   • Value: The value that the selected element or field must meet for the condition to apply.

Number input

Lets users enter numeric values. Useful for fields requiring numbers, like age or quantity

General

1. Enable: Toggle this option to show/hide the field
2. Required: Enable to make this field mandatory for users to complete before submitting the form
3. Label: Enter the text that will appear as the label for the number input field
4. Slug: This value can be auto-generated by the label, or admin can manually enter a unique identifier or name for the field
5. Default value: Set a pre-filled value (placeholders supported) that appears in the field by default. This can provide users with a starting point or example.
6. Placeholder: Add placeholder text that appears in the field when it is empty, giving users a hint about the expected input.
7. Min: Minimum allowable value. Users will not be able to enter a number lower than this value.
8. Max: Maximum allowable value. Users will not be able to enter a number higher than this value.

Style

1. Width: Adjust the overall width of the form to fit your design requirements
2. Padding: Set the internal spacing between the form’s content and its edges to ensure content is not too close to the borders
3. Margin: Define the external spacing around the form to control how it is positioned relative to other elements on the page
4. Color: Choose a color for the field
5. Background color: Select a background color for the field
6. Alignment: Align the field – Left, Center or Middle
7. Border: Customize the field border – refer to Ticket Form customizing options for more details
8. Custom class: Define a class for this field for custom CSS if needed

Advanced

1. Enable: Turn on or off the conditional display settings for the field
2. Display: Choose whether to show or hide the field based on specific conditions below
3. Relation: Define how multiple conditions are combined:
   • And: All specified conditions must be met for the field to be displayed.
   • Or: Any one of the specified conditions must be met for the field to be displayed.
4. Rules: Set up the criteria for displaying or hiding the field by selecting
   • Element: The specific field that will be used to trigger the condition.
   • Operation: The type of comparison to apply (e.g., is, is not, is empty, is not empty).
   • Value: The value that the selected element or field must meet for the condition to apply.

Textarea

Compared to Text input, text area is ideal for long text inputs. This element provides a larger text area for users to enter multi-line text

General

1. Enable: Toggle this option to show/hide the field
2. Required: Enable to make this field mandatory for users to complete before submitting the form
3. Label: Enter the text that will appear as the label for the text area field
4. Slug: This value can be auto-generated by the label, or admin can manually enter a unique identifier or name for the field
5. Default value: Set a pre-filled value that appears in the field by default. This can provide users with a starting point or example.
6. Placeholder: Add placeholder text that appears in the field when it is empty, giving users a hint about the expected input.
7. Row: Specify the number of visible rows in the text area. This setting determines the height of the text area and how much content is visible without scrolling. Increasing the number of rows will make the text area taller, allowing users to see more of their input at once.

Style

1. Input are style: These settings are for the input information – the content which is filled in the input field
   1. Text Color: Adjust the color of the text that users input into the field
   2. Background Color: Set the background color of the input field.
   3. Border (px): Define the thickness of the input field borders in pixels
   4. Border Color: Choose the color of the input field borders
   5. Border Style: Specify the style of the input field border, such as solid, dotted, or dashed
   6. Radius (px): Set the curvature of the input field’s corners in pixels, giving it a rounded appearance
2. Field area style : These settings are for the entire field
   1. Width: Adjust the overall width of the form to fit your design requirements
   2. Padding: Set the internal spacing between the form’s content and its edges to ensure content is not too close to the borders
   3. Margin: Define the external spacing around the form to control how it is positioned relative to other elements on the page
   4. Color: Choose a color for the field
   5. Background color: Select a background color for the field
   6. Alignment: Align the field – Left, Center or Middle
   7. Border: Customize the field border – refer to Ticket Form customizing options for more details
   8. Custom class: Define a class for this field for custom CSS if needed

Advanced

1. Enable: Turn on or off the conditional display settings for the field
2. Display: Choose whether to show or hide the field based on specific conditions below
3. Relation: Define how multiple conditions are combined:
   • And: All specified conditions must be met for the field to be displayed.
   • Or: Any one of the specified conditions must be met for the field to be displayed.
4. Rules: Set up the criteria for displaying or hiding the field by selecting
   • Element: The specific field that will be used to trigger the condition.
   • Operation: The type of comparison to apply (e.g., is, is not, is empty, is not empty).
   • Value: The value that the selected element or field must meet for the condition to apply.

Select

Creates a dropdown menu for users to choose from a list of options. Efficient for selecting one item from multiple choices

General

1. Enable: Toggle this option to show/hide the field
2. Required: Enable to make this field mandatory for users to complete before submitting the form
3. Label: Enter the text that will appear as the label for the Select field
4. Slug: This value can be auto-generated by the label, or admin can manually enter a unique identifier or name for the field
5. Placeholder: Add placeholder text that appears in the field when it is empty, giving users a hint about the expected input.
6. Options: Click the plus icon to add more options and the red X button to remove an option. Value and Name are required for each option and you can make one option default. After configuring, this field will show up as a dropdown on front end.

Style

1. Width: Adjust the overall width of the form to fit your design requirements
2. Padding: Set the internal spacing between the form’s content and its edges to ensure content is not too close to the borders
3. Margin: Define the external spacing around the form to control how it is positioned relative to other elements on the page
4. Color: Choose a color for the field
5. Background color: Select a background color for the field
6. Alignment: Align the field – Left, Center or Middle
7. Border: Customize the field border – refer to Ticket Form customizing options for more details
8. Custom class: Define a class for this field for custom CSS if needed

Advanced

1. Enable: Turn on or off the conditional display settings for the field
2. Display: Choose whether to show or hide the field based on specific conditions below
3. Relation: Define how multiple conditions are combined:
   • And: All specified conditions must be met for the field to be displayed.
   • Or: Any one of the specified conditions must be met for the field to be displayed.
4. Rules: Set up the criteria for displaying or hiding the field by selecting
   • Element: The specific field that will be used to trigger the condition.
   • Operation: The type of comparison to apply (e.g., is, is not, is empty, is not empty).
   • Value: The value that the selected element or field must meet for the condition to apply.

Checkbox

Enables users to select one or more options from a list. Useful for multiple-choice questions where more than one option can be selected

General

1. Enable: Toggle this option to show/hide the field
2. Required: Enable to make this field mandatory for users to complete before submitting the form
3. Label: Enter the text that will appear as the label for the Checkbox field
4. Slug: This value can be auto-generated by the label, or admin can manually enter a unique identifier or name for the field
5. Direction: Make the checkboxes show up vertically or horizontally
6. Options: Click the plus icon to add more options and the red X button to remove an option. Value and Name are required for each option and you can make one option default. After configuring, this field will show up as checkboxes on front end.

Style

1. Width: Adjust the overall width of the form to fit your design requirements
2. Padding: Set the internal spacing between the form’s content and its edges to ensure content is not too close to the borders
3. Margin: Define the external spacing around the form to control how it is positioned relative to other elements on the page
4. Color: Choose a color for the field
5. Background color: Select a background color for the field
6. Alignment: Align the field – Left, Center or Middle
7. Border: Customize the field border – refer to Ticket Form customizing options for more details
8. Custom class: Define a class for this field for custom CSS if needed

Advanced

1. Enable: Turn on or off the conditional display settings for the field
2. Display: Choose whether to show or hide the field based on specific conditions below
3. Relation: Define how multiple conditions are combined:
   • And: All specified conditions must be met for the field to be displayed.
   • Or: Any one of the specified conditions must be met for the field to be displayed.
4. Rules: Set up the criteria for displaying or hiding the field by selecting
   • Element: The specific field that will be used to trigger the condition.
   • Operation: The type of comparison to apply (e.g., is, is not, is empty, is not empty).
   • Value: The value that the selected element or field must meet for the condition to apply.

Radio

Allows users to select a single option from a set of choices. The difference between Select and Radio lies in their design – Radio shows a list of options with radio buttons, where users can see all options at once and select only one

General

1. Enable: Toggle this option to show/hide the field
2. Required: Enable to make this field mandatory for users to complete before submitting the form
3. Label: Enter the text that will appear as the label for the Radio field
4. Slug: This value can be auto-generated by the label, or admin can manually enter a unique identifier or name for the field
5. Direction: Make the radio buttons show up vertically or horizontally
6. Options: Click the plus icon to add more options and the red X button to remove an option. Value and Name are required for each option and you can make one option default. After configuring, this field will show up as radio buttons on front end.

Style

1. Width: Adjust the overall width of the form to fit your design requirements
2. Padding: Set the internal spacing between the form’s content and its edges to ensure content is not too close to the borders
3. Margin: Define the external spacing around the form to control how it is positioned relative to other elements on the page
4. Color: Choose a color for the field
5. Background color: Select a background color for the field
6. Alignment: Align the field – Left, Center or Middle
7. Border: Customize the field border – refer to Ticket Form customizing options for more details
8. Custom class: Define a class for this field for custom CSS if needed

Advanced

1. Enable: Turn on or off the conditional display settings for the field
2. Display: Choose whether to show or hide the field based on specific conditions below
3. Relation: Define how multiple conditions are combined:
   • And: All specified conditions must be met for the field to be displayed.
   • Or: Any one of the specified conditions must be met for the field to be displayed.
4. Rules: Set up the criteria for displaying or hiding the field by selecting
   • Element: The specific field that will be used to trigger the condition.
   • Operation: The type of comparison to apply (e.g., is, is not, is empty, is not empty).
   • Value: The value that the selected element or field must meet for the condition to apply.

Upload

This is an upload file button that lets users attach files to their submission. Useful for forms that require image uploads.

General

1. Enable: Toggle this option to show/hide the field
2. Custom Button: the upload button will use the default style and settings provided by the form builder. Enable this option and open the “Custom Button” section to access advanced settings for customization
3. Label: Enter the text that will appear as the label for the Radio field
4. Slug: This value can be auto-generated by the label, or admin can manually enter a unique identifier or name for the field
5. Button label: Specify the text that will appear on the upload button itself, such as “Choose File” or “Upload Now.”
6. Multiple: Toggle this option to allow users to upload multiple files at once. When enabled, users can select and upload more than one file in a single action.

Style

1. Width: Adjust the overall width of the form to fit your design requirements
2. Padding: Set the internal spacing between the form’s content and its edges to ensure content is not too close to the borders
3. Margin: Define the external spacing around the form to control how it is positioned relative to other elements on the page
4. Color: Choose a color for the field
5. Background color: Select a background color for the field
6. Alignment: Align the field – Left, Center or Middle
7. Border: Customize the field border – refer to Ticket Form customizing options for more details
8. Custom class: Define a class for this field for custom CSS if needed

Advanced

1. Enable: Turn on or off the conditional display settings for the field
2. Display: Choose whether to show or hide the field based on specific conditions below
3. Relation: Define how multiple conditions are combined:
   • And: All specified conditions must be met for the field to be displayed.
   • Or: Any one of the specified conditions must be met for the field to be displayed.
4. Rules: Set up the criteria for displaying or hiding the field by selecting
   • Element: The specific field that will be used to trigger the condition.
   • Operation: The type of comparison to apply (e.g., is, is not, is empty, is not empty).
   • Value: The value that the selected element or field must meet for the condition to apply.

Editor

Provides a rich text editor for users to input and format text. Suitable for detailed content, like descriptions or formatted responses

General

1. Enable: Toggle this option to show/hide the field
2. Custom Button: the upload button will use the default style and settings provided by the form builder. Enable this option and open the “Custom Button” section to access advanced settings for customization
3. Label: Enter the text that will appear as the label for the Radio field
4. Slug: This value can be auto-generated by the label, or admin can manually enter a unique identifier or name for the field
5. Default value: Set a pre-filled value (placeholders supported) that appears in the field by default. This can provide users with a starting point or example.

Style

1. Width: Adjust the overall width of the form to fit your design requirements
2. Padding: Set the internal spacing between the form’s content and its edges to ensure content is not too close to the borders
3. Margin: Define the external spacing around the form to control how it is positioned relative to other elements on the page
4. Color: Choose a color for the field
5. Background color: Select a background color for the field
6. Alignment: Align the field – Left, Center or Middle
7. Border: Customize the field border – refer to Ticket Form customizing options for more details
8. Custom class: Define a class for this field for custom CSS if needed

Advanced

1. Enable: Turn on or off the conditional display settings for the field
2. Display: Choose whether to show or hide the field based on specific conditions below
3. Relation: Define how multiple conditions are combined:
   • And: All specified conditions must be met for the field to be displayed.
   • Or: Any one of the specified conditions must be met for the field to be displayed.
4. Rules: Set up the criteria for displaying or hiding the field by selecting
   • Element: The specific field that will be used to trigger the condition.
   • Operation: The type of comparison to apply (e.g., is, is not, is empty, is not empty).
   • Value: The value that the selected element or field must meet for the condition to apply.

 

 

Build, Manage and Use Ticket Form

Base on the information above, you can

• Create a Ticket Form
• Manage Ticket Forms
• Use Ticket Forms – Show them up on front end

Creating a Ticket Form

• Add New Form: Under All Ticket Forms page, click the “Add new Ticket Form” button to create a new ticket form.
• Form Title: Enter a title for the form that describes its purpose.
• Add Fields: In Workspace, use the plus    button to add field to the template
• Field Configuration: Customize each field’s label, description, placeholder, set up conditional rules to show/hide fields based on user input, etc. Refer to this documentation for details in each field.
• Drag and Drop: Easily arrange the order of fields using the drag-and-drop interface, you can do that either in Workspace or Template Tree
• Save and Publish: Save your changes and publish the form to make it available for users to fill out.

Managing Ticket Forms

• Edit Form: Under All Ticket Forms page, click any form to go to the form template editor.
• Delete Form: Remove forms that are no longer needed.

Using Ticket Forms

• Show Form to: Set up who can see the form – logged-in users, non-logged-in users, or both
• All forms that a user can see are visible under Create Ticket Page assigned under Page Settings.
• Add the ticket form ID to the form shortcode [happy_forms ids=''] to display any form wherever you want.
• To display multiple forms, add the form IDs, separated by commas. E.g. [happy_forms ids='1,2']
• To display all forms, use this shortcode [happy_forms]

 

 

 

From the Ticket List on front end, users can access their happy author page.

• For Supporters
• For Customers

For Supporters

To access their own author page

Step 1: Hover over the hamburger menu and click “Change canned reply”

Step 2: Now they are redirected to the author page. The page URL will look like this http://yourwebsite/list-ticket/happy-author/

Here they can edit all canned replies assigned to them.

 

To access customer’s author page

Step 1: Click the customer name under “REQUESTER” column

Step 2: Now they are redirected to the author page. The page URL will look just like above plus the author ID http://yourwebsite/list-ticket/happy-author/8/

 

For Customers

Customer can access their HAPPY author page via this URL: http://yourwebsite/list-ticket/happy-author/

 

 

Helpdesk for WooCommerce

When both WooCommerce and HAPPY are enabled, a ‘WooCommerce’ tab will appear in the HAPPY settings.

Step 1: Enable the “Enable Choose Order” option to allow users to create tickets for specific order or order item

 

Step 2: Choose WooCommerce Orders

• Now in the Create Ticket Page, there are 2 steps. First, if you want to create a ticket for a specific order, choose an order and its order item under “Select your order need support” and “Select your product need support“.
• If you don’t want to assign a specific order to your ticket, you can skip this step and click the ‘Ticket’ button at the top right corner of the ticket form.

Step 3: Create ticket

Then, you’ll be redirected to the ticket form, start creating your ticket now.

Thank you for your attention!

If you have any question, please create a topic at our FORUM, we will support within 24 hours.