designing a coming soon page to create mailing list

How to create a coming soon page on Elementor 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! And this includes prior to your launch too – i.e. to include a newsletter subscription in your coming soon page.

Creating the “Coming Soon” page template

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.

To create a new template:

  • Go to Templates > Add New
  • Select ‘Page’ from the first drop-down list and give your template a name – say “Coming Soon” and the click Create Template
  • You could either design your own template or choose from Elementor’s template library.
  • Once done, click Publish.
coming soon Elementor template library

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 (opens in a new tab).

Activating your “Coming Soon” template

So, how would set up your coming soon page on Elementor? This involves setting up a Coming Soon HTTP 200 code, meaning the site is ready to be indexed. To do this, you need to follow these simple steps:

  • On your WordPress Dashboard, and go to Elementor > Tools
    Click on Maintenance Mode.
  • Select “Coming Soon” on the drop-down labeled ‘Choose Mode
  • In the drop-down labeled ‘Choose template‘, select the template that you created in the above step – which is this case was named as ‘Coming Soon’.
  • Click Save Changes.

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.


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

Share on facebook
Share on pinterest
Share on twitter
Share on google

Leave a Comment

Your email address will not be published. Required fields are marked *

Latest Posts

Creating a Sticky Navigation Menu to a Specific Page

Sticky navigation menus are useful if you have a long list of features or sub-sections in a particular page and you want it to be seen only in that specific page. Not only does it help you improve the user experience, but it also creates a schema in Google’s algorithm as you are now using a navigation menu to structure your website.

Read More
Scroll to Top

We use cookies to give you the best experience. If you continue using our website, we’ll assume that you are happy to receive all cookies on this website.