Connect HTML Forms to Sheet

Using Expedite, you can directly link a form to a Google Sheet.

Just 3 quick steps:

Create an HTML <form>
Set your API URL as its data-stein-url attribute. You can access your API URL from the Stein Dashboard.
Set the name attributes of the input fields to their respective column names.

Example

Here, we create a form to add blog posts to our Google Sheet.

<!--- Add post to Google Sheet --->
<form
  data-stein-url="https://api.steinhq.com/v1/storages/5cc158079ec99a2f484dcb40/Sheet1"
>
  <!--- Notice that the name attribute is set to the column name -->
  <input placeholder="Title" name="title" />
  <input placeholder="Author Name" name="author" />
  <input type="url" placeholder="Link to Post" name="link" />
  <textarea placeholder="Summary" name="content" rows="5"></textarea>
  <button type="submit">Submit</button>
</form>

Optional: Handle event on receiving the response

When the form is submitted and the API response is received, the event ResponseReceived is dispatched on the form. The event object has the detail property set to the response.

form.addEventListener("ResponseReceived", event => {
  console.log(event.detail.status); // { status: <HTTP Status Code>,  body: ... }
});

Additionally, here's a complete example that handles the response event.