How to Create an Optin Feature Box Step-by-Step (with Examples)

Do you want to add a feature box to your site? A feature box is a highly effective optin form that smart marketers use to collect email subscriptions above the fold on their site. In this post, we will share how to create an optin feature box for your site, step-by-step, with examples.

What Is a Feature Box?

A feature box is an optin form that is placed at the top of your website, usually just below the header navigation and above your blog posts.

chrislema-featurebox
via Chris Lema

The reason feature boxes are so effective is because they are above the fold: that is, the optin form is immediately in clear view without having to scroll down the page.

When you combine this prominent placement with a compelling call-to-action and good design (using contrasting colors so that it really stands out from the rest of the page), you can increase your optins by 51.7% or even more.

11 More Feature Box Examples…

There are so many different ways to design and use your feature box.

For example, if you have a special lead magnet to offer, like an eBook or a download, you can display an image of what subscribers will get along with a brief description.

Or, if you are a personal brand, you can kill two birds with one stone and use this opportunity to show your face. A full-bleed photo of you in the background, or just above your feature box, is a great way to make your optin more appealing and build your personal brand at the same time.

You could also use your feature box with a two-step optin (so users have to click on a button before the optin form is displayed). This can save valuable real estate, and it may even convert better too.

To help inspire you and get those creative juices flowing, here are some examples of awesome feature boxes around the web.

1. SmartBlogger

smartblogger feature box

SmartBlogger’s feature box has all the necessary ingredients, without overcomplicating it. It’s got a headline, a description of the offer (a cheat sheet), an image of what you’ll get, and a simple optin form.

2. Michael Hyatt

Michael Hyatt feature box

Michael Hyatt’s feature box has the best of both worlds: there’s a full-bleed photo of Michael, plus you can also see an image of his free eBook next to the optin form.

3. Neil Patel

neil patel feature box

Neil Patel’s feature box lets the words do all the talking, with large fonts and plenty of whitespace.

4. Jeff Walker

jeff walker feature box

Jeff Walker’s feature box is a bit unorthodox: it has one or two calls-to-action, depending on whether you are on the homepage or the “Programs” page. The homepage feature box allows you to click through to read more about his programs, but once there, it goes back to just one call-to-action: to optin to his email list.

5. Kissmetrics

kissmetrics feature box

Kissmetrics uses their feature box to promote the free 14-day trial of their software (which, of course, requires that you sign up for an account with your email address).

6. Mirasee

mirasee feature box

The great thing about Mirasee’s feature box is the video: it adds a real personal touch and interactivity that you don’t ordinarily see in a feature box.

7. Backlinko

backlinko feature box

Backlinko’s feature box is strikingly simple and to-the-point: you see Brian, a simple headline, a brief call-to-action and the form itself.

8. RazorSocial

razor social feature box

RazorSocial uses a two-step optin form in their feature box: click the button, and then you’ll see a lightbox popup with the form.

9. Bonnie Fahy

bonnie fahy feature box

Bonnie Fahy’s feature box is filled with personality: the sly look on Bonnie’s face says it all! Plus, her eyes are directed at the optin form, which helps to increase conversions.

10. Social Media Examiner

social media examiner feature box

Social Media Examiner’s feature box proves you don’t have to be a personal brand to show personality. What’s so great about this design is that the feature box looks like an old treasure map, in keeping with their “explorer” theme.

11. Social Triggers

social triggers feature box

Social Triggers’ feature box makes a bold statement with a dressed-up shot of Derek and ultra-casual copy that is almost pushy (in a humorous way).

4 Steps to Create an Optin Feature Box

So, how do you actually create one of these for your site? To add an optin feature box to your site, you’ll need to follow these simple steps:

  • Step 1. Create an inline optin form
  • Step 2. Insert the sitewide and campaign-specific embed codes (can skip if using WordPress)
  • Step 3. Insert the shortcode (for WordPress users)
  • Step 4. Customize with post- or page-specific lead magnets (optional)

By the end of these steps, you will have a feature box that looks like this:

myfeaturebox

Ready to get started? Let’s dive into the nitty gritty!

Step 1: Create an inline optin form

There are a number of different ways to create an inline optin form (i.e. an optin box that gets embedded somewhere within the content of your site). You could even code one of these from scratch, if you know HTML and CSS. However, the easiest way is to use OptinMonster.

Once you have an OptinMonster license, you can log in to your account and select the Create New Optin button.

create-new-optin

Next, enter a name for your feature box under Optin Campaign Title (for internal use only) and add the website that this is going to be used for (your domain name). Then select the After Post/In-Line optin type and choose from one of the starter templates. For the purpose of this tutorial, we are going to choose the Metro template.

inline template

