Antivirus offre spéciale - jusqu'à 60 % de réduction avec openElement !
Accueil Forum Accueil Forum >

openElement

> Tutoriaux utilisateurs
  Nouveaux messages Nouveaux messages Fil RSS  - Mini tuto formulaire pour débutant
  FAQ FAQ  Rechercher dans le Forum   Inscription Inscription  Connexion Connexion

Mini tuto formulaire pour débutant

 Répondre Répondre Page  123 6>
Auteur
Message
brolysan allez vers le bas
Admin Group
Admin Group
Avatar

Depuis le: 14 Août 2009
Pays: France
Status: Inactif
Points: 9441
Options des messages Options des messages   Thanks (0) Thanks(0)   Citer brolysan Citer  RépondreRéponse Lien Direct à ce Post Sujet: Mini tuto formulaire pour débutant
    Envoyé : 13 Juin 2015 à 14:02
Suite à une demande d'un des nouveau utilisateur, voilà un mini tuto pour mieux appréhender cette partie d'OE (OpenElement).
Crées ta page contact ou autre.
Place sur celle ci les éléments composants ton formulaire.
Pour chaque bloc où tu veux que tes visiteurs remplissent un champ (tel que nom, prénom, adresse, numéro de téléphone, etc), tu places sur ta page un champ de saisie de texte.



Une fois placé sur ta page, tu as donc un bloc avec 2 icônes en bas à gauche.
Le deuxième sert à lui spécifier les règles de validation que tu veux sur ce bloc là.


Cliques dessus.
La fenêtre des règles de validation s'ouvre.



Cliques sur Ajouter une règle et sélectionnes Prédéfinie



Tu te retrouves avec tout un choix d'options pour ce bloc. Généralement, pour tout ce qui est nom, adresse, etc, on choisis que Champ obligatoire. Double clic dessus pour l'ajouter à droite (règles ajoutées)


Tu peux ajouter autant de règles que tu veux (surtout pour les adresses mails par exemple)


Une fois la règle ajoutée (ou les règles selon ton bloc), cliques sur enregistrer.
Tu vas devoir maintenant indiquer le message d'erreur pour chaque règle que tu as choisi pour informer le visiteur en cas d'absence (pour des infos que tu juges obligatoire) ou d'erreur de sa part.

En l’occurrence, pour mon exemple, j'ai spécifié "Veuillez indiquer votre nom" :


Une fois les règles finies, si tu as spécifié des polices et/ou taille sur tes pages, fais de même pour ton bloc.

Menu du haut, onglet Zone de Style.




Cliques sur l'icône Cadre principal et sélectionnes ce que tu veux changer comme type dans le bloc



Une fois finie, va sur le menu de droite, onglet propriétés et changes le nom de ton bloc (tu verras pourquoi par la suite).



Pour ma part, je l'ai appelé bloc_nom pour l'exemple.

Si tu souhaites que tes visiteurs indiquent une adresse email et recevoir le formulaire avec comme expéditeur leur adresse email, il va falloir la aussi noter l'ID de l'élément. Cela servira dans la suite du tutoriel pour paramétrer le formulaire.

Dans mon exemple, j'ai renommé l'ID et lui ai donné le nom WEEMAIL



Pour le cas où tu veux que les visiteurs te laissent un message de plusieurs lignes, tu dois choisir un champ de saisie de texte multilignes.



Maintenant que tout tes blocs sont posés et que tu leurs as donné un nom, passons à la phase du bouton d'envoi du formulaire. Glisses le sur la page.



Tu peux le laisser comme tel, ou bien choisir un modèle déjà prêt existant. Pour cela, menu de droite, puis Styles, et onglet Modèles de Styles.


Pour changer le texte contenu dans le bouton de formulaire, tout menu de droite, onglet Propriétés, puis Edition et section Texte.



Penses là aussi à changer le nom du bouton de formulaire par exemple, bouton_formulaire.



Une fois mon modèle choisi et mon texte changé, voila ce que cela donne.




