Archives pour la catégorie Formulaires

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

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