How to Display Email Signup Forms with WordPress in 2 Easy Steps

Quick note, this plugin is also included and updated with bonus features in my WordPress theme + plugin package, Marketers Delight. Check it out for even better email form control.

Building an email list is one of the most rewarding and challenging things of building a business. I’ve had a few lists of my own over the years and know both of those sides very well.

The rewarding side is that you can easily keep in touch with people who follow you and build a reach. Having an email list is a colossal asset to anybody trying to promote themselves and their work.

But with great rewards come great challenges. You know building an email list takes time and dedication — especially to build a quality one. You know that strategically designing and placing a form can make or break conversion rates.

You know these things, but before you can even get there, you have to add the actual email forms to your website first. And that’s usually a pretty confusing, problematic step.

This is the problem I wanted to address with my new plugin.

For years I’ve been helping people who have bought any of my WordPress themes add their email signup form codes to their website. And it never surprised me why so many needed help: working with those huge codes is just frustrating.

I knew it firsthand and built a bunch of little shortcuts for my own use to make it easier. But everything I built was a little more technical than I’d have liked it to been if I were to give it to people who used my work.

After years of stringing myself along, I finally tackled this headfirst and built a drop dead easy solution that makes adding email forms to WordPress a lot easier with much less code.

In fact, you can do it in 2 easy steps. Let me show you how my new free WordPress plugin, Kolakube Email Forms works:

How to Add Email Signup Forms to WordPress in 2 Easy Steps

Since this is a plugin, you have to install and activate it to your website. If you don’t know how to install a plugin, read these instructions to do so.

Step 1: Connect to an Email Service

Step 2: Drag a Widget

Once you’re connected, you can head over to the Widgets panel and add the new Kolakube Email Signup Form Widget to your sidebar and other Widget areas.

After dragging it into place, you can start editing your email form. First, add a title and some description text. Try to be concise and write something original. →

Then—and this is the cool part—choose which of your email lists you want people to subscribe to when they fill out your form fields. →

The plugin pulls this information from your account when you connected and gives us everything we need to output an email signup form on your website.

Once you choose your list, you’ll then be shown a few other options to make customizing your list a little more strategic.

You can also ask for their name alongside their email address, as well as change the label text for your Name, Email, and Submit button fields.

And if you’re connected to AWeber, you can set your own “Thank You” and “Already Subscribed” pages right from the Widget.

Customizing Your Email Form

Now that you have a working email form on your website, it’s time to make its design look good. Here’s potentially where writing some custom CSS comes in.

This plugin does its best job to inherit styles from your active theme to display an appealing email form right out of the box. It doesn’t offer any design options, but if your theme styles input forms you shouldn’t have too much work left to do.

Bonus: Use this simple design to make your email form more eye-catching

As an added bonus, and in an effort to show you how easy it is to customize these forms, I’ve come up with a simple form design you can use to make your new email form stand out.

Once you have the email widget in place, you can start customizing it.

To use the fully-responsive form design you see to the right, paste the CSS below into your theme’s stylesheet:

/*------------------------------*\
     $KOLAKUBE EMAIL FORMS
\*------------------------------*/

/* WIDGET */

.widget.widget_kol_email {
	border: 5px solid #222;
	padding: 0;
	text-align: center;
}

.widget.widget_kol_email,
.widget.widget_kol_email .widget-title {
	color: #fff;
}


/* FORM */

.widget_kol_email .kol-email-intro {
	background-color: #333;
	margin-bottom: 0;
	padding: 25px;
}

.widget_kol_email .kol-email-form {
	background-color: #222;
	padding: 25px;
}


/* INPUT FIELDS */

.widget_kol_email .form-input {
	background-color: #fff;
	margin-bottom: 15px;
}

.widget_kol_email .form-submit {
	background-color: #22a340;
	border: 3px solid rgba(0, 0, 0, 0.1);
	border-radius: 2px;
	border-width: 0 0 3px;
	color: #fff;
	cursor: pointer;
	display: inline-block;
	font-weight: 500;
	padding: 15px 25px;
	text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.3);
}

.widget_kol_email .form-submit:hover {
	background-color: #209c41;
}

.widget_kol_email .form-input,
.widget_kol_email .form-submit {
	padding: 15px 25px;
	width: 100%;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;	
}


/* FORM ATTACHED */

@media all and (min-width: 700px) {

	.widget_kol_email [class*="form-attached"]:after {
		clear: both;
		content: " ";
		display: table;
	}

	.widget_kol_email [class*="form-attached"] .form-input {
		border-radius: 2px 0 0 2px;
		float: left;
		height: 50px;
		margin-bottom: 0;
		width: 78%;
	}

	.widget_kol_email [class*="form-attached"] .form-submit {
		border-radius: 0 2px 2px 0;
		float: left;
		font-size: 14px;
		height: 50px;
		padding: 0;
		width: 22%;
	}


	/* 2 FIELDS */

	.widget_kol_email .form-attached-2 .form-input {
		width: 39%;
	}

	.widget_kol_email .form-attached-2 .form-input + .form-input {
		border-left: 1px solid rgba(0, 0, 0, 0.1);
		border-radius: 0;
	}

}

Want to see a neat little trick? The screenshot you see above to the right is ideal for smaller spaces, such as a blog sidebar for example.

If you want to place this form in a wider area, such as after a post, and want the input fields to show up on one line, follow this one easy step:

Edit the Email Form Widget and look for the HTML Classes text input at the very end of the Widget settings.

If your form asks for both name and email, enter the following class name:

form-attached-2

…if only email, this class name instead:

form-attached

This simple change will now make your form look like:

Just like the plugin, this form design does its best to work with your current theme. The design you see here may not be exactly what appears on your site so you may need to tweak the provided CSS to make it just right.

This design also works as a great starting point for your own custom design. I’ve included some media queries to make it responsive as well, which should speed up your development time as well.

How Are You Using This?

I’d love to see how you’re using this plugin on your site! If you came up with a cool design, please feel free to share off your site in the comments below. If you really love the plugin, please be sure to give it a 5 star rating!