NB: This tip will require multi-forms on your new request page. This is only available with the Enterprise Guide or the productivity pack addon for Professional.

We had a need to display some header text and instructions above our multi-form selector that would change dependent on the form that was being submitted. So after digging around and seeing a couple of solutions on here which were OK but a bit unwieldy I decided to adapt them slightly...

The new request form does not expose the form ID in curly braces which would have been ideal so we need to grab the form ID from the URL and then change the content dynamically.

1) Get JQuery

The v2 templating system doesn't use jquery anymore so if you don't have it on your guide then you will need to add it so open the document_head.hbs template file and add this:

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js" 
crossorigin="anonymous" async></script>

2) Add CSS Code

Since we're going to be showing (and hiding) a div dependent on which form is submitted we need a wee bit of CSS to handle this. Add the following statement to your style.css file:

.multi-dynamic-content {
  display:none;
}

3) Edit the new request page

This is where the magic happens :)

You will want to get a hold of the form IDs first which you can either get from the URL as you swap the forms around or just dump the following into your new_request_page.hbs template:

{{#each ticket_forms}}
<p>{{id}} - {{display_name}}</p>
{{/each}}

Once you have your IDs, decide where you would like the extra content to appear. I have mine between the page description and the {{request_form}} placeholder but it's up to you.

You need to make sure you have allowed unsafe content for guide in your admin area so you can add the following Javascript in the template. It can be anywhere above the form. Replace the form_id_1, form_id_2, form_id_3 with your actual form IDs (not names)

<script type="text/javascript">
  // Parse the URL parameter
function getParameterByName(name, url) {
    if (!url) url = window.location.href;
    name = name.replace(/[\[\]]/g, "\\$&");
    var regex = new RegExp("[?&]" + name + "(=([^&#]*)|&|#|$)"),
        results = regex.exec(url);
    if (!results) return null;
    if (!results[2]) return '';
    return decodeURIComponent(results[2].replace(/\+/g, " "));
}
// Give the parameter a variable name
var dynamicContent = getParameterByName('ticket_form_id');
</script>

<script type="text/javascript">
 $(document).ready(function() {
  // Check if the URL parameter is apples
  if (dynamicContent == 'form_id_1') {
    $('#form_id_1').show();
  } 
  // Check if the URL parameter is oranges
  else if (dynamicContent == 'form_id_2') {
    $('#form_id_2').show();
  } 
  // Check if the URL parameter is bananas
  else if (dynamicContent == 'form_id_3') {
    $('#form_id_3').show();
  } 
  // Check if the URL parmeter is empty or not defined, display default content
  else {
    $('#default-content').show();
  }
});
</script>

Almost there ;)

The last thing to do is drop in your divs with your extra content:

<!-- Default Dynamic Section -->
<div id="default-content" class="multi-dynamic-content">
  This is the default content
</div>
<!-- Dynamic Section 1 -->
<div id="form_id_1" class="multi-dynamic-content">
  I like apples
</div>
<!-- Dynamic Section 2 -->
<div id="form_id_2" class="multi-dynamic-content">
  I like oranges
</div>
<!-- Dynamic Section 3 -->
<div id="form_id_3" class="multi-dynamic-content">
  I like bananas
</div>

and that's it! Just populate the divs with the content you want to display for each form. If the page gets an ID it doesn't understand or doesn't associate with one of your divs then it will just show the default content.

Enjoy! :)