Marketing Cloud Account Engagement Progressive Profiling is an out-of-the-box functionality and a powerful solution for B2B marketers who want to get detailed prospect data without overwhelming them with a large number of form fields to complete.

This advanced form feature allows marketers to gather additional information about prospects over time, without creating lengthy forms. On one hand, it helps the marketers gain higher conversion rates, while on the other it enhances the user experience and reduces form fill burnout.

How does Progressive Profiling work?

Through Progressive Profiling, Marketing Cloud Account Engagement replaces the form fields for which data is already collected with new fields.

So when a prospect visits your progressive profiling enabled form, it will only present the fields they haven’t

filled out before, unless the ‘Always display even if previously completed’ setting is enabled. By doing so, you gradually collect more information about your prospects over multiple interactions.

• When a prospect first interacts with your marketing content, Marketing Cloud Account Engagement should display a short form with essential fields such as first name, last name, email address, and company name. The goal is to capture basic prospect data to initiate the engagement.
• Upon subsequent engagement, Marketing Cloud Account Engagement flips previously completed fields with new ones. For instance, if the prospect has completed the Company Name field, the next time they interact with a form, it could be replaced with the Job title field.
• Through every interaction, Marketing Cloud Account Engagement will ask the prospect to provide additional data beyond what is collected already.
• Gradually you can build a comprehensive profile of your prospects, and it can be used to tailor your marketing campaigns to cater to their specific needs and preferences.

Key Benefits of Progressive Profiling

• Progressive profiling ensures that quality prospect data is collected, as the risk of data entry errors is minimized due to this gradual approach of presenting fields.
• Since the number of fields displayed at a time is limited, it makes the form submission exercise seamless, reduces burnout and increases the likelihood of getting more form submissions.
• Segmentation and targeting of prospects also becomes a lot more easier and effective as more and more prospect data is collected.
• Through better segmentation, marketers can send personalized content to the prospects and improve the chances of conversion.
• Collecting additional information regarding the needs and preferences of the prospects can aid marketers in channelizing marketing efforts in the right areas.

How to set up progressive profiling in Account Engagement

• Create Custom Fields:

Before setting up progressive profiling, you need to ensure the custom fields to collect the incremental prospect data are created.

• Create your Marketing Cloud Account Engagement Form:

This feature requires you to first create the forms you intend to use for capturing prospect data. Create a form and either add new fields or use the existing ones such as First Name, Last Name, Email and Company.

• Enable progressive profiling for your form:
  • In the form editor, click on the pencil icon adjacent to the form fields you seek to progressively profile.
    (The screenshots below show the example of progressive profiling on the ‘Department’ field, which will be displayed only when the ‘Job Title’ field is already completed.)

• Then, in the form settings dialogue box, switch to the ‘Progressive’ tab and enable progressive profiling by checking the checkbox labeled as ‘Show this field only if the prospect already has data in the following field(s)’

• When adding multiple progressive profile fields, you can also manage the sequence in which they are displayed.
• Remember to save the changes you made to the form settings, and click the ‘Confirm and save’ button before exiting the form editor.

Conclusion 

Overall, progressive profiling addresses the issue of form fill burnout by creating a dynamic, user-friendly and incremental approach to collect prospect data. It ensures quality data is collected and aids segmentation and targeting. 

This approach also ensures that marketers respect their prospect’s time and effort in the form completion process, while increasing engagement and prospect data quality. When using this approach remember to maintain a balance between asking information and honoring the prospect’s preferences.

Need help creating sophisticated prospect profiles and segmentation strategies? Reach out to the team at Sercante to get the conversation going.

Original article: Eliminate Form-Fill Burnout with Account Engagement Progressive Profiling

©2023 The Spot. All Rights Reserved.

The post Eliminate Form-Fill Burnout with Account Engagement Progressive Profiling appeared first on The Spot.

A form on a landing page or your website is often the final step in a nurturing process and represents the crucial point of conversion. According to Manifest, 81% of people will abandon a form after beginning to fill it out. And of that 81%, more than half (67%) will not return to complete the form. 

So how do we, as marketers, improve our game and increase conversions while decreasing form abandonment? By using five native tools at your disposal within the Marketing Cloud Account Engagement (Pardot) forms tool.

Five Ways to Increase Pardot Form Submissions and Decrease Form Abandonment

When marketers first start using forms within Pardot, they’re probably inclined to keep things simple and have a primary focus on collecting information they see as required or important to their sales process. However, you can leverage a few things within Pardot to decrease form abandonment and up your marketing game. 

1. Use Dependent Fields

Keep the form simple and limit the number of fields using dependent fields. When you are seeking relatable information based on specific field values, dependent fields are the best way to capture that additional insight.

For example, if you are a global company, you can ask for the user’s country. And if they respond with the United States, then you can ask for their state. Or if they respond with Canada, you can ask which province they are from. Whereas, if they respond with the United Kingdom, no additional information is required. 

Dependent fields eliminate unnecessary questions, shorten the form, and personalize the experience for each Prospect.

2. Set Up Progressive Profiling

Another great way to help shorten your forms, but still collect the required information is through progressive profiling. This tool enables you to ask new questions based on each return to a form, eliminating previously completed questions from prior form fills. 

