Jenna Molby, Author at Sercante

How to Add Calendar Links to Pardot Emails and Landing Pages

If you run virtual or in-person events, including an ‘add to calendar’ link in your emails and landing pages can be a great way to ensure your guests actually show up. While there is currently no feature in Pardot to create ‘add to calendar’ links within the editor, there are two options to add them yourself. The first option is to create the files manually and link to them within your Pardot assets. The second option is to use a tool to generate the links, files and buttons for you. In this post, I’ll show you how to use each one of these options to create ‘add to calendar’ functionality within your Pardot emails and landing pages.

Choose which calendars to target

There are two common calendar file types; a calendar link and a calendar (ICS) file. The first step is to figure out which calendars you want to target. That way, you know what files need to be generated to add them to your Pardot email or landing page.

Here’s the breakdown of which email client accepts which ‘add to calendar’ method.

Image source: Litmus

Option 1: Create calendar links & files manually

The first option is to create the calendar links and files manually. Upload the files into Pardot and link to them in your email or landing page.

Hot Tip: The easiest way to create calendar links is to use this handy tool.
• Google Calendar Link Generator
• Outlook & Apple Calendar (.ICS) Link Generator

Enter the information for your event, select the email client you want to target and add the link to your email or landing page.

Upload the calendar link to Pardot

If you want to target an email client that supports ICS files, you will need to generate the file and upload it into Pardot. Using the same generator, click on the download ICS button to download the file. Upload the file into Pardot (Marketing > Content > Files).

Link to the ICS file within your Pardot landing page or Pardot email.

Example

Here’s an example of a button that will work within an email and a landing page.

ADD TO CALENDAR

Outlook.com | Office 365 | Google

Option 2: Creating a calendar links with a tool

The second option is to use a tool that will create the files, links and buttons for you. My favourite tool is the AddEvent.com, which has a free ‘hobby plan’ that will allow you to generate up to 50 calendar links a month. With this method, the ICS file is hosted for you, so you don’t need to upload any files into Pardot.

Email example

Here’s an example of what an ‘add to calendar’ button looks like in an email.

Add event to calendar

Landing page example

Here’s an example of what an ‘add to calendar’ button looks like on a landing page.

Add to Calendar

Taking it a step further

If you are up for a challenge, you can try to show/hide different calendar links based on what email client the prospect is using. Find out more in this article by Litmus.

Questions?

Send me a tweet @jennamolby, or contact the Sercante team for help.

Original article: How to Add Calendar Links to Pardot Emails and Landing Pages

The post How to Add Calendar Links to Pardot Emails and Landing Pages appeared first on The Spot.

By Jenna Molby|2023-01-07T10:35:00+00:00January 7th, 2023|Categories: Emails & Templates, Getting Started, revive|

How to Add Calendar Links to Pardot Emails and Landing Pages

If you run virtual or in-person events, including an ‘add to calendar’ link in your emails and landing pages can be a great way to ensure your guests actually show up. While there is currently no feature in Pardot to create ‘add to calendar’ links within the editor, there are two options to add them yourself. The first option is to create the files manually and link to them within your Pardot assets. The second option is to use a tool to generate the links, files and buttons for you. In this post, I’ll show you how to use each one of these options to create ‘add to calendar’ functionality within your Pardot emails and landing pages.

Choose which calendars to target

There are two common calendar file types; a calendar link and a calendar (ICS) file. The first step is to figure out which calendars you want to target. That way, you know what files need to be generated to add them to your Pardot email or landing page.

Here’s the breakdown of which email client accepts which ‘add to calendar’ method.

Image source: Litmus

Option 1: Create calendar links & files manually

The first option is to create the calendar links and files manually. Upload the files into Pardot and link to them in your email or landing page.

Hot Tip: The easiest way to create calendar links is to use this handy tool.
• Google Calendar Link Generator
• Outlook & Apple Calendar (.ICS) Link Generator

Enter the information for your event, select the email client you want to target and add the link to your email or landing page.

Upload the calendar link to Pardot

If you want to target an email client that supports ICS files, you will need to generate the file and upload it into Pardot. Using the same generator, click on the download ICS button to download the file. Upload the file into Pardot (Marketing > Content > Files).

Link to the ICS file within your Pardot landing page or Pardot email.

Example

Here’s an example of a button that will work within an email and a landing page.

ADD TO CALENDAR

Outlook.com | Office 365 | Google

Option 2: Creating a calendar links with a tool

The second option is to use a tool that will create the files, links and buttons for you. My favourite tool is the AddEvent.com, which has a free ‘hobby plan’ that will allow you to generate up to 50 calendar links a month. With this method, the ICS file is hosted for you, so you don’t need to upload any files into Pardot.

Email example

Here’s an example of what an ‘add to calendar’ button looks like in an email.

Add event to calendar

Landing page example

Here’s an example of what an ‘add to calendar’ button looks like on a landing page.

Add to Calendar

Taking it a step further

If you are up for a challenge, you can try to show/hide different calendar links based on what email client the prospect is using. Find out more in this article by Litmus.

Questions?

