Good Sheet.
Good Sheet.

    Submit a form with HTML

    This guide requires a Good Sheet account

    You can get started with Good Sheet for free! Create an account to follow along.

    Step 1 - Create a new Sheet

    The first thing we need to do is have Good Sheet create a new Google Spreadsheet in Google Drive. Then, Good Sheet will create a connection with it in your dashboard. We call this a “connection.”

    To do this, on your Good Sheet dashboard, click the “New Connection” button.

    New Connection Button

    You should now see the following form.

    New Connection Form

    Fill out the Spreadsheet Name, Sheet Name, and the Headers you would like for the columns in your spreadsheet.

    Spreadsheet Name
    The name Good Sheet will give your Google Sheet in Google Drive
    Sheet Name
    The name Good Sheet will display in your dashboard
    Headers
    The names you want for the column headers in your Google Sheet, which will also be used by the HTML form

    Now, we should have a new connection in our dashboard.

    New Connection Form

    Step 2 - Create an HTML form

    Click on your Good Sheet connection to open the settings page. By default, Good Sheet provides a simple example you can copy & paste to use right away, under the “Basic” tab.

    New Connection Form

    Feel free to modify the input types in this form, for your website. For example, you might replace type="text" with type="email" for an email field, which will inform the web browser to perform some basic email validation.

    <form action="#" method="POST">
  <label name="First Name">First Name</label>
  <input type="text" name="First Name" placeholder="First Name" />

  <label name="Last Name">Last Name</label>
  <input type="text" name="Last Name" placeholder="Last Name" />

  <label name="Email">Email</label>
  <input type="email" name="Email" placeholder="Email" />

  <label name="Message">Message</label>
  <input type="text" name="Message" placeholder="Message" />

  <input type="submit" value="Submit" />
</form>

    Form input types

    For guidance on which input field types are appropriate, check out Mozilla’s Form Input documentation.

    Step 3 - Put the HTML Form on your website

    Paste the form in the appropriate location on your website, somewhere within the <body></body> tags.

    To test your form, submit to it from your website. In your Good Sheet dashboard, you will see the total submission count has increased!

    New Connection Form

    You can find a link to your Google Sheet on the dashboard. Click it to view your submission data.

    New Connection Form

    In your Google Sheet, you will see the submission timestamp as the first column, followed by the columns you created!

    New Connection Form

    Prev
    Introduction to Good Sheet
    Next
    Custom Redirect URL