Setting up Airtable API integration for form submissions

Other Questions Airtable
1

I’m working on a React project where I need to connect a contact form to Airtable using their API. I keep getting an error message that says the request is missing the “fields” parameter.

I’m pretty new to JavaScript and Airtable so I might be making a basic mistake. When I submit the form, I get this error:

{"error":{"type":"INVALID_REQUEST_MISSING_FIELDS","message":"Could not find field \"fields\" in the request body"}}

Here’s the code I’m using:

const contactForm = document.querySelector("#contact-form");
if(contactForm) {
  contactForm.addEventListener("submit", function(e) {
    e.preventDefault();
    
    axios.post(airtable_api_url, 
      {
        "Content-Type": "application/json"
      },
      {
        "records": [{
          "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(response => {
      console.log(response);
    })
    .catch(error => {
      console.log(error);
    });
  });
}

Can anyone spot what I’m doing wrong with the API call structure?

2

Had this exact problem when I started with Airtable’s API. That error message is super misleading - makes you think your fields are wrong when it’s actually your request format. You’ve got your axios parameters backwards. You’re putting headers where the data should go and data where config should be. Fix: axios.post(url, dataObject, configObject). Records go in the second spot, headers get wrapped in a config object for the third. Also make sure you’ve got your Authorization header with the API key - Airtable won’t let you write without it. Fix the parameter order and you’re good to go.

3

Having worked with Airtable’s API for some time, I can relate to the trouble you’re experiencing. It looks like you’ve put the parameters in the wrong order with axios. The correct structure is axios.post(url, requestBody, configWithHeaders), where your records object is the second parameter and your headers are in a separate config object as the third. It’s easy to overlook this, especially for those new to the API.

Additionally, ensure that your API key has the necessary write permissions for your base, as lack of proper authorization can also lead to similar messages. Lastly, double-check that your field names exactly match those in your Airtable base schema, including spaces and special characters, since Airtable is quite particular about these details.

4

you’ve got your axios parameters backwards. data goes in the second param, headers in the third. switch them around - put your records obj second and the content-type header third. that’s prob why it can’t find the fields.

5

Your axios call is backwards. You’ve got headers where data should be and data where config should be. It should be axios.post(url, data, config) with headers inside config. Also check your airtable_api_url - it needs your base ID and table name like https://api.airtable.com/v0/YOUR_BASE_ID/YOUR_TABLE_NAME. And make sure you’ve got Authorization: Bearer YOUR_API_KEY in your headers. I made the exact same mistake when I started with Airtable. That parameter order gets everyone.