This was one of the older ranked tutorials on the site. The core search intent is still useful: developers want a lightweight way to capture form submissions without standing up a full backend.
App register for Google Sheets
- Go to Google Developers Console and sign in with your Google account.
- Create a new project from the project switcher.
- Open Credentials and then manage service accounts.
- Create a service account and finish setup.
- Open the service account menu, then create and download a JSON key.
json
{
"type": "service_account",
"private_key": "-----BEGIN PRIVATE KEY-----\n...\n-----END PRIVATE KEY-----",
"client_email": "service-account@example.iam.gserviceaccount.com"
}Create the Google Sheet
- Create a new Google Sheet in the same Google account.
- Save the spreadsheet ID from the URL.
- Share the sheet with the service account email as an Editor.
- Enable the Google Sheets API in the Cloud project.
- Add the field names as the first row headings in the sheet.
Build the form in Next.js
bash
npx create-next-app next-js-contact-from-google-sheet
# or
yarn create-next-app next-js-contact-from-google-sheetThe original article used a simple contact form with Full Name, Email, Topic, and Description fields. The form state was handled in React and then posted to a backend handler.
tsx
import React, { useState } from 'react';
const ContactForm = () => {
const [form, setForm] = useState({
name: '',
email: '',
topic: '',
description: '',
});
const submitForm = (e) => {
e.preventDefault();
};
const handleChange = (e) => {
setForm({
...form,
[e.target.name]: e.target.value,
});
};
return (
<form onSubmit={submitForm}>
{/* form fields */}
</form>
);
};Operational advice
- Keep credentials server-side only.
- Validate and sanitize payloads before writing rows.
- Use Sheets for lightweight workflows, not as a long-term application database.
- Add spam protection before publishing the endpoint.
