How to Create a Killer Company Newsletter

, , ,

The dreaded newsletter — It’s something that every company strives to send but also wonders if it’s worthwhile.

Most of the time your newsletter list consists of current customers or maybe even leads that weren’t ready to buy. A company newsletter is a great way to maintain brand awareness with your customers. Newsletters can also be a great asset to stay in front of those leads who are not ready to convert. It’s a subtle way to stay top-of-mind while keeping your company brand relevant. When putting together a newsletter, there are two major items to consider. 1) The design and 2) the content.

01. THE DESIGN

The biggest mistake companies can make with their newsletters is the design. While graphics and pops of color can look appealing, they should definitely be kept to a minimum. Here’s why:

  • Too many images increase the likelihood of your email ending up in spam/junk
  • Excessive code in emails can break how they render in different email inboxes
  • Heavy design elements like color, graphics, and custom fonts may not display properly on mobile

Newsletter templates should have a simple yet aesthetic design. It should easily allow readers to move their eyes throughout the content. One great way to accomplish this is by using different content sections or blocks, which can also help organize your newsletter.

                    newsletter1

These email templates are provided by BEE Free and are available for free on their website. Read our blog The Top 3 Free Email Builders to learn how to import this newsletter template into your email marketing platform.

02. THE CONTENT

The type of content within your newsletter will depend on your audience and company brand/voice. If your company voice can be fun and playful, a newsletter is a perfect place to portray it. For example, if your company is a financial institution and your newsletter audience includes clients, it may not be the greatest idea to use a playful voice. Your audience is expecting professionalism and valuable resources in your newsletter.

Contingent on your audience, the following types of content are great for peaking interest and may be a great fit for your newsletter:

Promotions

Promotional offers are one of the most common types of content in newsletters. Offering discounts or special promos can help encourage repeat business but can also help bring in new sales. Social sharing buttons or referral programs make it easy for your readers to share with fellow friends while helping you capture new business.

Resources

Resources like blogs, case studies, and ebooks are just a few examples of the valuable content you can offer your audience in newsletters. For B2B industries, it’s likely that customers will be interested in the material they can relate to their own business efforts. For example, a case study on how another company has overcome the struggle of increasing lead conversion may be valuable for others in the same position. By offering these types of resources you are encouraging your customers to build their knowledge base and in turn, customers will associate value with your company.

Spotlights

Whether you’re adding a new team member or introducing a new client, spotlights are unique content pieces to share with your audience. Employee spotlights could consist of industry related tips, fun facts, reviews, and more. Showcasing a new client may involve a brief introduction but also what your company will be doing to help them. If industry appropriate, spotlights are a great place to get fun with your company personality.

Industry/Company Updates

Reviewing the latest and greatest news in your companies industry is extremely important. By sharing industry updates you’re not only educating them, but you’re also showing your readers you keep up with industry trends and you’re ready to compete. It proves your business is continuously learning and making strides to remain relevant. Updates may also include software or application announcements, especially if your business works with the applications or are widely popular within the industry.

Events

Events are a timeless resource that can hold huge value with customers. Types of events can vary and may include: webinars, networking, fundraising, educational workshops, tradeshows, and more. Newsletters can be a great space to announce these types of events as the email list typically includes the mass majority of your database. Many times hosting or attending an event can also help capture new leads.

If you’re already a pro at email newsletters, check out 8 Valuable Content Marketing Tools You Can’t Live Without.

/by

How to Create an Editable Marketo Email Template Using BEE Free

, ,

In my last post I showed you how to create a one-off email for Marketo using the BEE Free site which is always a great, easy option when you’re tired of the Marketo editor. But, what if you want to re-use one of those emails just like the pre-built Marketo email templates? Not a problem! And no, you don’t have to be an expert developer to do so. I’ll show you exactly what you need to do.

Creating an Email Using the BEE Free Site

If you don’t already have an email in your Marketo instance that you want to make editable, then I suggest choosing a template you like from the BEE Free site. The site is very intuitive and easy to navigate but be sure you deselect the “pro” option when sorting through the templates. This will ensure you’re only viewing the free options. Once you choose the template you would like to use simply click “get started”.

