loading...

Build a Lead Generator in 5 Minutes with Typeform, Clearbit, Airtable and Standard Library

mss_ledezma profile image Janeth Updated on ・5 min read

Looking to generate leads for your business, or qualify them after you've received some information from a service like Typeform? This tutorial is for you! We're going to be using Typeform as a lead intake form, and then use Standard Library to both connect to the Clearbit API to qualify those leads and store the updated lead information in AirTable.

When a lead submits a Typeform your Airtable Base is instantly populated with lead's data gathered by Clearbit.

To do this, we'll be using Standard Library's simple API-centric cloud platform and the online editor for APIs, Code.xyz - if you're not familiar with APIs yet, don't fret! All we mean is you'll be writing a little bit of your own custom business logic.

Marketers, CSMs, Sales Executives, this one's for you! 😉

What You'll Need Beforehand

1x Typeform free account - A platform for building dynamic online forms including landing pages, polls, quizzes and more.
1x Clearbitfree account - Clearbit's Enrichment API takes an e-mail and returns a person's employment, title, website, Linkedin and more.
1x Airtable free account - AirTable is a combination of a spreadsheet & database.
1x Standard Library free account - A Platform for building and deploying APIs, linking software tools, powering Slack apps, automating tasks, and more. 
5x minutes (300x seconds) of your time - These tools, used together, will save you hours of work!

How it Works🤓

When a lead submits his/her e-mail via your embedded Typeform, a webook will trigger an API you've built on Standard Library that sends a notification via HTTP POST request. The request body (containing the response data from Clearbit's Enrichment API) will be sent in JSON format to populate your Airtable base.

So let's get to it!

Minute 1: Fire Up Code.xyz From your Browser

We will link Typeform, Clearbit, and Airtable via Code.xyz - the online API editor built by the team at Standard Library. You'll be deploying your function to Standard Library with zero setup or installations on your local machine.

Once you've logged in to Code.xyz, click on the "Community API Sources."

Find and select "typeform-clearbit-airtable by @JanethL."

Make sure to give your API a unique name, for example:

Once loaded, you will be taken to the __main__.js located under the functions directory (folder). This is the code that will connect your Typeform to Clearbit's Enrichment API and to Airtable. Once it is deployed live onto Standard Library, an https url endpoint is generated. You'll need the endpoint to set your webhook on Typeform. But let's not get too far ahead - first, we need to finish setting up your Standard Library API with your unique Clearbit and Airtable keys.

Open up the env.json file. You'll see three different variables:

Let's start by finding your Clearbit API key.

Minute 2: Copy and Paste Your Clearbit API Key

First you'll want to log in, or sign up for a free Clearbit account at https://clearbit.com/.

Note that below your keys, Clearbit has suppression settings to exclude certain contacts from your enrichment project to satisfy *(GDPR)*.

Now return to Code.xyz and populate the "CLEARBIT_API_KEY": variables inside env.json. We now have two remaining variables to populate. 

Minute 3: Find Your API Keys on Airtable

Once you've logged in or signed up for Airtable, select the account icon on the top right corner to see your account information. Click generate API key and copy and paste that key into "AIRTABLE_API_KEY": "" inside your env.json file.

Now, for the last variable, click the link below and once routed to my Airtable Base sample, select Copy base on the upper right corner. It's your base now!

https://airtable.com/invite/l?inviteId=invcdodb7YgOFx7uS&inviteToken=540e9ae9d02ff30b0c089aab4efa8db6d426cdcd42c61f67b25a820fa98ca3ce

Once you've added a copy of my base onto your workspace, enter your "LeadGenerator" base. On the upper right corner click Help and then select API documentation.

Find and select your Airtable base key as I have done in the screenshot:

After you've copied and pasted your Base's key into your env.json, your env.json file should look like this:

You are finally ready to deploy your API to Standard Library. Return to the __main__.js file and hit the green "Run" button on the bottom right corner.

