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.