An editor will open allowing you to fully customize that template design. Now, because we plan to use this as a Marketo email template you don’t necessarily need to fill it in with real content just yet. However, you will want to edit things like background color, text box and image locations, fonts, etc. in order to get the design exactly how you want it.

BEE Free Editor

When you’re finished editing, simply click the “save” button in the top right-hand corner. This will take you to a new page offering the Pro version of their services. The Pro version offers storage so you can save your template inside the BEE Free site. For our purposes however, we really don’t need that so you can simply click the “I just want to download it” button.

Download Template

Adding the BEE Free Email to Marketo

First, you’ll need to open your computer’s “downloads” folder and locate a folder that’s named “beefree” followed by some random letters and numbers. Open that folder and click on the .html file inside. This will open a webpage. Right-click anywhere on this page (except on an image) and select “view page source”. Highlight and copy ALL of the text on that page. This is the coding behind your new template.

Next, you’ll open your Marketo instance, create a new email in the design studio, click “edit code” in the editor and replace the existing code with the new code you copied earlier. The reason I recommend creating an email here rather than a template is because it is easier to verify the edits we’re about to make to create editable fields. This will make more sense as we move through the next steps. Once you’ve replaced all the existing code with your new code, click “save”.

Making Your New Marketo Email Template Editable

Now that your email is created in Marketo, you’ll need to make it editable. To do so you simply need to add <div class=”mtkEditable” id=”section_name”> tags to each section of code. Editing code may sound scary to some at first, but it’s really not once you have a basic understanding of what html is.

So to start, open your new email in Marketo and get to the edit code page. In the code, your email is broken into sections. Each section is housed within <div> tags as shown below.

Example of Code Sections

Example of Code Sections

 

Also, keep in mind that the code of an email flows in the same order as your design. So if you’ve got a text block in the middle of the template you want to make editable, you’ll find the block of code for it toward the middle as well.

Example of code location

Making an Image Block of a Marketo Email Template Editable

If you want to make an image block editable, look through the code for an <img> tag. This is noticeable by the URL linking to the image and the <img> start tag. I typically use control-F to search for the URL of the image. For example, if I know the image is titled “wine” then I search the page for that term and will be taken directly to that portion of the code. Once you have the correct image located, back up through the code and find the <div> tag that comes directly before the <img> tag.

example of image location in code

You’ll notice that in my example this <div> tag already contains a “class=” designation. Since you can only have one of these designations per <div> tag, you’ll need to remove what’s there and replace it with class=”mktEditbale”. Also, Marketo requires every editable section to have an “id” designation. They use this as the section name in the “content” column on the right-hand side of the email editor. So you’ll need to add id=”header-image” (or whatever title makes sense for your email) directly after your new class designation.

To test to see if you added it in the correct location, click save code to get back to the Marketo editor and if when you hover over that section it highlights it or you see the section in the right-hand column, then you know it is editable and your edits to the code worked!

verify your work

Making Text Blocks in a Marketo Email Template Editable

You’ll need to repeat the step above for every section you want editable. For text blocks, the easiest thing to do is to hit control+F and search for some of the words in the text of your email. In the example below that would be “Lorem Ipsum dolor sit…” That will take you directly to the appropriate section of code. Then you’ll again locate the <div> tag directly before the text and add class=”mktEditable” id=”section_name” like below.

locating text block making text editable verifying in Marketo

Finalizing Your New Marketo Email Template

Once you have all the editable areas in place and your email looks just how you want it (again actual content isn’t necessary just yet), you’re ready to save it as a template in your Marketo instance.

Click edit email to open the email editor for your new email. Once in the editor, click the email actions drop down in the top left corner. Choose “save as template” and set your desired location and name. Then hit save.

save as template in Marketo naming your template

You now have a brand new Marketo email template ready for use. Go to your Marketing Activities and locate a program or campaign you’d like to add an email to. Create a new local asset. Choose email and you’ll new see your newest Marketo email template in the template picker.

Plus, as an added bonus, you can now say you know how to edit HTML code!

/by

The Top 3 Free Email Builders

, , , , ,

As a content marketer, one of your most valued duties includes creating content and sharing it. However, using different marketing software may present as your biggest challenge. Picture this, you’re up against a tight deadline to launch an e-newsletter containing this month’s featured content, but you’ve run into a snag because your email template just doesn’t translate the way you imaged or worse isn’t rendering correctly.

