Google Forms Limitations and an Alternative with Google Apps Script Custom Form
Google Forms Limitations and an Alternative with Google Apps Script Custom Form
Google Forms is widely used for data collection, but it has certain limitations. For advanced users looking for more flexibility and functionality, Google Apps Script Custom Forms can be a better alternative.
Limitations of Google Forms
1. Limited Customization:
2. Conditional Logic:
3. Lack of Interactive Features:
4. Static Data Output:
5. Dependence on Google Interface:
Alternative: Google Apps Script Custom Forms
Google Apps Script allows you to create fully customizable web-based forms. With HTML, CSS, and JavaScript, you can design forms tailored to your needs and directly link them to Google Sheets for data storage.
Example: Custom Form for Name, Mobile, Date of Birth, and Aadhaar Number
1. Form HTML (form.html)
<!DOCTYPE html>
<html>
<head>
<title>Custom Google Apps Script Form</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
background-color: #f9f9f9;
color: #333;
}
.container {
max-width: 600px;
margin: 50px auto;
padding: 20px;
background: white;
border-radius: 8px;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}
h1 {
text-align: center;
color: #4CAF50;
}
label {
font-weight: bold;
display: block;
margin-top: 15px;
}
input {
width: 100%;
padding: 10px;
margin: 10px 0;
border: 1px solid #ddd;
border-radius: 4px;
box-sizing: border-box;
}
button {
background-color: #4CAF50;
color: white;
padding: 10px 20px;
border: none;
border-radius: 4px;
cursor: pointer;
}
button:hover {
background-color: #45a049;
}
</style>
</head>
<body>
<div class="container">
<h1>Custom Form</h1>
<form id="customForm">
<label for="name">Name:</label>
<input type="text" id="name" name="name" required />
<label for="mobile">Mobile Number:</label>
<input type="tel" id="mobile" name="mobile" pattern="[0-9]{10}" title="Enter a valid 10-digit mobile number" required />
<label for="dob">Date of Birth:</label>
<input type="date" id="dob" name="dob" required />
<label for="aadhar">Aadhaar Number:</label>
<input type="text" id="aadhar" name="aadhar" pattern="[0-9]{12}" title="Enter a valid 12-digit Aadhaar number" required />
<button type="submit">Submit</button>
</form>
</div>
<script>
document.getElementById('customForm').addEventListener('submit', function (e) {
e.preventDefault();
const formData = new FormData(e.target);
const data = Object.fromEntries(formData.entries());
google.script.run
.withSuccessHandler(() => alert('Form submitted successfully!'))
.withFailureHandler(() => alert('Error submitting form.'))
.processForm(data);
e.target.reset();
});
</script>
</body>
</html>
Recommended by LinkedIn
2. Google Apps Script (Code.gs)
function doGet() {
return HtmlService.createHtmlOutputFromFile('form.html')
.setTitle('Custom Google Form')
.setWidth(600)
.setHeight(400);
}
function processForm(formData) {
const sheet = SpreadsheetApp.getActiveSpreadsheet().getSheetByName('Responses');
if (!sheet) {
throw new Error('Sheet named "Responses" not found');
}
const headers = sheet.getDataRange().getValues()[0];
const row = headers.map((header) => formData[header] || '');
sheet.appendRow(row);
}
3. Google Sheet Setup
4. Deploy the Form
✅ Advantages of Apps Script Custom Forms
1. Customizable Design:
2. Dynamic Validation:
3. Integration:
4. Free Hosting:
By following this approach, you can overcome the limitations of Google Forms and create tailored, professional forms using Google Apps Script.
Connect with me if you want to build advanced level projects on app script