Issues connecting form submission to Airtable API

Other Questions Airtable
1

I’m working on a web application where I need to send form data to Airtable using their API. I keep getting an error message about missing fields in the request body. The error says: {"error":{"type":"INVALID_REQUEST_MISSING_FIELDS","message":"Could not find field \"fields\" in the request body"}}. I’m pretty new to working with APIs and JavaScript, so I might be making a basic mistake. Here’s the code I’m using:

var contactForm = document.querySelector("#contact-form");
if(contactForm) {
    contactForm.addEventListener("submit", function(e) {
        e.preventDefault();
        axios.post(airtable_api_url, 
            {
                "Content-Type": "application/json"
            },
            {
                "fields": {
                    "FullName": document.getElementById("full-name").value,
                    "EmailAddress": document.getElementById("email").value,
                    "PhoneNumber": document.getElementById("phone").value,
                    "Subject": document.getElementById("subject").value,
                    "Message": document.getElementById("message").value,
                    "Source": "Website"
                }
            })
        .then(function(res) {
            console.log(res);
        })
        .catch(function(err) {
            console.log(err);
        })
    })
};

Can someone help me figure out what’s wrong with my request structure?

2

You’ve mixed up your axios parameters. The second parameter should be your data, not headers.

You’re putting Content-Type where your data should go, and your form data is ending up as the third parameter.

Fix it like this:

axios.post(airtable_api_url, 
    {
        "fields": {
            "FullName": document.getElementById("full-name").value,
            "EmailAddress": document.getElementById("email").value,
            "PhoneNumber": document.getElementById("phone").value,
            "Subject": document.getElementById("subject").value,
            "Message": document.getElementById("message").value,
            "Source": "Website"
        }
    },
    {
        headers: {
            "Content-Type": "application/json",
            "Authorization": "Bearer YOUR_API_KEY"
        }
    }
)

Don’t forget your Airtable API key in the Authorization header. You’ll get auth errors without it, even if everything else is right.

I’ve done this same thing switching between HTTP libraries. They all order parameters differently.