For example, if you already know their company, the next time they return to the form, you can now ask for a job title to dig in further. This is one of the best tools at your disposal as a marketer because it ensures a positive user experience for the Prospect and helps keep the sales team happy by collecting details for lead assignment, segmentation, and increased nurturing via targeted Engagement Studio Programs.

3. Have Clear Calls to Action

Calls to action are the short persuasive text used on the form button to close the deal. You want to be straightforward while keeping it short and simple. I would recommend starting with a verb and following up with an adverb or subject thereafter. 

For example, a clear call to action could say:  “Download Your e-book Now” or “Subscribe Today.”

Ultimately, use language that promises them the delivery of something your reader wants. 

4. Use Autoresponders

Creating an experience for Prospects is crucial in seeing them return to want more. This can be accomplished by ensuring that you follow through on your delivery when a form is completed through autoresponders and/or thank you pages. 

Take advantage of the redirect and follow-up by creating a personalized experience by offering them a thank you message, a downloaded asset, and/or highlighting similar content they may be interested in. 

By directing them to additional content, you can use your Progressive Profiling and they can gain additional insight into your organization and how you can help solve their issues.

5. Enable Completion Actions

Completion Actions are similar to your Autoresponders, as they are unseen heroes of the form experience but play a critical role in delivering what was promised. A Completion Action is an action that Pardot will automatically make on your behalf as soon as the form is completed. 

Actions could include:

• Delivering gated content
• Adding to subscription lists
• Notifying users
• Adding prospects to nurture programs
• Creating a task to follow up with the prospect

It’s the final touch to the entire experience and will keep your prospects returning for more.

Create Better Pardot Forms to Get More Conversions

With these out-of-the-box Pardot tools at your disposal, you can easily decrease form abandonment and increase Prospect engagement, growing your pipeline and improving your nurture game. 
Interested in learning more about how to get started or how to expand your Pardot form game? Contact us today!

Original article: 5 Easy Ways to Increase Pardot Form Submissions

©2023 The Spot. All Rights Reserved.

The post 5 Easy Ways to Increase Pardot Form Submissions appeared first on The Spot.

Are you spending hours upon hours curating engaging, click-worthy content, only to notice that you have low engagement, high unsubscribes and spam complaints? A list of opted-in prospects is great, but what happens when they input false or incorrect contact information, or sign up on a whim. By setting up Confirmed Opt-In (also known as Double Opt-In), you can be at ease knowing you’re collecting email addresses from a valid and monitored inbox, and of prospects who want to receive and read your content.

What is Confirmed Opt-In?

A Confirmed Opt-In (COI) is a process where a marketer obtains explicit consent from prospects to receive marketing emails. 

Setting it up adds a few more steps to the Single Opt-in process but is generally easy:

1. A contact fills out your form and selects the consent check-box (single opt-in)
2. They receive the opt-in confirmation email, open it and click the button to confirm.
3. Their record is updated as an opted-in contact, along with other important details like when they confirmed their opt-in.

It may be a regulatory requirement in certain regions, so make sure you do your research to understand whether your prospects require a COI. It’s currently required in Austria, Germany, Greece, Switzerland, Luxembourg and Norway (source).

Benefits of COI for Email Marketing

While it can take more time to set up, the payoff is worth the effort:

• Higher email engagement rates (opens/clicks): Prospects are interested in receiving your marketing emails and are more likely to purchase your products/services.
• Lower bounce rates/spam complaints and a better sending reputation: No fake emails entering your database and causing high bounce rates or spam traps that end up harming your sending reputation. 
• A well-documented record of opt-in: With this auditable trail, if a recipient reports the email as spam, you will have proof to support your list’s opt-in integrity.
• And generally a good, clean database. 

Setting up Confirmed Opt-In

There are a number of ways to set up COI. Here’s a basic overview of how to set it up in Marketing Cloud Account Engagement (Pardot) instance. 

1. Create two lists to capture opt-ins
   • Confirmed Opt-in
   • Not confirmed Opt-in
2. Create a landing page that a prospect is directed to once they confirm their opt-in.
3. Create a custom redirect link that sends prospects to the landing page above
   • Add the following completion actions to the custom redirect:
     1. Remove prospect from Not confirmed Opt-in list
     2. Add prospect to Confirmed Opt-in list
4. Set up an auto-responder email to capture COI
   • Add the custom redirect link (identified in the above step) to the call to action button to capture the COI
5. Add the following completion actions to the form/form handler that captures consent to receive Marketing Communications:
   • Add prospects to the Not confirmed Opt-in list 
   • Send auto-responder email to capture their COI

Quality or Quantity

COI is a great way to level up your email marketing strategy; ensuring a healthy database full of ‘real’ and engaged prospects. And with sales and marketing always looking for quality over quantity, COI will ensure it gets you there.

What questions do you have about Confirmed Opt-in? Let’s hear it in the comments below.

Original article: Forms Are Great, But Confirmed Opt-In Is Better

©2023 The Spot. All Rights Reserved.

The post Forms Are Great, But Confirmed Opt-In Is Better appeared first on The Spot.

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:

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.

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 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.

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

©2023 The Spot. All Rights Reserved.

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