Autre possibilité :
Vous pouvez mettre un bloc de texte simple, mettre les formes et texte que vous voulez.
Du moment que vous indiquez la aussi un nom à l'élément.





Passons à la phase paramétrage maintenant de ton formulaire.

Déposes l'élément Envoi par e-mail sur ta page.



Une fenêtre s'ouvre normalement. Il va te falloir la renseigner.
Pour commencer, renseignes tous les champs que tu vois.


Rien de bien compliqué. Pour mon exemple, bien entendu, j'ai spécifié mon adresse, pensez à mettre la votre...Embarrassed
Le paramétrage par défaut d'OE (pour éviter le spam) est de spécifier un email d'expéditeur fixe (au lieu de celui du visiteur) ou bien de mettre l'ID de l'élément que renseigne vos visiteurs, pour ainsi récupérer l'email. A toi de voir si tu le souhaites de changer ou non.
Par expérience, mettez l'ID.

Une fois renseignée, tu cliques sur suivant. Tu vas aller sur la partie des messages de résultat de l'envoi email. Tu vas choisir (ou non) les messages de réussite ou d'erreur pour l'utilisateur.



Une fois changé (ou non), cliques sur suivant.


Nous voilà arrivé sur la partie crucial du paramétrage.
Si tu as bien renommé tes blocs comme je te l'ai indiqué, tu devrais comprendre sans problème.


Avec les flèches au centre, passes les éléments que tu souhaites recevoir par le biais du formulaire sur la fenêtre de droite.
En bas, sur la partie Bouton d'envoi, cherches ton élément Bouton de formulaire que tu as renommé. Le mien est BT ENVOYER.


Ensuite, cliques sur suivant.


Nous voilà sur la partie intitulé des champs dans l'email.

Mets le texte que tu veux voir apparaître dans le mail du formulaire.
Pour ma part, je spécifie toujours à quoi correspondant l'élément avec ensuite deux points (:)



Une fois renseigné, cliques sur suivant.


Cliques sur Terminer.

Tout est prêt, tu n'as plus qu'à mettre en ligne et à tester.



Edité par brolysan - 19 Oct 2018 à 18:29
Haut de la page
Dmit OE allez vers le bas
Admin Group
Admin Group
Avatar

Depuis le: 31 Mai 2012
Status: Inactif
Points: 14004
Options des messages Options des messages   Thanks (1) Thanks(1)   Citer Dmit OE Citer  RépondreRéponse Lien Direct à ce Post Envoyé : 13 Juin 2015 à 14:26
Thumbs Up
Haut de la page
Bridet allez vers le bas
Senior Member
Senior Member
Avatar

Depuis le: 13 Dec 2013
Pays: Condroz
Status: Inactif
Points: 4596
Options des messages Options des messages   Thanks (0) Thanks(0)   Citer Bridet Citer  RépondreRéponse Lien Direct à ce Post Envoyé : 26 Juin 2015 à 11:58
Alors, je l'avoue, je n'avais encore qu'adapté des formulaires.
Me trompé-je ou le nom d'un champ simple ou multilignes n'apparaît pas visuellement "automatiquement" et il faut bel et bien rajouter une ligne de texte?
Haut de la page
Hobby001 allez vers le bas
Admin Group
Admin Group
Avatar
Modérateur

Depuis le: 14 Feb 2015
Pays: Canada, Québec
Status: Inactif
Points: 4795
Options des messages Options des messages   Thanks (0) Thanks(0)   Citer Hobby001 Citer  RépondreRéponse Lien Direct à ce Post Envoyé : 26 Juin 2015 à 12:25
Message posté par Bridet Bridet a écrit:

Alors, je l'avoue, je n'avais encore qu'adapté des formulaires.
Me trompé-je ou le nom d'un champ simple ou multilignes n'apparaît pas visuellement "automatiquement" et il faut bel et bien rajouter une ligne de texte?
 
C'est bien le cas (ou peut-être est-ce du à mon ignorance), il faut ajouter du texte pour indiquer le contenu désiré dans la case.  J'ai aussi changé la couleur du fond des champs que j'ai choisi de rendre obligatoires pour clarifier la situation.
 
