New Request Page - Dropdown to Buttons?

Beantwortet

6 Kommentare

  • Ifra Saqlain
    Community Moderator
    Zendesk Luminary
    Most Engaged Community Member - 2022
    Most Engaged Community Member of The Year - 2021

    Hi Jamie Cross,  I only can guide you and give some code but you need to customize the code.

     

    Open your request page preview and right click of mouse and copy the form dropdown code:

     

    In other words, copy your form dropdown code and paste that to your new_request.hbs page and then change the options into anchor tags as I'm sharing the screenshot here you can see how I did it.

    new_request_page.hbs File

    <div id="main-content" class="form">
        
         
         <div class="ticket-items-wrapper">
           <div>
         <h4>Reason of this form</h4>
      <a href="https://xyzzendesk.com/hc/en-us/requests/new?ticket_form_id=00000" value="0000">
        <div class="ticket-items">
           New form
        </div>
      </a>
       </div>
          
            <div>
           <h4>Reason of this form</h4>
      <a href="https://xyz.zendesk.com/hc/en-us/requests/new?ticket_form_id=111111" value="11111">
        <div class="ticket-items">
          Form One
        </div>
      </a>
      </div>
            
            <div>
            <h4>Reason of this form</h4>
    <a href="https://xyz.zendesk.com/hc/en-us/requests/new?ticket_form_id=22222" value="222222">
      <div class="ticket-items">
        Test Form Two
      </div>
    </a>
     </div>
         
           <div>
            <h4>Reason of this form</h4>
    <a href="https://xyz.zendesk.com/hc/en-us/requests/new?ticket_form_id=333333" value="33333"> 
      <div class="ticket-items">
        Test Form One
      </div>
    </a>
          </div>

        </div>

          
        
        {{request_form wysiwyg=false}}
        </div>





     

     

    After custoizing thecopied code, I added some CSS to make UI.

    style.css File

    .form-field.request_ticket_form_id {
      display:none;
    }

    .ticket-items-wrapper > div {
      margin-bottom:30px;
    }

    .ticket-items {
       border: 1px solid;
        padding: 15px 20px;
        margin-right: 20px;
        max-width: 150px;
        width: 150px;
        text-align: center;
    }





     

     

    Output is:

     

     

    Hope it will help you :)

    Thanks

     

    0
  • Brett Bowser
    Zendesk Community Manager

    This is amazing. Thanks for sharing Ifra Saqlain!

    0
  • Jamie Cross

    Ifra Saqlain, Thank you for this! I was also wondering how I could add some text to the right side of the screen (Where the red box is) explaining the difference between an Incident or request?

    0
  • Ifra Saqlain
    Community Moderator
    Zendesk Luminary
    Most Engaged Community Member - 2022
    Most Engaged Community Member of The Year - 2021

    Thanks Brett Sir !

    0
  • Ifra Saqlain
    Community Moderator
    Zendesk Luminary
    Most Engaged Community Member - 2022
    Most Engaged Community Member of The Year - 2021

    Hi Jamie Cross,

    you will have to add some cusom code to achive this, see HTML divs which I added yet:

     

    Note: you can use this class "right-side-section" with the CSS or JS if you are going to do something with the blank div which is right side as you shared above and you can add id="outer-div-wrapper" with the class.

    Ex.

     

     

    After adding some custom divs in the HTML code , I added CSS for th UI:

    .main-wrapper {
      display: block;
      width: 100%;
      flex: 1 0 100%;
    }
    @media (min-width:768px){
      .main-wrapper {
        display: flex;
      }
    }
    .main-wrapper > div {
      flex: 1 0 650px;
    }
    .main-wrapper > .right-side-section {
       flex: 1 0 100%;
       margin-left:0;
       margin-top:30px;
       border:1px solid red;
    }
    @media (min-width:768px){
    .main-wrapper > .right-side-section {
      flex: 1 0 35%;
    margin-left:30px;
     }
    }


    Screenshot for the same:

     

     

    Output is:

     

     

     

     

    Note: Red border is not permanent, you can hide it from the CSS code.

    0
  • Jamie Cross

    Ifra Saqlain Thank you! :)

    0

Bitte melden Sie sich an, um einen Kommentar zu hinterlassen.

Powered by Zendesk