Skip to content
Advertisement

Create a row in an airtable base from static html form

I have a static landing page, and would like to create a simple waitlist in airtable using only plain html/javascript.

I created a simple form on my landing page, that only accepts an e-mail. After pressing “submit” button, I would like to post this e-mail to my airtable base. I guess it can be done by a simple POST request.

Does anyone have an example for this?

Advertisement

Answer

You could do this, but doing so would require you to expose your Airtable API key in the public facing HTML page which is not recommended. Anyone could find that key in your page and then use it.

You can make a POST request to create a new record in a base. To make it successfully, you need:

  1. Your API key
  2. Base ID
  3. Table ID for the specific table you want records to be created in

You can see https://airtable.com/api for more details. The fetch code would looks something like:

var myHeaders = new Headers();
myHeaders.append("Authorization", `Bearer ${YOUR_API_KEY}`);
myHeaders.append("Content-Type", "application/json");

var data = {
  fields: {
    Email: `${email_in_form_submission}`
  }
}
var raw = JSON.stringify(data);

var requestOptions = {
  method: 'POST',
  headers: myHeaders,
  body: raw,
  redirect: 'follow'
};

fetch(`https://api.airtable.com/v0/${YOUR_BASE_ID}/${YOUR_TABLE_ID}`, requestOptions)
  .then(response => response.text())
  .then(result => console.log(result))
  .catch(error => console.log('error', error));

Airtable Forms

Would also recommend looking at Airtable’s native Form Views which allow you to create a public facing form that people can submit and have the data go directly into your base. The forms can also be embedded as iframes if you want to insert the form on a page you own and control.

Advertisement