Integrating Airtable as a database for form submissions

Other Questions Airtable
1

Hey everyone! I’m new to JavaScript and Airtable. I’m trying to use Airtable as a database for my React project’s form submissions. I’m using axios to make API calls, but I’m running into some issues.

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 my current code:

const formHandler = document.querySelector('#contact-us');

if (formHandler) {
  formHandler.addEventListener('submit', (e) => {
    e.preventDefault();
    
    axios.post(airtableEndpoint, 
      {
        'Content-Type': 'application/json'
      },
      {
        fields: {
          Name: document.getElementById('#FullName'),
          EmailAddress: document.getElementById('#EmailInput'),
          PhoneNumber: document.getElementById('#PhoneInput'),
          Subject: document.getElementById('#TopicInput'),
          MessageContent: document.getElementById('#MessageInput'),
          Source: 'Website'
        }
      }
    )
    .then(res => console.log(res))
    .catch(err => console.log(err));
  });
}

Can anyone spot what I’m doing wrong? I’d really appreciate some help!

2

As someone who’s worked extensively with Airtable and React, I can share a few insights that might help you out. The error you’re seeing is common when the API doesn’t receive the data in the format it expects.

One thing I’ve learned is that Airtable’s API is quite particular about the structure of the data you send. Make sure your ‘fields’ object is directly in the request body, not nested under another key.

Also, don’t forget to include your API key in the headers. It’s easy to overlook, but crucial for authentication. Something like this has worked well for me:

axios.post(airtableEndpoint,
{ fields: { /* your fields here */ } },
{
headers: {
‘Authorization’: Bearer ${YOUR_API_KEY},
‘Content-Type’: ‘application/json’
}
}
)

Lastly, consider using a try-catch block for better error handling. It’s saved me countless hours of debugging. Keep at it - integrating Airtable with React can be tricky at first, but it’s incredibly powerful once you get it working!

3

hey finn, looks like ur axios post syntax is off. try switchin the 2nd and 3rd args:

axios.post(airtableEndpoint,
{
fields: {
// ur form fields here
}
},
{
headers: {‘Content-Type’: ‘application/json’}
}
)

also, use .value to get input values. hope this helps!

4

I noticed a couple of issues in your code that might be causing the error. Firstly, the axios.post() method syntax needs adjustment. The data object should be the second argument, followed by the config object with headers.

Secondly, when accessing form input values, you need to use .value and remove the ‘#’ from the getElementById calls. Here’s a corrected version:

axios.post(airtableEndpoint, 
  {
    fields: {
      Name: document.getElementById('FullName').value,
      EmailAddress: document.getElementById('EmailInput').value,
      PhoneNumber: document.getElementById('PhoneInput').value,
      Subject: document.getElementById('TopicInput').value,
      MessageContent: document.getElementById('MessageInput').value,
      Source: 'Website'
    }
  },
  {
    headers: {'Content-Type': 'application/json'}
  }
)

These modifications should resolve the ‘INVALID_REQUEST_MISSING_FIELDS’ error you’re encountering. Let me know if you need any further clarification.