November 2015 » Free Web Part for Kentico - Better Subscription Form
Nov 02

Free Web Part for Kentico - Better Subscription Form

Introduction

Most people agree that the Kentico email marketing capabilities are pretty good. However, one web part we frequently have to "tweak" to get to match a custom design is the tried and true Newsletter Subscription web part. Couple that scenario with the fact that some of our clients ask us to do something a bit special when it comes to asking for a subscription conversion, and you have that making for an interesting set of requirements. This was the motivation that got me thinking it was time to create a new web part that my team and other developers could use to solve this situation. As a result, today I would like to introduce a new free web part for Kentico.

 

Prepping the Basics

Kentico Subscriber Overlay web partTo use this web part I am assuming that you already have your Kentico site setup with at least one Email Campaign (or Newsletter for you Kentico 8.1 and earlier users) configured correctly. I am also assuming that you are most likely using the Double Opt-In feature of Kentico EMS to prevent spammers, but it is not 100% required for this to all work. All though it is highly recommended.

One more thing this web part does assume is that you might not have jQuery loaded on the page. The code will make a reference to jQuery 1.11.3 via a CDN URL. If you are already using jQuery you can simply comment out the line of code that references it. (If this causes problems I can make this a setting too).

 

How It Works

The web part is based off of the execellent jQuery Popup Overlay plugin. It is the real front end magic for this solution. I took a modified version of the plugin (source included in the download) and wrapped that around the custom subscription web part that us built in to Kentico. 

From there I added a few more properties to trigger the overlay to appear when the visitor has scrolled down a percentage of the page, plus wired up some configuration options to web part properties, and lastly added in a new Introduction text propery to allow you to add an offer text to the overlay.

Another "special" change that I made to the web part is for authenticated users. The standard out of the box funcitonality is to hide the email address input control on the form. This leaves just the simple subscribe button looking pretty lonely in this case. I have modified the code to always show that input and default it to the authenticated user's email address. I just happened to like this behavior much more, and think it is not as confusing to some users.

There is one more modification that I should mention. If you are heading to Kentico Connection 2015 Orlando next week, you can hear me talk about not being annoying to your users. For that reason I have also added a small link at the bottom of the overlay to remember via cookie not to ask again for a long period of time if a visitor is not interested in subscribing and does not want to marketed to. Yes Shameless plug: Come check out my session on Growth Hacking on Day 2.

 

Instructions

Please follow this simple set of instructions to get the solution up and running on your Kentico site.

  1. Download and install the web part via the Import/Export wizard of the Sites application.
  2. Add the web part to the Design tab of the Page Template that you wish to use.
  3. Configure the custom properties as needed in the Better Subscription Form web part propery category.
  4. Choose an Alternate Form via the Alternate Form selector. I recommend cloning the built in Newsletter.Subscriber.SubscriptionForm to a new alternate form on the Newsletter Subscriber object.
    1. You can do this in the Modules -> Newsletters / Email Campaign module.
    2. I recommend this because you can easily hide the first and last name fields on the form plus make email a required field here.
  5. Choose which Newsletter / Email Campaign to add the subscribers to.

 

Kentico Better Subscription Form Properties

 

Better Subscription Form Properties 2

 

 

Better Subscription Form Alternate Form

 

 

The Result 

The finished product can be seen on any blog post page on my blog here at Mcbeev.com, just scroll down about 60% of the page viewport to see it appear. The overlay should appear and allow you to enter your email address to become a subscriber to my newsletter.

 

Better Subscription Form Result

 

 

Download Kentico Web Part

You can download the Better Subscription Form Web Part for Kentico right here, and in the Kentico marketplace.

 

You might also be interested in

[X]

Be the first to know about my latest Kentico Tips & Tricks!

Do not show again