Building a Landing Page With Carrd and Mailchimp

One of the most challenging parts about being an entrepreneur researching a potential startup idea is trying to gauge customer demand before you invest time and money in building your product. You should definitely interview potential customers as much as possible to validate your idea, and you can always set up an online survey to gather feedback and input.

In this Recipe we'll cover another strategy you can use to gauge interest for a product that doesn't yet exist. By setting up a landing page with information about your product and a form for users to sign up to be notified when it is available, you can build a list of interested potential customers before even starting development.

In this Recipe we'll use Carrd to develop the landing page, but you could use Unbounce or any similar tool. For capturing email addresses we'll use Mailchimp, but you could also use ConvertKit, Revue, SendInBlue, or a similar email marketing tool. While a domain name isn't strictly necessary for this Recipe, using one will help your landing page feel professional and help with Search Engine Optimization. Depending on your product you will also need some branded images to use in your landing page.

We'll start this Recipe by setting up an account at Carrd. Once you have registered, click the New Site button. Carrd has a number of pre-built templates for different purposes, so set the dropdown to Landing to see landing page templates.

Carrd offers several options, and you can customize any of them. If you're not sure which to pick, hovering over a thumbnail gives you the opportunity to see a demo version.

Carrd's templates follow a common style - they are all single-page and use a concept of sections. Sections stack on top of each other and each section has a layout and one or more content blocks. Depending on the template you choose you may have different content in the first panel, but the template we chose for this recipe looks like this:

In the landing page design view, the images are empty and the text is all lorem ipsum. We'll explain how to change these over the rest of the Recipe. In the upper left are various options for the current section. The plus icon allows you to add any of several elements to the current section.

Some elements are designed to animate as they scroll in to view. Depending on the element you can change the animation style. The play icon in the menu will preview any animations in the current section. The hashtag icon in the menu will let you navigate between sections. To the right of the hashtag icon is a toggle to allow you to view the mobile or desktop layouts, and to the right of that is an icon to publish the site. The menu at the far right includes a number of advanced options; to reset the template, set the background color and pattern, adjust the page layout, and access documentation and instructions.

Clicking on an element opens a context menu to allow you to edit it. If you are editing a text element, the context menu allows you to change the text using Markdown syntax. Markdown is a markup tool that allows you to add formatting options like bold and italics (among others) directly in the text.

By clicking the paintbrush icon in the context menu you can change properties of this text element like color, font, size, alignment, and spacing, or add a drop shadow.

The Gear icon allows you to directly modify the HTML for this element. This isn't normally necessary and you shouldn't edit these properties unless you are comfortable editing HTML.

Like text elements, clicking the image element brings up a context menu to allow you to upload an image from your local machine, to set alt text (important for users with visual impairments), and to add a clickable link to the image. The paintbrush icon again brings up a menu of properties like the height, width, and shape, or to add a border or drop shadow. And the gear icon is also used for advanced HTML.

Other elements have similar menus that allow you to customize their properties, and we encourage you to try out different elements to see what options are available.

Once you are comfortable with the design of this section move on to the next, editing properties as you go. If you find that a section in the template isn't needed you can click on it to get the section edit menu and delete it.

Carrd templates can include signup and feedback forms with any number of fields. The template used in this Recipe has a signup form in the first and last section, but for it to work properly we'll need to integrate it with our email provider. Clicking on the signup form opens its context menu.

Let's take a look at the other context menus for this form. The second tab allows you to add additional fields to your form.

Carrd's signup form supports up to five text fields and one checkbox type (normally used to ask the user to accept being subscribed to the email list).

While the field names are not editable in the context menu, if you want to add a text field that isn't listed here you can use one of the existing ones and just change the prompt. So if you have a different piece of information you want to capture you can use a different prompt.

On the next tab over you can change the button label.

On the appearance tab you can change visual aspects of the form. The most common thing you would want to edit is the layout, to switch the direction of form fields between row and column.

To connect the signup form you'll need two pieces of data; an API key and an audience ID. We'll get these from Mailchimp, so open another browser tab and log in to Mailchimp. Click on your profile icon in the lower right, then click Account. Click the Extras menu, then select API keys.

Click API keys. On the API screen scroll down to the Your API keys section and click Create A Key. Mailchimp will generate a key and add it to the list of keys on this screen. Although it's not required, it may help to give the key a label so you know what it's used for.

Copy the API key, switch back to the Carrd browser tab, and select the signup form if it's not already selected. In the context menu, paste the key into the API Key field.

Now let's get the audience ID. Switch back to the Mailchimp tab and on the menu on the left, click the Audience icon. If you don't have an audience already created, follow these steps to create one. Select the Audience, then select All Contacts. From the menu on the next screen click Settings, then select Audience name and defaults. Your Audience ID will be shown on this screen. Copy it and return back to the signup form and enter it in the Audience ID field. Then click Done to save the form.

Make any other design changes you need to your landing page; change brand colors, upload a logo, replace the default image placeholders with product images, etc. Once you have made the changes you want, click the Publish icon in the upper right. On the first panel you can specify a name and description for your site.

You'll also need to specify a location for your published site. Although we haven't included it in this recipe we recommend registering a custom domain for your idea and publishing to it.

On the next tab you can specify a share image (this is shown when someone shares your site on social media) and a browser icon.

The gear icon in this context menu has some important, though advanced options that you'll want to consider. Here you can add a Google Analytics tracking code so you can see information about the users that come to your site, and you can add meta tags to optimize your site's search engine rankings.

Before you share your new landing page with the world you should preview it to make sure it looks good on mobile devices and on desktops. Use the menu icon to publish your latest changes. When it's complete, Carrd will give you a link to view your published site. Preview it on the devices you own, and if you have a small group of friends and family to recruit to test and provide feedback, that's a good idea too.

You should also test that users who sign up for your mailing list appear in your Mailchimp database. So find the signup form on your landing page, enter and email address you can check, and submit the form.

If everything worked out your landing page should redirect to the #signup-done section (you can view and edit its contents in the Carrd interface, towards the bottom).

Now open your email address and find the email from Mailchimp asking you to confirm your subscription. If the email address went to your Spam folder, make sure your DKIM setting is in place and correct. If your Mailchimp audience is configured to send email from a personal email address or the same address you used to sign up , the email may also land in Spam.

Click the Yes, subscribe me to this list button. You should be directed to a Web page that confirms your subscription.

Navigate back to the Mailchimp Audience tab. On the All contacts screen you should see the email address you just confirmed.

That's it! If you want to see the finished product you can access it at the link below.