Format Session Registration Confirmation Page On Your Own Domain

I’ve written a couple of blogs on the event registration form that includes the ability to register for sessions. The form let’s people register for the things that they are interested in and also means you can create follow up journeys sharing details with them about the sessions they actually want to attend. You can also use some CSS to style how the the confirmation screen will look. What about redirecting someone to another page on your website? It would be great to still include that session summary right? This post will show you how to format a session registration confirmation page redirecting to your own domain AND show the sessions that were registered for.

OK first things first, this is what we are referring to. I wrote about formatting this list here, so if you are happy without a redirect, you can stick with that. If not, move on and read the rest of this post.

On your event registration form with sessions, customise it how you see fit (you can always use the blog linked above to make it prettier), but make sure you have the Event Name somewhere on the form.

You will then need to edit the CSS and add in a new style. Mine was a header 2 format which is h2 in CSS style terms. However, I need to give it a specific name so that I can add that in to a script on the form and pass the name of the event through to display on my redirection page. I’ve named this style h2.event-title. Call it what you like, but make sure if you use h1 or h3 that the style name is reflected correctly. You can modify the styling if you want it to look different, but leave it pretty empty to make it look the same as any other h2 styling you might have.

h2.event-title {
  display: block;
}

The important part, look for the dynamic {{EventName}} tag on the form, then edit the class to have the same name as the style above.