Send me a tweet @jennamolby, or contact the Sercante team for help.

Original article: How to Add Calendar Links to Pardot Emails and Landing Pages

The post How to Add Calendar Links to Pardot Emails and Landing Pages appeared first on The Spot.

By Jenna Molby|2023-01-07T10:35:00+00:00January 7th, 2023|Categories: Emails & Templates, Getting Started, revive|

How to Integrate Your Blog With Pardot

Your website is one of your most important demand generation assets and a blog is a great way to increase your online presence by making you more visible on Google. It’s also a great way to bring prospects into your database to expand the top of your funnel.

In this tutorial, I’ll show you how to set up your blog with a Marketing Cloud Account Engagement (Pardot) form, how to create a blog welcome email, and tips to automate blog digest emails.

How do you want your blog readers to subscribe?

There are many ways you can get your readers to subscribe to your blog. Some companies use a popup form when you visit a blog post, which has proven to be effective and other companies make it more subtle. Here are some different methods which will give you inspiration on how you should add the form to your blog.

Example 1: In a sidebar

Pardot lets you subscribe to their blog by entering in your email address in the sidebar.

Example 2: At the end of each blog

Hootsuite adds their blog subscription form to the bottom of each blog post. They also only ask for your email address and have some nice icons, so it’s clear what you’re signing up for.

Example 3: In the footer

Engagio has a “sticky footer” at the bottom of their blog page, as well as on each blog post to get readers to subscribe. The bold yellow color also draws your attention to the subscription form without being too invasive and they provide you with a close button to hide the form.

Example 4: With an automation

Asana uses a subscription form that slides out at the bottom when you scroll down about 80%. I like how the animation captures the attention of the readers and how they incorporate Facebook and Twitter buttons beneath the email sign up.

Example 5: In multiple spots

Shopify uses two slightly different methods for capturing their blog subscribers. When you visit their main blog page you can subscribe right from their header.

They also have a subscription form in the sidebar of each post. I like that they include some social proof in the subscription form in the sidebar and it’s clear what I can expect them to send me if I give them my email address.

What fields should you capture?

Standard fields

The shorter the form the more likely you will get your readers to subscribe to your blog. Most blogs only ask for an email address, but some also will ask you for your first and last name for more personalized blog digest emails.

Hidden fields

Your standard source fields should be on your blog subscription form, just like every Pardot form you create.

If you opt to have a subscription form on every blog post, I also like to add hidden fields for blog post title and blog post category. With my blog, for example, I have a subscription form at the bottom of each post and I use custom code in WordPress to automatically populate the hidden fields with the post title and post category. This way I can pull reports in Pardot to see what type of content is generating more blog subscribers and what posts have generated the most blog subscribers.

Here’s an example of populating hidden fields with WordPress blog information. Note: This method is only possible while using Pardot Form Handlers.

<input type="hidden" name="post-category" value="<?php the_category(); ?>" />

<input type="hidden" name="post-category" value="<?php single_post_title(); ?>" />

The Pardot implementation

Now that I’ve given you some examples of what form fields to include in your form and some methods for blog subscription forms, it’s time to show you how to build it out in Pardot.

Pardot Form Handlers vs. Pardot Form embed

There are some advantages and disadvantages for each form method. Embedded Pardot forms allow you to update the form directly in the Pardot form editor and the changes are live on your site as soon as you save the form. However, they also are embedded on your site using an iFrame, which means that certain functionality might not be available. Pardot form handlers are much more flexible and allow you to use your own HTML code to send data to Pardot.

When integrating your blog with Pardot the best form method to use, in my opinion, is Pardot form handlers, for a couple of reasons:

Changes don’t need to be made to the blog form regularly
It’s easier to have the form match your website/blog
Many blogging platforms have plugins you can use for blog subscription forms that will work well with Pardot form handlers

Create a campaign dedicated to blog subscribers

Create a campaign to attribute your blog as a lead source for any new subscribers. Your form and new subscribers should be assigned to the campaign in Pardot and/or Salesforce, depending on your lead attribution processes.

Create a Pardot Form or a Form Handler

In this tutorial, I will be using a Pardot form handler. You can also use a regular Pardot form if you prefer.

Create a Pardot form handler with a descriptive name. I called mine “Blog Subscription Form.” Select your new campaign, map the fields that you want to add to the form and click save. Note: Completion Actions and some other settings will be updated later on.

Add the form to your blog

There are many tools that allow you to add forms to your blog, but it depends what platform you use. Here’s a list of some popular plugins that will help you add your Pardot form to your blog.

PopUp Domination can be used to create a popup subscription form on your blog. You can use any HTML you want, which means it will work perfectly with your Pardot form handler.
Sumo is another option that will work on any type of blog platform. They also offer many different ways to display the subscription form on your blog.

While I’m a big fan of these tools, if you have a developer available the best option is to get them to implement your Pardot form on your blog using custom code. Depending on the method you choose it should be pretty easy for a developer to implement your form and it means you don’t have to pay a monthly subscription fee for using these tools.

Create a Thank You page

