Tip: Change banner of New Request Template based on Request Form

Prerequisite:

JavaScript

CSS

Time To Read: 5 minutes

Time To Embed: 5 minutes

 

 

Hi All,

Here, I am going to share nice tip with all of you to change the background image of hero area on new request page and it depends that what ticket form you are seeing.

Example: You have two form in the Dropdown of new request page

and you want to change the hero banner image for both, Default Ticket Form should be contain different banner and Form One should be contain different banner.

Let's go to embed in our theme :D.

 

I. Navigate the script.js file in your Help Centre.

 

II. Copy the below JS code and paste into your script.JS file under the DOM function.

Here, 00000, 111111 is the request form IDs and you will have replace it with your form IDs. 

function checkTicketId(){
    var mainHeroDiv = document.querySelector('#main-content');  //main hero section wrapper
    if(window.location.href.indexOf('00000000')>0){  //Form 1 - the numbers are form ID which I get from the form URL
        mainHeroDiv.classList.add("banner-one");   //add class-name for first form hero banner 
    }else if(window.location.href.indexOf('11111111')>0){ //Form 2 - the numbers are form ID which I get from the form URL
        mainHeroDiv.classList.add("banner-two"); //add class-name for second form hero banner
    }
  }
  
  checkTicketId();

 

Screenshot for the same

 

 

You can find your request form IDs from the search-bar of your window.

 

III. Copy the form ID from the search-bar and paste into your script code where your checking with the 'if' condition.

 if(window.location.href.indexOf('114094002233')>0){   //It's my Default form ID

 

You will need to add the both form IDs in both 

if(window.location.href.indexOf('114094002233')>0){ //It's my Default form ID

if(window.location.href.indexOf('2534614138')>0){ //It's my Form One ticket form ID

IV. Now, upload two different banners onto your Help Centre assets folder.

 

V. Copy the below CSS code and paste into your stylesheet at the bottom area.

/**First form hero banner**/
.hero.banner-one{  
background-image: url(First-Banner-Image);
}




/**Second form hero banner**/
.hero.banner-two{ 
  background-image: url(First-Banner-Image);
}

.hero{
background-image:url($assets-banner-png); /*default background image*/
position: relative;
height:549px;
text-align: center;
width: 100%;
margin-bottom: 0 !important;
position: relative;
}

/* Default banner already added to your hero area if not then you can upload 
a banner image and add that here 'background-image:url($assets-banner-png);'

 

VI. Go to your assets folder, click on first banner image and copy that for CSS.

 

 

VII. Paste that copied banner name in the CSS, see how I add.

/**First form hero banner**/
.hero.banner-one{ 
background-image: url($assets-first-banner-jpg);  //For default form banner image
}

 

repeat this step to add second banner image.

/**Second form hero banner**/
.hero.banner-two{ 
  background-image: url($assets-second-banner-jpg); //second form banner image
}

 

 

VIII. Save all changes and test on preview mode.

 

 

For more detail and more example:

https://support.zendesk.com/hc/en-us/community/posts/4404227151386-Guide-Request-Page-Different-Banners-Based-on-form-used

 

 

Thank You :)