If you’ve ever found yourself in this scenario, this blog is for you! By the end of this piece, you will know how to use the top free email builders and how to import your new design to use in Pardot.

 

BEE Free

BEE Free is one of the easiest email builders to use. You can drag and drop content onto email templates, including buttons, text blocks, images, and more.  With BEE Free, marketers can design sleek and modern emails with ease. This site also offers a way to export HTML to transfer into email marketing platforms.

To begin building your email template, head over to the BEE Free homepage and “Start Designing”. The site will prompt you to start your own design from scratch or select a template where you can filter through an abundance of free templates, usage types, and different industries.

 

Once you’ve selected a template you’re now ready to customize it! The drag and drop email builder gives you a seamless user experience. Once you’ve got the look you desired you want to “Save” the email template. However, if you’re using the free version, BEE Free will ask if you’d like to sign up for a paid plan or if you’d just like to download your template – you want to choose to download it.

 

After selecting to download the email, a zip file should load where you will find an image (holds all the images to the email template) and .html file. You’ll want to open this file and right-click to reveal the drop-down for “View Page Source”. This will allow you to view the code of the whole page. This is the code we’ll later copy and paste into Pardot.

 

In the Pardot email builder, you’ll want to paste the code from the page source into the HTML tab in Pardot.

 

*Note: You may receive the following alert: HTML message: An unsubscribe tag (%%unsubscribe%% or %%email_preference_center%%) is required somewhere in the body of the email. This can be done by highlighting the text you’d like to link for unsubscribers and selecting the hyperlink icon to choose the unsubscribe tag as the link type.

 

Once the HTML code is added I suggest previewing your email template and making revisions. Please note if you’re adding images to the BEE Free template, you will need to readd them to the Pardot template.

 

TOPOL.io

Similar to BEE Free, Topol.io allows users to design emails with a drag and drop tool and it’s “sooooo easy”. In comparison to BEE Free, Topol.io also provides a number of email templates but not nearly as many. One feature I believe Topol.io does better is the process of exporting the email HTML. Topol.io automatically creates a download of the .html file, rather than a zip file.

 

After selecting your email template to design, you’ll want to “Save & Download”, which will prompt an automatic download of the HTML. From here the same process as stated above should be followed to import the email HTML into Pardot.

Stripo.email

Unlike our first two contenders, Stripo requires users to sign up for a free account and caps off at 4 free downloads each month. However, Stripo.email states the download limits get reset every month. By selecting “Email Templates” in the navigation bar, you’re able to select from numerous email templates and filter by type, industry, and season.

 

“Try Out” your email template once you’ve selected the right fit and begin to make your revisions. When you’re ready to export the HTML, you will save the email template which will then prompt you to create a free user account.

 

When your new account has been registered you will be brought to an overview screen of all your email templates. Select the one you’d like to export the HTML and proceed with selecting the “Export” button > HTML > Download HTML file.

 

Not a Pardot user? Here’s a similar article for Marketo.

 

 

 

 

 

/by

Need Data? Create a Company Blog Dashboard in Google Analytics

, ,

At my last company our small marketing team struggled to identify the real impact our company blog was having on business.  A seemingly simple task is often complicated by the fact that today most companies host their blog inside their corporate website ala https:pardot.com/blog.  This makes reporting and isolating only the blog visitor metrics more challenging. The key to un-cloaking your company blog-only metrics might be creating a Custom Segment in Google Analytics to focus on traffic coming through your company blog.

I’ve spent the past week researching the best way to segment your blog metrics and create a Google Analytics dashboard to give a baseline of your company blog’s value.  This post will walk through segmenting your website traffic and importing my company blog dashboard template into your Google Analytics account.  If you’d like a full run-down of why and what these metrics are check out my post on the Pardot blog: How to Track Key Blog Metrics!

Requirements:

This walkthrough assumes you have Google Analytics installed on your company website.

Let the uncloaking begin.

Importing the Company Blog Dashboard Template

To get started, import my Google Analytics Company Blog Dashboard into your account.  You can do this by clicking the button below:

