Formulaire de contacts

avec Zoho Creator.

Tutoriel en français
 Formulaire de contacts
avec Zoho Creator.
Tutoriel en français

Zoho Creator permet de Créer gratuitement un formulaire en ligne et de

l'adapter sur les sites Web ou blogs, permettant ainsi les utilisateurs d'en
contacter l'administrateur.

N'ayant pas trouvé, sur le net, de Tutoriel en français pour formulaire de

contacts avec Zoho Creator, j'ai décidé de créer celui-ci, tiré de
support@zohocreator.com, traduit en français par Google.

Il s'agit d'un tutoriel simple, étape par étape pour créer une " application de
Contacts ".

Avant tout vous devez créer un compte Zoho. Il est possible d'utiliser votre
compte Google, Google Apps ou Yahoo si vous en possédez, pour cela il suffit
de cliquer sur l'icône, ou de simplement créer un compte.

Ensuite un e-mail de vérification vous sera envoyer, que vous devrez alors
valider en cliquant sur le lien bleu contenu dans le mail. Il vous sera ainsi
possible de vous connectez sur votre compte avec votre identifiant et mot de
passe.
Création de l'application

1. Une fois connecté cliquez sur le bouton »Create New Aplication

de la page d'accueil.

2. Le dialogue Créer une nouvelle application sera affiché avec 3 options

différentes afin de créer une nouvelle application.

3. Nous allons voir comment créer l'application à l'aide de l'option "Add

form" «Ajouter la forme».

4. Précisez le nom de l'application. Le nom de l'application est celui qui

figurera sur votre compte Zoho creator et réservé aux applications crées.
Exemple : "formulaire de contact".

5. Important : Le nom de la forme est celui qui figurera sur votre

page Web ou Blog.

Exemple :
Application Name : Formulaire de contact
Form name : Contactez-moi, ou, Contact, ou autre, selon le
formulaire que vous voulez construire.

6. Sélectionnez le fuseau horaire correspondant à votre langue à partir du

Drop Zone Time-down menu déroulant en bas de page. Cela vous
aidera à afficher l'heure.

7. Cliquez sur "Create Now" «Créer maintenant» pour valider

l'application.
L'écran affiché ci-dessous est le mode d'édition "The Edit mode" pour la
création de formulaires. Sur la gauche vous trouverez des boutons de champs
différents, nécessaires à la création d'un formulaire.

8. Je pense que les cases nécessaires à la structure d'un formulaire de

contact est :

