Chronique : créer un formulaire de contact sous Spip

(en local)

On part du formulaire tel qu’il est décrit sur spip SPIP Système de Publication Pour l’Internet (CMS utilisé pour le présent site). Voir Wiipedia SPIP .net : "Formulaires CVT par l’exemple"

• création du fichier contact.html HTML HyperText Markup Language (langage de balisage qui permet d’écrire de l’hypertexte) 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é.
  

• Passage à la fonction "charger" : c’est peut-être là que commence mes problèmes !
• création du formulaire "contact.php PHP Hypertext Preprocessor Voir Wikipedia 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 Hypertext Preprocessor Voir Wikipedia 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"

• ... ! ... ?
• 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 HTML HyperText Markup Language (langage de balisage qui permet d’écrire de l’hypertexte) . 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 HTML HyperText Markup Language (langage de balisage qui permet d’écrire de l’hypertexte) " et "contact.php PHP Hypertext Preprocessor Voir Wikipedia 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 courante" 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...";

• (ré)ouverture du fichier "contact.php PHP Hypertext Preprocessor Voir Wikipedia 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 pas 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...

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 PHP Hypertext Preprocessor Voir Wikipedia 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 SPIP Système de Publication Pour l’Internet (CMS utilisé pour le présent site). Voir Wiipedia 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 HTML HyperText Markup Language (langage de balisage qui permet d’écrire de l’hypertexte) " 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 SPIP Système de Publication Pour l’Internet (CMS utilisé pour le présent site). Voir Wiipedia 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...)

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

• Après lecture de plusieurs articles, la réponse semble être dans "La fonction charger() des formulaires CVT § Que doit faire la fonction ?"
• Donc, il faut ajouter l’affichage dans le formulaire "contact.html HTML HyperText Markup Language (langage de balisage qui permet d’écrire de l’hypertexte) " avec par exemple :

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 boucle 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>

• 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 formulaire.
• Peut-être que quelquefois, le formulaire ne devrait pas être encadré [2] Donc, ce sera fait depuis l’article si besoin.
• dans "contact.html HTML HyperText Markup Language (langage de balisage qui permet d’écrire de l’hypertexte) " création de l’id "formcontact" pour le formulaire [3].
• 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ésultat (à 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 */
}

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>

• Les formulaires Cet article concerne plutôt les formulaires existant de base dans Spip SPIP Système de Publication Pour l’Internet (CMS utilisé pour le présent site). Voir Wiipedia SPIP . (version mise à jour le 04/02/2020)
• Formidable, le générateur de formulaires "Un générateur de formulaires facilement configurable pour les non-informaticien·ne·s et facilement extensible pour les développeur⋅euses." Ben... je ne parviens pas à l’adapter à mon projet. Dommage... (version mise à jour le 05/04/2020)
• Gestion agnostique de formulaires Qui ne connaît pas le proverbe "Trop d’infos tue l’info." Ça reste quand même une super source d’informations à consulter avant d’entreprendre. (version mise à jour le 13/05/2020)
• Mon premier formulaire pas à pas : c’est Formidable ! C’est une vidéo et le problème avec les vidéos c’est que c’est la main (celle qui tient la souris) qui fait les pauses, les retours en arrière, les avances raides, les reprises... alors que je suis habitué à me servir de mes yeux. (version mise à jour le 09/02/2019)
• Structure HTML des formulaires de SPIP (version mise à jour le 14/01/2020)
• Les formulaires CVT de SPIP (version mise à jour le 14/11/2019)
• Surcharger une fonction _dist (version mise à jour le 12/05/2017)
• Formulaires CVT par l’exemple (version mise à jour le 20/04/2020)
• La fonction charger() des formulaires CVT (version mise à jour le 26/03/2018)
• La fonction verifier() des formulaires CVT (version mise à jour le 26/03/2018)
• La fonction traiter() des formulaires CVT (version mise à jour le 12/11/2018)