Integrating Airtable with my submission form - API error troubleshooting

Other Questions Airtable
1

I’m developing a web project where I want to use Airtable as the backend for my submission form. Unfortunately, I’m encountering an API integration issue where it states that I’m missing some necessary fields in my request. I’m quite new to JavaScript as well as Airtable.

The error I keep getting is: {"error":{"type":"INVALID_REQUEST_MISSING_FIELDS","message":"Could not find field \"fields\" in the request body"}}

Here’s the code I’ve written so far:

var submissionForm = document.querySelector("#submission-form");
if(submissionForm) {
  submissionForm.addEventListener("submit", function(e) {
    e.preventDefault();
    
    axios.post(apiEndpoint, 
      {
        "Content-Type": "application/json"
      },
      {
        "fields": {
          "Name": document.getElementById("#name-input"),
          "Email": document.getElementById("#email-input"),
          "Phone": document.getElementById("#phone-input"),
          "Topic": document.getElementById("#topic-input"),
          "Message": document.getElementById("#message-input"),
          "Source": "Website"
        }
      })
      .then(function(response) {
        console.log(response);
      })
      .catch(function(error) {
        console.log(error);
      });
  });
}

Could someone assist me in identifying what might be wrong with the request structure?

2

yep, looks like your axios params r swapped. the data should be first, and headers in the second obj. also, u need to use .value on each getElementById to get the actual input values. that might be why Airtable’s missing the fields.

3

Had this exact problem a few months ago with a contact form. You’ve got two issues here. First, yeah, swap the data and config objects in your axios call like everyone said. But here’s what almost made me lose my mind debugging - you’re passing DOM elements instead of values. When you use document.getElementById("name-input") without .value, you’re literally sending the HTML element to Airtable, not what the user typed. Also, drop that extra # in your getElementById calls. If your HTML ID is “name-input”, don’t add the “#” - that’s CSS selector stuff, not what getElementById wants. Pro tip: console.log your data object before sending it. If you see “[object HTMLInputElement]” instead of actual form values, you’ll know what’s wrong immediately. This trick saves me tons of time on API bugs now.

4

Two problems here. First, you’re missing .value on your getElementById() calls - you’re not actually grabbing the form data.

Second, your axios setup is wrong. Data goes first, then the config with headers.

Here’s the fix:

axios.post(apiEndpoint, 
  {
    "records": [{
      "fields": {
        "Name": document.getElementById("name-input").value,
        "Email": document.getElementById("email-input").value,
        "Phone": document.getElementById("phone-input").value,
        "Topic": document.getElementById("topic-input").value,
        "Message": document.getElementById("message-input").value,
        "Source": "Website"
      }
    }]
  },
  {
    headers: {
      "Authorization": "Bearer YOUR_API_KEY",
      "Content-Type": "application/json"
    }
  }
)

You need that records array wrapper - Airtable won’t accept requests without it. Also ditch the # in your getElementById calls unless your IDs actually have it.

I’ve been there with Airtable’s API. Their docs make the request format way more confusing than it needs to be.