France 05 54 54 44 08 - Belgique 02 319 88 46 - Maroc 07 07 71 84 50 - UK 0203 445 5618

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