How to submit form data to Airtable using vanilla JavaScript

Other Questions Airtable
1

I’m working on a basic HTML webpage and want to build an email collection system that sends data directly to my Airtable database. The setup is pretty straightforward - just a single input field for email addresses and a button to submit.

My goal is to capture visitor emails and automatically add them as new records in Airtable when someone clicks submit. I’m thinking this should work with a basic HTTP request, but I’m not sure about the exact implementation.

Has anyone successfully connected a plain HTML form to Airtable without using any frameworks? Looking for a working code example if possible.

2

Been there! Most people miss the CORS issue - browsers block direct API calls to Airtable from frontend code.

I hit this exact problem on a client project last year. Fixed it with a simple serverless function (Netlify Functions or Vercel) as a proxy between the form and Airtable.

Your JavaScript sends form data to your proxy endpoint, proxy makes the actual API call to Airtable. Keeps your API key secure too since it never hits the frontend.

The fetch call stays clean:

fetch('/api/submit-email', {
  method: 'POST',
  body: JSON.stringify({ email: emailValue })
})

Trying to call Airtable directly from vanilla JS just gives you CORS headaches. Trust me.

3

totally! i just finished this on my end. you’ll wanna get your api key and base id from airtable’s dashboard. then use fetch() to send a POST request to the endpoint. don’t forget to set the content-type in headers to application/json and stringify your data!

4

Hit this same issue six months back. Authentication got me first - you’ve gotta put your bearer token in the Authorization header. Here’s what fixed it for me: check you’re hitting the right table name in your base URL, and wrap your data with the “fields” object Airtable wants. Your endpoint needs to be https://api.airtable.com/v0/YOUR_BASE_ID/YOUR_TABLE_NAME. Response handling threw me too - Airtable sends back the created record data, so you can verify it worked by checking that response. And make sure your field names match exactly what’s in your base, caps and all.