Capture Webflow Form Submissions in Google Sheets - n8n Workflow

• Web developers who use Webflow for client sites and need a reliable, automated CRM integration.


• Marketing teams looking to consolidate lead data from Webflow forms without manual CSV imports.


• Users seeking efficient n8n templates for connecting specialized SaaS applications.


• Technical users who want to see how to use the Code n8n node for data flattening and enhancement.

This automation solves the classic integration gap between marketing tools like Webflow and centralized data storage like Google Sheets. By deploying this specific n8n workflow, you ensure that every new lead or contact form submission is instantly recorded in a spreadsheet.

The primary value of this n8n workflow is reliability and speed. Instead of waiting for email notifications or manually exporting data, the entire process is instantaneous, triggered directly by the Webflow platform. Furthermore, the workflow utilizes a custom Code n8n node to automatically standardize the incoming data structure and attach the submission timestamp, making the data in Google Sheets immediately clean and usable. This makes it one of the most essential n8n templates for modern web operations.

This efficient n8n workflow operates in three distinct phases, triggered by external activity:

1. The n8n Trigger: The workflow execution begins immediately upon form submission thanks to the Webflow n8n trigger node. This node listens for the Form Submission event from a specific, configured Webflow site.


2. Data Structuring and Preparation: Once the raw payload is received, it passes to the Prepare Fields Code n8n node. This crucial step extracts the nested form data object (payload.data) and flattens it into individual fields (like Name, Email, Message). Critically, it also extracts the submittedAt timestamp or generates a current date, ensuring every entry in your sheet has accurate timing data.


3. Data Logging: The clean, structured data is then sent to the Google Sheets n8n node (Append New Row). This node connects to the target sheet, automatically identifies the existing columns (or creates new ones if needed, as highlighted in the sticky note), and appends the prepared row data. This completes the fully automated n8n workflow.

To implement this n8n workflow using one of our helpful n8n templates, follow these steps:

1. Import the JSON: Copy the provided JSON code and import it directly into your n8n instance.


2. Webflow Credentials: Configure the On Form Submission n8n trigger node. You will need to set up a Webflow OAuth2 API credential. Note that for self-hosted n8n instances, you must create an application within your Webflow account to obtain the Client ID and Secret, ensuring the Redirect URL matches your n8n instance URL.


3. Webflow Trigger Setup: Select the specific Webflow Site ID you wish to monitor for form submissions in the trigger node's parameters.


4. Google Sheets Credentials: Configure the Append New Row n8n node with your Google Sheets OAuth2 API credentials, granting the necessary drive and spreadsheet access.


5. Target Sheet Configuration: In the Google Sheets n8n node, select the Document ID and the specific Sheet Name (e.g., 'Sheet1') where the Webflow form data should be appended.


6. Activate: Save the n8n workflow and toggle the workflow to 'Active' to start listening for Webflow form submissions.

Webflow Trigger (On Form Submission)
Function: Acts as the starting n8n trigger, initiating the entire n8n workflow when a user submits a form on the specified Webflow site.
Key Configuration: Requires Webflow OAuth2 credentials and selection of the target Site ID.

Code n8n Node (Prepare Fields)
Function: Transforms the nested JSON structure received from Webflow into a flat object that is easy to map to Google Sheets columns. It ensures that the submission date is included in the output data.
Key Configuration: Uses JavaScript to destructure payload.data and add a Date field: return { ...formData, Date }.

Google Sheets n8n Node (Append New Row)
Function: Handles the final data output, connecting to Google Sheets to automatically append the processed form data as a new row.
* Key Configuration: Operation: append. It uses mappingMode: autoMapInputData to intelligently handle column creation and insertion, ensuring the clean data from the previous n8n node is correctly logged.