Intégrations | NueForm Docs

NueForm se connecte à n'importe quel service disposant d'une API grâce aux Data Nodes — votre connecteur HTTP universel. Au lieu d'intégrations préconstruites limitées, vous avez un contrôle total sur la façon dont les données de vos formulaires circulent vers les services externes.

Ce guide couvre la configuration étape par étape pour les plateformes d'automatisation les plus populaires, ainsi que l'intégration directe par API.

Les Data Nodes sont disponibles sur tous les plans. Aucun abonnement premium n'est requis pour les intégrations.

Zapier (plus de 8 000 applications)

Zapier connecte vos formulaires à plus de 8 000 applications, dont Google Sheets, Slack, Salesforce, HubSpot, Mailchimp et bien d'autres.

Fonctionnement

Zapier utilise un déclencheur Catch Hook qui génère une URL webhook unique. Votre Data Node envoie les données du formulaire à cette URL, et Zapier les achemine vers l'application connectée de votre choix.

Étape 1 : Créer un Zap avec un déclencheur Webhooks

Connectez-vous à zapier.com et cliquez sur Create Zap.
Pour le déclencheur, recherchez Webhooks by Zapier.
Choisissez l'événement Catch Hook.
Cliquez sur Continue — Zapier génèrera une URL webhook unique comme :
text
```
https://hooks.zapier.com/hooks/catch/123456/abcdef/
```
Copiez cette URL — vous en aurez besoin pour votre Data Node.

Étape 2 : Configurer votre Data Node

Dans le constructeur NueForm, ajoutez un Data Node au workflow de votre formulaire.
Définissez les paramètres suivants :
- Method : POST
- URL : Collez l'URL webhook de Zapier
- Headers :
  json
```
{
  "Content-Type": "application/json"
}
```
- Body : Associez les champs de votre formulaire au corps JSON :
  json
