Integrating Airtable API with form submission - getting field validation errors

[ryanl]

I’m working on connecting my contact form to Airtable’s API but keep running into issues. When I submit the form, I get this error message: {"error":{"type":"INVALID_REQUEST_MISSING_FIELDS","message":"Could not find field \"fields\" in the request body"}}

I’m pretty new to JavaScript and Airtable integration, so I might be missing something basic. Using React with axios for the API calls.

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"),
                    "EmailAddress": document.getElementById("#user-email"),
                    "PhoneNumber": document.getElementById("#phone"),
                    "Subject": document.getElementById("#message-subject"),
                    "MessageText": document.getElementById("#user-message"),
                    "Source": "Website"
                }
            })
            .then(function(result) {
                console.log(result);
            })
            .catch(function(err) {
                console.log(err);
            })
    })
};

What am I doing wrong with the request structure? Any help would be great!

[Ryan_Innovative]

Had this exact problem when I started with Airtable’s API. Your axios call has the parameters in the wrong order - data should be second, then config with headers third. Plus you’re passing DOM elements instead of their values. Here’s the fix:

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

I removed the hashtags from getElementById and added .value to grab actual input values instead of the DOM elements.

[SpinningGalaxy]

yeah, drop the hashtags from your getElementById calls - those are for css selectors, not getElementById. also double-check your airtable base url has the table name at the end.