Improved ticket form selector

If you have more than one ticket form on your HelpCenter, by default, Zendesk shows the different forms as a dropdown.

At Lotus Themes, we offer an elegant and user-friendly way to show these forms: as tiles.
Now your customers will see all available forms in a convenient and modern way. Additionally, you can add an icon to each ticket form tile so your Submit a Request page will look even better.

1. Unpack the downloaded zip file. There will be the following files:

   • lotus-icons.js
   • tickets-forms.js
   • Readme.txt

2. In Guide, click on the Customize design icon in the sidebar. The Theming center page opens.

3. Click the theme you want to edit to open it.

4. Click the Edit code button.

5. In the Assets section, click Add asset, then browse to select your files.

   Select all *.js files from unpacked zip.  The files are added to your list of asset files.

6. In your theme code configuration page under the templates directory, click the document_head.hbs file.

7. In the document_head.hbs file, paste the following snippet:

   <script src="{{asset 'tickets-forms.js'}}"></script>
   
   <script>
   <!--  Hide default forms dropdown on the form selection page -->
   
     window.addEventListener('load', () => {
       const defaultForm = document.querySelector('.lt-new-request-form--form');
       const urlParts = window.location.href.split('/');
       const isFormSubmitted = urlParts[urlParts.length - 1]  === 'requests';
       const hasTicketFormId = window.location.href.indexOf('?ticket_form_id') > -1;
   
       if (defaultForm && (hasTicketFormId || isFormSubmitted)) {
         defaultForm.classList.remove('is-hidden');
       }
     })
   
   </script>
   

8. In your theme code configuration page, click the style.css file. Paste the following code snippet to the bottom of the file:

9. .lt-block-list-item__icon-form {
     margin-bottom: 16px;
   }

10. In your theme code configuration page under the templates directory, click the new_request_page.hbs file.

11. In the new_request_page.hbs file, replace the existing code:

    <div class="lt-new-request-form">{{request_form wysiwyg=true}}</div>

    with the following snippet:

    <div class="lt-new-request-form" x-data="Theme.TicketForms()" x-init="getTicketForms()">
     <ul class="lt-block-list lt-list-unstyled lt-row lt-gy-5 lt-row-cols-md-3 lt-mb-0">
       <template x-for="(form, index) in forms" :key="index">
         <li class="lt-block-list-item">
           <a class="lt-block-list-item__link" x-text="form.name" :href="form.url"></a>
           <p class="form-id is-hidden" x-text="form.value"></p>
         </li>
       </template>
     </ul>
     <div class="is-hidden lt-new-request-form lt-new-request-form--form lt-pt-6">
       {{request_form wysiwyg=true}}
     </div>
    </div>

12. Click Publish.

If you want to change the icons, please check our Changing category, section, ticket form, topic icons article.