We see a Parameter Error. Don't worry - this is normal. This notification means that we expect this API / webhook response to accept parameters we haven't provided in this test run (event_type and form_response). They'll be provided by the Typeform Webhook automatically.

Notice that Standard Library has automatically generated an API endpoint url underneath the RESULTS area.

Copy that https endpoint, we will need it to set a web-hook on Typeform.

Minute 4: Set a Webhook on Typeform 

Head over to Typeform to bring your lead generator to Life.

Once you've logged in or signed up, select ** "New typeform" ** from the dashboard. Find and select the "Contact Form" template.

For now, let's use this template as is; you can return at anytime to modify the style and questions to your liking. Select "Integrate" on the top menu.

Navigate to the upper middle tab and select "Integrate" and then ** "WEBHOOKS".**  

Input your API's endpoint url onto the Destination URL and toggle the "Webhooks" button on.

Minute 5: Test Your Lead Generator

Your Lead Generator is ready to test! Select the "View" button on the upper right corner of your Typeform. 

Input a valid e-mail to test it out and answer the sample questions. If you've linked up Typeform, Clearbit, and Airtable properly your Airtable Base should automatically populate:

*That's it! * 🤗
Thank you for taking the time to read and try this out! If you found this tutorial helpful please let me know! If you'd like to connect Clearbit, Typeform, and Airtable to any other tools or software, please reach out- I'd love to help. Just drop your name, e-mail, and request in the Typeform below and I'll get back to you as soon as possible!

Click here to be routed to my Typeform

Janeth is the Community Manager for Standard Library and UC Berkeley grad- go bears! 🐻 She speaks Spanish, English, Arabic and a little JavaScript 😉

Posted on by:

mss_ledezma profile

Janeth

@mss_ledezma

Janeth is the Community Manager for StdLib and recent graduate from UC Berkeley - go bears! When she isn't learning Javascript, the Arabic language, or working out, you can find her riding her R3.

Discussion

pic
Editor guide
 

Hi,

Wasn't able to get Typeform to connect with StdLib following the steps above; I'm getting a 501 error in Typeform?

{
"error": {
"type": "ParameterError",
"message": "One or more parameters provided did not match the function signature",
"details": {
"event_type": {
"message": "required",
"required": true
},
"form_response": {
"message": "required",
"required": true
}
}
}
}

Not sure what the issue is.

 

Hi John,

It's actually now easier to create this workflow with our workflow Builder - build.stdlib.com.

As you select the API's you want to work with we will autogenerate the code for you (the code will be made available for you to edit as well).

Once you have prepped you Typeform and your Airtable base go to Build.Stdlib.com and set up the following workflow.

 

Hi Janeth

Can you please elaborate on what fields I need to enter to get this running?

I've connected all 3 API (Typeform, Clearbit, Airtable) to Stdlib via the Builder.

Not sure which dropdown to choose when I get to 'Run a Test Event'

  1. For Clearbit is the correct selection 'Retrieve a Person by email address'? Can you tell me the name of the event I need send it? (e.g. ${event.form_response.answers[0]} is not working)

  2. For Airtable, is the correct selection 'Insert a row into a base'? Likewise, can you tell me the name of the table and fields I need to send it? There's a ton from the dropdown menu.

Attached photo to show where I am stuck.

Thanks!

Hi John,

I can actually provide live help from Slack. Are you able to join our Slack community channel for Standard Library Developers? You can join via the invite link on our main page (stdlib.com) under the "Community" tab

Sure but I'm having trouble getting on Slack; there was an invite link but that disappeared and now getting a popup top right saying "Sorry there's something wrong talking to Slack API, Please try again later"

Would you mind emailing me (janeth@stdlib.com) with your Standard Library username and the email connected to your account? Thanks

 

Hey John,

I never heard back from you. But here is an updated version of the Lead Generator Tutorial:

medium.com/@janeth_10755/how-to-au...?

I hope you find it helpful.

Let me know if you have any questions.

My Best,

 

Hi,

Great article! Thank you.

Although the airtable link seems to have broken. Could you help?

 

Updated! Sorry about that and thanks for the heads up.