Automate Webflow Form to Google Sheets with n8n

What This Automation Does

This workflow gets form data from Webflow and puts it into Google Sheets automatically.
It stops the need to copy data by hand and saves time and mistakes.

When the user submits a Webflow form, the workflow starts fast.
A code node grabs the form details and adds the time it was sent.

Then the info goes to Google Sheets as a new row.
The workflow can add headers if the sheet is empty.

All happens almost right away so the sheet stays correct and ready.
This means no effort is lost and data stays clean.

Tools and Services Used

• Webflow: Collects form submissions from website visitors.
• n8n Workflow Automation: Connects the Webflow form to Google Sheets.
• Google Sheets: Stores form data in organized rows for tracking.

Inputs, Processing Steps, and Output

Inputs

• Customer form submission from Webflow with fields like Name, Email, and Message.
• Webhook trigger listens for each form submission event.

Processing Steps

• Webhook node starts the workflow when a form sends data.
• Code node extracts the data fields and adds a date timestamp.
• Google Sheets node appends the data as a new row, mapping fields to columns and creating headers if needed.

Output

A new row in the Google Sheet with form submission fields and a submission timestamp.
The sheet grows with every form entry automatically.

Beginner Step-by-Step: How to Use This Workflow in n8n

Step 1: Download and Import Workflow

1. Download the workflow file using the Download button on this page.
2. Open n8n editor where you manage workflows.
3. Use the Import from File option to add the downloaded workflow.

Step 2: Add Credentials

1. Fill in your Webflow API credentials created from your Webflow app (Client ID and Secret).
2. Authorize Google Sheets with your Google account so n8n can access the spreadsheet.

Step 3: Configure Workflow Nodes

1. Update the Webhook node with your Webflow Site ID.
2. In the Google Sheets node, enter the Document ID and select the right sheet name.
3. Check the Code node for the script below; update if you added extra form fields:

   const formData = $input.all()[0].json.payload.data;
   const Date = $input.all()[0].json.payload.submittedAt || new Date();
   
   return {
     ...formData, // expands form fields into the output
     Date
   };
   

Step 4: Test and Activate

1. Submit a test form through your Webflow site to verify the workflow captures data correctly.
2. Look in Google Sheets to see if the new row appears with correct info and date.
3. Turn the workflow to Active in n8n to start running for real submissions.

If running on your own server, visiting self-host n8n may help set up the system smoothly.

Customizations

• Add More Form Fields: Add fields on Webflow, then update Code node to include those extra items. Adjust Google Sheets columns too.
• Send Confirmation Emails: Add a Gmail node after Google Sheets to email the customer their submission copy.
• Filter Submissions: Add an If node to check data before appending, for example making sure emails look valid.
• Change Timestamp Format: Edit the Code node’s date code to format dates in easier-to-read forms using JavaScript.

Troubleshooting

• Webhook Not Triggering: Check if Webflow Legacy API is off and that webhook URL is set correctly inside Webflow form or automation.
• Google Sheets Append Fails: Confirm Google Sheets OAuth credentials are valid and the sheet is shared with the Google user connected in n8n.

Pre-Production Checklist

• Make sure Webflow Legacy API is disabled.
• Test submitting Webflow form triggers workflow in n8n.
• Verify Code node extracts data fields and adds timestamp properly.
• Ensure Google Sheets node maps columns to the right fields.
• Perform a couple of test form entries to confirm data accuracy is consistent.

Deployment Guide

Turn the workflow status to Active to start auto-processing new submissions.
Watch the Google Sheets for data updates and check logs if needed.
If using self-host n8n, keep server available and monitor execution logs to catch errors early.

Summary

✓ The workflow saves users hours by copying Webflow form data automatically.
✓ It reduces mistakes from manual typing.
✓ Data always adds a timestamp so tracking is clear.
✓ Google Sheets fills out with new rows for every submission.
→ Users can focus more on replies and less on data entry.
→ The process runs fast and keeps records updated.