How to set up MailChimp with a custom Coming Soon Page

If you are on the verge of creating a product and need some validation before you hit the market, you probably thought of a Coming Sssoon Page . The advantages of setting up a page before you actually put into action your plan are tremendous. It helps you get in touch with your customers!

The Coming Sssoon Page is the first step and email marketing is the second. So how do you go about storing emails and starting communicating with people that are interested? There are several ways, and if you have someone on the team with technical background, you can tie your page to the server and store the emails in your database. That means you set up your form and send the information you get to the back end, to get stored in your ‘Users’ table. But that doesn’t solve the entire problem, you still have to send mass emails to people that signed up. Then these emails have to comply with regulations and give people the possibility to unsubscribe or update.

‘This is not the time to re-invent the wheel’ is a saying we use at Creative Tim . There is a service that already thought the entire stuff through and its name is Mailchimp. The guys at MailChimp made email marketing easy as it has ever been and offer great support. In this blog post, we will guide you through the registration and integration of their form your Coming Sssoon Page. Let’s take it step by step!

1. Set up your MailChimp Account

Go to MailChimp:

And register:

The process is really easy and will take less than 10 minutes.

2. Create a list

In order for you to manage the people that will be subscribing, you need to keep them in a list. So click on ‘Lists’ in the left menu and then ‘Create List’. You will need to fill in basic information like sender name and email:

After creating a list, you will be presented with the possibilities to manage the list. Go to the ‘Signup Form section’:

And then choose ‘Embedded forms’. Once you are on the embedded forms page, go to the ‘Super Slim’ section:

Here you will find the form that Mailchimp provides to you. Next, you have to take the code that they provide and put it the Coming Sssoon Page. The code is under the preview like you can see in our example.

3. Integrate the MailChimp sign up form in your page

To better illustrate the integration of the form in a coming soon page, we will take Creative Tim ‘s Coming Sssoon Page as an example.

So, first go to https://www.creative-tim.com/product/coming-sssoon-page and download the template. You have multiple options for customisation, from images to video and different colors for your look. It is simple, responsive, yet effective and we have only received positive feedback so far from people downloading it.

Once you have your archive, open it and you will see the following bundle:

Next, you can choose the file that you like most. We will continue with the Restaurant page that’s looking great, isn’t it?

Open the file with a text editor and look for the form that asks for the email. Your code will look like this, with the form in the middle:

Next, open your Mailchimp code in another file. That will look something like this:

So, to put them both together like this:

• replace the form tag from the Coming Sssoon Page with the form tag from Mailchimp (make sure the form keeps the ‘form-inline’ class!)
• add the name of the email input from Mailchimp to the Coming Sssoon Page
• add the div after the email input form Mailchimp to the Coming Sssoon Page, so the form is protected from bots.

In the end, your code from the Coming Sssoon Page should look something like this:

So that wasn’t that hard, right? The results will be worth it!

4. Final touches

You need to deploy the code to your server and you are all set.

You also need to be aware of some default settings that Mailchimp has:

• double opt-in process (that means people who enter their email addresses receive a confirmation email) – this is the best practice for email marketing and it makes sure people didn’t accidentally got subscribed!
• default thank you page(that means that people who sign in their emails will then get redirected to Mailchimp, where they get a thank you screen). If you don’t want this to happen, you will need to go to Mailchimp → Lists → #Your List → Signup Forms → General Forms and choose Sign up ‘Thank you’ page.

Here, there is field where you can input your link, so people return to the Coming Sssoon Page after they entered their emails.

That is the process of setting up Mailchimp with your Coming Sssoon Page! We wouldn’t have made this tutorial if we didn’t believe it was the best possible option. Feel free to leave a comment or contact us at Creative Tim for more support!