How To Create A Coming Soon Page On WordPress (for free!)

This post contains a couple of affiliate links for products/services I highly recommend.After writing Monday’s post about how to make nice-looking opt-in forms for ConvertKit, I figured I might as well answer my 2^nd most asked tech question, which is:

How do I collect email addresses before I launch my website?

Turns out, you can do it for free (besides the cost of your domain and hosting) and it’s pretty simple! All you need is your WordPress website, MailChimp, and this plugin.

In this tutorial, we’ll work through setting up a Coming Soon page like this. Don’t worry, you’ll easily be able to customize it to fit your brand!

(photo credit – Styled Stock Society)

If video is your preferred learning method, you can watch the step-by-step tutorial below. If you prefer text tutorials, scroll past the video for written instructions.

In the video, I forgot to include instructions for activating the coming soon page (oops). Scroll to the bottom of the written instructions for guidance.

How to create a landing page in WordPress (for free)

Plugin Setup

Start out in your WordPress dashboard. Go to Plugins > Add New and install the Coming Soon Page & Maintenance Mode plugin by SeedProd.

If you’re not brought directly to the plugin’s page, go to Settings > Coming Soon Page & Maintenance Mode and make sure you’re on the Content tab.

Upload your Logo in the Page Settings section

Enter your Headline.

In the Message section, add the text you’d like to appear above your sign-up form.

Create your sign-up form

Now, we’re going to add the sign-up form. To start, go into the Text editor.

Now log into MailChimp and go to Lists in the menu bar. For the list you’d like to add subscribers to, click the down arrow and select Signup Forms.

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 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. (The image I used is from Styled Stock Society)

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. Check out the video for a description of what each setting does.


.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: 90px !important;
}

#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: #YOURCOLOR !important;
border: none !important;
border-radius: 0 !important;
height: auto !important;
padding: 3px 22px !important;
text-transform: uppercase;
width: 96% !important;
}

#mc_embed_signup .mc-field-group label {
text-transform: uppercase;
}

Be sure to customize the font-family setting to use your own font and set the background-color to your own brand color

I also feel the need to note that with CSS you generally want to avoid using “!important”. However, due to the nature of the code we were overwriting, it was necessary for this scenario.

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 🙂

You’re all set!

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 Coded Creative! Kory Woodard and I are always hard at work creating simple, beautiful, and effective themes.

Note: I do not offer support for the plugins mentioned above or offer tutorials for alternate email platforms