The next step is to create a Thank You page that the form will direct to when someone subscribes to the blog. I recommend that you create it on your website (instead of a Pardot landing page), to ensure it has the same look as your blog.

Once your Thank You page is created, copy and paste the URL into the Success location in the Pardot form handler.

Create a blog welcome email

A blog welcome email is a great way to promote more of your blog content. Choose a couple of your popular posts or create a digest of curated content your readers might be interested in.

When a reader subscribes to my blog, I send them a welcome email with some of my top Pardot blog posts. Click here to see what it looks like (and feel free to copy and paste the HTML to create your own welcome email).

Once you have your blog welcome email created add a completion action to your Pardot form to send an autoresponder email.

Emailing subscribers: Automated vs. Manual

Now that your form is set up on your site and your welcome email is ready, it’s time to figure out how you’re going to send notification emails when there’s a new blog post. There are two ways you can send out blog posts:

Automatically using a third-party application, or
Manually, since Pardot doesn’t have an RSS feed integration.

For my blog, I send out all my blog digest emails manually, since I like to have control over what’s sent. However, I only post about once or twice a week, so it’s pretty manageable.

Automated blog posts using Feed Otter

If you opt to go with the automated route, Feed Otter provides a full RSS integration with Pardot. You can quickly build, schedule, and email your blog subscribers notifying them of a new post, a weekly digest, or a monthly newsletter.

Manual blog post emails

Manual blog post emails require you to create an email each time there is a new blog post, or if you post a lot during the week, you can do a digest of all the new posts, once a week. It can be time-consuming, but if you have a good email template setup and a defined process the whole thing doesn’t take very long. If you’re going to go the manual route, here are some tips:

Create a simple, one-column email template, so you don’t have to spend time messing with formatting. This is the template I use for my blog posts.
Create an email that you can copy each time you need to send a blog email. This will contain all the settings (from address, list, etc.) you need to send the blog email.

Questions?

Send me a tweet @jennamolby or leave a comment below.

Note: This post was originally written in November 2016 and updated January 2023.

Original article: How to Integrate Your Blog With Pardot

The post How to Integrate Your Blog With Pardot appeared first on The Spot.

By Jenna Molby|2023-01-04T19:34:16+00:00January 4th, 2023|Categories: Emails & Templates, Forms & Form Handlers, Getting Started, Pardot, revive, Setup & Admin|

How to Integrate Your Blog With Pardot

Your website is one of your most important demand generation assets and a blog is a great way to increase your online presence by making you more visible on Google. It’s also a great way to bring prospects into your database to expand the top of your funnel.

In this tutorial, I’ll show you how to set up your blog with a Marketing Cloud Account Engagement (Pardot) form, how to create a blog welcome email, and tips to automate blog digest emails.

How do you want your blog readers to subscribe?

There are many ways you can get your readers to subscribe to your blog. Some companies use a popup form when you visit a blog post, which has proven to be effective and other companies make it more subtle. Here are some different methods which will give you inspiration on how you should add the form to your blog.

Example 1: In a sidebar

Pardot lets you subscribe to their blog by entering in your email address in the sidebar.

Example 2: At the end of each blog

Hootsuite adds their blog subscription form to the bottom of each blog post. They also only ask for your email address and have some nice icons, so it’s clear what you’re signing up for.

Example 3: In the footer

Engagio has a “sticky footer” at the bottom of their blog page, as well as on each blog post to get readers to subscribe. The bold yellow color also draws your attention to the subscription form without being too invasive and they provide you with a close button to hide the form.

Example 4: With an automation

Asana uses a subscription form that slides out at the bottom when you scroll down about 80%. I like how the animation captures the attention of the readers and how they incorporate Facebook and Twitter buttons beneath the email sign up.

Example 5: In multiple spots

Shopify uses two slightly different methods for capturing their blog subscribers. When you visit their main blog page you can subscribe right from their header.

They also have a subscription form in the sidebar of each post. I like that they include some social proof in the subscription form in the sidebar and it’s clear what I can expect them to send me if I give them my email address.

What fields should you capture?

Standard fields

The shorter the form the more likely you will get your readers to subscribe to your blog. Most blogs only ask for an email address, but some also will ask you for your first and last name for more personalized blog digest emails.

Hidden fields

Your standard source fields should be on your blog subscription form, just like every Pardot form you create.

If you opt to have a subscription form on every blog post, I also like to add hidden fields for blog post title and blog post category. With my blog, for example, I have a subscription form at the bottom of each post and I use custom code in WordPress to automatically populate the hidden fields with the post title and post category. This way I can pull reports in Pardot to see what type of content is generating more blog subscribers and what posts have generated the most blog subscribers.

Here’s an example of populating hidden fields with WordPress blog information. Note: This method is only possible while using Pardot Form Handlers.

<input type="hidden" name="post-category" value="<?php the_category(); ?>" />

<input type="hidden" name="post-category" value="<?php single_post_title(); ?>" />

The Pardot implementation

Now that I’ve given you some examples of what form fields to include in your form and some methods for blog subscription forms, it’s time to show you how to build it out in Pardot.

