How to add a custom name tag feature to iModules event registration forms

Using HTML, CSS, Javascript, and Google Tag Manager to implement a name tag preview feature in an Encompass event registration form.

Prerequisite knowledge

This guide assumes you have a basic understanding of the following web technologies (I do not recommend you attempt integrating this feature without one of them):

• HTML
• CSS
• Javascript (jQuery)
• Google Tag Manager

Create the name tag template

Although you’ll have time to polish the name tag’s CSS later, we need our digital name tag to look like something before we start implementing the Javascript functionality. To start, build a basic name tag template in HTML and CSS. Be sure to label divs specifically (with id or class names) so that we can populate name tag information with jQuery later.

Below is the HTML code we used for our name tags:

<p id="nametag-pre">Your nametag will look something like:</p>
<div id="reunion-nametag-example" data-degreeyear="##1st Degree Year##">
  <div id="nametag-fname"></div>
  <div id="nametag-lname"></div>
  <div id="nametag-degreeyear"></div>
</div>

I wont cover the CSS we used because I assume you wont want to use fonts, spacing, and colors from the Northwestern brand.

Once you’ve created the HTML/CSS template for your name tags, be sure to copy and paste the code you wrote into a new Rich Text field below the applicable inputs.

Note: do not include the specific input divs here, but have those id/class names handy.

Add HTML to new Add Rich Text field below name/year inputs

Implement Javascript with Google Tag Manager

So far the name tag is useless because we haven’t written any Javascript to populate the name and year divs. In order to implement any Javascript code, we’ll have to inject it with Google Tag Manager (GTM).

Add a GTM trigger for your event form

Trigger fires whenever a page has the same pgid as the form

Add a GTM tag that is fired by that trigger

Create a GTM tag, connected to your new trigger. This tag will handle our Javascript. You can either write all of your code here between <script> tags, or you can link to an external js file like we did: <script src="[JS_FILE_URL]"></script>

Write the Javascript

Now for the code! I’m not going to go step-by-step here, but instead assume you can read and write Javascript, and provide the annotated code we used.

Note: we used jQuery because it’s more efficient, and is installed on our page templates. That said, you can achieve all of this with vanilla Javascript (make use of “getElementById()”)

Input field IDs

In order for the above Javascript to work in your event form, you must use the correct ID names specific to your form. You can not just copy paste the above code. You can use Chrome DevTools (right click, and “Inspect”) an input field to find its ID name.

Questions?

With your Javascript code implemented via GTM, you should have a working name tag feature!

If something isn’t working like you thought it would, feel free to reach out to me at andrew.uebelein@northwestern.edu