• Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar
  • Skip to footer
  • View Cart
  • About
  • Get Started
    • Done-For-You Installation
  • Shop
    • WordPress Themes
    • Flourish Bundle
    • Social Media Templates

Coded Creative

WordPress Themes + Design Templates for Creative Business Owners

  • Showcase
  • Blog
  • Support
  • Home
  • About
  • Shop
    • Done-For-You Installation
  • Blog
  • Contact
  • Showcase

TOPIC: design, email list, tutorial

How to Make Your Email Opt-in Form Prettier with Simple CSS

How to Style the Genesis eNews Extended opt-in form with CSS

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 Genesis eNews Extended opt-in form with CSS

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.

Share this post:

You might also like:

  • 7 Steps to Create Standout Pinterest Graphics
  • How to Use Flodesk With Wordpress + My Honest Review

Primary Sidebar



I'm Kory, the color and design loving gal behind Coded Creative. I'm ready and excited to help you create a beautiful and strategic design for your blog and business.

  • Email
  • Facebook
  • Instagram
  • Pinterest
  • Twitter
It’s time to FINALLY create your irresistible lead magnet

Let me help you get noticed, build an audience of potential customers, and grow your business faster with an irresistible lead magnet!

I want the guide!

Categories

  • blog
  • business
  • design
  • email list
  • guest post
  • launch
  • passive income
  • social media
  • tutorial
  • WordPress

Search

Instagram Feed

Did you know that Black Friday is coming up next w Did you know that Black Friday is coming up next week? 😝 Okay, I know - we ALL know that it's coming up. Some businesses are already doing their Black Friday sales, and those who aren't are letting you know that their offers are coming soon.⠀⠀⠀⠀⠀⠀⠀⠀⠀
⠀⠀⠀⠀⠀⠀⠀⠀⠀
Since we're in the middle of this digital product sale season, I thought it would be good to talk about investments you can make right now to help grow your brand in 2021. ⠀⠀⠀⠀⠀⠀⠀⠀⠀
⠀⠀⠀⠀⠀⠀⠀⠀⠀
✨ Stock photos⠀⠀⠀⠀⠀⠀⠀⠀⠀
Beautiful, high-quality images go a looong way in making your brand look professional and getting attention on your content. Two of my favorite stock photo memberships (@hautestockco + @socialsquares) have special offers this week if you need some photos!⠀⠀⠀⠀⠀⠀⠀⠀⠀
⠀⠀⠀⠀⠀⠀⠀⠀⠀
✨ A new website design⠀⠀⠀⠀⠀⠀⠀⠀⠀
If you haven't changed your site design in a while or you're ready for a more professional look, this is a great time to grab a new premade theme! (Pssst.. my themes will be on sale next week)⠀⠀⠀⠀⠀⠀⠀⠀⠀
⠀⠀⠀⠀⠀⠀⠀⠀⠀
✨ Social templates⠀⠀⠀⠀⠀⠀⠀⠀⠀
The BEST way to grow your business is by showing up and getting your content in front of people. Instead of starting from scratch, grab some social graphic templates to make graphics a breeze. (My templates will be on sale next week, too!)⠀⠀⠀⠀⠀⠀⠀⠀⠀
⠀⠀⠀⠀⠀⠀⠀⠀⠀
✨ Topic-specific courses / trainings⠀⠀⠀⠀⠀⠀⠀⠀⠀
If you're struggling with outsourcing, copywriting, or something else now is a great time to invest in a course on that topic since most course creators discount their products for Black Friday.⠀⠀⠀⠀⠀⠀⠀⠀⠀
⠀⠀⠀⠀⠀⠀⠀⠀⠀
What offers are you looking for this Black Friday?⠀⠀⠀⠀⠀⠀⠀⠀⠀
⠀⠀⠀⠀⠀⠀⠀⠀⠀
#shesacreative #workfromhome #goaldigger #shediditherway #womenwithambition #empoweringwomen #entrepreneurwoman #creativeentrepreneurs #creativeentrepeneur #creativewomen #creativepreneur #mycreativebiz #entrepreneurlifestyle #communityovercompetition #femaleentrepreneurassociation #staybossyladies #herbusiness #sayyestosuccess #thisgirlmeansbusiness #womenwithaplan #femaleceo
Today, on my oldest daughter’s 3rd birthday the Today, on my oldest daughter’s 3rd birthday the first woman officially became the first Vice President Elect of our country. For the first time in 4 years I feel hope for my daughters’ future.

There is still so much work to be done. So. Much. I hope that we, as a nation, will continue to do that work.

To protect Black lives.
To listen to Black women.
To care for our neighbors (and keep wearing a damn mask).
To protect our planet.
To move our nation forward.

