Preparing to launch a new blog or business is super exciting. There are so many things to consider and the possibility for what the future holds is enough to bring anyone jumping out of bed in the morning with excitement to get started.
But that preparation can also be overwhelming. You’ve got to worry about your:
- Domain
- Hosting account
- Website design or theme
- Blog posts to launch with
- Social media accounts
- Email list
- And a whole lot more…
Well luckily, there’s one thing that’s easy to set up that will check one thing off your to-do list. And an added bonus is that it can start benefiting you right away, before you’ve even launched!
That is setting up a Coming Soon page to collect email addresses before you launch! I’m sure if you’ve done research on getting your new blog off to a good start, that you’ve read about the importance of email lists. Your list gives you direct access to the people who most enjoy what you do. It’s a place to build community. And it’s a place to build your following into something more.
We started building our list before our the of Coded Creative and had over 100 people to email directly on launch day! As you’d imagine, we got a much warmer welcome than we would have if we’d had a list of 0.
So today we’re going to help you set up a Coming Soon page to collect email addresses, similar to the one we had when we launched. Our final product will look like the image below, but don’t worry, you’ll be able to customize it to fit your brand.
If you need some instruction on how to get all setup on WordPress before diving into creating your Coming Soon page, we have some simple instructions for you here.
Plugin Setup
Your simple Coming Soon page will be created with one of our favorite plugins, Coming Soon Page & Maintenance Mode.
Start by going to Plugins > Add New in your WordPress Dashboard.
In the search box on the top-right, search for coming soon. The first option is the one we’re looking for – click Install Now.
After the installation is complete, click Activate.
You’ll then be brought directly to the plugin’s main page. If you’re not, go to Settings > Coming Soon Page & Maintenance Mode and make sure you’re on the Content tab.
From there you can upload your Logo in the Page Settings section
and enter your Headline.
This part is optional, but the default maximum width was a little small for our liking. If you don’t want to be restricted, enter something like 900 in the Max Width field.
In the Message section, add the text you’d like to appear above your sign-up form.
Create your sign-up form
In this section, we’ll be creating our signup form and adding it to our Coming Soon page. We’re assuming that you’ve already got an account with MailChimp. If you’re using a different platform, the MailChimp-specific portions will not be relevant to you, but you can skip down a few steps until we’re back to the Coming Soon page settings. If you still have to get an account created with MailChimp, you can go here to setup your free account and a List.
To start, go into the Text editor in the Message field.
Now, log into MailChimp and go to Lists in the menu bar.
Select the Embedded forms option.
Deselect Include form title and Show required field indicators. Then set the Form width to 500.
Copy the embed code and paste it into the Text field in the Message section back in WordPress.
Delete the blank line between the First Name label and input field. Repeat for the Email Address label and input field.
Before:
After:
Customize Display Settings
Now, let’s move on to the Design tab to update some display settings.
To customize the background of your landing page, upload your background image. Make sure it’s nice and big so you don’t end up with a pixelated background.
Now we’re going to add some custom styles. Scroll down to the Custom CSS section.
Copy and paste the following CSS into the textbox.
.seed-csp4 body, .seed-csp4 h1,
.seed-csp4 h2, .seed-csp4 h3,
.seed-csp4 h4, .seed-csp4 h5,
.seed-csp4 h6, #mc_embed_signup {
color: #333 !important;
font-family: 'YOUR FONT HERE’' !important;
}
#seed-csp4-headline {
font-weight: bold !important;
margin-top: 60px !important;
font-size: 24px;
margin-bottom: 40px;
}
#mc_embed_signup {
background: none !important;
margin-left: auto;
margin-right: auto;
margin-top: 40px !important;
}
#mc_embed_signup input {
border: 2px solid #333 !important;
border-radius: 0 !important;
}
#mc_embed_signup .button {
background-color: #YOURCOLORHERE !important;
border: none !important;
border-radius: 0 !important;
height: auto !important;
font-weight: bold !important;
padding: 3px 22px !important;
text-transform: uppercase;
width: 96% !important;
}
#mc_embed_signup .mc-field-group label {
text-transform: uppercase;
}
#seed-csp4-description {
font-size: 16px;
}
Be sure to customize the font-family setting to use your own font and set the background-color (which corresponds to the button color) to your own brand color.
Now you can click Live Preview at the top of the page and take a look at your gorgeous new landing page!
To activate your page, go back to the Content tab, select Enable Coming Soon Mode, and then click Save All Changes.
Note: If your Message section editor switched back to Visual, you will have to go back and grab your MailChimp embed code and add it back in and then delete those extra lines for the Email Address and First Name labels. Sometimes WordPress can be a pain 🙂
That’s it!
Now you’ve got a beautiful Coming Soon page that will allow you to gain email subscribers while preparing for your launch!
If you’re still looking for the perfect theme for your WordPress blog, check out or themes in the Shop or join our 3-day mini series all about helping you choose the perfect theme!
