Adhaar Sharma on 2020-06-10
Okay, if you don’t know any HTML, then this might be a steep learning curve. The example is small so you should Google terms you don’t understand and it might make sense.
Let’s create a form in HTML. It’s a basic contact form and doesn’t contain any styling.
The form will look like this:
Open up a blank file in the text editor you use for programming, copy and paste the code below and save the file with a [.html] extension. We saved ours as ContactForm.html
We will walk through the HTML part now and the Javascript part later.
The contact form has 4 fields.
Pay attention to the name attribute of the <input> tags. These will be the column headers of our spreadsheet we save the data in and they MUST match up.
We are going to name the four input tags as follows. The lines refer to the line of code:
All four <input> tags will be inside a <form> tag (line 26) that we will give an id attribute of myForm. Do not give it any other id as the data submission to spreadsheet function that we will write later in Javascript is dependent on it.
Finally, our main component will be a <button> (line 47) that will be submitting the data. In its onclick attribute we are going to specify the function SubForm().
Again, do not give the function another name as we will be writing this exact function later in Javascript to handle submitting the data.
The contact form has 4 fields.
Pay attention to the name attribute of the <input> tags. These will be the column headers of our spreadsheet we save the data in and they MUST match up.
We are going to name the four input tags as follows. The lines refer to the line of code:
All four <input> tags will be inside a <form> tag (line 28) that we will give an id attribute of myForm. Do not give it any other id as the data submission to spreadsheet function that we will write later in Javascript is dependent on it.
Finally, our main component will be a <button> (line 49) that will be submitting the data. In its onclick attribute we are going to specify the function SubForm().
Again, do not give the function another name as we will be writing this exact function later in Javascript to handle submitting the data.
1. Create a blank Google Sheet or Spreadsheet
2. Write column headers equal to the name(s) of the <input> tags
Each time someone submits the data, it will save in the appropriate column.
This step is super important so make sure these headers are EXACTLY the same as the names of the input tags above.
3. Save this spreadsheet with any name you want
1. Sign up for an Account
• Click on Sign Up in the Navbar
• Sign up with your email and password
2. Upload Your Local File or Connect to the Google Sheets you created in Step 2
3. Copy the Create API URL for your file
Copy the API URL from the Create tab for your file and save it somewhere handy. We are going to be using this in the Javascript below to submit the data.
4. [Optional] If your API is Private you will also need to copy the Access and Secret Key and save them somewhere handy
We are going to use AJAX to submit the form. Again, if you are not familiar with Javascript, jQuery or AJAX, it might be a steep learning curve.
We are going to include the full HTML code here again. The Javascript part is within the <head> tags
1. Add jQuery from a CDN (lines 5-8)
We need to ensure the FULL jQuery library is included in our HTML to use AJAX.
2. Write the SubForm() function between two script tags (lines 9–23)
The SubForm() function is below. You will replace the URL below with the URL you obtained in Step 3. The rest of the function will remain the same.
We will go through this function in more detail at the end of this post but for now all you need to know is if the data was successfully saved an alert will pop up saying Form Data Submitted :) otherwise an alert will pop up saying There was an error :(.
That’s it! We have done everything needed to save data from our web form to our spreadsheet.
Now let’s test it out and see how to view our data.
1. Add jQuery from a CDN (lines 5-8)
We need to ensure the FULL jQuery library is included in our HTML to use AJAX.
2. Write the SubForm() function between two script tags (lines 9–25)
The SubForm() function is below. You will replace the URL below with the URL you obtained in Step 3. The rest of the function will remain the same.
We will go through this function in more detail at the end of this post but for now all you need to know is if the data was successfully saved an alert will pop up saying Form Data Submitted :) otherwise an alert will pop up saying There was an error :(.
That’s it! We have done everything needed to save data from our web form to our spreadsheet.
Now let’s test it out and see how to view our data.
1. Save your HTML file and open it in a browser to see the contact form
2. Fill out your form and click Submit
An alert window should pop up saying Form Data Submitted :)
If the alert window says There was an error :( then feel free to email us at info@apispreadsheets.com and we can try to help you out.
3. View your data in your spreadsheet or Google Sheet!!
If you are using Google Sheets, you can open your Sheet and it will have all the contact details!
If you are using a Spreadsheet, do the following:
If you have any further questions, feel free to email us at info@lovespreadsheets.com! We can’t wait to see what you build.
Check out our other tutorials!
Let us know what you think