Ticket Forms as Tiles instead of Drop Down

Hi Katie

It’s little tricky but doable. I will see if I can share a code snippet with you.

Cheers.

Abdul Qabiz
Team Diziana

Thank you so much, Abdul! I really appreciate it!

Hi 406520153814

You can do something like this:

New Request Page:

New Request Page with a selected Form:

The selected form's card will be shown as active (blue color), and the form's card will be moved to first position. This is to make it easy to understand and related. As you can see Ticket Form 3 was moved to be in first position. This can be removed from the code.

You can open new_request_page.hbs of your theme, take back up of existing code, and replace code in the template that with the code shared below.

I have inlined all the styles and scripts, and the html structure is based on what we have in Copenhagen; it should work fine, but if it doesn't you can tweak. This is a good start.

If it doesn't work in your theme, then you should only copy the code within the comments (as highlighted below) and put in respective places in your template.

<div class="container-divider"></div>
<div class="container">
  <nav class="sub-nav">
    {{breadcrumbs}}
    <div class="search-container">
      <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" focusable="false" viewBox="0 0 12 12" class="search-icon">
        <circle cx="4.5" cy="4.5" r="4" fill="none" stroke="currentColor"/>
        <path stroke="currentColor" stroke-linecap="round" d="M11 11L7.5 7.5"/>
      </svg>
      {{search submit=false}}
    </div>
  </nav>

  <h1>
    {{t 'submit_a_request'}}
    <span class="follow-up-hint">
      {{follow_up}}
    </span>
  </h1>
 
  {{!-- Tiles Code Starts Here --}}
  <div class="paddingBlock">
    <div class="cards">
      {{#each ticket_forms}}
        <a href="{{url}}" title="{{display_name}}" class="card id-{{id}} card__link">
            <div class="card__item">
              <i class="card__image fa"></i>
              <h2 class="card__title" aria-label="{{display_name}} Form">{{display_name}}</h2>
            </div>
        </a>
      {{/each}}
    </div>
  </div>
  {{!-- Tiles Ends Starts Here --}}

  <div id="main-content" class="form">
    {{request_form}}
  </div>
</div>

{{!-- TILES CSS and JavaScript Code Starts --}}
<style>
  .request_ticket_form_id {
    display: none;
  }

  .paddingBlock {
    padding: 20px 0;
  }

  .cards {
    display: flex;
    flex-wrap: wrap;
  }

  .card {
    cursor: pointer;
    flex: 1 0 200px;
    width: 32%;
    margin: 1%;
    padding: 10px;
    height: 150px;
    text-align: center;
    background: {{settings.brand_color}};
    color: {{settings.brand_text_color}};
  }

  .card:nth-child(1) {
    margin-left: 0;
  }

  .card:hover {
    background: #1D76B3;
    -webkit-transform: translateY(-1px);
    transform: translateY(-1px);
    -webkit-box-shadow: 0 13px 27px -5px rgba(50, 50, 93, .25), 0 8px 16px -8px rgba(0, 0, 0, .3), 0 -6px 16px -6px rgba(0, 0, 0, .025);
    box-shadow: 0 13px 27px -5px rgba(50, 50, 93, .25), 0 8px 16px -8px rgba(0, 0, 0, .3), 0 -6px 16px -6px rgba(0, 0, 0, .025);
    -webkit-box-shadow: 0 7px 14px rgba(50, 50, 93, .1), 0 3px 6px rgba(0, 0, 0, .08);
    box-shadow: 0 7px 14px rgba(50, 50, 93, .1), 0 3px 6px rgba(0, 0, 0, .08);
  }

  .card:active, .card__active {
    background: #1D76B3;
    -webkit-transform: translateY(-1px);
    transform: translateY(-1px);
    -webkit-box-shadow: 0 13px 27px -5px rgba(50, 50, 93, .25), 0 8px 16px -8px rgba(0, 0, 0, .3), 0 -6px 16px -6px rgba(0, 0, 0, .025);
    box-shadow: 0 13px 27px -5px rgba(50, 50, 93, .25), 0 8px 16px -8px rgba(0, 0, 0, .3), 0 -6px 16px -6px rgba(0, 0, 0, .025);
    -webkit-box-shadow: 0 7px 14px rgba(50, 50, 93, .1), 0 3px 6px rgba(0, 0, 0, .08);
    box-shadow: 0 7px 14px rgba(50, 50, 93, .1), 0 3px 6px rgba(0, 0, 0, .08);
  }

  .card__item {
    display: flex;
    flex-direction: column;
  }

  .card__image {
    flex: 1;
    padding-bottom: 10px;
    padding-top: 10px;
  }

  .card__image::before {
    font-size: 50px;
    font-family: "copenhagen-icons";
    content: '\1f4c4';
    text-decoration: none;
  }

  .card__title {
    flex: 1;
    font-size: 1.20rem;
    font-weight: 400;
    letter-spacing: 2px;
    margin: 0;
    line-height: 30px;
    text-transform: uppercase;
  }

  .card__link:hover,
  .card__link:active,
  .card__link:focus {
    text-decoration: none;
  }

  .card__link {
    color: {{settings.brand_text_color}};
  }

  .hide {
    display: none;
  }
</style>
<script>
  var searchQuery = window.location.search
  if (searchQuery.indexOf('?ticket_form_id=') >= 0) {
    var ticketId = searchQuery.split('?ticket_form_id=')[1]
    console.log(ticketId)
    var activeForm = document.querySelector('.id-' + ticketId)
    activeForm.classList.add('card__active')
    var cards = document.querySelector('.cards').children
    cards.length > 1 && cards[0].before(activeForm)

  } else {
    document.querySelector('#main-content').classList.add('hide')
  }
</script>
{{!-- TILES CSS and JavaScript Code Ends here. --}}

DISCLAIMER. THIS CODE IS PROVIDED "AS IS" AND ANY EXPRESSED OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE DISCLAIMED.

Thank you

Abdul Qabiz

Team Diziana

Would be great if this could be a feature option that we select from the zendesk side and not use custom code since the code above no longer works.