Created
January 3, 2025 16:48
How to Save Websites' Contact Form Data to Google Sheets
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
How to Save Websites' Contact Form Data to Google Sheets | |
bpwebs.com |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
function doPost(e) { | |
const sheet = SpreadsheetApp.getActiveSpreadsheet().getSheetByName("Contact Form Responses"); | |
//Ensure the sheet exists | |
if(!sheet){ | |
throw new Error("Sheet named 'Contact Form Responses' dpes not exists."); | |
} | |
//Parse the incoming POST data | |
const data = JSON.parse(e.postData.contents); | |
// Append form data to the sheet | |
sheet.appendRow([data.name, data.email, data.message, new Date()]); | |
return ContentService.createTextOutput("Success").setMimeType(ContentService.MimeType.TEXT); | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!DOCTYPE html> | |
<html lang="en"> | |
<head> | |
<meta charset="UTF-8"> | |
<meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
<title>Contact Us</title> | |
<link rel="stylesheet" href="styles.css"> | |
</head> | |
<body> | |
<div class="form-container"> | |
<h2>Contact Us</h2> | |
<form id="contact-form"> | |
<input type="text" id="name" placeholder="Your Name" required /> | |
<input type="email" id="email" placeholder="Your Email" required /> | |
<textarea id="message" placeholder="Your Message" rows="5" required></textarea> | |
<button type="submit">Submit</button> | |
</form> | |
<p id="response-message"></p> | |
</div> | |
<script src="script.js"></script> | |
</body> | |
</html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
const form = document.getElementById('contact-form'); | |
const responseMessage = document.getElementById('response-message'); | |
form.addEventListener('submit', async (event) => { | |
event.preventDefault(); | |
const formData = { | |
name: document.getElementById('name').value, | |
email: document.getElementById('email').value, | |
message: document.getElementById('message').value | |
}; | |
try { | |
const response = await fetch('YOUR_WEB_APP_URL', { | |
method: 'POST', | |
body: JSON.stringify(formData) | |
}); | |
if (response.ok) { | |
responseMessage.textContent = 'Thank you! Your message has been sent.'; | |
form.reset(); | |
} else { | |
responseMessage.textContent = 'Error submitting the form. Please try again.'; | |
} | |
} catch (error) { | |
responseMessage.textContent = 'An error occurred. Please try again.'; | |
} | |
}); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
body { | |
font-family: Arial, sans-serif; | |
margin: 20px; | |
padding: 0; | |
background-color: #f4f4f9; | |
} | |
.form-container { | |
max-width: 400px; | |
margin: 0 auto; | |
padding: 20px; | |
background: white; | |
border-radius: 5px; | |
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); | |
} | |
input, textarea { | |
width: 100%; | |
margin-bottom: 15px; | |
padding: 10px; | |
border: 1px solid #ddd; | |
border-radius: 3px; | |
} | |
button { | |
width: 100%; | |
padding: 10px; | |
background-color: #007bff; | |
border: none; | |
color: white; | |
border-radius: 3px; | |
cursor: pointer; | |
} | |
button:hover { | |
background-color: #0056b3; | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment