Pardot Inspiration: Using Pardot for Event Registration

In:

This month I was challenged with creating a landing page for event registration using Pardot. The event had 15+ roundtable sessions in the morning (within 2-time slots) and an option to register for the afternoon session (keynote, happy hour etc). Here’s a sneak peak into how I built it along with some code if you want to try building something similar for your next event.

How it Works

Before we get into the details, here’s a high-level breakdown of how the page works.

  • A user clicks on the ‘register’ button to sign up for a roundtable, the roundtable name is populated in a hidden form field.
  • A user clicks on the ‘register’ button to sign up for the conference, a hidden form field is set to TRUE
  • A user then enters their information into a form. The data is sent to Pardot using a form handler.
  • Users who signed up for at least one roundtable are sent a Pardot email that contains a thanks for registering message, the name(s) of the selected roundtable(s) and a calendar invite.
  • Users who didn’t sign up for any roundtables, but signed up to attend the conference, are sent a thank you email with a calendar invite.

Pardot Setup

Field Creation

First, I needed to create a couple of new fields in Pardot:

  1. Roundtable Name 1: This field will contain the name of the roundtable the attendee selects for the first time slot.
  2. Roundtable Name 2: This field will contain the name of the roundtable the attendee selects for the second time slot.
  3. Registered For Conference: This field is a checkbox (true or false) which will indicate that the attendee has selected to attend the conference.

Form Handler Setup

I opted to use a form handler instead of a Pardot form, so I could easily customize my form.

Field Mappings

I added all the standard fields to the form handler (first name, last name, company name, job title, opt-in, and email address). I also added the 3 new custom fields (roundtable name 1, roundtable name 2, registered for conference) and marked them as not required since the attendee doesn’t have to go to all 3 events.

pardot-form-inspiration-field-mappings

Completion Actions

I added 2 completion actions, the first one is to sync the prospect to an SFDC campaign with the status of registered, the second completion action is to send me an email alert when someone registers. The email notification helped me easily determine which roundtables are most popular.

Thanks for registering email confirmation

I created 2 ‘thanks for registering emails’ and set them up to be sent via an automation rule.

  1. Conference Only: This email is sent out to everyone who didn’t select to participate in any of the roundtables.
  2. Roundtables: This email is sent out the everyone who registered for at least one roundtable session.
Conference Only Email

The conference only email was pretty simple. It contained a thank you message along with calendar invites.

The email was sent using an automation rule that checks if conference only is true and if both roundtable fields are empty.

pardot-automation-rule-conference-only

Roundtable Email

The roundtable email contains a thank you message as well as the name(s) of the roundtables the user has selected to attend. The names of the roundtables are dynamically added to the email using a variable tag.

roundtable-selection-pardot-inspiration

The email was sent using an automation rule that checks if the roundtable 1 field is not empty OR the roundtable 2 field is not empty.

pardot-completion-action-send-roundtable-email

Building the Landing Page

Building the landing page was the difficult part. I didn’t want to include the roundtable names in a drop down menu in a form, so I came up with the idea to make the registration process like a shopping cart.

The HTML

I used Bootstrap as my framework for the landing page and used Bootstrap Panels for a clean way to display the roundtable names and descriptions.

Since there were 2 timeslots for the roundtables I wrapped each of the sections in a DIV with a class of first-session and second-session.

Sticking with the ‘add to shopping cart’ feel, I wanted to add a your agenda section to the bottom left corner of the page that populates based on the sessions you select. This can be done using my slide out lead generation form with a couple modifications.

Finally, I added the form to the bottom of the page, which uses a Pardot form handler and hidden fields for roundtable name and conference registration.

JavaScript

I used jQuery to add some logic to my page. There was a fair bit of logic to consider for the roundtable registration, including:

  • Changing the button style when a session is selected.
  • Hiding the rest of the ‘register’ buttons within that time slot, so the attendee can only select one session.
  • Displaying the name of the selected roundtable in the agenda section.
  • Populating the hidden fields with the name of the selected roundtable.

The entire HTML code

I created a new landing page in Pardot to host the registration page. All the CSS, javascript and Bootstrap files were also uploaded in Pardot to keep everything in one place.

The Entire JavaScript

Questions?

Send them to me via email, send me a tweet @jennamolby, or leave a comment

Related Posts

  • 21/09/2017
    3 Free Pardot Landing Page Templates for Asset Downloads

    Create beautiful, responsive landing pages in Pardot by using one of these 3 free Pardot layout templates. These landing page templates are designed specifically for gated assets such as white papers and eBooks, but they will work well with any landing page that contains a form.

  • 08/09/2017
    How to Create Responsive Marketo Forms

    Marketo forms, by default, have set widths for many elements including all the form fields, labels and even the form itself. If you’re embedding your form in a responsive landing page, you might want to make the form fully responsive as well. With a bit of CSS, you can make your one-column and two-column Marketo forms look great on every device.

  • 05/07/2017
    Make Your Marketo Forms More User-Friendly With This Tip

    I was registering for a webinar this week and when I went to select my Country from the drop-down, I was greeted with a search feature for the drop-down. I immediately started Googling what JavaScript plugin they were using to see if I could use it on Marketo forms. It turns out, you can and not only is it super easy to implement, but it also makes long drop-down in your Marketo forms more user-friendly. I’ll walk you through how I did this in 4 easy steps.

1 comment(s)
  • Think Through Math

    07/09/2016 at 12:14 pm
    Reply

    Hey Jenna. Thank you for providing such a thorough explanation of building a event registration page in Pardot. Your example code and detailed directions really made it click.

Leave A Comment

Your email address will not be published. Required fields are marked *

About Me

I am a results focused marketing automation expert, with a strong background in design and development. With a high level computer science background, I have the unique ability to design, code and understand data, while utilizing this skillset to further enhance my value and ROI in the digital marketing space.
LEARN MORE

Categories
Most Commented
Popular Posts