Kolakube products

Build websites that delight with Kolakube software.

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.

Email Signup Form Code

Did you know that vomiting code onto the screen creates email forms? 😀

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

Kolakube Email Forms Step OneOnce the plugin is activated, go to the Tools → Email Service Setup Screen to get started.

On this screen, you will select your email service provider and connect to their services. Connecting is as easy as logging into your account and get your authorization code (a small string of text) and paste it into the plugin setting.

Click the “Connect” button and the plugin will connect to your email provider. Watch a quick video demo of this easy process.

Note: This plugin only supports instant connection to AWeber and MailChimp. While more services are being added to the Marketers Delight version, you can choose to use a Custom HTML Form Code and paste your email code in (from, for example, GetResponse or Constant Contact) and still get the power of the Widget and custom forms.

Step 2: Drag a Widget

Kolakube Email Forms WidgetOnce 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

Design your email formAs 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:

Kolakube Email Forms WidgetEdit 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:

Kolakube Email Forms Design

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!

Site built with MD + WordPress

Learn more →

13 comments add your comment

  1. This sounds cool Alex. Great to see products from you outside of the Thesis network now. It would be more awesome if you decide to add/integrate the ability to sign up with the social login.

  2. Hi Alex,
    First Of All I am very jealous from you. Your new designing on kolakube looks so beautiful, I don’t know how you think of this design. I haven’t seen anything like this in my life.

    You are sharing great plugins for free. It’s really awesome. I will use your plugin after modifying the optin-from design for my site.

    Very inspired from you.

  3. Hi Alex,
    this form with a picture looks great, makes optin forms more outstanding. Great tipp.

  4. Wow, I am currently using genesis enews extended plugin but its hard to setup it up with mailchip; your plugin looks the best alternative.

    Does this plugin supports custom css?

    • Hey John,

      From seeing plugins like eNews and how much code was required to set them up, I had to make this plugin great… and the connection process really is a joy to go through. Glad you like it.

      Yes, you can target this plugin with custom CSS in your child theme’s style.css file. You can inspect the email form and grab the needed selector for use in your stylesheet.

Leave a Comment