From there, you will be taken to a page where you can edit the design of your inline optin form.

edit optin design

This particular template uses curved corners, but since we are going to use this box at full-width, we’ll want to remove those curves. To do that, click on the Optin tab on the left-hand side and enter the following code into the Custom CSS box:


.boone-body {
    border-radius: 0px !important;
}

You can also go to the Display Rules tab to choose where and when you’d like this optin box to appear. For now, we’ll set it to be displayed on any page.

show on any page

Once everything looks the way you want, hit the Save button and then press Campaign » Resume Campaign.

Now your feature box is ready to be installed on your site!

Step 2: Insert the sitewide and campaign-specific embed codes (can skip if using WordPress)

This next step works for any type of site. However, if you have a WordPress site, you may choose to use a simple shortcode instead. If so, feel free to skip this step and move on to Step 3.

From the optin edit screen, click on the Embed button at the top. Then click on the Sitewide Embed Code option.

The bigger code goes just before your closing body tag on your site (this is the sitewide embed code– you’ll never have to insert this code again when you create new optin forms).

The smaller code is the code for your inline optin form that you just created: this code goes just below your header navigation. Your code might vary depending on the theme that you use, however, it is usually going to be just after the closing header tag.

embed codes

Copy and paste these two codes, and your feature box will now be installed on your website!

Step 3: Insert the shortcode (for WordPress users)

If you are using WordPress, installing the feature box is even easier. All you have to do is install the OptinMonster WordPress plugin.

Once installed, you’ll see a new tab in your WordPress backend for OptinMonster. Click on that tab, and press the Refresh Optins button to view your list of optins that you’ve created.

Hover your mouse over the inline optin form that you created and select the Edit Output Settings option.

You will now see a list of settings to choose from. Make sure the “Enable optin on site?” option is checked (otherwise it will not load anywhere on your site). Then, choose your desired settings and click the Save Settings button.

enable optin on site

Next, hit the Back to Overview button to return to your list of optin forms. Your inline form should now say “Live” next to it, with a gray code beneath it. This code is your “slug”. Copy this code.

optin_slug

Finally, go to the part of your theme where you want to add the feature box (in our case, right after the navigation bar). Then paste the following shortcode where you want the feature box to appear (replace “OPTIN_SLUG” with your unique slug):

[optin-monster-shortcode id="OPTIN_SLUG"]

Now your feature box will appear on your site like this:

myfeaturebox

Step 4: Customize with post- or page-specific lead magnets (optional)

This last step is optional, but if you want to really maximize the effectiveness of your feature boxes, then we highly recommend it.

To take your feature box one step further, go ahead and create unique lead magnets for specific posts or pages.

For example, you could offer post-specific content upgrades in your feature box, and display them on a per-post basis.

Let’s say we want our feature box to display different content upgrades for different blog posts. To accomplish this, go to the edit screen for your optin form and click on Display Rules.

From there, you can select Visitors browsing specific pages. Select exactly matches from the dropdown menu, and insert the URL for one of your blog posts.

post specific display rules

Hit the Save button. Now your feature box will only be displayed on that specific blog post.

Next, hit Exit to return to your OptinMonster dashboard with the list of all your optins. Make a copy of your inline optin form by clicking on Edit » Duplicate.

duplicate_optin

Now you can simply insert the details for another content upgrade, and set your Display Rules to show this feature box on a different blog post.

That’s it! We hope this post has helped you to learn how to create an optin feature box for your site. If you enjoyed this post, you may also want to check out 14 High Converting Places to Add Email Signup Forms to Build Your List.

Which was your favorite feature box example? Do you have another great example to share? Let us know in the comments!

Mary Fernandez
Mary Fernandez is a professional blogger. When she’s not at her desk, you can usually find Mary exploring sunny San Diego, CA with her laptop, husband, and three kids in tow.

Comments

  1. how to add [optin-monster-shortcode id="OPTIN_SLUG"] on our blog? i got everything, but I can figure how you explained this step in one line. Please can you elaborate?

    1. Hi Akshay! Sure thing. First, OPTIN_SLUG needs to be replaced with the unique slug, or ID, for your optin. You can find this in the WordPress Admin menu under OptinMonster » Optins:

      optin slug

      Then, you can copy and paste the shortcode [optin-monster-shortcode id="OPTIN_SLUG"] into any post or page on your WordPress site.

      Here are more details on the OptinMonster WordPress shortcode option for inline optins. Feel free to get in touch with support if you have any other questions or need help with your shortcode! Thanks for reading the blog 🙂

Add a Comment

We're glad you have chosen to leave a comment. Please keep in mind that all comments are moderated according to our privacy policy, and all links are nofollow. Do NOT use keywords in the name field. Let's have a personal and meaningful conversation.