Integrating Airtable API for backend form submissions

Other Questions Airtable
1

I’m trying to set up Airtable as the backend for a submission form in my project, but I’m having trouble with the API integration. After I submit the form, I’m encountering this error: {"error":{"type":"INVALID_REQUEST_MISSING_FIELDS","message":"Could not find field \"fields\" in the request body"}}

As I’m quite new to JavaScript and Airtable, I might have overlooked something simple. Here’s my form submission code:

var form = document.querySelector("#bize-ulasin");
if(form) {
    form.addEventListener("submit", function(event) {
        event.preventDefault();
        axios.post(airtable_write_endpoint, 
            {
                "Content-Type": "application/json"
            },
            {
                "fields": {
                    "AdSoyad": document.getElementById("#Ad-Soyad").value,
                    "Email": document.getElementById("#Email").value,
                    "Telefon": document.getElementById("#Telefon").value,
                    "Konu": document.getElementById("#Konu").value,
                    "Mesaj": document.getElementById("#Mesaj").value,
                    "Ortam": "Websitesi"
                }
            })
            .then(function(response) {
                console.log(response);
            })
            .catch(function(error) {
                console.log(error);
            })
    });
};

Can someone please help me identify what I might be doing wrong?

2

Your axios call has the parameters in the wrong order. The second parameter should be your data object, not headers. Right now you’re passing headers as data and your actual data as the third parameter, which axios treats as config options.

Restructure it like this:

axios.post(airtable_write_endpoint, 
    {
        "fields": {
            "AdSoyad": document.getElementById("Ad-Soyad").value,
            "Email": document.getElementById("Email").value,
            // ... rest of your fields
        }
    },
    {
        headers: {
            "Content-Type": "application/json",
            "Authorization": "Bearer YOUR_API_KEY"
        }
    }
)

I also removed the # symbols from your getElementById calls - you only need those for CSS selectors, not when accessing elements by ID. Don’t forget to include your Airtable API key in the Authorization header.

3

Hit this exact issue last year building an internal feedback form. That error’s misleading - it’s not about a missing “fields” key, it’s your parameter order that’s wrong.

You’ve got your axios syntax mixed up. Headers are going where data should be. Here’s the fix:

axios.post(airtable_write_endpoint, {
    "fields": {
        "AdSoyad": document.getElementById("Ad-Soyad").value,
        "Email": document.getElementById("Email").value,
        "Telefon": document.getElementById("Telefon").value,
        "Konu": document.getElementById("Konu").value,
        "Mesaj": document.getElementById("Mesaj").value,
        "Ortam": "Websitesi"
    }
}, {
    headers: {
        "Content-Type": "application/json",
        "Authorization": "Bearer YOUR_PERSONAL_ACCESS_TOKEN"
    }
})

Ditch those # symbols in getElementById - that’s querySelector syntax, not getElementById.

Double-check your Airtable field names match your base exactly. Case sensitivity will bite you.

4

Hit this exact issue a few months ago with my contact form and Airtable. That error message is misleading - it’s not about missing “fields”, it’s your axios structure that’s wrong. You’ve got headers as the second parameter where data should be, pushing your actual data to the third position where axios expects config. Airtable never sees your fields object. Fix: move data to the second parameter, wrap headers in a config object for the third parameter. Also, double-check your endpoint URL has the right base ID and table name - I wasted hours on a typo in my base ID.

5

Your axios parameters are in the wrong order - that’s what’s breaking it. I hit the same wall when I started with Airtable’s API since their error messages don’t tell you much. You’re putting your data in the config spot instead of the request body. Fix it like this: data object goes second, headers third as a config object. Double-check your base URL has the right base ID and table name. Also make sure every field name in your “fields” object matches exactly what’s in your Airtable base - even tiny differences in caps or spacing will kill the request. What saved me was logging the actual request to see if it matched Airtable’s expected format. Their API docs show exactly what JSON structure you need for creating records.

6

had the same issue with airtable’s api! your axios.post parameters are in the wrong order - it should be axios.post(url, data, config). you’ve got the data and headers swapped. also, drop those # symbols from getElementById and make sure your api key is actually working.