APPS SCRIPT
```
function doPost(e) {
try {
const sheet = SpreadsheetApp.openById('1aRa56pZPuToeBgdJZ-ldFdWhzoC7rlnGsJMRGbhatiA').getActiveSheet();
const formData = e.parameter;
sheet.appendRow([
new Date(),
formData.firstName,
formData.lastName,
formData.company === 'Optional' ? '' : formData.company,
formData.contactNumber,
formData.houseNumber,
formData.postcode,
formData.streetName,
formData.contactType,
formData.inquiry
]);
// Update the last modified timestamp
SpreadsheetApp.flush();
const now = new Date();
sheet.getRange(1, 1).setValue(now).clear();
// Create the redirect HTML content
var output = HtmlService.createHtmlOutput(
'<html><body><script>window.top.location.href = "https://mydomain.com/form-received";</script></body></html>'
);
// Add CORS headers to the response
output.addMetaTag('Access-Control-Allow-Origin', '*');
output.addMetaTag('Access-Control-Allow-Methods', 'POST, OPTIONS');
output.addMetaTag('Access-Control-Allow-Headers', 'Content-Type');
return output;
} catch (error) {
// In case of an error, redirect to the error page
var output = HtmlService.createHtmlOutput(
'<html><body><script>window.top.location.href = "https://mydomain.com/form-error";</script></body></html>'
);
return output;
}
}
function doOptions(e) {
Logger.log('OPTIONS request received'); // Log if OPTIONS request is received
var headers = {
'Access-Control-Allow-Origin': '*', // Allow all origins
'Access-Control-Allow-Methods': 'POST, OPTIONS',
'Access-Control-Allow-Headers': 'Content-Type'
};
var output = ContentService.createTextOutput('');
output.setMimeType(ContentService.MimeType.JSON); // Make sure to return JSON response
return output.setContent(JSON.stringify(headers)); // Send the CORS headers
}
```
======
Form and form script
```
<body>
<form id="contactForm" enctype="multipart/form-data">
<label for="firstName">First Name *</label>
<input type="text" id="firstName" name="firstName" placeholder="Enter your first name" required>
<label for="lastName">Last Name</label>
<input type="text" id="lastName" name="lastName" placeholder="Enter your last name">
<label for="company">Company</label>
<input type="text" id="company" name="company" value="Optional" class="optional-field">
<label for="contactNumber">Contact Number</label>
<input type="text" id="contactNumber" name="contactNumber" placeholder="Enter your contact number">
<div class="inline-fields">
<input type="text" id="houseNumber" name="houseNumber" placeholder="House Number">
<input type="text" id="postcode" name="postcode" placeholder="Postcode">
</div>
<label for="streetName">Street Name</label>
<input type="text" id="streetName" name="streetName" placeholder="Enter your street name">
<label for="contactType">Contact Type *</label>
<select id="contactType" name="contactType" required>
<option value="">-- Select --</option>
<option value="Customer">Customer</option>
<option value="Supplier">Supplier</option>
<option value="Other">Other</option>
</select>
<label for="inquiry">Your Inquiry</label>
<textarea id="inquiry" name="inquiry" rows="5" placeholder="Enter your inquiry here..."></textarea>
<button type="submit" id="submitButton">Submit</button>
<div id="formStatus"></div>
</form>
<script>
document.addEventListener('DOMContentLoaded', function() {
const form = document.getElementById('contactForm');
const formStatus = document.getElementById('formStatus');
const submitButton = document.getElementById('submitButton');
const scriptURL = 'https://script.google.com/macros/s/REMOVED/exec';
const companyField = document.getElementById('company');
companyField.addEventListener('focus', function() {
if (this.value === 'Optional') {
this.value = '';
this.classList.remove('optional-field');
}
});
companyField.addEventListener('blur', function() {
if (this.value === '') {
this.value = 'Optional';
this.classList.add('optional-field');
}
});
form.addEventListener('submit', e => {
e.preventDefault();
submitButton.disabled = true;
submitButton.textContent = 'Submitting...';
formStatus.style.display = 'none';
fetch(scriptURL, {
method: 'POST',
mode: 'cors',
headers: {
'Content-Type': 'application/x-www-form-urlencoded'
},
body: new URLSearchParams(new FormData(form)).toString()
})
.then(response => {
if (!response.ok) {
throw new Error('Network response was not ok: ' + response.statusText);
}
return response.json(); // Parse the JSON response
})
.then(data => {
console.log('Form submission initiated:', data);
// Redirect on successful submission
window.location.href = "https://mydomain.com/form-received"; // Example redirect
})
.catch(error => {
console.error('Error!', error);
formStatus.className = 'error';
formStatus.textContent = 'Network error occurred. Please check your connection and try again.';
formStatus.style.display = 'block';
submitButton.disabled = false;
submitButton.textContent = 'Submit';
});
});
});
</script>
</body>
```
LinkedIn
Twitter