[minti_button link=”https://analytics.google.com/analytics/web/template?uid=4MaTLsBTSgOMl9D8tD2VlA” size=”medium” target=”_blank” lightbox=”false” color=”green” icon=”fa-download”] Import the Company Blog Dashboard[/minti_button]

Assuming that you are logged into company Google Analytics account you should land at a page that looks similar to my screenshot, prompting you for a name, name it Company Blog Dashboard.  You will also need to choose the website data from which to pull, choose the View most appropriate for your website.

Import the FeedOtter Company Blog Dashboard Template

After clicking the Create button you will see a number of widgets showing data from your entire website.  However interesting and impressive we want to limit this dashboard to only show data corresponding to our company blog so we must now create a custom segment, read on!

Creating a Custom Blog Users Segment

To create a custom Blog Users Segment

  1. Click on the light grey Add Segment text in the top middle of your dashboard
  2. Click the red New Segment button
  3. Select Conditions from the left-side list of options
  4. Name your Segment and create a filter as shown in the screenshot below:

Configuring Your Blog Users Segment in Google Analytics

  1. Name your segment Blog Users Segment
  2. Choose Users
  3. Select Landing Page
  4. This is the path of to your blog.  For me, the FeedOtter blog is located at /blog/ but this is typically what you would consider your blog’s homepage minus your website’s domain name.
  5. Click the blue Save button

The top of your Blog Dashboard should look similar to mine below… The new Blog User Segment will have replaced the All Users.  If All Users is still there click the little “down arrow” and select “Remove”.  Now you are looking at only blog visitors!

The Completed Company Blog Dashboard

 

Customization

Since no 2 websites are alike you may need to tweak some of the widgets to show the right data, here are a couple you might want to pay attention to:

  • Which posts are most popular? – this is currently configured to only show posts from the /blog/ subdirectory of your website.  If your blog is not located at /blog/ you will want to update the filter on this widget.  Click the Pencil to edit, and change /blog/ to /youbloghomepath/
  • Free trials created – I added this widget to demonstrate how you can link your blog traffic to Google Analytics Goals.  For example, I have this setup to detect how many free trial sign-ups result from blog traffic.

What other metrics would you like to report on?  Please comment and share your customizations and ideas on how to make this dashboard better.

/by

How to Add a Blog Subscription Form To Your Company Blog

,

Your company blog is one of the most important tools for growing your marketing database.  It’s also a great way to bring visitors back to your website thereby increasing the chance they will inquire about your products or services.  In this week’s post I’m going to walk you through how to create a basic blog subscribe form in Pardot and add it to the sidebar of your company blog. For this how-to you should be a Pardot user and have access to the admin area of your website/blog CMS.  In this example we will use WordPress as our CMS.

I like to think of marketing initiatives in terms of “I Want…” phrases.  They help to define a purpose and a clear goal that we hope to achieve.  For this project our “I Want” phrase is going to be:

“I want to capture the email address of subscribers on the side of my company blog”

When we’re all done it will look something like this:

The Sidebar Subscription Form

Here is what the finished product will look like:

Basic subscribe form for company blog

Part 1. Pardot Tasks

If you haven’t already, you will want to  create a new Pardot Campaign & Pardot Folder for this project.  We assume the campaign and folder names from that blog post are used.

Task 1 – Create a new Layout Template

In order to create a fully-custom form in Pardot we need to create a new layout template to reflect the visual look and feel of our form.  Don’t worry I created this for you all you need to do is copy and paste my code into the appropriate places.

  1. In Pardot, navigate to Landing Pages > Layout Templates
  2. Click the Add Layout Template button
  3. Name your new template LTMP -Basic Blog Sidebar Form I like to add LTMP to the beginning of my items so I always know that its a layout template.  Adding “Basic” into the name will set you up for a forthcoming how-to on a more advanced form with subscription preferences built in.
  4. Select your Blog Subscribers folder
  5. Uncheck  Include default CSS stylesheet (recommended)
  6. Don’t click the button yet, we need to copy & paste in the blog subscriber sidebar form html

Create a basic blog sidebar form layout template

Now we are ready to add the custom template items.

In the Layout Tab:

  1. Delete everything shown in this box by default
  2. Copy & Paste the following code into the box

[pastacode lang=”markup” manual=”%3Chtml%3E%0A%3Chead%3E%0A%3Clink%20href%3D%22https%3A%2F%2Ffonts.googleapis.com%2Fcss%3Ffamily%3DOpen%2BSans%22%20rel%3D%22stylesheet%22%3E%0A%3Cstyle%3E%0A%20%20%20%20%23fo-subscribe%20%7B%0A%20%20%20%20%20%20%20%20padding%3A%200px%3B%0A%20%20%20%20%20%20%20%20border%3A%20none%3B%0A%20%20%20%20%20%20%20%20width%3A%2095%25%3B%0A%20%20%20%20%20%20%20%20text-align%3A%20left%3B%09%0A%20%20%20%20%20%20%20%20font-family%3A%20’Open%20Sans’%2C%20sans-serif%3B%0A%20%20%20%20%20%20%20%20color%3A%20%23868686%3B%0A%20%20%20%20%20%20%20%20font-style%3A%20normal%3B%0A%20%20%20%20%20%20%20%20font-weight%3A%20normal%3B%0A%20%20%20%20%20%20%20%20line-height%3A%201.75em%3B%0A%20%20%20%20%20%20%20%20font-size%3A%2013px%3B%0A%20%20%20%20%7D%0A%20%20%20%20%23fo-subscribe%3Eform%3Eh3%20%7B%09%09%0A%20%20%20%20%20%20%20%20font-style%3A%20normal%3B%0A%20%20%20%20%20%20%20%20font-weight%3A%20700%3B%0A%20%20%20%20%20%20%20%20line-height%3A%201.5em%3B%0A%20%20%20%20%20%20%20%20letter-spacing%3A%200.01em%3B%0A%20%20%20%20%20%20%20%20font-size%3A%2015px%20!important%3B%0A%20%20%20%20%20%20%20%20text-transform%3A%20uppercase%3B%0A%20%20%20%20%7D%0A%20%20%20%20%23fo-subscribe%3Eform%3Ep%20%7B%0A%09margin%3A0px%200px%200px%200px%3B%09%0A%20%20%20%20%20%20%20%20padding%3A%200px%200px%200px%200px%3B%09%0A%20%20%20%20%7D%0A%20%20%20%20%23fo-subscribe%3Eform%20%7B%0A%20%20%20%20%20%20%20%20width%3A%20100%25%3B%20%2F*%20100%25%20if%20using%20in%20a%20sidebar%2C%2050%25%20if%20using%20at%20the%20botom%20of%20a%20post%20*%2F%0A%20%20%20%20%20%20%20%20margin%3A%200%20auto%3B%0A%20%20%20%20%7D%0A%20%20%20%20%23fo-subscribe%3Eform%3E.fo-row%20%7B%0A%20%20%20%20%20%20%20%20text-align%3A%20left%3B%0A%20%20%20%20%20%20%20%20padding%3A8px%200%3B%0A%20%20%20%20%7D%0A%20%20%20%20%23fo-subscribe%3Eform%20input%20%7B%0A%20%20%20%20%20%20%20%20padding%3A%2012px%2015px%2012px%2015px%3B%0A%20%20%20%20%20%20%20%20width%3A100%25%3B%0A%20%20%20%20%20%20%20%20-webkit-box-sizing%3A%20border-box%3B%20%2F*%20Safari%2FChrome%2C%20other%20WebKit%20*%2F%0A%20%20%20%20%20%20%20%20-moz-box-sizing%3A%20border-box%3B%20%20%20%20%2F*%20Firefox%2C%20other%20Gecko%20*%2F%0A%20%20%20%20%20%20%20%20box-sizing%3A%20border-box%3B%20%20%20%20%20%20%20%20%20%2F*%20Opera%2FIE%208%2B%20*%2F%0A%20%20%20%20%20%20%20%20background%3A%20%23F5F5F5%20!important%3B%0A%20%20%20%20%20%20%20%20margin-bottom%3A%200%3B%0A%20%20%20%20%20%20%20%20font-family%3A%20’Raleway’%3B%0A%20%20%20%20%20%20%20%20color%3A%20%23909699%3B%0A%20%20%20%20%20%20%20%20border%3A%20solid%201px%20%23e5e5e5%3B%0A%20%20%20%20%20%20%20%20font-size%3A%2014px%3B%0A%20%20%20%20%20%20%20%20font-style%3A%20normal%3B%0A%20%20%20%20%20%20%20%20font-weight%3A%20400%3B%0A%20%20%20%20%20%20%20%20line-height%3A%2024px%3B%0A%20%20%20%20%20%20%20%20letter-spacing%3A%200px%3B%09%0A%20%20%20%20%7D%0A%20%20%20%20%23fo-subscribe%3Eform%20label.error%20%7B%0A%20%20%20%20%20%20%20%20font-size%3A%2012px%3B%0A%20%20%20%20%20%20%20%20color%3A%20%23FD8579%3B%0A%20%20%20%20%20%20%20%20display%3A%20inline-block%3B%0A%20%20%20%20%7D%0A%20%20%20%20%23fo-subscribe%3Eform%20input.error%20%7B%0A%20%20%20%20%20%20%20%20border%3A%20solid%201px%20%23FD8579%3B%0A%20%20%20%20%7D%0A%20%20%20%20%2F*%20Themes%3A%20%20%0A%20%20%20%20%0A%20%20%20%20%20%20%20%20%20%20%20%20fo-light-background-theme%3A%20use%20this%20if%20your%20site%20has%20a%20grey%20or%20non-white%20background%0A%20%20%20%20%20%20%20%20%20%20%20%20fo-dark-background-thtme%3A%20use%20this%20if%20your%20site%20has%20a%20white%20background%0A%20%20%20%20*%2F%0A%20%20%20%20%23fo-subscribe.fo-light-background-theme%20%7B%0A%20%20%20%20%20%20%20%20background-color%3A%20%23FFFFFF%3B%0A%20%20%20%20%20%20%20%20padding%3A%200px%3B%0A%20%20%20%20%7D%0A%20%20%20%20.fo-light-background-theme%3Eform%3Eh3%20%7B%0A%20%20%20%20%20%20%20%20color%3A%20%23454545%20!important%3B%0A%20%20%20%20%7D%0A%20%20%20%20.fo-light-background-theme%3Eform%3Ep%20%7B%0A%20%20%20%20%20%20%20%20color%3A%20%23868686%20!important%3B%0A%20%20%20%20%7D%0A%20%20%20%20%23fo-subscribe.fo-dark-background-theme%20%7B%0A%20%20%20%20%20%20%20%20background-color%3A%20%23E7E7E7%3B%0A%20%20%20%20%20%20%20%20color%3A%20%23666666%20!important%3B%0A%20%20%20%20%20%20%20%20border%3A%201px%20solid%20%23CCCCCC%3B%0A%20%20%20%20%20%20%20%20padding%3A%2010px%3B%0A%20%20%20%20%20%20%20%20width%3A%2090%25%3B%0A%20%20%20%20%7D%0A%20%20%20%20.fo-dark-background-theme%3Eform%3Eh3%20%7B%0A%20%20%20%20%20%20%20%20color%3A%20%23025d98%20!important%3B%0A%20%20%20%20%7D%0A%20%20%20%20.fo-dark-background-theme%3Eform%3Ep%20%7B%0A%20%20%20%20%20%20%20%20color%3A%20%23666666%20!important%3B%0A%20%20%20%20%7D%0A%20%20%20%20%2F*%20subscribe%20button%20color%20*%2F%0A%20%20%20%20%23fo-subscribe%20input%5Btype%3D%22submit%22%5D.fo-btn-subscribe%20%7B%0A%20%20%20%20%20%20%20%20background%3A%20%232980b9%20!important%3B%20%2F*%20change%20button%20background%20color%20here%20*%2F%0A%20%20%20%20%20%20%20%20color%3A%23FFF%3B%09%09%09%2F*%20change%20button%20text%20color%20here%20*%2F%0A%20%20%20%20%20%20%20%20margin-bottom%3A30px%3B%0A%20%20%20%20%20%20%20%20border%3Anone%3B%0A%20%20%20%20%20%20%20%20font-family%3A%20’Open%20Sans’%2C%20sans-serif%3B%09%0A%20%20%20%20%20%20%20%20cursor%3A%20pointer%3B%0A%20%20%20%20%20%20%20%20width%3A%20100%25%3B%0A%20%20%20%20%20%20%20%20font-style%3A%20normal%3B%0A%20%20%20%20%20%20%20%20font-weight%3A%20800%3B%0A%20%20%20%20%20%20%20%20text-transform%3A%20uppercase%3B%0A%20%20%20%20%20%20%20%20line-height%3A%2022px%3B%0A%20%20%20%20%20%20%20%20letter-spacing%3A%202px%3B%0A%20%20%20%20%20%20%20%20font-size%3A13px%3B%09%0A%20%20%20%20%20%20%20%20display%3A%20inline-block%3B%0A%20%20%20%20%7D%0A%20%20%20%20input%5Btype%3D%22submit%22%5D.fo-btn-subscribe%3Ahover%20%7B%20%20%20%20%0A%20%20%20%20%20%20%20%20opacity%3A%200.8%3B%09%0A%20%20%20%20%7D%0A%3C%2Fstyle%3E%20%20%20%20%20%20%20%0A%3C%2Fhead%3E%0A%3Cbody%20style%3D%22margin%3A0px%20!important%3B%22%3E%0A%0A%0A%20%20%20%20%3C!–%20start%20content%20–%3E%0A%0A%20%20%20%20%3Cdiv%20class%3D%22fo-light-background-theme%22%20id%3D%22fo-subscribe%22%3E%0A%20%20%20%20%20%20%20%0A%20%20%20%20%20%20%20%20%0A%20%20%20%20%20%20%20%20%25%25content%25%25%0A%20%20%20%20%20%20%20%20%0A%20%20%20%20%3C%2Fdiv%3E%0A%0A%20%20%20%20%3C!–%20end%20content%20–%3E%0A%20%20%20%20%0A%20%20%20%20%3C%2Fbody%3E%0A%20%20%20%20%3C%2Fhtml%3E” message=”” highlight=”” provider=”manual”/]

 

In the Form Tab:

  1. Delete everything shown in this box by default
  2. Copy & Paste the following code into the Form box

 

[pastacode lang=”markup” manual=”%20%20%25%25form-opening-general-content%25%25%0A%3Cform%20accept-charset%3D%22UTF-8%22%20method%3D%22post%22%20action%3D%22%25%25form-action-url%25%25%22%20class%3D%22form%22%20id%3D%22pardot-form%22%3E%0A%0A%25%25form-if-thank-you%25%25%0A%09%25%25form-javascript-focus%25%25%0A%09%25%25form-thank-you-content%25%25%0A%09%25%25form-thank-you-code%25%25%0A%25%25form-end-if-thank-you%25%25%0A%0A%25%25form-if-display-form%25%25%0A%0A%09%25%25form-before-form-content%25%25%0A%09%09%0A%09%09%25%25form-start-loop-fields%25%25%0A%09%09%20%3Cdiv%20class%3D%22fo-row%22%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%09%25%25form-if-field-label%25%25%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%09%20%20%20%20%3Clabel%20class%3D%22field-label%22%20for%3D%22%25%25form-field-id%25%25%22%3E%25%25form-field-label%25%25%3C%2Flabel%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%09%25%25form-end-if-field-label%25%25%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%09%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%25%25form-field-input%25%25%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3C!–%3Cinput%20type%3D%22email%22%20name%3D%22email%22%20class%3D%22form-control%22%20required%3D%22%22%20aria-required%3D%22true%22%3E–%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%09%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%09%3Cdiv%20id%3D%22error_for_%25%25form-field-id%25%25%22%20style%3D%22display%3Anone%22%3E%3C%2Fdiv%3E%0A%09%09%09%25%25form-field-if-error%25%25%0A%09%09%09%09%3Clabel%20class%3D%22error%20no-label%22%3E%25%25form-field-error-message%25%25%3C%2Flabel%3E%0A%09%09%09%25%25form-field-end-if-error%25%25%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%09%0A%20%20%20%20%20%20%20%20%20%20%20%20%3C%2Fdiv%3E%20%0A%09%09%0A%09%09%25%25form-end-loop-fields%25%25%0A%09%09%0A%09%09%25%25form-spam-trap-field%25%25%0A%09%09%0A%09%09%3C!–%20forces%20IE5-8%20to%20correctly%20submit%20UTF8%20content%20%20–%3E%0A%09%09%3Cinput%20name%3D%22_utf8%22%20type%3D%22hidden%22%20value%3D%22%26%239731%3B%22%20%2F%3E%0A%09%09%0A%09%09%3Cp%20class%3D%22submit%22%3E%0A%09%09%20%20%20%20%3Cinput%20type%3D%22submit%22%20accesskey%3D%22s%22%20value%3D%22%25%25form-submit-button-text%25%25%22%20%25%25form-submit-disabled%25%25%20class%3D%22fo-btn-subscribe%22%3E%20%0A%09%09%3C%2Fp%3E%0A%09%09%0A%09%25%25form-after-form-content%25%25%0A%09%0A%25%25form-end-if-display-form%25%25%0A%0A%25%25form-javascript-link-target-top%25%25%0A%3C%2Fform%3E” message=”” highlight=”” provider=”manual”/]

Again, make sure the Include default CSS stylesheet (recommended) checkbox is Unchecked

Click the Create layout template button

Task 2 – Create a new Pardot Form

  1. In Pardot, navigate to Marketing > Forms > New Form
  2. Name your form FRM – Basic Blog Sidebar Form
  3. Fill out the remaining fields as seen in my screenshot below:

Create a new pardot blog subscriber form

Click Next

The following page will allow us to configure:

  • What fields we collect from a sign-up (email)
  • Text we show at the top of our form
  • What the visitor sees when they successfully submit
  • Completion Actions that we want to associate

Let’s get started!

  • In the Fields section, remove all fields until Email is the only one left.

pardot-form-fields

  • Click Next
  • In the Look and Feed section:
    • Select the Layout Template we just created LTMP – Basic Blog Sidebar Form
    • Enter the Submit Button Text “SUBSCRIBE”
    • Enter the following text in the Above Form box
    • “DON’T MISS A POST” – from the Format dropdown make this phrase Heading 3
    • “Subscribe to receive an email when we publish new content.” – from the Format dropdown make this phrase Normal
    • Should look like the image below:

pardot-form-lookandfeel

  • Click Next

In the Completion Actions section enter the phrase “Thank You For Subscribing” for the Thank You Content.  This is what will be shown to your visitors after they fill out the form. I have also created a Completion Action which will add everyone who fills out this form onto a Pardot List called LST – Basic Blog Subscribers. I will use this list as the basis for an email newsletter full of blog posts using FeedOtter.

pardot-completion-actions

  • Click Next
  • Review the all settings and click the Confirm & Save button

Alright, we’re ready to add our new form to our blog.

  • From the Form saved successfully page click the dropdown in the upper-right and select View HTML code

pardot-html-code

Copy the <iframe> code block and get ready to add this to your website. Tip: You may want to change the <iframe> height attribute to 300.  That will be more than enough for this form.

Part 2. Embed the blog subscriber form on your company blog

I wrote this form to be as flexible as possible but there is no way to predict how it will look 100%.  Overall, it should look great with no tweaking.

For this example we are using WordPress as our blog’s CMS (content management system) if you use a different CMS you will need to paste your HTML code wherever you modify your blog’s sidebar.  This form is specifically designed for for a sidebar (right or left) where the width is around 300px so that is where we will put it.

For WordPress Users:

Log-in to your WordPress Admin and navigate the side menu to Appearance > Widgets. Everyone’s Widgets area will look slightly different depending on the Theme you are using but you should be able to identify a Widget that corresponds to the sidebar of your blog.  On the FeedOtter blog it is conveniently named “Blog Widgets”.  From the Available Widgets area drag a new Text widget into the sidebar widget area and expand it.  This is where you will paste in the HTML content.

pardot-wordpres-copy

  • Click the Save button

That’s it!  At this point you can head to your blog and see how it turned out.

Troubleshooting

If your form doesn’t show up check to see if your website is using HTTPS.  If it is you will need to make a small change to the <iframe> HTML embed code you got from Pardot to make things work.  Go back into WordPress > Widgets and edit your iframe code, change http:// to https:// as I did in the screenshot below.

wordpress-widget-form-action

Other problems or ideas?  Let me hear your suggestions in the comments below!

 

/by