Pardot Form Handlers vs. Pardot Form embed

There are some advantages and disadvantages for each form method. Embedded Pardot forms allow you to update the form directly in the Pardot form editor and the changes are live on your site as soon as you save the form. However, they also are embedded on your site using an iFrame, which means that certain functionality might not be available. Pardot form handlers are much more flexible and allow you to use your own HTML code to send data to Pardot.

When integrating your blog with Pardot the best form method to use, in my opinion, is Pardot form handlers, for a couple of reasons:

Changes don’t need to be made to the blog form regularly
It’s easier to have the form match your website/blog
Many blogging platforms have plugins you can use for blog subscription forms that will work well with Pardot form handlers

Create a campaign dedicated to blog subscribers

Create a campaign to attribute your blog as a lead source for any new subscribers. Your form and new subscribers should be assigned to the campaign in Pardot and/or Salesforce, depending on your lead attribution processes.

Create a Pardot Form or a Form Handler

In this tutorial, I will be using a Pardot form handler. You can also use a regular Pardot form if you prefer.

Create a Pardot form handler with a descriptive name. I called mine “Blog Subscription Form.” Select your new campaign, map the fields that you want to add to the form and click save. Note: Completion Actions and some other settings will be updated later on.

Add the form to your blog

There are many tools that allow you to add forms to your blog, but it depends what platform you use. Here’s a list of some popular plugins that will help you add your Pardot form to your blog.

PopUp Domination can be used to create a popup subscription form on your blog. You can use any HTML you want, which means it will work perfectly with your Pardot form handler.
Sumo is another option that will work on any type of blog platform. They also offer many different ways to display the subscription form on your blog.

While I’m a big fan of these tools, if you have a developer available the best option is to get them to implement your Pardot form on your blog using custom code. Depending on the method you choose it should be pretty easy for a developer to implement your form and it means you don’t have to pay a monthly subscription fee for using these tools.

Create a Thank You page

The next step is to create a Thank You page that the form will direct to when someone subscribes to the blog. I recommend that you create it on your website (instead of a Pardot landing page), to ensure it has the same look as your blog.

Once your Thank You page is created, copy and paste the URL into the Success location in the Pardot form handler.

Create a blog welcome email

A blog welcome email is a great way to promote more of your blog content. Choose a couple of your popular posts or create a digest of curated content your readers might be interested in.

When a reader subscribes to my blog, I send them a welcome email with some of my top Pardot blog posts. Click here to see what it looks like (and feel free to copy and paste the HTML to create your own welcome email).

Once you have your blog welcome email created add a completion action to your Pardot form to send an autoresponder email.

Emailing subscribers: Automated vs. Manual

Now that your form is set up on your site and your welcome email is ready, it’s time to figure out how you’re going to send notification emails when there’s a new blog post. There are two ways you can send out blog posts:

Automatically using a third-party application, or
Manually, since Pardot doesn’t have an RSS feed integration.

For my blog, I send out all my blog digest emails manually, since I like to have control over what’s sent. However, I only post about once or twice a week, so it’s pretty manageable.

Automated blog posts using Feed Otter

If you opt to go with the automated route, Feed Otter provides a full RSS integration with Pardot. You can quickly build, schedule, and email your blog subscribers notifying them of a new post, a weekly digest, or a monthly newsletter.

Manual blog post emails

Manual blog post emails require you to create an email each time there is a new blog post, or if you post a lot during the week, you can do a digest of all the new posts, once a week. It can be time-consuming, but if you have a good email template setup and a defined process the whole thing doesn’t take very long. If you’re going to go the manual route, here are some tips:

Create a simple, one-column email template, so you don’t have to spend time messing with formatting. This is the template I use for my blog posts.
Create an email that you can copy each time you need to send a blog email. This will contain all the settings (from address, list, etc.) you need to send the blog email.

Questions?

Send me a tweet @jennamolby or leave a comment below.

Note: This post was originally written in November 2016 and updated January 2023.

Original article: How to Integrate Your Blog With Pardot

The post How to Integrate Your Blog With Pardot appeared first on The Spot.

By Jenna Molby|2023-01-04T19:34:16+00:00January 4th, 2023|Categories: Emails & Templates, Forms & Form Handlers, Getting Started, Pardot, revive, Setup & Admin|

Inspiration: Using Pardot for Event Registration

