All big names in the blogging business have some kind of landing page with a very prominent feature and that’s a signup form.
They always ask for your email address and sometimes even your first name so they can make their newsletters a bit more personalized.
According to wpbeginner.com, more than 75% of your readers will never come back to your website, but it does not necessarily mean that your content is not helpful or interesting.
Disclosure: Please note that some of the links in this post are affiliate links for products I use and love. This means if you click on such a link and take action (like subscribe, or make a purchase), I may receive some coffee money at no extra cost to you. This helps me create more content free of charge for you. And, as an Amazon Associate, I earn from qualifying purchases. Thanks for your support!
People simply forget the name of your website because there are so many blogs these days.
It actually makes sense if you think about how people get to your website in most cases – by a chance.
Most of them are just looking for answers on Google, they type a few keywords, get a list of relevant links and click on one of them.
Once they get the answer that helps them with solving their problem, they just leave without writing down or bookmarking the name of the website that helped them.
That’s why you need a way to reach out to your readers and let them know about your new content.
With a signup form, you can gather their emails to keep engaging with them and invite them back even after they left your website.
In this article, I will show you how to add a newsletter signup form to your WordPress website so you can collect emails from your readers. This way, you can write them directly each time you publish a new article.
We will start with a default WordPress installation, create a dedicated landing page, and set up a signup form that we will connect to an email marketing platform.
What is Email Marketing Platform?
An email marketing platform is a set of tools that helps you design and publish your signup form, collect and manage subscribers and even run automated email campaigns.
The signup form at the bottom of the landing page is actually embedded from Moosend.com which is one of the email marketing platforms I’m using.
There are many different email marketing platforms you can choose from and most of them even offer free plans so you can try them before paying for advanced features.
Whichever you choose, there are two important factors you should consider:
- loading speed of the forms: the faster it loads the better
- ability to send emails in plain text: HTML emails scream marketing while plain text looks like a message from a friend
I’ve tested seven platforms and measured the loading speed of their forms so you don’t have to. Here are my results:
- Moosend form performance: 58 out of 100 points
- MailerLite form performance: 96 out of 100 points
- GetResponse form performance: 93 out of 100 points
- ConvertKit form performance: 97 out of 100 points
- Sendinblue form performance: 97 out of 100 points
- Mailchimp form performance: 99 out of 100 points
- AWeber form performance: 100 out of 100 points
As you can see, AWeber offers the best performance while Moosend is the worst.
How to Collect Emails Right in WordPress?
If all you want is to collect emails from your readers, you don’t need to use any email marketing platform.
All you need is WPForms plugin that will let you create a simple signup form really fast.
Let’s see how to quickly set this up on a fresh WordPress installation.
The easiest way is to use some pre-made landing templates so you don’t have to start with a blank page.
This results in slow loading times that negatively impact the overall performance of your website.
So I started using it on all of my WordPress-based websites including this one.
Let’s start with DreamHost which offers both affordable shared hosting and premium managed WordPress hosting.
I’m actually using their managed hosting because it offers more performance, staging, and automatic backups, but their shared hosting is a very good choice if you’re on a budget.
Once you’re in your DreamHost account, you need to navigate to Managed WordPress:
This will show you the list of your DreamPress websites. Just click Manage button:
And finally, click Manage WordPress to get to your WordPress admin dashboard:
Once you’re in, it’s best to start with Blocksy Starter Site and modify it later.
First, go to Appearance, search for Blocksy theme and install it:
Next, install the Blocksy Companion plugin:
In Blocksy dashboard, select the tab with Starter Sites:
Scroll all the way down and import Blocksy News starter site:
Notice that WPForms is a part of this starter site so you don’t need to install it separately:
Now, you can preview your website. It looks very professional:
Creating a landing page
With a starter site installed, we will modify it a bit so it looks like those famous pages I showed you at the beginning of this article.
This means that we will create a dedicated landing page that readers will see when they visit the main address of your website.
To do that, we need to make three important steps:
- Create a new static page that will work as a landing page
- Create a new static page that will list all posts
- Tell WordPress to change the homepage from the current list of blog posts to our newly created landing page
How to create a new static page?
This is part is very easy, just click Pages -> Add New in your WordPress dashboard. Name the newly created page “Homepage” and publish it.
The name of the page is not actually important because we will hide it anyway, it’s just for you to be able to easily identify this landing page in the list pages.
How to set the new WordPress homepage?
Now you are ready to set your newly created static page as a new homepage. In your Dashboard, select Settings -> Reading.
Next, choose a static page as your new homepage and select your newly created Homepage from the list of available pages.
Once it’s done, don’t forget to scroll down and save the changes.
Now, you can go back to your Dashboard and preview the new landing page to see rather empty content, but that’s exactly what we needed.
Adding a new content to your landing page
Now that we have our new landing page ready, it’s time to add content to it. This will consist primarily of a hero image and a signup form.
The easiest way is to use the Stackable plugin that comes with pre-made templates so you don’t have to start from scratch.
Luckily, we already installed Stackable as a part of our starter site so we’re all set:
In the list of All Pages (1), locate your Homepage (notice that it’s now set as the Front Page) and click on the Edit link (2):
Once you’re in Homepage, click the Design Library button at the top of the screen:
Next, click the Open Design Library button:
Make sure you have Block Designs tab selected and choose Hero from the list of templates. Finally scroll all the way down and choose the Wireframes Hero 3:
You should have this template added to your Homepage:
Now, you can upload your own cover image and even change it’s shape:
Let’s add some text as well:
Everything is very intuitive and you can also undo all the changes and start from scratch if anything goes wrong.
Creating a list of posts
The easiest way to create a list of posts is to utilize categories and create a list of all posts that belong to a specific category.
First, let’s create a category named Blog and place all posts into this general category.
In your Dashboard, go to Posts and choose Categories:
Give your new categories name “Blog” and hit the Add New Category button at the bottom:
Next, go to the list of all posts, click Quick Edit below the name of each post, assign the newly created category Blog and click the Update button:
Once you have this done, go to Appearance -> Menus (1), select the Main Menu (2), select Blog from Categories (3), and add it to your menu (4):
Remove dummy links created by the starter page (1), keep only Blog, About Us, and Contact. Save the changes (2):
Preview your website and click the Blog link to see the list of all your posts from the Blog category:
Customizing the layout of the blog page
If you don’t like the default layout of your blog page, you can easily modify it by clicking the Customize button at the very top:
Let’s start by hiding the Category Blog title. Move your mouse over the title and click the Edit button:
Hide the Title element (1) and hit the Publish button (2):
We can also change the layout of individual post cards. Move your mouse over the list of posts to reveal the EDIT button:
In the left pane, you can choose from different layouts. Let’s choose Simple structure for example.
Next, click the Cards Options to reveal a new set of settings.
Here, you can decide which card elements to show or hide, change their order and even set the ration for featured image:
Once you publish the changes and return to your blog page, you should see something like this:
I hope you see how powerful Blocksy really is, even in its free version. Go ahead and play around until you are full satisfied with the way your blog page looks.
Adding a subscription form to the landing page with WPForms plugin
Now it’s time to return back to our landing page and add a simple subscription form.
You can use WPForms plugin that comes with our Starter Page, but you would need to buy a Pro version to collect entries.
Let’s quickly see how to use it anyway.
First, choose WPForms -> All Forms from the dashboard to see all existing forms available:
Notice the shortcode for Newsletter Signup Form and copy it to clipboard:
Go back to your landing page and click the plus button (1) to add a new element, search for shortcode (2) and select it (3):
Paste the shortcode from the clipboard to the form:
Preview your landing page to see the signup form and try to submit your email address:
You should see this confirmation instead of the signup form:
With a Pro version of WPForms, you should be able to work with all form entries.
But there another way to manage subscribers if you don’t want to use WPForms, and that’s what we will discuss next.
Adding a subscription form to the landing page with a marketing platform
You can use a marketing platform to collect your subscribers emails and even create automated responses and detailed workflows.
Let’s quickly see how to do this with MailerLite.
After creating a new account, go to Forms (1), click Embedded forms (2) and finally Create embedded form button (3):
Choose a form name and click Save and continue button:
Once asked to choose a subscriber group, click the Add new group button:
Name the group and click the Create button:
Next, you should see the form designer where you can customize your form. Hover you mouse over the first element to reveal buttons at the top and click the bin to remove the header:
You can also change how the button looks like to match the style of your website. Just click the button with a pencil:
Click the Button (1), change background colors (2) and save the changes (3):
Now you need to embed your form into your landing page. Choose HTML code (1) and copy it to clipboard (2):
Go back to your landing page and add a new block below WPForms shortcode:
Search for “custom” (1) and select Custom HTML block (2):
Paste to code from your clipboard to the form field:
Click the Preview to see what the subscription form looks like:
You should see this form:
You can even fill out your email and subscribe:
The form will confirm that you joined subscriber list:
Since we chose double opt-in, you need to go to your inbox and confirm your email address:
And you’ll be redirected to the page that will confirm you subscription:
Go back to your MailerLite account and click Subscribers (1), Groups (2) and select your group, in my case it’s SPS Newsletter (3):
And here’s your first subscriber:
In this comprehensive tutorial, I showed you step by step how to modify your default WordPress into a professional-looking website including custom landing page with subscription form and a separate list of posts that works as a blog.
I hope you’ll this tutorial useful and recommend it to people who struggle with setting up their WordPress websites similarly.