POST data to the API

Now that our form is ready we can use it to send data to the sheet. To connect the form with the sheet.,

1. Add the following attributes to the form tag.

<form method="POST" id="sheetdb-form" action="Your_API_URl">

2. Add the following javascript code.

<script>
        var form = document.getElementById('sheetdb-form');
        form.addEventListener("submit", e => {
            e.preventDefault();
            fetch(form.action, {
                method: "POST",
                body: new FormData(document.getElementById("sheetdb-form")),
            }).then(
                response => response.json()
            ).then((html) => {
                alert('Data Sent Successfully')
            });
        });
</script>

3. Change the name attribute of the input tags to data[ Column_Header_name ].

For example if you column header in the sheet is NAME, change the name attribute to data[NAME].

If you have done everything right the data you enter in the HTML form will appear in your google sheet.

Congratulations!! You've successfully connected your form to the sheet.😎