Je n'ai pas trouvé de façon aisée de changer la disposition des éléments visibles du Captcha.
 
De plus j'ai éprouvé quelques difficultés avec le code proposé par OE pour un bouton "Effacer les cases" 
 
$(':input').clearFields();
 
 DMIT a fourni celui-ci à la place:
var t=$(\':input\').clearFields();
J'ai pu mettre deux formulaires différents sur une même page avec succes.
Chaque formulaire contient son propre envoi par email et son propre bouton pour effacer les cases. 
 
L'envoi par courriel fonctionne bien puisque nous sélectionnons les champs à envoyer
 
Le code cité plus haut pour vider les cases fait en sorte que le contenu des deux formulaires soit effacé quel que soit le bouton "Effacer" sélectionné.
 


Edité par Hobby001 - 26 Juin 2015 à 12:46
Quand on veut mettre quelque chose en ligne, on se fait prendre par quelque chose de gros.
Haut de la page
Bridet allez vers le bas
Senior Member
Senior Member
Avatar

Depuis le: 13 Dec 2013
Pays: Condroz
Status: Inactif
Points: 4596
Options des messages Options des messages   Thanks (0) Thanks(0)   Citer Bridet Citer  RépondreRéponse Lien Direct à ce Post Envoyé : 26 Juin 2015 à 12:50
C'est bizarre car dans WIKI (on parle de boîte de saisie de texte) et sur mon ancien site, il semble que le nom du champ et la possibilité de mettre une image est automatique, y aurait-il un recul dans les options?
Haut de la page
brolysan allez vers le bas
Admin Group
Admin Group
Avatar

Depuis le: 14 Août 2009
Pays: France
Status: Inactif
Points: 9441
Options des messages Options des messages   Thanks (0) Thanks(0)   Citer brolysan Citer  RépondreRéponse Lien Direct à ce Post Envoyé : 26 Juin 2015 à 14:47
les options ont changées au fil des mises à jour, le wiki n'est plus à jour.
On bosse dessus...Big smile
Haut de la page
Bridet allez vers le bas
Senior Member
Senior Member
Avatar

Depuis le: 13 Dec 2013
Pays: Condroz
Status: Inactif
Points: 4596
Options des messages Options des messages   Thanks (0) Thanks(0)   Citer Bridet Citer  RépondreRéponse Lien Direct à ce Post Envoyé : 26 Juin 2015 à 18:08
Oui, il semble bien, donc confirme-moi, le Nom du champ (même si bien renseigné dans propriétés) n'apparaît plus automatiquement et il faut bel et bien insérer un texte simple ligne?
(J'ai essayé le copier/coller de mon ancien site (sous OE), ça ne marche pas.)
Haut de la page
Maurice306 allez vers le bas
Senior Member
Senior Member
Avatar

Depuis le: 20 Avr 2008
Pays: France
Status: Inactif
Points: 2078
Options des messages Options des messages   Thanks (0) Thanks(0)   Citer Maurice306 Citer  RépondreRéponse Lien Direct à ce Post Envoyé : 26 Juin 2015 à 18:34
Message posté par Bridet Bridet a écrit:

Alors, je l'avoue, je n'avais encore qu'adapté des formulaires.
Me trompé-je ou le nom d'un champ simple ou multilignes n'apparaît pas visuellement "automatiquement" et il faut bel et bien rajouter une ligne de texte?
 
Message posté par Hobby001 Hobby001 a écrit:

C'est bien le cas (ou peut-être est-ce du à mon ignorance), il faut ajouter du texte pour indiquer le contenu désiré dans la case.  J'ai aussi changé la couleur du fond des champs que j'ai choisi de rendre obligatoires pour clarifier la situation.
 

Bonjour à tous,

La première partie vient de Microvinc, la seconde de Hobby001.

J'ai tout appliqué et c'est au poil, le texte dans l'élément s’efface automatiquement lorsque le visiteur veut y mettre ses propres données.

Effacer le Texte valeur de saisie dans un champ de formulaire

  

Pour chaque élément-champ en question (simple ligne ou multiligne), mettez dans la Propriété Classe Perso le class default-text.

Ajoutez un Bloc de Code Source type Javascript position Header avec le code:


$(function(){
    $('.default-text :input').focus(function(){ // quand on selectionne et commence a modifier le champ
        if (!$(this).data('defaultText'))
            $(this).data('defaultText', $(this).val());
        var defaultText = $(this).data('defaultText'); // texte de depart
        if ($(this).val() === defaultText)
            $(this).val(''); // enlever le texte si = texte par defaut
    });
    $('.default-text :input').blur(function(){ // quand on quitte le champ
        var defaultText = $(this).data('defaultText'); // texte de depart
        if (defaultText && !$(this).val())
            $(this).val(defaultText); // si le champ est vide, remettre texte par defaut
       
    });
});

Pour que le formulaire ne puisse pas être envoyé depuis le site sans les données que vous souhaitez faire paraître (nom, prénom etc...) vous devez procéder de la manière suivante :

Quand vous sélectionnez un champ, trois petits boutons apparaissent.(Si le formulaire est dans un panneau d'élément en mode relative il y a trois boutons s'il est en mode absolute, il n'y a que deux boutons)

Celui du milieu donne accès à des règles de validation.

- 1) Ajoutez la règle prédéfinie : Champ obligatoire avec vos textes

- 2) Ajoutez une règle de validation personnalisée avec dans expression régulière la formule   ^((?!blabla).)*$  

- 3) Remplacez blabla par le texte pour le champ.

