Form lists

Form lists allow visitors to choose between end-user facing forms on the New Request page.

Available on the New Request page, these patterns allow you to present your forms using new and interesting layouts other than the dropdown list provided by Zendesk. You can modify and adapt the micro-templates to bring in styles that you like from other areas of the help center (for example, category lists).

Form options as boxes
View code
<template id="tmpl-form-list">
  <% if (forms.length) { %>
    <% if (title) { %>
      <h2><%= title %></h2>
    <% } %>
    <ul class="list-unstyled row row-sm my-6">
      <% forms.forEach(function(form) { %>
        <li class="md:col-6 lg:col-4 text-center mb-4" id="<%= form.id %>">
          <a class="card p-5 link-plain border-primary h-full text-primary hover:text-primary-inverse hover:bg-primary" href="<%= form.html_url %>">
            <h4 class="h4 m-0 font-medium text-inherit"><%= form.title %></h4>
          </a>
        </li>
      <% }); %>
    </ul>
  <% } %>
</template>
Form options as list items
View code
<template id="tmpl-form-list">
  <% if (title) { %>
    <h2><%= title %></h2>
  <% } %>
  <div class="card bg-white my-6">
    <% if (forms.length) { %>
      <div class="list-group list-group-flush">
        <% forms.forEach(function(form) { %>
          <a class="list-group-item list-group-item-action p-4" href="<%= form.html_url %>">
            <div class="media align-items-center">
              <div class="media-body font-semibold">
                <%= form.title %>
              </div>
              <svg class="svg-icon fill-current text-primary ml-2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 190 323" aria-hidden="true">
                <path d="M190,162 C190,168 187,174 183,178 L38,317 C34,321 28,323 23,323 C17,323 11,321 7,317 C-2,308 -2,294 7,285 L135,162 L7,39 C-2,31 -2,16 7,7 C15,-2 29,-2 38,7 L183,146 C187,150 190,156 190,162 Z"></path>
              </svg>
            </div>
          </a>
        <% }); %>
      </div>
    <% } %>
  </div>
</template>
List group with sign in prompt
View code
<template id="tmpl-form-list">
  <% if (forms.length) { %>
    <% if (title) { %>
      <h2><%= title %></h2>
    <% } %>
    <div class="card max-w-sm bg-white my-6">
      {{#isnt signed_in}}
        <div class="media p-6 border-bottom">
          <svg class="mr-5" width="60px" height="60px" viewBox="0 0 60 60" xmlns="http://www.w3.org/2000/svg">
            <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
              <circle stroke="#0072EF" stroke-width="4" cx="30" cy="30" r="28"></circle>
              <path d="M39.720705,42 L20.279295,42 C19.2329035,42 18.4602069,40.9545 18.8548719,39.993 C20.686057,35.547 24.9880568,33 29.9992439,33 C35.0119432,33 39.313943,35.547 41.1451281,39.993 C41.5397931,40.9545 40.7670965,42 39.720705,42 M24,24 C24,20.691 26.6925,18 30,18 C33.309,18 36,20.691 36,24 C36,27.309 33.309,30 30,30 C26.6925,30 24,27.309 24,24 M44.9335115,41.4539959 C43.8203333,36.4154901 40.3383975,32.6969858 35.7555331,31.0094839 C38.1840072,29.0939817 39.6003619,25.9964781 39.0797558,22.6049742 C38.4764653,18.6704697 35.1353994,15.521966 31.1022337,15.0629655 C25.5348113,14.4284648 20.8126081,18.6734697 20.8126081,23.9999758 C20.8126081,26.8349791 22.1539343,29.360982 24.2455457,31.0094839 C19.6611501,32.6969858 16.1807455,36.4154901 15.066036,41.4539959 C14.6618007,43.285498 16.1684959,45 18.0809576,45 L41.91859,45 C43.8325829,45 45.339278,43.285498 44.9335115,41.4539959" fill="#0072EF"></path>
            </g>
          </svg>
          <div class="media-body">
            <h3 class="h2 mt-0 mb-3">
              Have an account?
            </h3>
            <p class="text-gray-600 font-size-lg mb-0">
              Signing in before you submit a request will allow us to help you faster.
            </p>
          </div>
        </div>
      {{/isnt}}
      <div class="list-group list-group-flush">
        <% forms.forEach(function(form) { %>
          <a class="list-group-item list-group-item-action p-4" href="<%= form.html_url %>">
            <div class="media align-items-center">
              <div class="media-body font-semibold">
               <%= form.title %>
              </div>
              <svg class="svg-icon fill-current text-primary ml-2" viewBox="0 0 190 323" xmlns="http://www.w3.org/2000/svg">
                <path d="M190,162 C190,168 187,174 183,178 L38,317 C34,321 28,323 23,323 C17,323 11,321 7,317 C-2,308 -2,294 7,285 L135,162 L7,39 C-2,31 -2,16 7,7 C15,-2 29,-2 38,7 L183,146 C187,150 190,156 190,162 Z"></path>
              </svg>
            </div>
          </a>
        <% }); %>
      </div>
    </div>
  <% } %>
</template>

Form lists

Form list patterns can be used anywhere on the New Request page (new_request_page.hbs).

To use a custom form list pattern:

  1. Select an option from the Form list style setting in the New Request page elements setting group other than “Standard”.
  2. Copy and paste the code of your selected pattern at the end of the page template.

Related patterns