Intégration de formulaire FormCraft dans NEO

Créer un formulaire FormCraft
Pour illustrer cet article nous allons utiliser le formulaire de contact du site NEO comme exemple.

Associer le formulaire avec NEO
Maintenant que le formulaire est créé, il faut donner aux champs un nom que NEO pourra décoder pour savoir où ranger les données :
- le nom du module (contact, note, organisation…)
- 2 fois le caractère underscore
- le nom de champ dans la table (nom, prénom, e_mail, telephone_mobile, compte_rendu…)
Dans contact par exemple : sur le champ Alt Label il faut saisir : contact__nom

C’est le même procédure pour les autres champs :
contact__prenom
contact__telephone_mobile
contact__e_mail
note__compte_rendu
Insérer des champs invisibles dans le formulaire
Les champs invisibles sont des champs qui seront présents dans le formulaire mais qui sont cachés pour les visiteurs de votre site. Ces champs invisibles servent à enregistrer des données indispensables pour NEO.
Étape 1 : créer les champs invisibles
Le champ constantes permet d’enregistrer les données comme l’origine du client, l’optin mail, le résumé associé à la note…
Le champ template id qui contient l’ID du template à utiliser pour envoyer un e-mail d’accusé de réception au client.

Étape 2 : associer les champs à NEO
Donnez aux champs un nom que NEO pourra décoder pour savoir où ranger les données.
Pour le template de mail, dans le champ Alt Label il faut saisir template_id (un seul underscore)

Pour les constantes, dans le champ Alt Label il faut saisir Constantes

Vous remarquerez sur le champ constantes le code field13 et sur le champ template le code field15. On aura besoin de ces codes à l’étape suivante.
Attention : c’est un exemple de NEO. Ce code field peut donc avoir une autre valeur dans votre propre formulaire.
Étape 3 : réglages avancés
Les réglales avancés permettent d’initialiser les champs invisibles. Pour cela, il faut insérer une ligne JavaScript. Nous allons l’expliquer à travers notre exemple (le formulaire de NEO) :
- Pour le template ID
jQuery("[data-field-id='field15']").val(260);
field15 : code du champ template ID dans le formulaire qu’on a créé. Dans votre formulaire ce sera peut-être une autre valeur.
260 : valeur variable. Elle correspond au numéro de template dans la liste des templates de NEO. C’est le template du mail de remerciement qui sera envoyé au client quand il aura complété le formulaire.
- Pour le champ Constantes
jQuery("[data-field-id='field13']").val("contact__origine:2581;contact__mail_optin:1;note__nom_formulaire:CONTACT;note__resume:NEO - Formulaire de contact");
field13 : est également une valeur variable, c’est le code du champ constantes dans le formulaire qu’on a créé. Dans votre formulaire ce sera peut-être une autre valeur.
On initialise 4 constantes, chacune contient une donnée fixe qui sera insérée dans NEO :
• contact__origine va contenir 2581 (correspond à FORMULAIRE dans le paramétrage de NEO)
• contact__mail_optin va contenir 1 (indiquant que le contact sera donc en optin mail)
• note__nom_formulaire va contenir CONTACT (un tag sur la note qui nous permet de faire des statistiques)
• note__resume va contenir NEO – Formulaire de contact (le résumé associé à la note)
Où est-ce qu’on saisi ces lignes JavaScript ?
Dans le menu bleu dans lors de la création du formulaire. Cliquez sur Réglages

Cliquez sur Avancé

Saisissez le Javascript dans la rubrique Javascript personnalisé

Une fois le Javascript saisi, sauvegardez.
Réglages généraux
Il reste une dernière étape : connecter le formulaire à NEO. Pour cela nous allons récupérer dans NEO une URL qui sera insérée dans le réglage du formulaire.
Dans le Réglages

Cliquez sur Connecteurs :

Sélectionnez le connecteur WordPress

Copier l’URL dans le presse-papier

Revenez dans le réglage du formulaire WordPress. Cliquez sur Général

Collez l’Url sur la rubrique Envoyer des données à une URL personnalisée

N’oubliez pas de cocher la case Post et la case à gauche du champ pour l’URL
Grâce à tous ces réglages, quand un client rempli le formulaire :
- Un contact est créé dans NEO
- Une note est créée dans NEO
- Un mail est envoyé à ce contact
Page de remerciement
Commencez par créer la page de remerciement sur WordPress.
Une fois que la page de remerciement est prête, copiez son URL.
Entrez dans le Réglage du formulaire.