I pray, and fight, and speak up, and donate to make sure my girls get to grow up and live in a country that makes them proud to call home and a country they feel safe in. Because that’s what our kids and our neighbors deserve.

So let’s celebrate today. But keep the fight going tomorrow.

📷 by @zoeghertner
Now, more than ever, I’m grateful for my right t Now, more than ever, I’m grateful for my right to vote, and you can bet your 🍑 I voted for #bidenharris2020!

I’m going to be quiet on the feed for the rest of the week to make space for rest and self-care. Next week I’ll be back here to share my normal content.

Until then, go vote!

graphic by @madebyeli 

#rockthevote #votesaveamerica
Stop 🛑 waiting until the perfect moment to show Stop 🛑 waiting until the perfect moment to show up and start working toward your goals.⠀⠀⠀⠀⠀⠀⠀⠀⠀
⠀⠀⠀⠀⠀⠀⠀⠀⠀
As a perfectionist and a painfully indecisive person, I've spent so much time waiting. Waiting for the perfect idea, for the perfect time to post, for the perfect design, for the perfect collaboration, for the perfect offer, for the perfect audience.⠀⠀⠀⠀⠀⠀⠀⠀⠀
⠀⠀⠀⠀⠀⠀⠀⠀⠀
Does that sound like you?⠀⠀⠀⠀⠀⠀⠀⠀⠀
⠀⠀⠀⠀⠀⠀⠀⠀⠀
Are you stuck in a holding pattern, waiting for everything to be just ✨ right ✨ or perfect before you take action?⠀⠀⠀⠀⠀⠀⠀⠀⠀
⠀⠀⠀⠀⠀⠀⠀⠀⠀
Be honest... how's that working out for you?⠀⠀⠀⠀⠀⠀⠀⠀⠀
⠀⠀⠀⠀⠀⠀⠀⠀⠀
Let me give you some tough love, friend. If you want to grow your business, get those dreamy clients, make consistent sales, and hit your goals... you can't sit around waiting for perfect. 🙅🏻‍♀️⠀⠀⠀⠀⠀⠀⠀⠀⠀
⠀⠀⠀⠀⠀⠀⠀⠀⠀
Listen, I've been there. But if you want your business or your blog to look like hers then you have to do SOMETHING. You have to start right now... show up today for your audience. And then again tomorrow. And then the next day. Share your new piece of content, show off your latest offer.⠀⠀⠀⠀⠀⠀⠀⠀⠀
⠀⠀⠀⠀⠀⠀⠀⠀⠀
👉🏽 Stop hiding and waiting for perfect before believing in yourself enough to make things happen for you. 👈🏽⠀⠀⠀⠀⠀⠀⠀⠀⠀
⠀⠀⠀⠀⠀⠀⠀⠀⠀
You're worthy of everything you dream of and so much more, so let's start doing what it takes to get there!⠀⠀⠀⠀⠀⠀⠀⠀⠀
⠀⠀⠀⠀⠀⠀⠀⠀⠀
#wearethecreativeeconomy #createyourpurpose #creativecultivate #fempreneur #womenwithaplan #businessownerlife #herestothecreatives #sayyestosuccess #hustleandheart #findyourflock #thegramgang #hersuccess #dreamersanddoers #createalifeyoulove #calledtocreate #creativeentrepeneur #creativebiz #creativepreneurs #createlounge #thecreativegrid #savvybusinesswomen #intentionalbusiness
THE SECRET TO GROWING YOUR BRAND IS…. 🤫 ⠀⠀⠀⠀⠀⠀⠀⠀⠀
⠀⠀⠀⠀⠀⠀⠀⠀⠀
👉🏽 PAUSE! Save this post for later so you can come back to it!⠀⠀⠀⠀⠀⠀⠀⠀⠀
⠀⠀⠀⠀⠀⠀⠀⠀⠀
If you want to keep growing your brand, the secret is that you have to keep showing up for your people. How? Well…⠀⠀⠀⠀⠀⠀⠀⠀⠀
⠀⠀⠀⠀⠀⠀⠀⠀⠀
✨ Show up as the expert you are⠀⠀⠀⠀⠀⠀⠀⠀⠀
Make sure you’re mixing in content related to your products and services with the personal content in stories + on your feed.⠀⠀⠀⠀⠀⠀⠀⠀⠀
⠀⠀⠀⠀⠀⠀⠀⠀⠀
✨ Create more Pinterest graphics⠀⠀⠀⠀⠀⠀⠀⠀⠀
The queen of Pinterest @meaganawilliamson has shared the fresh pins are proven to work the best on the platform, so create new graphics for your posts and get them on Pinterest!⠀⠀⠀⠀⠀⠀⠀⠀⠀
⠀⠀⠀⠀⠀⠀⠀⠀⠀
✨ Grab attention on Instagram⠀⠀⠀⠀⠀⠀⠀⠀⠀
The algorithm rewards you when your people engage with your content (saves are the best right now) and stay on the app. Grab attention, and get your audience engaged. ⠀⠀⠀⠀⠀⠀⠀⠀⠀
⠀⠀⠀⠀⠀⠀⠀⠀⠀
✨ Highlight your freebies⠀⠀⠀⠀⠀⠀⠀⠀⠀
Want to know why your lead magnet isn’t working for you? Because you’re not promoting it. Make it a habit to share your freebie at least 4x per month on Instagram, and create pins for the landing page.⠀⠀⠀⠀⠀⠀⠀⠀⠀
⠀⠀⠀⠀⠀⠀⠀⠀⠀
✨ Improve your SEO⠀⠀⠀⠀⠀⠀⠀⠀⠀
Search Engine Optimization is a long game, but it can pay off for years if you take the time to work on improving it for your content now. Check out @mariahmagazinestudio for all the SEO tips.⠀⠀⠀⠀⠀⠀⠀⠀⠀
⠀⠀⠀⠀⠀⠀⠀⠀⠀
✨ Launch your offers⠀⠀⠀⠀⠀⠀⠀⠀⠀
I won’t lie - this year has felt totally weird when it comes to launches. I’ve launched 2 products this year, and they went better than I could have imagined. So it’s time to launch 👏🏼 the 👏🏼 dang 👏🏼 thing.⠀⠀⠀⠀⠀⠀⠀⠀⠀
⠀⠀⠀⠀⠀⠀⠀⠀⠀
What do you need to work on now to grow your brand? Share in the comments! ⬇️⠀⠀⠀⠀⠀⠀⠀⠀⠀
⠀⠀⠀⠀⠀⠀⠀⠀⠀
#wearethecreativeeconomy #createyourpurpose #creativecultivate #fempreneur #herestothecreatives #sayyestosuccess #hustleandheart #findyourflock #therisingtidesociety #bloomyellow #intentionalbusiness #creativeatheart
When I set out to create the June theme, I started When I set out to create the June theme, I started thinking about what bloggers, specifically want to accomplish with their site and what they'd need to accomplish that.
⠀⠀⠀⠀⠀⠀⠀⠀⠀
I know most bloggers are trying to earn an income through sponsored posts and ads, and to do that you need a certain audience size and page views.
⠀⠀⠀⠀⠀⠀⠀⠀⠀
Let's talk about page views specifically. One way to increase views is to work on keeping your audience on your site longer by making relevant content easy to find.
⠀⠀⠀⠀⠀⠀⠀⠀⠀
You can make relevant content easy to find by:
⠀⠀⠀⠀⠀⠀⠀⠀⠀
1️⃣ Showing related posts at the bottom of your individual blog posts. Most of my themes automatically have this feature built in, but I also like the Related Posts for WP plugin for this!
⠀⠀⠀⠀⠀⠀⠀⠀⠀
2️⃣ Linking to related content within your blog posts. If you're working on seasonal content right now, think about how you can link back to some of your Fall or Winter posts from last year in your new blog posts.
⠀⠀⠀⠀⠀⠀⠀⠀⠀
3️⃣ Add a link to your categories to your menu or your sidebar. This will make it super easy for your readers to click through to a category they want to see more about - like chicken dinners or cool weather outfits.
⠀⠀⠀⠀⠀⠀⠀⠀⠀
4️⃣ Swap out your featured content. Another thing you can do is show off your seasonal content in featured areas on your site. If you're a craft blogger, maybe over the next month and a half you link to Halloween-themed crafts with kids.
⠀⠀⠀⠀⠀⠀⠀⠀⠀
Which one of these things do you want to improve or implement on your site? Tell me in the comments ⬇️
⠀⠀⠀⠀⠀⠀⠀⠀⠀
#bloggersgonnablog #bloggervibes #bloggersgetsocial  #bloggerstribe #bloggerdiaries #theblogissue #blogginggals #blogandbeyond #thecaptionclub #shinyhappybloggers  #theuncoolclub #creativegalgang #microblogger #bloggergram #personalbranding #gritandvirtue #createcultivate #colorjoystock
GIVEAWAY CLOSED: The winner is @ramblingrose.farmh GIVEAWAY CLOSED: The winner is @ramblingrose.farmhouse! It’s here, it’s here! No, I’m not just talking about October or Fall (two of my favorite things). Today I’m celebrating the launch of a brand new theme: June 🎉🎉⠀⠀⠀⠀⠀⠀⠀⠀⠀
⠀⠀⠀⠀⠀⠀⠀⠀⠀
Even better? Because this is the first new theme to hit the shop in over a year, I’m giving away a FREE copy of this design bundle (the theme, Pinterest, and Instagram templates).⠀⠀⠀⠀⠀⠀⠀⠀⠀
⠀⠀⠀⠀⠀⠀⠀⠀⠀
To enter, first make sure you’re following me @codedcreative, then…⠀⠀⠀⠀⠀⠀⠀⠀⠀
⠀⠀⠀⠀⠀⠀⠀⠀⠀
1. Like this post, comment, and tag a friend that you think would love the June theme. Each comment and tag is an additional entry.⠀⠀⠀⠀⠀⠀⠀⠀⠀
⠀⠀⠀⠀⠀⠀⠀⠀⠀
2. Share this post on your stories and tag me! This is worth TEN extra entries!⠀⠀⠀⠀⠀⠀⠀⠀⠀
⠀⠀⠀⠀⠀⠀⠀⠀⠀
The giveaway closes on Sunday night at midnight EST.⠀⠀⠀⠀⠀⠀⠀⠀⠀
⠀⠀⠀⠀⠀⠀⠀⠀⠀
If you’re itching to get the theme right now, head to the link in my profile (or go to codedcreative.co/june) to learn more, check out the demo, and purchase June for your site today!⠀⠀⠀⠀⠀⠀⠀⠀⠀
⠀⠀⠀⠀⠀⠀⠀⠀⠀
#theeverygirl #theeverydaygirl #bloomyellow #creativityfound #pursuepretty #smallbiz #mycreativebiz #fromwhereiwork #creativelifehappylife #handsandhustle #creativeentrepeneur #womeninbusiness #communityovercompetition #risingtidesociety #savvybusinessowner #thatsdarling #flashesofdelight #goaldigger #shediditherway #womenwithambition #empoweringwomen #entrepreneurwoman #creativeentrepreneurs #creativeentrepeneur #creativewomen #creativepreneur #mycreativebiz
So you want to take your blog from hobby to money So you want to take your blog from hobby to money maker.... raise your hand if that's you right now... 🙋🏽‍♀️⠀⠀⠀⠀⠀⠀⠀⠀⠀
⠀⠀⠀⠀⠀⠀⠀⠀⠀
At some point every blogger faces the decision to keep blogging for fun or to turn your blog into a money making brand (not that doing that isn't fun though).⠀⠀⠀⠀⠀⠀⠀⠀⠀
⠀⠀⠀⠀⠀⠀⠀⠀⠀
Making that transition from hobby to brand can be a bit confusing. Here are a few quick ways you can start working on that transition:⠀⠀⠀⠀⠀⠀⠀⠀⠀
⠀⠀⠀⠀⠀⠀⠀⠀⠀
1️⃣ Decide how you want to monetize. There are so many ways you can do it - from ads to digital products and more. Think about what makes you excited and what you feel comfortable doing.⠀⠀⠀⠀⠀⠀⠀⠀⠀
⠀⠀⠀⠀⠀⠀⠀⠀⠀
2️⃣ Create a content strategy. What do you want to be known for? Don't forget to include your audience - what do they want to see more of? If you don't know, ask them!⠀⠀⠀⠀⠀⠀⠀⠀⠀
⠀⠀⠀⠀⠀⠀⠀⠀⠀
3️⃣ Consider your brand + blog design. If you've been using a free design, it's time to consider working with a designer or getting a premade look for your site!⠀⠀⠀⠀⠀⠀⠀⠀⠀
⠀⠀⠀⠀⠀⠀⠀⠀⠀
Taking your blog more serious and turning it into a money making brand can be overwhelming, but start slow and with intention and you'll be more successful along the way.⠀⠀⠀⠀⠀⠀⠀⠀⠀
⠀⠀⠀⠀⠀⠀⠀⠀⠀
#alifeofintention #authenticliving #wholeheartedliving #pursuewhatislovely #createyourhappy #theeverygirl #theeverydaygirl #bloomyellow #seizetheday #darlingwomen #bloggingforbusiness #9tothrive #seizetheday #darlingwomen #sayyesstosuccess #makeithappen #dowhatyoulove #gritandvirtue #womenwithambition #createcultivate #makersmovement #handsandhustle #calledtobecreative #creativepreneur
This error message is only visible to WordPress admins

Error: API requests are being delayed for this account. New posts will not be retrieved.

Log in as an administrator and view the Instagram Feed settings page for more details.

Footer

It’s time to finally create your lead magnet.

Let me help you get noticed, build an audience of potential customers, and grow your business faster with an irresistible lead magnet! Click the button below to grab this free guide plus get weekly emails to help you grow your business + hit your goals this year!

I want the guide!
  • Affiliates
  • Changelog
  • Support
  • Resources
  • FAQ
  • Contact
© 2016 - 2020 | Coded Creative | Terms + Privacy Policy





This website uses cookies to ensure you get the best experience on our website. Learn More.