Creating a landing page for your startup in minutes

How to get a landing page with a startup form, save subscribers to a database and sync with Google sheets using carrd, BackendLab and IFTTT

When you’re trying to validate a new startup idea, it pays to get a landing page up quickly so you can start building a mailing list. This tutorial will show you how to do this quickly and without writing a single line of code, with just a few simple tools.

The landing page

Start by heading to carrd.co and signing up for an account — carrd.co allows you to build a simple one page app from a library of templates. You can create a free account for now (to add your own domain name, you’ll need to sign up for a pro plan, which is only $9/year). Once you’ve signed up, click on the New site

Choose a template you like from the library. You’ll now have the option to add your own copy to the template

Let’s implement a simple signup form to keep track of subscribers. Use the plus button to add a form to the template

In the forms sidebar, go the the fields

Add fields for last name and email, using the same process. When specifying the email address, make sure to select email from the Type drop down — this will ensure that visitors to your site can only add valid email addresses here. Your form should now look something like this.

Implementing a backend

At this stage, you could just push your landing page live as is. However, at the moment, all your form does is send you an email with the details — in order to store your signups in a more robust way, we can create an app in BackendLab. BackendLab is a BaaS platform that allows you to create a web app backend with a PostgreSQL database, REST API, user authentication and permissions without the need to write any code. Start by signing up for a free BackendLab account and logging in. You’ll be taken to your apps list:

Click the Create new app button to create a new app, and give it a name

Once you’ve create your app, click on it, then click on the Create model button to add a new data model

You’ll then be taken to your fields list for your Contact model

Whenever you create a new model, it will have a single, ID field — this is used as the primary key and cannot be modified or removed. Let’s add some more fields to our data model by clicking the Add new field button. First, you’ll be asked to name your field and specify the type:

Click Next, leave the attributes on the next step as per the defaults, then click the Create field button.

Add two more fields to match the other fields that we specified in our contact form — Last name and Email — using the same process. If you added any other fields to your signup form, then you should add equivalent fields here too

BackendLab automatically creates a REST API for all the data models you create. To enable this, go to the Permissions tab and mark the data model as public

Our REST API is now available. Go to the endpoints link to see how to access these:

Copy the first URL in this view, and head back to Carrd.co. Click on your signup form, and in the sidebar, change the form type to Custom/Send to URL. Paste the first URL from the above screenshot into the URL field:

Scroll down, and specify AJAX as the request method, and JSON as the format

Our page is now ready. Use the menu to Publish your landing page (you can specify a custom domain name here if you have a Carrd pro account)

Testing it out

Your site is now live! Go to the URL that you specified on publishing your page, and test out the form:

You should get a message thanking you for signing up. If so, go back to BackendLab, and click on the Data tab for your data model to see if it worked:

Working with IFTTT maker webhooks

We now have our signup data stored in our BackendLab app. However, because we are no longer using Carrd’s default email notifications, we have to keep going back into BackendLab to see if anybody has signed up — we don’t receive any immediate feedback that this has happened.

We can solve this problem by working with Webhooks in BackendLab. Webhooks allow you to make calls from BackendLab one or more URLs after creating instances of our Contact data models. Before we do this, let’s setup an Applet in IFTT — sign up for an account then click on My Applets > New Applet

Click on +this, then find and select the webhooks service. Specify an event name:

Click on +that then find the Email service. Configure the service to send yourself an email whenever there is a new signup

Your applet is now ready to use. To access it, navigate to https://ifttt.com/maker_webhooks, then click on the Documentation button to get the unique URL for your account

This URL (with {event} replaced with the event name we specified for this applet) is the URL that we’re going to get BackendLab to hit whenever somebody signs up on our landing page

To configure this, go back to the endpoints list in BackendLab, and find the green, POST endpoint for creating our contacts, and click the View webhooks button

Click Attach a new webhook to this endpoint. Enter a name, and the URL from IFTTT, and click the Save button

The webhook is now ready — when BackendLab receives a POST request on that endpoint, it will call the IFTTT webhook, which will send you an email whenever somebody signs up on your landing page. Test it out from your landing page once more, and ensure that you receive the email: