Module 12 / 15

Project: The Smart Contact Form

Let's build a real tool that collects messages from your readers.

In this project, we are going to combine Google Sheets, Apps Script, and Blogger. This is the moment you become a real App Builder!

What You Will Learn
  • How to use doPost to receive data.
  • How to save form data into a new row in your sheet.
  • How to put a "Send" button on your Blogger page.
Who Is This For?

This is for the builder who is ready to go "Pro." We are leaving the safe world of the Logger and building something that other people can actually use.

Real Life Connection

Think of a Suggestion Box in a store.

A customer writes their idea on a piece of paper (Blogger) and drops it in the box. Later, the store manager (Apps Script) opens the box and writes all the ideas into a notebook (Google Sheets).

The doPost Function

In the last module, we used doGet to read info. But when we want to send info (like a message), we use doPost.

doPost is like a Catching Glove. Blogger throws the data, and doPost catches it so we can use it.

The Project Workflow
1. User clicks 'Send' on Blogger 🖱️
⬇️
2. Script catches the name & message 🧤
⬇️
3. Script adds a new row to Sheet 📝
⬇️
4. User sees "Success!" message ✅
Part 1: The Apps Script Brain

We use e.parameter to find the name and message that Blogger sent us.

function doPost(e) {
  const name = e.parameter.name;
  const msg = e.parameter.message;

  // Add to the next available row
  SpreadsheetApp.getActiveSheet().appendRow([name, msg]);

  return ContentService.createTextOutput("Success");
}
The Full Logic

Copy this into your script editor, Deploy it as a Web App (Access: Anyone), and save the URL!

function doPost(e) { // 1. Catch the data from Blogger const userName = e.parameter.name; const userMsg = e.parameter.message; const time = new Date(); // 2. Find the sheet and add a row const sheet = SpreadsheetApp.getActiveSheet(); sheet.appendRow([time, userName, userMsg]); // 3. Tell Blogger everything is okay return ContentService.createTextOutput("Sent!"); }
How to Test It

You can't "Run" doPost in the editor because it needs data to catch. You have to send data from Blogger!

Go to your Blogger page, paste a simple form like the one below, and put your Web App URL in the script part.

Click to see the Blogger Form HTML
<input id="name" placeholder="Name">
<textarea id="msg"></textarea>
<button onclick="sendData()">Send</button>

<script>
function sendData() {
  const url = "YOUR_WEB_APP_URL";
  fetch(url + "?name=" + document.getElementById('name').value);
}
</script>
My Sheet is Empty!
Click for the debugging checklist

1. Versions: Did you forget to make a "New Version" when you deployed? Apps Script URLs only update if you tell them to!

2. Permission: Did you set access to "Anyone"? Blogger doesn't have a Google account, so it needs "Anyone" permission to talk.

3. Names: Does the name in your HTML (e.parameter.name) match the name in your script? One tiny typo and the data will be lost.

The "Color Picker" Challenge

Can you add a third column to your sheet called "Favorite Color"? Add a new parameter in your script and see if you can send three pieces of data from Blogger at once!

Who Else Uses This?

SurveyMonkey and Google Forms work exactly like this. They provide a pretty face (The Form) and a smart brain (The Script) to store your answers securely.

Module Summary

You have just built your first full-stack application. You have a frontend (Blogger) and a backend (Apps Script). You are officially a developer! In the next module, we'll make this project even cooler by adding email notifications.

Status: App Builder 🏗️ | Level: Full-Stack Junior 💻

Type NEXT to unlock the next module 🚀