Automatisation Webflow avec n8n : gestion des soumissions de formulaires
Ce workflow n8n a pour objectif d'automatiser la gestion des soumissions de formulaires sur Webflow, permettant ainsi aux entreprises de gagner du temps et d'améliorer leur efficacité. Dans un contexte où la collecte de données est cruciale, ce processus simplifie l'enregistrement des informations des utilisateurs directement dans Google Sheets. Cela est particulièrement utile pour les équipes marketing et les responsables de projet qui souhaitent centraliser les données de manière fluide et efficace.
- Étape 1 : le déclencheur 'On Form Submission' s'active dès qu'un utilisateur soumet un formulaire sur Webflow.
- Étape 2 : les données sont ensuite préparées grâce au noeud 'Prepare Fields', qui permet de manipuler les informations avant leur enregistrement.
- Étape 3 : les données sont transférées vers Google Sheets via le noeud 'Append New Row', où chaque soumission est ajoutée dans une nouvelle ligne du document spécifié. Ce workflow utilise également plusieurs noeuds 'Sticky Note' pour visualiser et organiser les informations de manière intuitive. En intégrant cette automatisation n8n, les entreprises peuvent réduire les erreurs humaines, améliorer la traçabilité des données et gagner un temps précieux dans la gestion des soumissions. La valeur ajoutée réside dans la simplification du processus de collecte et d'analyse des données, permettant ainsi aux équipes de se concentrer sur des tâches à plus forte valeur ajoutée.
Workflow n8n Google Sheets, Webflow, collecte de données : vue d'ensemble
Schéma des nœuds et connexions de ce workflow n8n, généré à partir du JSON n8n.
Workflow n8n Google Sheets, Webflow, collecte de données : détail des nœuds
Inscris-toi pour voir l'intégralité du workflow
Inscription gratuite
S'inscrire gratuitementBesoin d'aide ?{
"nodes": [
{
"id": "096a8e0c-8f72-40fb-aa1e-118fb33a3916",
"name": "Prepare Fields",
"type": "n8n-nodes-base.code",
"position": [
1740,
860
],
"parameters": {
"jsCode": "const formData = $input.all()[0].json.payload.data\nconst Date = $input.all()[0].json.payload.submittedAt || new Date()\n\nreturn {\n ...formData, // creates a new field for every element inside formData\n Date\n}\n\n \n"
},
"notesInFlow": false,
"typeVersion": 2
},
{
"id": "c98bb655-aa79-447f-897d-56ba9640073b",
"name": "Sticky Note1",
"type": "n8n-nodes-base.stickyNote",
"position": [
1660,
780
],
"parameters": {
"color": 2,
"width": 270,
"height": 250,
"content": "1 line of code to take the data object (adding date as a plus)"
},
"typeVersion": 1
},
{
"id": "05a27975-ac48-48db-9c82-c9658a8d14c2",
"name": "Sticky Note2",
"type": "n8n-nodes-base.stickyNote",
"position": [
1260,
640
],
"parameters": {
"color": 6,
"width": 267,
"height": 394,
"content": "Make sure to disable legacy API\n\n"
},
"typeVersion": 1
},
{
"id": "59d25f8e-bc9d-43ac-9c4b-3013f81c3e3d",
"name": "Sticky Note3",
"type": "n8n-nodes-base.stickyNote",
"position": [
2040,
760
],
"parameters": {
"color": 4,
"width": 270,
"height": 274,
"content": "Automatically create column names and append data (works even on empty sheets)"
},
"typeVersion": 1
},
{
"id": "33c45b7e-e696-4aed-9374-0b232bfd52f1",
"name": "On Form Submission",
"type": "n8n-nodes-base.webflowTrigger",
"position": [
1340,
860
],
"webhookId": "c3ef5b9f-88f6-40e6-bc54-067e421b059a",
"parameters": {
"site": "640cfc01791fc750653436fd"
},
"credentials": {
"webflowOAuth2Api": {
"id": "a3UDqxewt1XM79VP",
"name": "Webflow account"
}
},
"typeVersion": 2
},
{
"id": "4ce0eeea-dd09-4d79-967e-210f2762d5c3",
"name": "Append New Row",
"type": "n8n-nodes-base.googleSheets",
"position": [
2120,
860
],
"parameters": {
"columns": {
"value": {
"Name": "={{ $json.data.Name }}",
"Email": "={{ $json.data.Email }}",
"Message": "={{ $json.data.Message }}"
},
"schema": [
{
"id": "Name",
"type": "string",
"display": true,
"required": false,
"displayName": "Name",
"defaultMatch": false,
"canBeUsedToMatch": true
},
{
"id": "Email",
"type": "string",
"display": true,
"required": false,
"displayName": "Email",
"defaultMatch": false,
"canBeUsedToMatch": true
},
{
"id": "Message",
"type": "string",
"display": true,
"required": false,
"displayName": "Message",
"defaultMatch": false,
"canBeUsedToMatch": true
},
{
"id": "data",
"type": "string",
"display": true,
"removed": true,
"required": false,
"displayName": "data",
"defaultMatch": false,
"canBeUsedToMatch": true
}
],
"mappingMode": "autoMapInputData",
"matchingColumns": []
},
"options": {},
"operation": "append",
"sheetName": {
"__rl": true,
"mode": "list",
"value": "gid=0",
"cachedResultUrl": "https://docs.google.com/spreadsheets/d/1gLJ5I4ZJ9FQHJH56lunUKnHUBUsIms9PciIkJYi8SJE/edit#gid=0",
"cachedResultName": "Sheet1"
},
"documentId": {
"__rl": true,
"mode": "list",
"value": "1gLJ5I4ZJ9FQHJH56lunUKnHUBUsIms9PciIkJYi8SJE",
"cachedResultUrl": "https://docs.google.com/spreadsheets/d/1gLJ5I4ZJ9FQHJH56lunUKnHUBUsIms9PciIkJYi8SJE/edit?usp=drivesdk",
"cachedResultName": "Automation test"
}
},
"credentials": {
"googleSheetsOAuth2Api": {
"id": "QkZbOZMXiUKxATjx",
"name": "Google Sheets account 2"
}
},
"typeVersion": 4.5
},
{
"id": "01a09112-930c-493a-b16c-660e4dc3d272",
"name": "Sticky Note4",
"type": "n8n-nodes-base.stickyNote",
"position": [
260,
160
],
"parameters": {
"color": 7,
"width": 520,
"height": 1680,
"content": "## Self-hosted N8N users only:\n\n### How to get Client ID and Client Secret\n\n- From your Webflow dashboard go to \"Apps & Integrations\"\n\n\n- Look for \"App development\" and click \"Create an App\"\n\n\n- Fill the fields and click \"Continue\"\n\n\n- Inside \"Building blocks\" enable REST API, insert your \"Redirect URL\" from N8N, enable form access and click \"Create App\"\n\n\n\n- Copy and paste Client ID and Client Secret to N8N and connect\n\n\n"
},
"typeVersion": 1
}
],
"pinData": {},
"connections": {
"Prepare Fields": {
"main": [
[
{
"node": "Append New Row",
"type": "main",
"index": 0
}
]
]
},
"On Form Submission": {
"main": [
[
{
"node": "Prepare Fields",
"type": "main",
"index": 0
}
]
]
}
}
}Workflow n8n Google Sheets, Webflow, collecte de données : pour qui est ce workflow ?
Ce workflow s'adresse aux équipes marketing, aux responsables de projet et aux entreprises utilisant Webflow pour la création de formulaires. Il est idéal pour les organisations de taille moyenne à grande qui cherchent à automatiser leurs processus de collecte de données sans nécessiter de compétences techniques avancées.
Workflow n8n Google Sheets, Webflow, collecte de données : problème résolu
Ce workflow résout le problème de la gestion manuelle des soumissions de formulaires, qui peut être fastidieuse et sujette aux erreurs. En automatisant ce processus, les utilisateurs éliminent les risques de perte de données et de saisie incorrecte, tout en assurant une centralisation efficace des informations dans Google Sheets. Le résultat est une gestion des données plus fluide et une réduction significative du temps consacré à ces tâches administratives.
Workflow n8n Google Sheets, Webflow, collecte de données : étapes du workflow
Étape 1 : le workflow se déclenche avec 'On Form Submission' lorsque le formulaire est soumis sur Webflow.
- Étape 1 : les données sont traitées par le noeud 'Prepare Fields' pour les préparer à l'enregistrement.
- Étape 2 : les informations sont ensuite envoyées à Google Sheets via 'Append New Row', ajoutant une nouvelle ligne pour chaque soumission.
- Étape 3 : plusieurs noeuds 'Sticky Note' sont utilisés pour visualiser et organiser les données, facilitant ainsi la gestion et l'analyse.
Workflow n8n Google Sheets, Webflow, collecte de données : guide de personnalisation
Pour personnaliser ce workflow, vous pouvez modifier l'URL du webhook dans le noeud 'On Form Submission' pour l'adapter à votre site Webflow. Assurez-vous également de spécifier le bon document et la feuille dans le noeud 'Append New Row' pour que les données soient enregistrées au bon endroit. Vous pouvez ajuster les paramètres des noeuds 'Sticky Note' pour changer la couleur, la taille et le contenu selon vos besoins. Enfin, il est possible d'ajouter d'autres intégrations ou de modifier les champs à traiter dans le noeud 'Prepare Fields' pour répondre à des exigences spécifiques.