designing a coming soon page to create mailing list

How to create a coming soon page to start building your mailing list

Share on facebook
Share on twitter
Share on pinterest
Share on google
Have you purchased a domain & hosting service for your business but still not ready to go live with your website? This is when you’d need to publish a coming soon page. It also provides you with a great opportunity to spark an interest with your audience and start building your e-mail list. This article shows you how to do just that!

Creating an e-mail list is important. Many might argue that it’s e-mail marketing is dead. But I’d disagree. It is still one of the most effective online marketing channels for both acquiring customers as well as retaining potential clients/customers. Once you have a well-targeted e-mail list, it have a huge positive impact on your ROI.

So why am I telling you all of this? It’s so that you get started building your e-mail list right from the word go!

Designing your “Coming Soon” page

Fortunately, Elementor’s template library has a section for “Coming Soon” templates to choose from. Most designs will include a strong heading with a countdown timer and an attractive background image.

If you are on the free version however, your choice would be limited. Nevertheless, designing from scratch shouldn’t be too hard either. You could either download the template used in the tutorial or gain inspiration from various sources online (link to coming soon page ideas)

Creating your mailing list

A well-designed coming soon page is a great way to spark interest and create a targeted e-mail list which you can use for marketing purposes. Use a mail responder platform that can help you create a mailing list. There are two ways you can automate the process of creating this list based on the information submitted on the coming soon page.

  • using a 3rd-party plugin;
  • using the Form widget.

This article would focus on the 2nd approach only which requires Elementor Pro.

Note: If you are using the free version of Elementor, you will need a 3rd Party plugin such as Contact Form 7 to integrate with your mail responder. For example, if your mail responder is MailChimp, you will have to install the “MailChimp for WordPress” plugin to include the signup form on your Coming Soon page.

Using Elementor Forms widget

One of the ways to achieve this is to include a Form widget that integrates with your mail responder. This is however a feature available only if you have the Elementor Pro version. Including the Form widget on your coming soon page will let your visitors enter information (such as e-mail addresses) which can be later used for your marketing purposes. It could either be a simple form with just the e-mail address or you could ask for more information such as name, country etc.

Designing the form

Depending on your requirement, you can decide the form accordingly. The following steps shows how you can create a simple form to collect data (their name & e-mail address) from visitors:

Step 1. Click & drag the form widget to a column you wish to place the form

Step 2. Under “Content” tab, delete the fields you don’t require (in this case, that would be only the “Message” field).

Step 3. Set the “Label” field to “Hide” to give your form a cleaner look.

Step 4. Set the column width of “Name” and “E-mail” field to 40% respectively and the button width to 20%.

Step 5. Customize the fields and buttons on the “Style” depending on your requirements

Actions after submit

Once the visitors submits the information on the form, you can decide what you’d want to do with this information. The Form widget allows you to integrate it with your mail responder (eg: MailChimp, ActiveCampaign, Drip etc). This automates the process of adding the submitted data to your mailing list. Here’s how you could do it (assuming you use MailChimp as your mail responder):

Step 1. Under “Actions After Submit”, select the mail responder you use (which in this case is MailChimp)

Step 2. You will now see a tab called “MailChimp”, you will see the API Key set to “Default”.

Step 3. Change it to “Custom” which will prompt you to enter a Custom API Key. You can find a detailed guide on how to obtain your API Key here.

Step 4. Assuming you have created a list in your MailChimp account, you will be asked to select the list that you need the data to be added to.

Step 5. Under “Field Mapping”, select the field that corresponds to the one in the form.

Step 6. Click Update.

WANT TO LEARN MORE?

Get content on tips, tricks and reviews on Elementor right to your mailbox!

  • We won't spam & that's our promise. We hate it as much as you do. 
Share on facebook
Facebook
Share on pinterest
Pinterest
Share on twitter
Twitter
Share on google
Google+

Latest Posts

How to create a custom header with Astra Pro

How to create a custom header with Astra Pro

Astra is one of the most popular themes that is compatible with most page-builders specifically, Elementor. It has a free version to get started with but this article explores one of the popular features offered by the Pro version – custom headers. It’s a great feature to have especially if you are using the free version of Elementor. Learn how to build a custom header with Astra Pro

Read More