Over the past couple of weeks I’ve been talking a lot about email lists, specifically more of the behind the scenes decisions you make in having a list in the first place. However, it doesn’t matter what email platform you’re on or what you say in your welcome sequence if you can’t actually get people to subscribe to your list in the first place.
I could talk about opt-in incentives and content upgrades and such, but today I want to take it back to the basics. If someone’s been following you for a while and they’re interested in joining your email list, can they actually find your opt-in form?
Think about it – does your opt-in form stand out on your website? Is it doing the work to attract the attention of your website viewers and encourage them to actually sign up?
Design is my jam (obvs), so today I wanted to give you a few CSS hacks you can take and put to work to not only make your email opt-in form prettier but also stand out more on your website so you can grow your email list a little easier!
First and foremost, the plugin I’ll be showing you how to work with is the Genesis eNews Extended plugin. It’s totally free, and if you’re using a Coded Creative theme then you likely already have this installed on your site. If you don’t, here’s a quick tutorial on how to get it setup.
Secondly, below is a before and after of an opt-in form we’re working with. This is a plain jane form on a website using the Mary Ellen theme and then on the right is the same form with some CSS updates!
How to Style the widget itself
When I’m getting started on styling something like this, I typically start outside and work my way in. I’ll be honest, I have no idea if that’s how developers do things when working on projects for clients, but it’s how my brain works when it comes to things like this. So, that means the first thing I’m thinking about when it comes to updating your CSS is the whole widget.
Changing the background color
One fun thing I like to do with opt-in forms is give them a background color. This works really well to make the form stand out more, especially if it’s in your sidebar and surrounded by mostly whitespace.
To change the background color of your opt-in widget, you would use the following code:
.enews-widget {
background-color: #f7efec !important;
padding: 40px 30px !important;
}While changing the background color, you can see that I also added some padding to the widget itself to give the whole form a little more breathing room and not make it look so squished. Make sure you change out the HEX code for the background color to match your brand.
Just a note: you don’t always have to use “!important” in your CSS, but in this instance, it was necessary on the site I was working on to override some other styles.
Styling the text
Next up, you may want to change the fonts that you’re using. I don’t recommend only changing the fonts for this form, so keep in mind if you use the following code you’re going to want to update the rest of the site to match.
.sidebar .enews-widget .widget-title {
font-family: 'Source Sans Pro';
font-size: 20px;
font-weight: 600;
letter-spacing: 1px;
line-height: 1.5;
}
.enews-widget p {
font-family: 'Source Sans Pro';
font-size: 18px;
font-weight: 300;
}What you’ll see in the code above is that I’m changing both the title and the paragraph text in the widget to be Source Sans Pro. I’m also resizing them a bit, tweaking some of the more design-specific elements (like line height and letter spacing) on the title.
Obviously you’ll want to change the font name to whatever font you want to appear on your site, but I want to point out something that not everyone knows. Simply putting the name of another font in will not necessarily make the font be what’s used on your site. It’s a little more complicated than that. If you’re choosing a Google Font, I have a great tutorial on how to use those on your site here. If you’re using a different custom font, make sure you follow the instructions or get help installing it on your site.
I say this because I’ve visited a handful of sites over the past year with one font that they thought was showing to viewers, when in reality something else was being seen.
How to style the opt-in form
Once you’ve gotten the widget area as a whole looking how you’d like it to, you may want to tweak the actual form itself to make sure it works with the rest of the design you have in mind. This may mean removing a border and changing the font of the placeholder text.
Styling the input areas
To style the areas where someone will add their information, you can use the following code:
.sidebar .enews-widget input[type="text"],
.sidebar .enews-widget input[type="email"] {
border: none;
}
.sidebar input::placeholder {
font-style: normal !important;
font-family: 'Source Sans Pro';
font-size: 16px;
font-weight: 300;
}You likely can understand exactly what I’m doing here in the CSS. However, something I want to point out here is that by including “.sidebar” at the beginning, I’m making sure to only change the CSS for the opt-in form that’s in the sidebar.
This is important because you might be using the same plugin in your footer or in an opt-in form on your homepage, and you may not want to lose the border on those other forms. If you do, you can simply remove that “.sidebar” from this part of the code.
Styling the submit button
If you’re not interested in styling anything else in your opt-in form, you might want to change the submit button to match your branding in terms of fonts and colors. Here’s the code you use for that:
input#subbutton {
background-color: #ed7171;
font-family: 'Source Sans Pro';
font-weight: 600;
letter-spacing: 1px;
font-size: 14px;
}The background color line is less important if you’re using a theme that automatically integrates submit buttons with the colors you can select in the Customizer.
Making your opt-in form stand out is key to grabbing attention and getting people to want to opt-in for your email list.
I hope this quick tutorial post was helpful in learning how to use CSS to make your opt-in form a little prettier.
