Mailchimp

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:

MailChimp

MailChimp Landing Page

 

And register:

MailChimp Register Page

MailChimp Register Page

 

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:

MailChimp Lists Page

MailChimp Lists Page

 

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

MailChimp Signup Form

MailChimp Signup Form

 

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

MailChimp Embedded Forms

MailChimp Embedded Forms

 

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 http://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:

Coming Sssoon Bundle

Coming Sssoon 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?

Coming Sssoon Page for Restaurant

Coming Sssoon Page for Restaurant

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:

Coming Sssoon Page Code 1

Coming Sssoon Page Code 1

 

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

MailChimp Code

MailChimp Code

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:

Coming Sssoon Page Code 2

Coming Sssoon Page Code 2

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!

 

Facebook Comments

13 thoughts on “How to set up MailChimp with a custom Coming Soon Page

  1. Hey – I’d advise for anyone doing this when creating your form that if you are intended in using the buttons already provided in this template and not the standard Mailchimp one, in Mailchimp you need to CHECK THE BOX to DISABLE JavaScript on the left hand side of the page when creating the form – hope this helps.

  2. When I imported the MailChimp text, the Notify Me button moved from the right side of the e-mail box to directly underneath it on the left. Can anyone suggest how to correct this?

  3. When I imported the MailChimp text, the Notify Me button moved from the right side of the e-mail box to directly underneath it on the left. Can anyone suggest how to correct this?

Leave a Reply

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