Help With Customizing the new Request Page

13 Comments

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

    Hi Greg,

    Your first answer is:

    Something I would like to add is imagery to this page, as the default white background looks quite plain, but I am not sure how we can do this.

    Ans. You can do this by CSS. Follow the below steps to add the background-image on new_request_page.hbs.

     

    1). Go to the Admin Guide.

     

    2). Click Customize button on - bottom right side.

    3). Click the Edit Code button on - bottom right side.

     

    4). Go to the new_request_page.hbs file and open that.

     

    5). I am using the default Copenhagen Theme so I need to add the parent wrapper on new request page. See how I did.

     

    7). Now, upload the background image which you want to show on request page.

    8). Go to the assets folder and upload there and click on uploaded image.

     

    9). Copy the image name after clicking.

     

    10). Go to the stylesheet and add the image as background image.

    .background_image_wrapper{
    background-image:url($assets-background-image-jpg);
    background-position: center;
    background-size: cover;
    height: 100%;
    width: 100%;
    }

     

    screenshot to see:

     

    11). The output is.

     

    If any issue applying the background image let me know. Also you can do more things with background.

     

    I'll get back to your second question.

     

    Thank You

     

     

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

    Hi, here is your second answer:

     I would also like to know how we can hide the subject field depending on the form selected. For example, if a user selects that they want to report a bug, we would like the subject field to be hidden, and once the ticket is created, have the subject be prefilled with whatever the user entered/selected for other fields.

     

    Ans. You can do this by disable the required subject field. See how I am doing.

    1). Go to you support window and navigate Admin > Manage > Ticket Field > Click  on Subject 

     

    Uncheck the Required to submit a request

    when you have done click Save button.

    2). Now you have to add some JavaScript code to show subject on some ticket forms.

    3). Go to the Guide Admin > Open the script.js file and add the below code.

    where 00000000000 is your ticket form ID to hide the subject on these ticket form, you must replace the form IDs with your form IDs, you can get the form IDs from your searchbar of the window.

     

    Remove 0000000000000 and add your IDs.

     function checkTicketId(){
    var subjectField = document.querySelector('.request_subject'); //main hero section wrapper
    if(window.location.href.indexOf('0000000000000') > 0){ //The numbers are form ID which I get from the form URL
    subjectField.style.display = 'none';
    }else if(window.location.href.indexOf('0000000000000') > 0){ //The numbers are form ID which I get from the form URL
    subjectField.style.display = 'none';
    }else if(window.location.href.indexOf('0000000000000') > 0){ //The numbers are form ID which I get from the form URL
    subjectField.style.display = 'none';
    }
    }

    checkTicketId();

     

    4). When you have done, test well.

    5). The output is:

    Form One has subject

    Default Form doesn't have subject

     

     

    Request List Page: the description shows as subject.


     

    Hope it'll be helpful for you

    Thanks

    Ifra

     

     

    0
  • John DiGregorio

    we created code to hide and display a field based on the org tag of red.  However, this was a required field so companies that don't even see the field can't submit the ticket because the field is required.   For time being we have removed the rquired field - is there any way to pass it in the code below for the orgs with the red tag but not for other orgs

     

        {                              
                                  tag: 'org_red',
                    type: 'org',
                                fields: ['1900004056393']
                                  
                                  
                                  
                },

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

    Hey John DiGregorio, you want to hide or show a specific field of a ticket form which belongs to a specific organization on new request page?

     

     

    OR

     

     

    You can get an idea for your query: https://support.zendesk.com/hc/en-us/articles/4408886229146-How-can-I-hide-ticket-forms-based-on-a-user-s-organization-

     

     

     

     

     

    0
  • John DiGregorio

    Ifra Saqlain - I have already written the code to hide the field.  The problem is I need the field required on the form it shows up on.   However, when it is hidden for other users they can't submit the ticket because it is required.   Is there a way to make it required for just the form I have it showing up on?

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

    John DiGregorio, I think you should create two forms for the different organizations because field is required from the support centre and code doesn't work here to. You can remove 'required' class using JS code but form field would work the same.

     

    You can create a specific form for red tag and make fields required,

    create another form for other org. where you don't need to create that fields which you don't want to show them.

    0
  • John DiGregorio

    Ifra Saqlain thanks for your input..   We had over 10 forms and it was requested that we consolidate into one.  This is why I am looking to hide and display through code

    0
  • Adrian Vazquez

    Ifra Saqlain - To your first answer I've followed the steps based on the guidance you have provided however, I'm not getting the same results regarding the new background for the request page. 
    Do you know what I could be doing wrong?

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

    Hi Adrian Vazquez, you missed to close the section here.

     

     

    Solution:

    <section class="background_image_wrapper">
    1
  • Adrian Vazquez

    Ifra Saqlain - Thank you that worked! Would you happen to know of any post that answers my next question - How can I edit the code to change the look of my drop-down fields in my request page maybe to something different than a rectangle drop-down?

     

    Appreciate the feedback in advance!

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

    Adrian Vazquez, :)

    Try this code:

    .nesty-input { 
    max-width: 100%;
        border-radius: 12px;
        background: #ddd;
        color: red;
    }


    Output:
    0
  • Adrian Vazquez

    Ifra Saqlain - The code seems to work fine as it pertains to background and color however, the border-radius does not seem to change at all

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

    Okay, use this new code :)

    .form-field .nesty-input{ 
    max-width: 100%;
        border-radius: 12px;
        background: #ddd;
        color: red;
    }

    I missed to add parent class-name: .form-field
    0

Please sign in to leave a comment.

Powered by Zendesk