Technologie de l'information et de la communication
Un peu geek mais surtout un dinosaure, de ceux qui ont soudé les composants de leur première machine, flashé la mémoire et publié dans Hebdogiciel.
La citation du jour
La moquerie est de toutes les injures celle qui se pardonne le moins.  (Jean de La Bruyère )
La réflexion du jour
Donner du sens aux graphismes que sont aussi les mots, c’est apprendre à lire mais ce n’est pas encore lire.
Activités
geek - cycliste - généalogiste - Savoir - lecteur - collectionneur - Philosophe - citoyen - marcheur - scripteur - Photographe - instituteur - enseignant en sciences - enseignant formateur - journaliste local - bénévole
Les mots clés
doc TIC * SPIP * Wikipedia * web & internet * Php * OVH * informatique * Sql * Wamp * Qwant * Firefox * LibreOffice * Thunderbird * FOAD * Buttercup * Mastodon * PeerTube * Chatons * OpenStreetMap * IrfanView * E-learning
Lorand

Site personnel de Roland Bouat. Pour les curieux : Lorand est un anagramme de Roland.

Didacticiel

Chronique : créer un formulaire de contact sous Spip

... en suivant pas à pas un exemple.

dimanche 24 mai 2020 , par Roland


Comme je n’arrive pas à faire fonctionner un formulaire sous Spip  , je reprends tout à zéro et je raconte toutes les étapes marche après marche ou pas à pas (au choix). Je vais bien finir par trouver pourquoi ça ne marche jamais dès que je passe à la personnalisation... (et même quelquefois avant...).

Les titres des paragraphes de cette page sont les titres des paragraphes de la page de spip  . net : "Formulaires CVT par l’exemple"

Étape 1 : Créer le squelette de son formulaire

(en local)

On part du formulaire tel qu’il est décrit sur spip  .net : "Formulaires CVT par l’exemple"

  • création du fichier contact.html dans le sous-répertoire "formulaires" de mon dossier squelettes". Il est vide : normal.
  • ouverture du fichier (vide) avec notepad++
  • ajout du code donné. Comme je n’aime pas qu’on s’adresse au lecteur (je n’aime pas que le rédacteur fasse comme s’il s’adressait à moi quand je lis sa prose parce que ça me semble un tout petit peu hypocrite) et que je préfère le mot courriel à email, je remplace "Votre email" par "le courriel" et "Votre message" par "Le message". pour obtenir :
<form action='#ENV{action}' method='post'>
	#ACTION_FORMULAIRE{#ENV{action}}
	<label>Le courriel</label>
	<input type='text' name='email' value='#ENV{email}' />
	<br />
	<label>Le message</label>
	<textarea name='message'>#ENV{message}</textarea>
	<input type='submit' name='ok' value='ok' />
</form>
  • Enregistrement du fichier
  • Test (comme indiqué) en insérant la balise <formulaire|contact> dans un article spécifique baptisé "Test formulaire [1]" et enregistrement dans l’espace privé.
Toujours comme indiqué, mon formulaire ne fait rien. En fait pas tout à fait : après avoir effectué les entrées de données dans les deux champs, le clic sur le bouton OK ramène au formulaire vierge avec ré-affichage de la page. Cela paraît normal.

Étape 2 : la fonction charger

  • Passage à la fonction "charger" : c’est peut-être là que commence mes problèmes !
  • création du formulaire "contact.php" dans le sous-répertoire "formulaires" du dossier "squelettes". Il est vide : normal.
  • ouverture du fichier avec notepad++
  • ajout du code donné dans le fichier "contact.php"
<?php
 
function formulaires_contact_charger_dist(){
	$valeurs = array('email'=>'','message'=>'');
 
	return $valeurs;
}
 