Recently, I was challenged with creating a landing page for event registration using Marketing Cloud Account Engagement (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 peek into how I built it along with some code if you want to try building something similar for your next event.

VIEW DEMO

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:

Roundtable Name 1: This field will contain the name of the roundtable the attendee selects for the first time slot.
Roundtable Name 2: This field will contain the name of the roundtable the attendee selects for the second time slot.
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.

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.

Conference Only: This email is sent out to everyone who didn’t select to participate in any of the roundtables.
Roundtables: This email is sent out to 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.

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.

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.

VIEW DEMO

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.

<div class="panel panel-default">
    <div class="panel-heading">
      <h3 class="panel-title"><span class="rountable-name">Session 1</span></h3>
    </div>
    <div class="panel-body">
      <div class="row">
        <div class="col-md-9">
          Pellentesque tempus aliquet nisi in sollicitudin. Aliquam tempor ligula vel mattis cursus. Cras lacus est, facilisis feugiat rhoncus ac, condimentum a ex. Aliquam elementum, nisi non dapibus dapibus, neque mi mattis libero, nec mattis tortor elit ut sapien. Donec nisi nulla, feugiat non dignissim aliquet, efficitur eget lorem. Proin id pellentesque ante.
        </div>
        <div class="col-md-3 btn-row">
            <a href="#" class="btn btn-register btn-select">Select</a>
        </div>
      </div>
    </div>
  </div>

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

<div class="sessions first-session">
  <div class="panel panel-default">
    <div class="panel-heading">
      <h3 class="panel-title"><span class="rountable-name">Session 1</span></h3>
    </div>
    <div class="panel-body">
      <div class="row">
        <div class="col-md-9">
          Pellentesque tempus aliquet nisi in sollicitudin. Aliquam tempor ligula vel mattis cursus. Cras lacus est, facilisis feugiat rhoncus ac, condimentum a ex. Aliquam elementum, nisi non dapibus dapibus, neque mi mattis libero, nec mattis tortor elit ut sapien. Donec nisi nulla, feugiat non dignissim aliquet, efficitur eget lorem. Proin id pellentesque ante.
        </div>
        <div class="col-md-3 btn-row">
            <a href="#" class="btn btn-register btn-select">Select</a>
        </div>
      </div>
      
    </div>
  </div>
  <div class="panel panel-default">
    <div class="panel-heading">
      <h3 class="panel-title"><span class="rountable-name">Session 2</span></h3>
    </div>
    <div class="panel-body">
 	<div class="row">
        <div class="col-md-9">
     	Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas lacinia, dolor scelerisque commodo sodales, augue lectus luctus turpis, id pharetra mauris libero at urna. Vestibulum in magna aliquam, interdum diam eu, pretium odio. Curabitur a porta metus, eget porttitor nibh. Maecenas porta condimentum lacus, in bibendum augue euismod sit amet.
        </div>
        <div class="col-md-3 btn-row">
            <a href="#" class="btn btn-register btn-select">Select</a>
        </div>
      </div>
   	
    </div>
  </div>
  <div class="panel panel-default">
    <div class="panel-heading">
      <h3 class="panel-title"><span class="rountable-name">Session 3</span></h3>
    </div>
    <div class="panel-body">
 	<div class="row">
        <div class="col-md-9">
          Phasellus nec neque scelerisque, semper odio a, fringilla leo. Sed cursus lectus non purus cursus tempus. Cras eu blandit lectus. Proin sodales justo et felis consectetur, sed ultrices nibh imperdiet. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Sed aliquam congue feugiat. Nam elit orci, congue et maximus sed, commodo quis arcu. Suspendisse iaculis eros viverra consectetur pretium.
        </div>
        <div class="col-md-3 btn-row">
            <a href="#" class="btn btn-register btn-select">Select</a>
        </div>
      </div>
   	
    </div>
  </div>
  <div class="panel panel-default">
    <div class="panel-heading">
      <h3 class="panel-title"><span class="rountable-name">Session 4</span></h3>
    </div>
    <div class="panel-body">
      <div class="row">
        <div class="col-md-9">
          Cras sapien leo, sodales vitae congue quis, semper ac ligula. Integer molestie fermentum suscipit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla odio ligula, aliquam eget leo eget, sollicitudin fringilla ante.
        </div>
        <div class="col-md-3 btn-row">
            <a href="#" class="btn btn-register btn-select">Select</a>
        </div>
      </div>   	
    </div>
  </div>
</div>

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.

<div class="slideout-form">
  <div class="slideoutform-header">
    <h3>Your Agenda</h3>
    <div class="close">X</div>
  </div>
  <div class="slideout-content">
      <div class="session-name-1"></div>
      <div class="session-name-2"></div>
      <div class="text-center">
      <a href="#registration" class="btn btn-white">Register</a>
      </div>
  </div>
</div>

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.

<div class="panel panel-default">
  <form action="" method="post" id="regForm">
    <div class="row">
        <div class="col-sm-6">
            <label>First Name <span class="required">*</span></label>
            <input class="form-control" name="firstname" required/>
        </div>
        <div class="col-sm-6">
            <label>Last Name <span class="required">*</span></label>
            <input class="form-control" name="lastname" required/>
        </div>
    </div>
    <div class="row">
        <div class="col-sm-6">
            <label>Email Address <span class="required">*</span></label>
            <input class="form-control" name="email" required/>
        </div>
        <div class="col-sm-6">
            <label>Company <span class="required">*</span></label>
            <input class="form-control" name="company" required/>
        </div>
    </div>
    <div class="row">
        <div class="col-sm-6">
            <label>Job Title <span class="required">*</span></label>
            <input class="form-control" name="jobtitle" required/>
        </div>
    </div>
    <div class="row">
        <div class="col-md-12 optin-container">
            <input type="checkbox" name="optin" /> Opt-in to receive communications from Sample Company including exclusive event invites, product and company updates and more
        </div>
    </div>
    <input type="hidden" name="roundtable1" />
    <input type="hidden" name="roundtable2" />
    <input type="hidden" name="eventreg" />
  <div class="footer-reg text-center">
    <input type="submit" class="btn btn-register btn-large" value="Register" />
  </div>
  <div class="required required-msg">
 
  </div>
  </form>
</div>

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.

 // Show the Agenda
  $('.btn-select, .btn-conference').click(function(event) {
    $('.slideout-form').slideDown();
  })
  // Session Selection Session 1
  $('.first-session .btn-select').click(function(event) {
      event.preventDefault();
      $(this).addClass('session-selected');
      $(this).removeClass('btn-select');
      $(this).text('selected');
      $('.first-session .btn-select').hide();
      var selectedsession1 = $(this).closest('.panel').find('.rountable-name').text();
      $('.session-name-1').html('<div class="agenda-item"><h5>9:00am - 11:00am</h5><div class="agenda-content">' + selectedsession1 + '</div></div>');
      $('input[name=session1]').val(selectedsession1);
  });
 
  // Session Selection Session 2
  $('.second-session .btn-select').click(function(event) {
      event.preventDefault();
      $(this).addClass('session-selected');
      $(this).removeClass('btn-select');
      $(this).text('selected');
      $('.second-session .btn-select').hide();
      var selectedsession2 = $(this).closest('.panel').find('.rountable-name').text();
      $('.session-name-2').html('<div class="agenda-item"><h5>11:00am - NOON</h5><div class="agenda-content">' + selectedsession2 + '</div></div>');
      $('input[name=session2]').val(selectedsession2);
  });

The entire HTML code

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

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" "http://www.w3.org/TR/REC-html40/loose.dtd">
<html>
<head>
<meta charset="utf-8">
<meta content="IE=edge" http-equiv="X-UA-Compatible"><meta content="width=device-width, initial-scale=1" name="viewport">
<link rel="shortcut icon" href="https://jennamolby.com/wp-content/uploads/2015/10/favicon.ico" />
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<title>Pardot Event Registration Inspiration</title>
<!-- Bootstrap -->
<link href="bootstrap.min.css" rel="stylesheet">
<link href="pardot-registration-inspiration-styles.css" rel="stylesheet">
 
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries --><!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
    </head>
    <body>
      <div class="header">
        <div class="container">
          <div class="row">
            <div class="col-sm-12 text-center">
                  Example Pardot Registration Page
            </div>
          </div>
        </div>
      </div>
        <div class="container">
          <div class="row">
            <div class="col-md-9 centered-columns">
              <h2> 9:00am - 10:00am</h2>
              <div class="sessions first-session">
                  <div class="panel panel-default">
                    <div class="panel-heading">
                      <h3 class="panel-title"><span class="rountable-name">Session 1</span></h3>
                    </div>
                    <div class="panel-body">
                      <div class="row">
                        <div class="col-md-9">
                          Pellentesque tempus aliquet nisi in sollicitudin. Aliquam tempor ligula vel mattis cursus. Cras lacus est, facilisis feugiat rhoncus ac, condimentum a ex. Aliquam elementum, nisi non dapibus dapibus, neque mi mattis libero, nec mattis tortor elit ut sapien. Donec nisi nulla, feugiat non dignissim aliquet, efficitur eget lorem. Proin id pellentesque ante.
                        </div>
                        <div class="col-md-3 btn-row">
                            <a href="#" class="btn btn-register btn-select">Select</a>
                        </div>
                      </div>
                    </div>
                  </div>
                  <div class="panel panel-default">
                    <div class="panel-heading">
                      <h3 class="panel-title"><span class="rountable-name">Session 2</span></h3>
                    </div>
                    <div class="panel-body">
                 	<div class="row">
                        <div class="col-md-9">
                     	Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas lacinia, dolor scelerisque commodo sodales, augue lectus luctus turpis, id pharetra mauris libero at urna. Vestibulum in magna aliquam, interdum diam eu, pretium odio. Curabitur a porta metus, eget porttitor nibh. Maecenas porta condimentum lacus, in bibendum augue euismod sit amet.
                        </div>
                        <div class="col-md-3 btn-row">
                            <a href="#" class="btn btn-register btn-select">Select</a>
                        </div>
                      </div>
                    </div>
                  </div>
                  <div class="panel panel-default">
                    <div class="panel-heading">
                      <h3 class="panel-title"><span class="rountable-name">Session 3</span></h3>
                    </div>
                    <div class="panel-body">
                 	<div class="row">
                        <div class="col-md-9">
                          Phasellus nec neque scelerisque, semper odio a, fringilla leo. Sed cursus lectus non purus cursus tempus. Cras eu blandit lectus. Proin sodales justo et felis consectetur, sed ultrices nibh imperdiet. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Sed aliquam congue feugiat. Nam elit orci, congue et maximus sed, commodo quis arcu. Suspendisse iaculis eros viverra consectetur pretium.
                        </div>
                        <div class="col-md-3 btn-row">
                            <a href="#" class="btn btn-register btn-select">Select</a>
                        </div>
                      </div>
                    </div>
                  </div>
                  <div class="panel panel-default">
                    <div class="panel-heading">
                      <h3 class="panel-title"><span class="rountable-name">Session 4</span></h3>
                    </div>
                    <div class="panel-body">
                      <div class="row">
                        <div class="col-md-9">
                          Cras sapien leo, sodales vitae congue quis, semper ac ligula. Integer molestie fermentum suscipit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla odio ligula, aliquam eget leo eget, sollicitudin fringilla ante.
                        </div>
                        <div class="col-md-3 btn-row">
                            <a href="#" class="btn btn-register btn-select">Select</a>
                        </div>
                      </div>   	
                    </div>
                  </div>
                </div>
                <h2>11:00am - Noon</h2>
                <div class="sessions second-session">
                  <div class="panel panel-default">
                    <div class="panel-heading">
                      <h3 class="panel-title"><span class="rountable-name">Session 5</span></h3>
                    </div>
                    <div class="panel-body">
                      <div class="row">
                        <div class="col-md-9">
                          Donec aliquet arcu at risus consequat mollis. Morbi suscipit ipsum commodo posuere faucibus. Mauris dui lacus, accumsan sed sollicitudin eget, placerat a velit.
                        </div>
                        <div class="col-md-3 btn-row">
                            <a href="#" class="btn btn-register btn-select">Select</a>
                        </div>
                      </div>
                    </div>
                  </div>
                  <div class="panel panel-default">
                    <div class="panel-heading">
                      <h3 class="panel-title">Session 6</h3>
                    </div>
                    <div class="panel-body">
                      <div class="row">
                        <div class="col-md-9">
                          Nam congue quam non elementum placerat. Vivamus egestas, ante sed imperdiet fermentum, tortor libero fermentum magna, nec bibendum mauris lacus vitae ante. Donec eu leo volutpat, consectetur libero eu, porttitor dui. Mauris nec ornare ligula. Morbi et massa viverra, malesuada velit id, faucibus metus. Duis consequat tincidunt blandit.
                        </div>
                        <div class="col-md-3 btn-row">
                            <a href="#" class="btn btn-register btn-select">Select</a>
                        </div>
                      </div>
                    </div>
                  </div>
                  <div class="panel panel-default">
                    <div class="panel-heading">
                      <h3 class="panel-title"><span class="rountable-name">Session 7</span></h3>
                    </div>
                    <div class="panel-body">
                      <div class="row">
                        <div class="col-md-9">
                          Sed turpis nisl, efficitur pharetra hendrerit ac, gravida id mi. Duis elementum velit nec risus aliquet congue et non dolor.
                        </div>
                        <div class="col-md-3 btn-row">
                            <a href="#" class="btn btn-register btn-select">Select</a>
                        </div>
                      </div>
                   	
                    </div>
                  </div>
              </div>
          <div class="slideout-form">
          <div class="slideoutform-header">
            <h3>Your Agenda</h3>
            <div class="close">X</div>
          </div>
          <div class="slideout-content">
              <div class="session-name-1"></div>
              <div class="session-name-2"></div>
              <div class="text-center">
              <a href="#registration" class="btn btn-white">Register</a>
              </div>
          </div>
        </div>
         	<h2 style="background-color:#49c5c8;">Register</h2>
            <div class="sessions conf" id="registration">
                  <div class="panel panel-default">
                    <form action="" method="post" id="regForm">
                      <div class="row">
                          <div class="col-sm-6">
                              <label>First Name <span class="required">*</span></label>
                              <input class="form-control" name="firstname" required/>
                          </div>
                          <div class="col-sm-6">
                              <label>Last Name <span class="required">*</span></label>
                              <input class="form-control" name="lastname" required/>
                          </div>
                      </div>
                      <div class="row">
                          <div class="col-sm-6">
                              <label>Email Address <span class="required">*</span></label>
                              <input class="form-control" name="email" required/>
                          </div>
                          <div class="col-sm-6">
                              <label>Company <span class="required">*</span></label>
                              <input class="form-control" name="company" required/>
                          </div>
                      </div>
                      <div class="row">
                          <div class="col-sm-6">
                              <label>Job Title <span class="required">*</span></label>
                              <input class="form-control" name="jobtitle" required/>
                          </div>
                      </div>
                      <div class="row">
                          <div class="col-md-12 optin-container">
                              <input type="checkbox" name="optin" /> Opt-in to receive communications from Sample Company including exclusive event invites, product and company updates and more
                          </div>
                      </div>
                      <input type="hidden" name="session1" />
                      <input type="hidden" name="session2" />
                      <input type="hidden" name="tractionforcereg" />
                    <div class="footer-reg text-center">
                      <input type="submit" class="btn btn-register btn-large" value="Register" />
                    </div>
                    <div class="required required-msg">
                    </div>
                    </form>
                  </div>
              </div>
            </div>
            </div>
          </div>
        </div>
   	
      <script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
      <script src="pardot-registration-inspiration.js" type="text/javascript"></script>
    </body>
</html>

The Entire JavaScript

$(document).ready(function(){
 
  // Show the Agenda
  $('.btn-select, .btn-conference').click(function(event) {
    $('.slideout-form').slideDown();
  })
 
  // Session Selection Session 1
  $('.first-session .btn-select').click(function(event) {
      event.preventDefault();
      $(this).addClass('session-selected');
      $(this).removeClass('btn-select');
      $(this).text('selected');
      $('.first-session .btn-select').hide();
      var selectedsession1 = $(this).closest('.panel').find('.rountable-name').text();
      $('.session-name-1').html('<div class="agenda-item"><h5>9:00am - 11:00am</h5><div class="agenda-content">' + selectedsession1 + '</div></div>');
      $('input[name=roundtable1]').val(selectedsession1);
      console.log(selectedsession1);
  });
 
  // Session Selection Session 2
  $('.second-session .btn-select').click(function(event) {
      event.preventDefault();
      $(this).addClass('session-selected');
      $(this).removeClass('btn-select');
      $(this).text('selected');
      $('.second-session .btn-select').hide();
      var selectedsession2 = $(this).closest('.panel').find('.rountable-name').text();
      $('.session-name-2').html('<div class="agenda-item"><h5>11:00am - NOON</h5><div class="agenda-content">' + selectedsession2 + '</div></div>');
      $('input[name=roundtable2]').val(selectedsession2);
      console.log(selectedsession2);
  });
  // Conference Selection
  $('.btn-conference').click(function(event) {
   	event.preventDefault();
      $(this).addClass('roundtable-selected');
      $(this).text('selected');
    var selectedSession3 = $(this).closest('.panel').find('.rountable-name').text();
 	$('.roundtable-name-3').html('<div class="agenda-item"><h5>NOON - 8:00pm</h5><div class="agenda-content">' + selectedSession3 + '</div></div>');
    $('input[name=eventreg]').val('true');
  });
  // Close button for the Agenda
  $('.close').click(function(event) {
      event.preventDefault();
      $('.slideout-form').slideUp();
  });
  // Smooth scroll for the register button
   $(function() {
    $('a[href*="#"]:not([href="#"])').click(function() {
      if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) {
        var target = $(this.hash);
        target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
        if (target.length) {
          $('html, body').animate({
            scrollTop: target.offset().top
          }, 1000);
          return false;
        }
      }
    });
  });
});