(Le texte par défaut de la règle obligatoire devrait être remplacé ou modifié s'il était différent de celui de la règle personnalisée) (Soyez logique mettez les mêmes textes que dans la règle prédéfinie).




Edité par Maurice306 - 15 Juin 2016 à 17:47
La vie est belle !!!....., elle est comme chacun se la fait. Ne soyez pas pressé, partez plus tôt, car il n'y a pas de personnes pressée elles ne sont qu'en retard !!!
Haut de la page
Maurice306 allez vers le bas
Senior Member
Senior Member
Avatar

Depuis le: 20 Avr 2008
Pays: France
Status: Inactif
Points: 2078
Options des messages Options des messages   Thanks (0) Thanks(0)   Citer Maurice306 Citer  RépondreRéponse Lien Direct à ce Post Envoyé : 26 Juin 2015 à 18:52
Pour compléter dans l’esprit de Brolysan une petite image 

La vie est belle !!!....., elle est comme chacun se la fait. Ne soyez pas pressé, partez plus tôt, car il n'y a pas de personnes pressée elles ne sont qu'en retard !!!
Haut de la page
Maurice306 allez vers le bas
Senior Member
Senior Member
Avatar

Depuis le: 20 Avr 2008
Pays: France
Status: Inactif
Points: 2078
Options des messages Options des messages   Thanks (0) Thanks(0)   Citer Maurice306 Citer  RépondreRéponse Lien Direct à ce Post Envoyé : 26 Juin 2015 à 18:56
Message posté par Bridet Bridet a écrit:

Oui, il semble bien, donc confirme-moi, le Nom du champ (même si bien renseigné dans propriétés) n'apparaît plus automatiquement et il faut bel et bien insérer un texte simple ligne?
(J'ai essayé le copier/coller de mon ancien site (sous OE), ça ne marche pas.)

Si SI, en renseignant le le champ de texte par ce que le visiteur doit y apposer se voit bien et s'efface automatiquement avec le code ci-dessus Beer
La vie est belle !!!....., elle est comme chacun se la fait. Ne soyez pas pressé, partez plus tôt, car il n'y a pas de personnes pressée elles ne sont qu'en retard !!!
Haut de la page
 Répondre Répondre Page  123 6>
  Partagez ce sujet   

Aller au Forum Permissions du forum allez vers le bas

Forum Software by Web Wiz Forums® version 10.18
Copyright ©2001-2014 Web Wiz Ltd.

Cette page a été affichée en 0,047 secondes.
Acheter votre vélo en ligne