?>
  • On enregistre le fichier
  • On reste sur le basique (donc on ne va pas voir "Surcharger une fonction _dist".
  • Test (comme indiqué) en recalculant l’article"Test formulaire" dans l’espace privé
  • On renseigne les champs courriel et message et on clique sur le bouton "OK"
Il ne se passe toujours rien (comme c’est indiqué) si ce n’est un ré-affichage de la page. Mais... le formulaire a perdu les valeurs saisies alors qu’il est spécifié : "...le formulaire n’a pas perdu les valeurs que vous avez saisies (même s’il ne fait toujours rien)"
  • ... ! ... ?
  • Et si on testait en englobant le tout dans une div avec class "ajax" ? Comme j’utilise l’appel depuis un article et que je me méfie un peu, je mets la div dans contact.html. J’obtiens donc :
<div class='ajax'>
        <form action='#ENV{action}' method='post'>
                #ACTION_FORMULAIRE{#ENV{action}}
                <label>Le courriel</label>
                <input type='text' name='email' value='#ENV{email}' />
                <br />
                <label>Le message</label>
                <textarea name='message'>#ENV{message}</textarea>
                <input type='submit' name='ok' value='ok' />
        </form>
</div>
  • Enregistrement.
  • Nouveau test. => La classe "ajax" fonctionne puisque je n’ai plus le ré-affichage de la page mais, les données ne sont pas conservées.
  • ... ! ... ?
  • Peut-être est-ce parce que je travaille en local ? Drôle d’idée mais, sait-on jamais...? (Autre question à envisager : "Peut-être est-ce parce que l’article n’est pas publié ?" Question tout aussi "drôle"... !)
  • ...
  • Test sur mon site en distant :
    • transfert par ftp des fichiers "contact.html" et "contact.php"
    • création d’un article provisoire avec la balise <formulaire|contact> dans le champ texte.
    • résultat : ça marche ! Mais pourquoi ça ne marche pas en local ?
    • Sgrogneugneu...
    • Et si... (comme d’habitude, une histoire de cache mais cette fois-ci du navigateur puisque le test a lieu dans l’espace privé). Bingo ! Mais pas facile de réactiver le cache : deux clics (non consécutifs) sur le bouton "Actualiser la page courate" ou [Ctrl]=[R]
  • Retour à l’exemple après avoir compris le dysfonctionnement (même si je n’en ai pas encore compris la raison).
  • Renseigner un champ par défaut avec
if (isset($GLOBALS['visiteur_session']['email']))
		$valeurs['email'] = $GLOBALS['visiteur_session']['email'];
  • Si ce code est bon et fonctionne avec un test, on peut rajouter aussi sans faire de test :
    	$valeurs['message'] = "Ceci est peut-être un test...";

Étape 3 : Vérifier que la saisie est correcte

  • (ré)ouverture du fichier "contact.php" avec Notepad++
  • Ajout de la fonction "formulaires_contact_verifier_dist" pour obtenir :
function formulaires_contact_verifier_dist(){
	$erreurs = array();
	// verifier que les champs obligatoires sont bien la :
	foreach(array('email','message') as $obligatoire)
		if (!_request($obligatoire)) $erreurs[$obligatoire] = 'Ce champ est obligatoire';
 
	// verifier que si un email a été saisi, il est bien valide :
	include_spip('inc/filtres');
	if (_request('email') AND !email_valide(_request('email')))
		$erreurs['email'] = 'Cet email n\'est pas valide';
 
	if (count($erreurs))
		$erreurs['message_erreur'] = 'La saisie contient des erreurs !';
	return $erreurs;
}
  • Oui, le message d’erreur est un peu adapté (toujours parce que je n’aime toujours pas l’hypocrisie...).
  • Tiens, il y a une petite note que je n’avais particulièrement remarqué : "l’utilisation de _request() est expliquée sur le site" avec le lien vers la fonction _request sur le site programmer.spip.net. Il est donc probable qu’il me faille aller un peu plus souvent sur ce site vraiment trop délaissé...
  • Donc, on ajoute l’affichage du message d’erreur par la fonction "verifier" et les messages d’erreur devant chaque champ. Donc maintenant, notre fichier formulaire ressemble à ça (copie) :
<div class='ajax'>
	[<p class='formulaire_erreur'>(#ENV*{message_erreur})</p>]
	<form action='#ENV{action}' method='post'>
		#ACTION_FORMULAIRE{#ENV{action}}
		<label>Le courriel</label>
		[<span class='erreur'>(#ENV**{erreurs}|table_valeur{email})</span>]
 
		<input type='text' name='email' value='#ENV{email}' />
		<br />
		<label>Le message</label>
		[<span class='erreur'>(#ENV**{erreurs}|table_valeur{message})</span>]
 
		<textarea name='message'>#ENV{message}</textarea>
		<input type='submit' name='ok' value='ok' />
	</form>
</div>
  • Petite note : utilisation de #ENV* et de #ENV** (Mais pourquoi donc ? => à voir plus tard.)
  • Dernier pas de cette étape : test. Évidemment (comme je m’y attendais un peu), ça ne marche pas en local mais ça fonctionne en distant. C’est l’essentiel mais... j’aimerais toujours bien connaître la raison de ce dysfonctionnement...

Étape 4 : traiter !

C’est probablement, l’étape qui m’intéresse le plus mais c’est aussi celle que je crains beaucoup parce que je crois que c’est là que je me plante...! Je vais donc prendre quelques notes (remarques) supplémentaires...

  • Ajoutons la fonction "formulaires_contact_traiter_dist" dans le fichier "contact.php"
  • Au passage (et toujours pour la même raison...), je modifie un tout petit peu le "message_ok" en le remplaçant par : "Le message a bien été pris en compte. Une réponse sera prochainement envoyée !"
  • Résultat du codage :
function formulaires_contact_traiter_dist(){
	$envoyer_mail = charger_fonction('envoyer_mail','inc');
	$email_to = $GLOBALS['meta']['email_webmaster'];
	$email_from = _request('email');
	$sujet = 'Contact';
	$message = _request('message');	
	$envoyer_mail($email_to,$sujet,$message,$email_from);
	return array('message_ok'=>'Le message a bien été pris en compte. Une réponse sera prochainement envoyée !');
}
  • Le contenu du "sujet" du message est simplifié par rapport à l’exemple de spip  .net par remplacelement de ’Formulaire de contact’ par ’Contact’.
  • Note : J’aime beaucoup "
    Si la fonction ’traiter’ est appelée c’est qu’il n’y a aucune erreur.

    " Alors que j’en suis à me demander si elle est appelée...

  • note : Le message de succès est contenu dans un tableau (je ne suis pas du tout certain d’avoir repéré ça auparavant.
  • Suite : le formulaire contenu dans "contact.html" est à adapter/modifier en y ajoutant l’appel au message de succès et l’affichage conditionnel.
<div class='ajax'>
	[<p class='formulaire_ok'>(#ENV*{message_ok})</p>]
	[<p class='formulaire_erreur'>(#ENV*{message_erreur})</p>]
	[(#EDITABLE|oui)
		<form action='#ENV{action}' method='post'>
			#ACTION_FORMULAIRE{#ENV{action}}
			<label>Le courriel</label>
			[<span class='erreur'>(#ENV**{erreurs}|table_valeur{email})</span>]
			<input type='text' name='email' value='#ENV{email}' />
			<br />
			<label>Le message</label>
			[<span class='erreur'>(#ENV**{erreurs}|table_valeur{message})</span>]
			<textarea name='message'>#ENV{message}</textarea>
			<input type='submit' name='ok' value='ok' />
		</form>
	]
</div>
  • Note : Encore une information (notée astuce) qui a probablement beaucoup d’importance dans mon projet : "
    Il arrive parfois que l’on veuille placer une BOUCLE dans le formulaire (pour proposer les champs d’un select depuis la base par exemple). L’utilisation de #EDITABLE et de cette boucle provoque une erreur. La solution est d’y ajouter une boucle CONDITION

    "

  • Le code est encore à adapter (dire qu’il y en a pour dire et écrire que le codage d’un formulaire dans Spip   est devenu beaucoup plus facile...).
<div class='ajax'>
	[<p class='formulaire_ok'>(#ENV*{message_ok})</p>]
	[<p class='formulaire_erreur'>(#ENV*{message_erreur})</p>]
	<BOUCLE_editable(CONDITION){si #ENV{editable}|oui}>
		<form action='#ENV{action}' method='post'>
			#ACTION_FORMULAIRE{#ENV{action}}
			<label>Le courriel</label>
			[<span class='erreur'>(#ENV**{erreurs}|table_valeur{email})</span>]
			<input type='text' name='email' value='#ENV{email}' />
			<br />
			<label>Le message</label>
			[<span class='erreur'>(#ENV**{erreurs}|table_valeur{message})</span>]
			<textarea name='message'>#ENV{message}</textarea>
			<input type='submit' name='ok' value='ok' />
		</form>
	</BOUCLE_editable>
</div>
  • C’est sûr, cette boucle _editable, je ne l’avais pas perçue !
  • Mais à quoi peut bien servir cette boucle "_article" au milieu du code ? Je ne vois pas pourquoi il serait nécessaire d’afficher le titre du premier article du site ! Sans doute une scorie qui traîne... Alors, je la supprime. Mais, doute... Je pose la question sur https://www.spip.net/ecrire/?exec=a...
  • Résultat final : cette fois-ci, ça marche. Dommage qu’il m’ait fallu tout relire comme si c’était un didacticiel.
  • Prochaine étape : transférer pour une situation bien particulière (à suivre donc...)

Étape 5 (bonus) : récupérer les données du formulaire

Cette étape n’est pas dans l’article qui a servi de guide pour cette page mais, je vais en avoir besoin.

courriel : #ENV{email}<br />
message : #ENV{message}<br />
  • Plus qu’à tester...
  • Sans surprise, le dysfonctionnement existe toujours un local... Et en distant, s’affichent d’abord les données initiales, puis, après la validation les nouvelles données avec au-dessous les données initiales. Progrès très sérieux : on approche, on approche. Il reste à trouver où inscrire ça... Testons d’abord avant la fermeture de la div "ajax".
  • Et c’est OK (en distant bien sûr).
  • Pour régler le problème de l’affichage des données avant toute saisie, rajout d’une bpucle condition basée sur la réponse par défaut du contenu du message (simplement un point d’interrogation. Ce qui donne :
        <BOUCLE_contactmessageok(CONDITION){si #ENV{message}|<>{"?"}}>
                courriel : #ENV{email}<br />
                message : #ENV{message}<br />
        </BOUCLE_contactmessageok>

Étape 6 (bonus) : un peu de "cosmétique"...

  • projet : le formulaire doit être encadré. Le champ "message" doit occuper la largeur disponible (au moins 400 pixels). Les deux champs doivent être alignés tant à gauche qu’à droite et tant qu’à faire utiliser toute la largeur du formaulaire.
  • Peut-être que quelquefois, le formulaire ne devrait pas être encadré [2].
  • Mise des éléments du formulaire dans des div spécifiques avec les classes correspondantes "emailcontact" et "messagecontact".
  • Ajout d’une classe "boutoncontact".
  • Et voici le fichier final (attention, les css restent à définir).
<div class='ajax' id="formcontact">
        [<p class='formulaire_ok'>(#ENV*{message_ok})</p>]
        [<p class='formulaire_erreur'>(#ENV*{message_erreur})</p>]
        <BOUCLE_editable(CONDITION){si #ENV{editable}|oui}>
                <form action='#ENV{action}' method='post'>
                        #ACTION_FORMULAIRE{#ENV{action}}
                        <div id="emailcontact">
                                <label class="labelcontact">Le courriel</label>
                                [<span class='erreur'>(#ENV**{erreurs}|table_valeur{email})</span>]
                                <input type='text' name='email' value='#ENV{email}' class="inputcontact" />
                        </div>
                        <br />
                        <div id="messagecontact">
                                <label class="labelcontact">Le message</label>
                                [<span class='erreur'>(#ENV**{erreurs}|table_valeur{message})</span>]
                                <textarea name='message' class="textareacontact">#ENV{message}</textarea>
                        </div>
                                <input type='submit' name='ok' value='ok' class="boutoncontact"/>
                </form>
        </BOUCLE_editable>
        <BOUCLE_contactmessageok(CONDITION){si #ENV{message}|<>{"?"}}>
                courriel : #ENV{email}<br />
                message : #ENV{message}<br />
        </BOUCLE_contactmessageok>
</div>
  • il ne reste plus qu’à définir les id et classes dans le fichier css. Voici le réultat (à personnaliser).
/* ============================================================== */
/* Formatage formulaire contact                                    */
/* -------------------------------------------------------------- */
#formcontact {
	position: relative;
	width  : 600px;
	height : 400px;
	margin : 0 auto;
	background : #C7EFF3; /* bleu clair */
}
#emailcontact {
}
#messagecontact {
}
.labelcontact {
	font-weight: bold; 
	text-decoration : underline;
 
}
.inputcontact, .textareacontact {
	border  : none;
	padding : 0 10px;
	margin  : 0;
	width   : 100%;
	background : #CEF6E3; /* vert clair */
}
.inputcontact:focus, .textareacontact:focus {
  background   : rgba(0,0,0,.1); /* gris */
  border-radius: 5px;
  outline      : none; /* supprimer le focus par défaut de quelques navigateurs */
}
.boutoncontact {
	margin : 0 45%; /* centré horizontalement */
}

Test du formulaire

Maintenant que le formulaire fonctionne, il sera utilisé judicieusement (et parcimonieusement). Pour le tester, à chacun de le mettre en œuvre dorénavant en incluant la balise <formulaire|contact>

Références


Maintenant que ça fonctionne, je vais conserver ce formulaire sur le site et l’ajouter à ma collection de petits outils pour les rédacteurs...


Voir en ligne : Départ depuis : "Formulaires CVT par l’exemple" (spip.net)


[1Très original comme titre, n’est-il pas ?

[2C’est comme pour parler mais au lieu de "tourner 7 fois sa langue dans sa bouche" il faut "tourner 7 fois son stylo dans la main"... euh... "tourner 7 fois ses doigts au-dessus du clavier" ! ;-) Donc, ce sera fait depuis l’article si besoin.

  • dans "contact.html" création de l’id "formcontact" pour le formulaire[[il me semble avoir lu que cela pourrait être utile s’il y a plusieurs formulaires sur la page et comme c’est ce qui risque de se produire dans l’autre projet qui m’a obligé à me lancer dans celui-ci...

Un message, un commentaire ?

modération a priori

Ce forum est modéré a priori : votre contribution n’apparaîtra qu’après avoir été validée par un administrateur du site.

Qui êtes-vous ?

Votre message

Ce formulaire accepte les raccourcis SPIP [->url] {{gras}} {italique} <quote> <code> et le code HTML <q> <del> <ins>. Pour créer des paragraphes, laissez simplement des lignes vides.

Brèves
1er juin – Les "bizarreries" continuent...

Déjà un mois que je me bagarre avec elles ! Le progrès principal est la probable identification. Il s’agit des mises à jour Apache, MySql, PHP, qui (...)

1er mai – Bizarrerie sur mon site

Depuis que le site a été restauré, il semblerait qu’il y ait eu un bug lors de la restauration, bug ne concernant que certaines informations (dont, (...)

4 mars 2019 – Fin de Spip3.0

Le support et la maintenance de SPIP 3.0 prendront fin le 30 juin 2019. Il n’y aura plus de mise à jour pour cette version, ni corrections de bugs (...)