VIEW DEMO

Note: This post was originally published in April 2016 and updated in January 2023.

Original article: Inspiration: Using Pardot for Event Registration

The post Inspiration: Using Pardot for Event Registration appeared first on The Spot.

By Jenna Molby|2023-01-02T17:10:00+00:00January 2nd, 2023|Categories: Forms & Form Handlers, Getting Started, Pardot, revive, Setup & Admin|

About Jenna Molby

How to Add Calendar Links to Pardot Emails and Landing Pages

Choose which calendars to target

Option 1: Create calendar links & files manually

Upload the calendar link to Pardot

Example

Option 2: Creating a calendar links with a tool

Email example

Landing page example

Taking it a step further

How to Add Calendar Links to Pardot Emails and Landing Pages

Choose which calendars to target

Option 1: Create calendar links & files manually

Upload the calendar link to Pardot

Example

Option 2: Creating a calendar links with a tool

Email example

Landing page example

Taking it a step further

How to Integrate Your Blog With Pardot

How do you want your blog readers to subscribe?

Example 1: In a sidebar

Example 2: At the end of each blog

Example 3: In the footer

Example 4: With an automation

Example 5: In multiple spots

What fields should you capture?

Standard fields

Hidden fields

The Pardot implementation

Pardot Form Handlers vs. Pardot Form embed

Create a campaign dedicated to blog subscribers

Create a Pardot Form or a Form Handler

Add the form to your blog

Create a Thank You page

Create a blog welcome email

Emailing subscribers: Automated vs. Manual

Automated blog posts using Feed Otter

Manual blog post emails

Questions?

How to Integrate Your Blog With Pardot

How do you want your blog readers to subscribe?

Example 1: In a sidebar

Example 2: At the end of each blog

Example 3: In the footer

Example 4: With an automation

Example 5: In multiple spots

What fields should you capture?

Standard fields

Hidden fields

The Pardot implementation

Pardot Form Handlers vs. Pardot Form embed

Create a campaign dedicated to blog subscribers

Create a Pardot Form or a Form Handler

Add the form to your blog

Create a Thank You page

Create a blog welcome email

Emailing subscribers: Automated vs. Manual

Automated blog posts using Feed Otter

Manual blog post emails

Questions?

Inspiration: Using Pardot for Event Registration

VIEW DEMO

How it Works

Pardot Setup

Field Creation

Form Handler Setup

Field Mappings

Completion Actions

Thanks for registering email confirmation

Conference Only Email

Roundtable Email

Building the Landing Page

VIEW DEMO

The HTML

JavaScript

The entire HTML code

The Entire JavaScript