Save Form Data In Google Spreadsheets

Hey users, Today we are going to discuss an interesting topic about saving your Web/HTML form data into Google Spreadsheets.

The Post credits goes to TANYA GUPTA.Lets check out the example.

STEP:1 

Create a HTML form using bootstrap or just copy the below code.

 

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
  
</head>
<body>
<div class="col-md-6 offset-md-3 d-flex align-items-center justify-content-center ">
<div class="form-data">
	<h1>Registration Form</h1>
	<form id="myForm">
		<div class="form-group">
			<label>Full Name</label>
			<input type="text" name="full_name" class="form-control" required>
		</div>
		<div class="form-group">
			<label>Email</label>
			<input type="email" name="email" class="form-control" required>
		</div>
		<div class="form-group">
			<label>Phone Number</label>
			<input type="number" name="phone_number" class="form-control" required>
		</div>
		<div class="form-group">
			<label>Country</label>
			<select class="form-control" required name="country">
				<option>India</option>
				<option>Italy</option>
				<option>Switzerland</option>
			</select>
		</div>
		<div class="form-group">
			<label>Message</label>
			<textarea class="form-control" required name="message"></textarea>
		</div>
		
	</form>
	<button onclick='SubForm()' class="form-control btn btn-primary">Submit</button>
</div>
</div>
</body>
</html>

STEP 2: 

Add CSS to the form created.You can add inline CSS in this inside head using style tag.

 

body, html {
    height: 100%;
    width: 100%;
    display: grid;
}
.form-data {
    padding: 50px;
    background: #fff;
    box-shadow: 0 0 12px #ddd;
    border-radius: 10px;
}

STEP : 3

Add JAVACRIPT

 

		function SubForm (){
			$.ajax({
				url:"https://api.apispreadsheets.com/data/16183/",
				type:"post",
				data:$("#myForm").serializeArray(),
				success: function(){
					alert("Form Data Submitted :)")
				},
				error: function(){
					alert("There was an error :(")
				}
			});
		}
	

STEP : 4

Now we need to get the URL of spreadsheet in which you would like to save the form data.For that follow the below steps one by one.

STEP 4-1

The first step you need to do is create a google spreadsheet from your gmail account and add the column names with the name attribute you gave in while creating the HTML Form & add them in the same sequence.

For Eg: In the above HTML i gave full_name,email,phone_number,country, message  in the name attribute for each field and in the same sequence.add the same in the spreadsheet.

STEP 4-2

After creating the spreadsheet go to the given URL i.e api spreadsheet and login to your account,or if there is no account create one.

URL : https://www.apispreadsheets.com/

After login you can see something like above.Now click on the googlesheets and upload your created spreadsheet.and you can see a some options choose what you want to do with that sheet uploaded then copy the url and paste it in the URL in the ajax code. 

Now run the form and fill in the details and submit, and check your spreadsheet, the saved data will be shown.

This is all about how you can save your form data in google spreadsheets using api spreadsheet.

Hope these questions help you crack your interview.All the best. If you like the article do share with your friends and colleagues which are looking for a job change.

For more updates:

Follow us on our Facebook page :
Facebook

Do Follow my Instagram page for more updates :
Instagram

 

Leave a Reply

Your email address will not be published. Required fields are marked *

The maximum upload file size: 2 MB. You can upload: image, document. Links to YouTube, Facebook, Twitter and other services inserted in the comment text will be automatically embedded.