Building a Landing Page With Carrd and Mailchimp
Building a Landing Page With Carrd and Mailchimp

Building a Landing Page With Carrd and Mailchimp

📔

Written by: Jim Wrubel Published on: @August 18, 2021 Last updated: @August 18, 2021

Tools used in this Recipe

🧰
Searchable List of Tools, References, and Best Practices

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.

Getting Started

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.

⚠️

While Carrd has a free tier, this Recipe assumes you have purchased an annual license and have access to functionality only available to paid plans.

Carrd's New Site workflow, showing landing page templates selected
Carrd's New Site workflow, showing landing page templates selected

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 template options
Carrd's template options

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:

The first panel from one of Carrd's templates
The first panel from one of Carrd's templates

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.

Carrd's new element menu
Carrd's new element menu

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.

Carrd's text editor interface
Carrd's text editor interface

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.

Carrd's text appearance editor
Carrd's text appearance editor
⚠️

Careful! The text appearance properties in Carrd are designed to look good as a set, so only adjust these if you have an understanding of design for the Web.

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.

Carrd's image element context menu
Carrd's image element context menu

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's section edit menu
Carrd's section edit menu

The Carrd signup form

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.

Carrd signup form context menu
Carrd signup form 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 menu showing available form fields
Carrd's signup menu showing available form fields

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).

⚠️

The signup form does not include complex web form types like dropdowns, radio buttons, or textareas, so if your signup form needs those you should consider using Unbounce instead.

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.

Carrd's signup form with changed prompt
Carrd's signup form with changed prompt
The changed signup form in Carrd (for demonstration purposes the form has been switched to column type to properly display the label)
The changed signup form in Carrd (for demonstration purposes the form has been switched to column type to properly display the label)

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

Carrd's signup form submit button edit screen
Carrd's signup form submit button edit screen

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.

Carrd's signup form Appearance context menu
Carrd's signup form Appearance context menu

Connecting the Carrd signup form to Mailchimp

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.

Mailchimp's Account page menu with the
Mailchimp's Account page menu with the API keys option shown

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.

Mailchimp's API keys table showing the key created for this recipe
Mailchimp's API keys table showing the key created for this recipe

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.

Carrd's signup form context menu, showing the API Key entered
Carrd's signup form context menu, showing the API Key entered

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.

Publishing your landing page

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.

Carrd's publish screen
Carrd's publish screen

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.

Carrd's publish locations
Carrd's publish locations

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.

Carrd's publish share icon screen
Carrd's publish share icon screen

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.

Carrd's publish advanced options screen showing the meta tag editor
Carrd's publish advanced options screen showing the meta tag editor

Testing your landing page and signup form

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.

The Carrd landing page for Startup Recipes, showing an email address filled out in the signup form
The Carrd landing page for Startup Recipes, showing an email address filled out in the signup form
ℹ️

You need to use an email address you can check because Mailchimp defaults to a double-opt-in, meaning it will send email to the address you enter to confirm that it's valid and belongs to the person who submitted the form. The email address used in this recipe, name@example.com, is just for informational purposes.

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.

Mailchimp's email asking you to confirm your subscription
Mailchimp's email asking you to confirm your subscription

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.

Mailchimp's Audience contact list showing the email address that was just added
Mailchimp's Audience contact list showing the email address that was just added

Wrapping up

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

The contents of this Recipe are © Innovation Works, Inc. and are licensed under CC-BY-SA 4.0 . Contact us with questions or feedback, or to learn more about our structured program in Entrepreneurism based on Startup Recipes.