```
{
  "name": "{{full_name}}",
  "email": "{{email}}",
  "message": "{{message}}",
  "submitted_at": "{{timestamp}}"
}
```
- Silent Mode : Activer (recommandé — pas d'écran de chargement pour le répondant)

Étape 3 : Tester la connexion

Dans Zapier, cliquez sur Test trigger — il attendra une requête.
Dans NueForm, prévisualisez votre formulaire et soumettez une réponse de test.
Zapier devrait détecter les données de test et afficher les champs de votre formulaire.

Étape 4 : Ajouter votre action

De retour dans Zapier, cliquez sur + pour ajouter une action.
Choisissez votre application de destination (par ex. Google Sheets, Slack, HubSpot).
Associez les champs de vos données webhook à l'action.
Testez et publiez votre Zap.

Exemple : Formulaire → Google Sheets

json

{
  "name": "{{full_name}}",
  "email": "{{email_address}}",
  "company": "{{company_name}}",
  "budget": "{{budget_range}}",
  "source": "NueForm Contact Form"
}

Cela envoie chaque soumission de formulaire sous forme de nouvelle ligne dans Google Sheets — automatiquement.

n8n (plus de 400 Nodes)

n8n est une plateforme d'automatisation de workflows open source avec plus de 400 nodes intégrés. Elle peut être auto-hébergée ou utilisée via n8n Cloud.

Fonctionnement

n8n utilise un node Webhook comme déclencheur de workflow. Il génère une URL d'endpoint que votre Data Node appelle pour lancer le workflow.

Étape 1 : Créer un workflow n8n avec un déclencheur Webhook

Connectez-vous à votre instance n8n (cloud ou auto-hébergée).
Créez un nouveau workflow.
Cliquez sur Add first step et sélectionnez On webhook call.
Dans les paramètres du node Webhook :
- Définissez HTTP Method sur POST
- Notez le Test URL (pour les tests) et le Production URL (pour l'utilisation en production)
- Le Production URL ressemble à :
  text
```
https://your-instance.app.n8n.cloud/webhook/abc-123-def
```
Cliquez sur Listen for test event pour le mettre en mode écoute.

Étape 2 : Configurer votre Data Node

Ajoutez un Data Node à votre workflow NueForm.

Configurez-le :

Method : POST
URL : Collez l'URL webhook de n8n (utilisez le Test URL pour les tests, le Production URL en production)

Headers :

json

{
  "Content-Type": "application/json"
}

Body :

json

{
  "respondent_email": "{{email}}",
  "answers": {
    "name": "{{name}}",
    "feedback": "{{feedback}}",
    "rating": "{{satisfaction_rating}}"
  }
}

Silent Mode : Activer

Étape 3 : Construire votre workflow n8n

Une fois que le node Webhook a reçu les données, ajoutez les nodes dont vous avez besoin :

Google Sheets — Enregistrer les réponses dans une feuille de calcul
Slack — Envoyer une notification à votre équipe
Email (SMTP) — Envoyer un e-mail de confirmation
HTTP Request — Appeler une autre API
IF — Acheminer les données de manière conditionnelle selon les réponses du formulaire

Étape 4 : Activer

Testez en soumettant un formulaire et en confirmant que n8n reçoit les données.
Basculez l'URL du node Webhook du Test vers le Production.
Activez le workflow (interrupteur en haut à droite).
Mettez à jour l'URL de votre Data Node avec le Production URL.

n8n dispose d'URL de Test et de Production séparées. Assurez-vous de passer au Production URL avant de publier votre formulaire.

Make (plus de 3 000 applications)

Make (anciennement Integromat) est une plateforme d'automatisation visuelle avec plus de 3 000 intégrations d'applications.

Fonctionnement

Make utilise un module Custom Webhook comme déclencheur de scénario. Il génère une URL vers laquelle votre Data Node envoie les données.

Étape 1 : Créer un scénario Make

Connectez-vous à make.com et créez un nouveau scénario.
Cliquez sur le bouton + et recherchez Webhooks.
Sélectionnez Custom webhook.
Cliquez sur Add pour créer un nouveau webhook.
Donnez-lui un nom (par ex. « NueForm Contact Form »).

Make génère une URL comme :

text

https://hook.make.com/abcdefghijk123456

Copiez cette URL.

Étape 2 : Configurer votre Data Node

Ajoutez un Data Node à votre workflow NueForm.

Définissez :

Method : POST
URL : Collez l'URL webhook de Make

Headers :

json

{
  "Content-Type": "application/json"
}

Body :

json

{
  "form_name": "Contact Form",
  "name": "{{full_name}}",
  "email": "{{email}}",
  "phone": "{{phone_number}}",
  "inquiry_type": "{{inquiry_type}}"
}

Silent Mode : Activer

Étape 3 : Déterminer la structure des données

Dans Make, cliquez sur Run once sur le module webhook.
Soumettez une réponse de test dans NueForm.
Make détectera la structure des données et associera les champs automatiquement.

Étape 4 : Ajouter des modules et activer

Ajoutez vos modules de destination (Google Sheets, CRM, e-mail, etc.).
Associez les champs de données du webhook à chaque module.
Activez la planification du scénario.

IFTTT (plus de 1 000 services)

IFTTT (If This Then That) se connecte à plus de 1 000 services, y compris les appareils domotiques, les réseaux sociaux et les applications de productivité.

Fonctionnement

IFTTT utilise le service Webhooks avec un déclencheur Receive a web request. Votre Data Node envoie un événement à l'URL webhook d'IFTTT.

Étape 1 : Configurer les Webhooks IFTTT

Rendez-vous sur ifttt.com et créez un nouvel Applet.
Pour « If This », recherchez Webhooks.
Sélectionnez Receive a web request.
Entrez un nom d'événement (par ex. nueform_submission).
Pour « Then That », choisissez votre service d'action.

Étape 2 : Obtenir votre URL Webhook

Rendez-vous sur ifttt.com/maker_webhooks.
Cliquez sur Documentation.
Vous verrez votre clé unique et le format de l'URL :
text
```
https://maker.ifttt.com/trigger/{event}/with/key/YOUR_KEY
```

Remplacez {event} par le nom de votre événement :

text

https://maker.ifttt.com/trigger/nueform_submission/with/key/abc123xyz

Étape 3 : Configurer votre Data Node

Les Webhooks IFTTT acceptent jusqu'à 3 valeurs (value1, value2, value3) :

Ajoutez un Data Node à votre workflow NueForm.

Définissez :

Method : POST
URL : Votre URL webhook IFTTT

Headers :

json

{
  "Content-Type": "application/json"
}

Body :

json

{
  "value1": "{{full_name}}",
  "value2": "{{email}}",
  "value3": "{{message}}"
}

Silent Mode : Activer

Les Webhooks IFTTT ne prennent en charge que 3 valeurs (value1, value2, value3). Si vous devez envoyer plus de données, concaténez les champs ou utilisez plutôt Zapier, n8n ou Make.

Intégration directe par API

Pour un contrôle maximal, appelez directement n'importe quelle API REST — aucun intermédiaire nécessaire.

Exemple : Envoyer vers votre propre backend

text

Method: POST
URL: https://api.yourapp.com/form-submissions
Headers:
{
  "Content-Type": "application/json",
  "Authorization": "Bearer YOUR_API_KEY"
}
Body:
{
  "form_id": "contact-form",
  "data": {
    "name": "{{name}}",
    "email": "{{email}}",
    "message": "{{message}}"
  }
}

Exemple : Ajouter à un CRM

text

Method: POST
URL: https://api.hubspot.com/crm/v3/objects/contacts
Headers:
{
  "Content-Type": "application/json",
  "Authorization": "Bearer YOUR_HUBSPOT_TOKEN"
}
Body:
{
  "properties": {
    "firstname": "{{first_name}}",
    "lastname": "{{last_name}}",
    "email": "{{email}}",
    "company": "{{company}}"
  }
}

Exemple : Envoyer un message Slack

text

Method: POST
URL: https://hooks.slack.com/services/T00/B00/xxxx
Headers:
{
  "Content-Type": "application/json"
}
Body:
{
  "text": "New form submission from {{name}} ({{email}}): {{message}}"
}

Conseils et bonnes pratiques

Utiliser le Silent Mode

Pour la plupart des intégrations, activez le Silent Mode afin que le répondant ne voie pas d'indicateur de chargement. La requête s'exécute en arrière-plan.

Gestion des erreurs

Si le service externe est indisponible, la requête du Data Node échouera. Pensez à définir un Timeout raisonnable (5 à 10 secondes).
Pour les intégrations critiques, envisagez d'utiliser les Webhooks intégrés de NueForm comme solution de secours — ils effectuent des tentatives en cas d'échec.

Association des variables

Utilisez la syntaxe {{nom_de_variable}} (doubles accolades) dans le corps des requêtes pour insérer les valeurs des réponses du formulaire. Les accolades simples {nom_de_variable} fonctionnent dans les URL et les headers.

Consultez la documentation sur les Variables pour la référence complète.

Tests

Activez le Debug Mode sur votre Data Node pendant le développement pour voir la requête et la réponse complètes.
Utilisez un service comme webhook.site pour inspecter le payload exact envoyé par votre Data Node.
Désactivez le Debug Mode avant de publier.

Voir aussi

Data Nodes — Référence complète de la configuration des Data Nodes
Variables — Syntaxe d'interpolation des variables
Webhooks — Alternative par webhooks post-soumission