Now in the HTML of the form, directly under the end of the style section (where you see </style> paste the following script. This will go through and get the list of sessions that are selected (the checkbox is ticked) on the registration form. It will then work through all of the text on the form and get each session title, session description and date and time. It will also get the name of the event and store it along with a list of all selected sessions in the session storage of the persons browser. Make sure you update h2.event-title within the script if you named your CSS style differently.

<script>
document.addEventListener("d365mkt-afterformload", function () {
    const sessionDivs = Array.from(document.querySelectorAll(".eventSession"));

    // Grab the event title
    const eventTitle = document.querySelector("h2.event-title")?.textContent || "";

    document.addEventListener("d365mkt-formsubmit", function () {
        // Clear previous selection
        sessionStorage.removeItem("selectedSessions");
        sessionStorage.removeItem("eventTitle"); 

        const selectedSessions = [];

        sessionDivs.forEach(session => {
            const checkbox = session.querySelector("input[type="checkbox"]");
            const descDiv = session.querySelector(".eventSessionDescription");
            if (checkbox && checkbox.checked && descDiv) {
                // --- Title ---
                const title = descDiv.querySelector("label span.msdynmkt_personalization")?.textContent || "";

                // --- Summary ---
                let summary = "";
                const pElements = Array.from(descDiv.querySelectorAll("p"));
                pElements.forEach(p => {
                    const text = p.textContent.trim();
                    const span = p.querySelector("span.msdynmkt_personalization");

                    if (
                        span &&
                        text !== title &&
                        !text.match(/d{1,2}/d{1,2}/d{4}/) &&
                        !text.match(/bd{1,2}:d{2}s?[AP]Mb/i) &&
                        !text.includes("Join a waitlist") &&
                        !text.includes("Fully booked")
                    ) {
                        summary = text;
                    }
                });

                // --- Date & Time ---
                const dateMatch = descDiv.textContent.match(/d{1,2}/d{1,2}/d{4}/);
                const timeMatch = descDiv.textContent.match(/bd{1,2}:d{2}s?[AP]Mb/i);
                const dateTime = (dateMatch ? dateMatch[0] : "") + (timeMatch ? " " + timeMatch[0] : "");

                selectedSessions.push({
                    title: title,
                    summary: summary,
                    dateTime: dateTime
                });
            }
        });

        // Store in sessionStorage for use on the confirmation page
        sessionStorage.setItem("selectedSessions", JSON.stringify(selectedSessions));
        sessionStorage.setItem("eventTitle", eventTitle); // store event title separately
    });
});
</script>

Be sure to update your form so that it will redirect after submission and add in the URL for where you want that to go.

If you are not sure what the session storage is, go to your website, right click in the middle of the page and click on Inspect. This should open up the developer controls. Click on the Application tab, then on the left go in to storage. Then open session storage and you should see the domain for your website. Here we can see the eventTitle and the selectedSessions have been stored.

Now we need to add something to the page that the person will be redirected to (the URL you added in the form settings redirect). Some of this will depend on what CMS you are using, in my case it is WordPress. You will need to add in some styles to the page. This will give you a good starting point. If you have access to add Custom HTML you could just add this to the top of that section to keep it all in one place, up to you!

<style>
/* Event title & subtitle */
.event-title {
  font-size: 2em;
  margin-bottom: 10px;
  text-align: center;
font-family: Lato, sans-serif;
  color: #3c245c; /* default if JS not applied */
}

.event-subtitle {
    text-align: center;
    font-size: 1.1em;
    color: #555;
    margin-bottom: 20px;
    font-family: Lato, sans-serif;
}

/* Date headers */
.session-date {
  border-bottom: 2px solid currentColor;
  padding-bottom: 5px;
  margin-top: 20px;
  margin-bottom: 10px;
font-size: 1.3em;
}

/* Day container */
.day-container {
  padding: 10px;
  border-radius: 6px;
  margin-bottom: 15px;
}

/* Session cards */
.session-card {
  display: flex;
  gap: 10px;
  padding: 10px;
  border-left: 4px solid; /* color set in JS */
  border-radius: 6px;
  margin-bottom: 10px;
  background-color: #fff;
}

/* Time sidebar */
.session-time {
  font-weight: bold;
  min-width: 70px;
color: #5a5a5d;
}

/* Session content */
.session-content h3 {
  margin: 0 0 5px 0;
  font-size: 1.2em;
color: #5a5a5d;
}

.session-content p {
  margin: 0;
  font-size: 1em;
  color: #333;
}

</style>

The page must include this. This is going to determine where all of the information about the registration will appear. This should go above the script that comes next.

<div id="selectedSessionsContainer"></div>

Now we need a script that will get the event title and the summary of sessions and display it on your web page. The section in const colors will show different colours for each day (if the event crosses over multiple days. Of course, you can modify what colours you wish to use in that block by changing the HEX numbers.

<script>
document.addEventListener("DOMContentLoaded", function() {
  const container = document.getElementById("selectedSessionsContainer");
  if (!container) return;

  // --- Event title & subtitle ---
  const eventTitle = sessionStorage.getItem("eventTitle") || "";
  if (eventTitle) {
    const titleEl = document.createElement("h1");
    titleEl.textContent = eventTitle;
    titleEl.classList.add("event-title");
    container.appendChild(titleEl);

    const subtitleEl = document.createElement("p");
    subtitleEl.textContent = "Thank you for registering. Here are the sessions you selected. You will also receive a confirmation containing calendar information and directions for finding us.";
    subtitleEl.classList.add("event-subtitle");
    container.appendChild(subtitleEl);
  }

  const selectedSessions = JSON.parse(sessionStorage.getItem("selectedSessions") || "[]");
  if (selectedSessions.length === 0) {
    container.textContent = "No sessions selected.";
    return;
  }

  const sessionsByDate = {};
  selectedSessions.forEach(s => {
    const date = s.dateTime.split(" ")[0]; // just date
    if (!sessionsByDate2025) sessionsByDate2025 = [];
    sessionsByDate2025.push(s);
  });

  const sortedDates = Object.keys(sessionsByDate).sort((a, b) => new Date(a) - new Date(b));

  const colors = [
    {accent: "#3c245c", bg: "#f7f5fa"},
    {accent: "#ff6f61", bg: "#fff2f0"},
    {accent: "#4caf50", bg: "#f3faf3"},
    {accent: "#2196f3", bg: "#f0f7fb"},
    {accent: "#f39c12", bg: "#fdf7f0"},
    {accent: "#9b59b6", bg: "#f6f2fa"}
  ];

  sortedDates.forEach((date, index) => {
    const color = colors[index % colors.length];

    // Date header
    const dateHeader = document.createElement("h2");
    dateHeader.textContent = date;
    dateHeader.classList.add("session-date");
    dateHeader.style.color = color.accent; // dynamic accent
    container.appendChild(dateHeader);

    // Day container
    const dayContainer = document.createElement("div");
    dayContainer.classList.add("day-container");
    dayContainer.style.backgroundColor = color.bg; // dynamic background
    container.appendChild(dayContainer);

    // Sessions
    sessionsByDate2025.forEach(s => {
      const sessionDiv = document.createElement("div");
      sessionDiv.classList.add("session-card");
      sessionDiv.style.borderLeftColor = color.accent; // dynamic accent

      const timeEl = document.createElement("div");
      timeEl.classList.add("session-time");
      const timePart = s.dateTime.split(" ").slice(1).join(" ");
      timeEl.textContent = timePart;
      sessionDiv.appendChild(timeEl);

      const contentDiv = document.createElement("div");
      contentDiv.classList.add("session-content");

      const titleEl = document.createElement("h3");
      titleEl.textContent = s.title;
      contentDiv.appendChild(titleEl);

      const summaryEl = document.createElement("p");
      summaryEl.textContent = s.summary;
      contentDiv.appendChild(summaryEl);

      sessionDiv.appendChild(contentDiv);
      dayContainer.appendChild(sessionDiv);
    });
  });
});
</script>

Once you have the script and updates on your form, and then the styling, div and script on your redirect page, try submitting your form. Ideally it will all pull together and you will see a lovely summary like this below!

Original Post http://meganvwalker.com/session-registration-confirmation-page/