Passez dans Avancé Collez l’URL de la page de remerciement sur la partie Rediriger lors de l’envoi :

Quand tous les réglages sont faits. Cliquez sur sauvegarder
Résultat
1-Formulaire

2-Une page de remerciement

3- Une note et un contact dans NEO

4-Un mail envoyé au client

Intégration de formulaires Contact7 dans NEO
Modules à installer
Il faut installer les modules suivants :
Contact Form 7 : c’est le module qui gère les formulaires
ContactForm 7 Redirection : c’est le module qui permet d’envoyer les données du formulaire à une API tierce
Nom des champs dans les formulaires
Le nom des champs doit respecter la syntaxe suivante :
nom_de_l'entité__nom_du_champ
Exemples
Nom du contact : contact__nom
E-mail du contact : contact__e_mail
Nom de la société : organisation__nom
Les entités disponibles
- contact
- organisation
- action
- note
- affaire
- produit
- ticket
- document
Attention : il faut respecter le nom des entités sinon les champs ne seront pas intégrés dans NEO.
Exemple de formulaire

Création du contact
Par défaut l’API de NEO va créer un contact.
Ce contact n’est créé que si le mail saisi dans le formulaire n’existe pas dans un contact déjà enregistré dans NEO. Le champ utilisé pour faire ce test est le champ e-mail standard de NEO e_mail
qui correspond donc au champ contact__e_mail
dans le formulaire (voir le paragraphe ci-dessus sur la syntaxe des noms de champs).
Si un contact avec le même e-mail est trouvé dans NEO, ce contact sera automatiquement mis à jour avec les données saisies dans le formulaire si elles ne sont pas vides.
Définition des autres entités qui seront créées
L’API WordPress de NEO permet de créer d’autres entités en plus du contact.
Par exemple si vous demandez le nom de la société dans votre formulaire vous aurez probablement envie de créer l’organisation correspondante dans NEO.
De la même manière vous aurez probablement envie de créer une note associée au contact pour dire qu’il a complété un formulaire sur votre site internet.
Les entités à créer sont automatiquement détectées dans la liste des champs du formulaire et la liste des valeurs prédéfinies (voir ci-dessous).
Intégration de valeurs prédéfinies
NEO vous donne la possibilité d’insérer des valeurs prédéfinies. Vous pourrez donc indiquer que l’origine du contact est votre site internet, donner un titre à la note qui sera associée au contact…
Nous allons utiliser pour cela un champ caché de type TEXTAREA qui s’appellera constantes
et qui contiendra le nom des champs auxquels vous voulez affecter une valeur prédéfinie ainsi que la valeur à affecter à chaque champ. Les champs seront séparés par un point-virgule.
Pour chaque champ à affecter la syntaxe est la suivante :
nom_de_l'entité__nom_du_champ:valeur_à_affecter
Exemple
Cas des champs à choix multiple
Il s’agit des champs qui dans NEO ont le type TAG, BOUTON RADIO ou LISTE DEROULANTE.
Pour ces champs la valeur à affecter est celle que vous trouverez en mode EXPERT dans la colonne ID
de la liste que vous trouverez sur la page Réglages/Autres sources de données de NEO :
Dans cet exemple pour indiquer que l’origine du contact est un formulaire sur votre site internet il suffit d’indiquer :
contact__origine:2581
Page de remerciement
La page de remerciement (appelée aussi page de redirection) doit être spécifiée dans le formulaire.
Nous allons utiliser pour cela un champ caché de type TEXT qui s’appellera merci
et qui contiendra l’URL de la page de remerciement.
À noter : si vous ne spécifiez pas de page de remerciement, la page contenant le formulaire sera réaffichée.
Connexion du formulaire à l’API de NEO
Dans l’onglet Redirection du formulaire faire les actions suivantes :
- saisir l’URL que vous trouverez dans NEO sur la page Réglages/Connecteurs/WordPress
- cocher la case Use external URL
- cocher la case Pass all the fields from the form as URL query parameters
Attention : il faudra refaire ces actions à chaque nouveau formulaire
Où trouver l’URL dans NEO ?

Exemple de configuration