Hướng dẫn lấy dữ liệu từ form về Google Sheet sử dụng API

On By Phong

Video hướng dẫn lấy dữ liệu từ form về Google Sheet sử dụng API.

Link tạo API: https://sheetdb.io/

File HTML
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
	<link rel="stylesheet" href="style.css">
</head>
<body>
	<form action="https://sheetdb.io/api/v1/xb2tppvusd0i9" method="post" id="sheetdb-form">
  		<div class="container">
		    <h1>Sign Up</h1>
		    <p>Please fill in this form to create an account.</p>
		    <hr>

		    <label for="email"><b>Email</b></label>
		    <input type="text" placeholder="Enter Email" name="data[email]" required>

		    <label for="psw"><b>Password</b></label>
		    <input type="password" placeholder="Enter Password" name="data[psw]" required>

		    <label for="psw repeat"><b>Repeat Password</b></label>
		    <input type="password" placeholder="Repeat Password" name="data[psw repeat]" required>

		    <label>
		      <input type="checkbox" checked="checked" name="remember" style="margin-bottom:15px"> Remember me
		    </label>

		    <p>By creating an account you agree to our <a href="#" style="color:dodgerblue">Terms & Privacy</a>.</p>

		    <div class="clearfix">
		      <button type="button" class="cancelbtn">Cancel</button>
		      <button type="submit" class="signupbtn">Sign Up</button>
		    </div>
		  </div>
		</form>

			

</body>
</html>

File JS
			var form = document.getElementById('sheetdb-form');
			form.addEventListener("submit", e => {
				e.preventDefault();
				fetch(form.action, {
					method : "POST",
					body: new FormData(document.getElementById('sheetdb-form')),
				}).then(
					response => response.json()
				).then((html) => {
					window.open('d.html', '_blank');
				});
			});
			
File CSS
* {box-sizing: border-box}

/* Full-width input fields */
  input[type=text], input[type=password] {
  width: 100%;
  padding: 15px;
  margin: 5px 0 22px 0;
  display: inline-block;
  border: none;
  background: #f1f1f1;
}

input[type=text]:focus, input[type=password]:focus {
  background-color: #ddd;
  outline: none;
}

hr {
  border: 1px solid #f1f1f1;
  margin-bottom: 25px;
}

/* Set a style for all buttons */
button {
  background-color: #04AA6D;
  color: white;
  padding: 14px 20px;
  margin: 8px 0;
  border: none;
  cursor: pointer;
  width: 100%;
  opacity: 0.9;
}

button:hover {
  opacity:1;
}

/* Extra styles for the cancel button */
.cancelbtn {
  padding: 14px 20px;
  background-color: #f44336;
}

/* Float cancel and signup buttons and add an equal width */
.cancelbtn, .signupbtn {
  float: left;
  width: 50%;
}

/* Add padding to container elements */
.container {
  padding: 16px;
}

/* Clear floats */
.clearfix::after {
  content: "";
  clear: both;
  display: table;
}

/* Change styles for cancel button and signup button on extra small screens */
@media screen and (max-width: 300px) {
  .cancelbtn, .signupbtn {
    width: 100%;
  }
}