Integrating Airtable as a database for form submissions

Other Questions Airtable
1

Hey everyone! I’m new to JavaScript and Airtable, and I’m trying to set up Airtable as a database for a form on my website. I’m using React and axios, but I’m having trouble with the API integration.

When I submit the form, I get this error in the browser:

Airtable 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 formHandler = (event) => {
  event.preventDefault();
  
  const formData = {
    name: document.querySelector('#name').value,
    email: document.querySelector('#email').value,
    phone: document.querySelector('#phone').value,
    subject: document.querySelector('#subject').value,
    message: document.querySelector('#message').value,
    source: 'Website'
  };

  axios.post(airtableEndpoint, {
    fields: formData
  }, {
    headers: { 'Content-Type': 'application/json' }
  })
  .then(response => console.log(response))
  .catch(error => console.log(error));
};

document.querySelector('#contact-form').addEventListener('submit', formHandler);

Can anyone spot what I’m doing wrong? Any help would be greatly appreciated!

2

yo ethan, i’ve done some airtable stuff before. looks like ur missing the ‘records’ bit in ur request. try changing ur axios call to:

axios.post(airtableEndpoint, {
records: [{ fields: formData }]
}, {
headers: {
‘Authorization’: Bearer ${YOUR_API_KEY},
‘Content-Type’: ‘application/json’
}
})

that should fix it. lmk if u need more help!

3

Having worked extensively with Airtable’s API, I can offer some insights. The issue likely stems from how you’re structuring the request body. Airtable expects a specific format for creating records.

Try restructuring your axios call like this:

axios.post(airtableEndpoint, {
  records: [{ fields: formData }]
}, {
  headers: {
    'Authorization': `Bearer ${YOUR_API_KEY}`,
    'Content-Type': 'application/json'
  }
})

This wraps your formData in a ‘records’ array, which is crucial. Also, ensure your airtableEndpoint is correct and includes the base ID and table name. Double-check your API key and permissions in Airtable as well.

If issues persist, consider logging the full response from Airtable, not just the error. This can provide more detailed debugging information.

4

Hey Ethan, I’ve been through a similar situation when I first started working with Airtable’s API. The error you’re getting suggests that the ‘fields’ object isn’t being properly recognized in your request.

From my experience, I found that Airtable’s API is quite particular about the structure of the data you send. Try modifying your axios post request like this:

axios.post(airtableEndpoint, {
  records: [{
    fields: formData
  }]
}, {
  headers: {
    'Authorization': `Bearer ${YOUR_API_KEY}`,
    'Content-Type': 'application/json'
  }
})

Notice that I’ve wrapped the ‘fields’ object in a ‘records’ array. This is because Airtable expects to receive an array of records, even if you’re only sending one.

Also, don’t forget to include your API key in the headers. Replace ${YOUR_API_KEY} with your actual Airtable API key.

If you’re still having issues after trying this, double-check that your airtableEndpoint is correct and that you have the necessary permissions set up in your Airtable base. Good luck with your project!