Save Data from Web Forms to Spreadsheets

Set up a contact form in an HTML file 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: How the form will look 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. See Code For Private The contact form has 4 fields. Pay attention to the name attribute of the 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: full_name, line 29 This will be a text field with the full name of the person email, line 33 This will be a text field with the email of the person age, lines 37-38 This will be a radio selection field with two age options. 18–35 and 35+. We will denote them in the value attribute of the radio fields message, line 42 This will be a textarea that will contain the message the person types All four tags will be inside a 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 (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 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: full_name, line 31 This will be a text field with the full name of the person email, line 35 This will be a text field with the email of the person age, lines 39-40 This will be a radio selection field with two age options. 18–35 and 35+. We will denote them in the value attribute of the radio fields message, line 44 This will be a textarea that will contain the message the person types All four tags will be inside a 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 (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. Prepare your Google Sheet or Spreadsheet that the data will be saved to 1. Create a blank Google Sheet or Spreadsheet 2. Write column headers equal to the name(s) of the 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 Get your API URL from API Spreadsheets 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 You only need to do this for a Private API Configure the Javascript to submit data from the form 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 tags See Code For Private

Still puzzling over something?