● Le Prénom ou le Pseudo
● E-mail (l'e-mail de votre contact)
● Messages (le message que votre contact désire vous laisser)

9. Maintenant, pour créer les cases du nouveau formulaire de contact, il

suffit de faire Glisser les boutons de la barre de contrôle sur la droite
(drag and drop = glisser et déposer).
Créer et personnaliser la case "Nom".
● Faites glisser et déposez le bouton "Single Line", Une petite fenêtre
s'ouvre et là, cliquez sur option pour l'étendre comme ci-dessous.

● Dans la case Label Name : Tapez le nom que vous voulez donner à la
première ligne (Exemple : Nom, Pseudo...)
● Dans Validation deux cases à cocher sont disponibles :
" This is required field " signifie que cette ligne ne peut pas être
vide, ce qui oblige la personne à remplir la ligne sinon le message ne
peut pas être envoyé.
" No duplicate entries " signifie que deux ligne ne peuvent pas avoir le
même contenu.
● Dans Appearance, "Initiale Value" ce que vous voulez qu'il apparaisse
dans le vide à remplir "Exemple : Entrez votre nom, ou, votre nom,
ou, Tapez votre nom..."
● Cliquez sur Done pour valider.
● Le résultat :
 Créer et personnaliser la case "e-mail"
● Glissez et déposez le bouton E-mail, une fenêtre s'ouvre et là,
cliquez sur option pour l'étendre.
● Répétez les étapes précédentes comme pour la case nom,
mais avec pour Exemple : Votre adresse e-Mail, ou Votre adresse
électronique, ...
● Cliquez sur Done pour valider.

Vous pouvez recevoir les messages directement sur votre

boite mail.

● Cliquer sur " More actions " comme indiqué ci-dessous, puis dans
le menu déroulant cliquez sur " Set e-mail notification "
 ● La fenêtre comme ci-dessous apparaît.

● Sur la ligne "To" indiquez l'adresse électronique de votre boîte sur

laquelle vous désirez recevoir les messages envoyés.
● Cliquez sur Done pour valider.

Créer et personnaliser la case "Message".

● Glissez-déposez le bouton "Multi Line".
● Répétez les étapes comme pour la case nom.
● Indiquez le nom du label : Message ou, votre message, ou autre.
 ● N'oubliez pas de remplir les instructions de l'Appearance si vous
l'avez fait pour les précédents et de cocher la Validation " This is
required field "
● Cliquez sur Done pour valider.

Vous pouvez ajouter le code de vérification pour fermer la

porte aux SPAM.

● Petit bémol : Cela oblige les utilisateurs à devoir recopier un code

avant de pouvoir envoyer le message.
● Pour ce faire cliquez sur More action, dans le menu déroulant cliquez
sur Form propreties, puis dans la fenêtre cochez "Need verification
code"
● Cliquez sur Done pour valider.

Résultat Final
 Astuce importante :

● Vous avez la possibilité de modifier les deux boutons, "Submit" et

"reset" en français. Pour cela vous devez cliquer sur l'un d'eux et sur
éditer, une fenêtre s'ouvre, et là vous pouvez changer "submit" en
"Envoyer" et "reset" en "réinitialiser".

Personnaliser : Si vous le souhaitez, vous pouvez

personnaliser l'apparence et la disposition du formulaire.

L'onglet "Customize" «Personnaliser» offre une variété de mise en page

et de thèmes pour personnaliser l'apparence de vos formulaires.
Layouts et thèmes peuvent être combinés ensemble pour créer un site
visuellement attrayant.

Choisir la Mise en page :

● Vous pouvez choisir la disposition des formulaires entre les différents
modèles proposés, comme indiqué dans la capture d'écran ci-dessous.
● Cliquez sur l'onglet Choose Layout «Choisir Mise en page» et
cliquez sur le modèle de votre choix pour le sélectionner.
Les thèmes
● Les thèmes sont les couleurs, les polices et les images de fond qui
composent le style de vos formulaires. Vous pouvez choisir parmi une
gamme de thèmes pour le personnaliser.
● Sur la page customize, cliquez sur l'onglet "Choose Theme" pour
choisir un Thème. Vous pouvez également créer vos propres thèmes
personnalisés en fonction de vos besoins. Par exemple, vous pouvez
choisir le "Gradient theme" «thème de dégradé» avec la couleur
souhaitée et cliquez sur "Apply" «Appliquer».
 Réorganiser les liens :
● Sur la page customize, cliquez sur l'onglet "Rearrange Links"
«Réorganiser les liens» pour organiser les formes et les points de
vue dans les différentes sections ou pour ajouter de nouvelles
rubriques. Par défaut, toutes les formes et les points de vue seront
énumérés sous la section "Home" «Accueil». Ici, nous avons ajouté
une nouvelle section nommée "Add New Contact" «Ajouter un
nouveau contact». De même, vous pouvez placer le point de vue
nouveau contact dans une nouvelle section nommée Contacts View.

Accéder à l'application
Nous avons terminé la création de l'application et la personnalisation de
l'apparence. Maintenant, nous allons accéder à l'application pour voir comment
cela fonctionne.

1. Cliquez sur le bouton .

2. Ajouter un enregistrement échantillon de contact et cliquez sur Submit
" Envoyer ".
3. Visualiser l'enregistrement en sélectionnant l'onglet View Contacts
" Vue des contacts ". Le dossier soumis au nouveau formulaire de
contact sera affiché dans la page intitulée New contact view " vue
nouveau contact ", comme le montre la capture d'écran ci-dessous :

Dernière opération : Ajouter le Formulaire à votre site Web ou

Blog.
● Pour voir votre formulaire et l'ajouter à votre site Web ou blog, cliquez

sur le bouton .
● Votre page formulaire s'affiche : Cliquez sur More actions comme
indiqué ci-dessous et dans le menu déroulant cliquer sur ---> Embed
in your website
 ● Une nouvelle fenêtre s'ouvre, contenant les codes de votre page
formulaire comme indiqué par la flèche dans la capture ci-dessous.
● Copier et coller les codes dans le code HTML de votre page site Web
ou Blog pour insérer votre formulaire de contacts.

Pour ma part, j'ai construit mon blog en créant et additionnant

plusieurs blogs pour les différentes rubriques, dont un uniquement
pour mon formulaire de contact, ce qui m'a permis de coller le code
du formulaire dans le code HTML du message.
Vous pouvez voir le résultat ici http://boutiquedunet.blogspot.com/
rubrique contact.
Espérant que ce Tutoriel vous aura été utile.