Bonjour,
Comment vos pages contact s’affichent-elles sur smartphones ?
Je cherche sans trouver, la ou les bonnes solutions pour que le formulaire contact sous Escal s’affiche correctement sur les petits écrans de smartphones en format portrait ou paysage.
Tous les autres formulaires spip ( forum sous article, inscription newsletter, formulaires formidable, formulaire écrire à un auteur, … s’affichent correctement avec les réglages CSS dans perso.css
Mais la page contact est rebelle ! Elle ne veut pas obéir aux mêmes considérations de réglages CSS de spip que les autres formulaires avec les champs « input », « submit », aréa, etc …
1. Mon bouton est récalcitrant, alors que tous les autres se centrent et occupent"max-width:96%" de la largeur. Celui-ci est rebelle, avec une méchante tendance à se diriger vers l’extrème droite. Ça me déplaît !
2. Les marges blanches sont superflues sur petit écran. J’aimerai que l'ensemble des marges page contact : ``"body{``width: auto;`` margin: 0;`` padding: 0;``}" soient quasi réduites à zéro, pour que toute la largeur disponible de l’écran puisse être utile à la saisie par le visiteur.
J’ai bien trouvé quelques idées de réglages ici avec un exemple de formulaire en flexbox : https://openclassrooms.com/forum/sujet/formulaire-flexbox
et ici : https://www.romainvincent.com/creer-un-formulaire-responsive-2-colonnes-contact-form-7/
et chez Alsa-créations : https://www.alsacreations.com/astuce/lire/1177-Une-feuille-de-styles-de-base-pour-le-Web-mobile.html
Hé bé, là je bloque et tourne en rond.
Avez-vous des exemples dans vos sites escal de formulaires contacts adaptatifs aux petits écrans ?
Merci de toutes vos suggestions ?
@+
Bonjour,
En triturant les <CSS,
en ajoutant un certain « box-sizing: border-box; width: 100%; »
et des négatives « margin-left= -20px; » les champs semblent rentrer dans l’espace.
Je suis arrivé à améliorer l’affichage en largeur des champs area et textes, …
mais l’alignement n’est pas parfait (Y aurait-il des marges invisibles ?) voir ici : https://www.lettonie-francija.fr/spip.php?page=contact
J’ai l’impression qu’on pourrait s’y prendre avec plus de simplicité dans le code CSS global,
car tous les formulaires d’un même site obéissent aux mêmes réglages de champs input, area, label, submit, etc …
Mon bouton submit a fini par s’exécuter en se centrant sur tous les formulaires, avec un réglage ajouté à celui de contact.
L’idéal pour un affichage sur tous écransOptimiser et simplifier les surfaces utilisables pour la saisie, soit :
- Les champs de saisie de textes s’affichent dans toute la largeur ou presque toute la largeur (98%), que cela soit en affichage paysage ou portrait
- Le bouton submit s’affiche centré, aussi sur toute la largeur ou ou presque toute la largeur (90 / 95 %) avec des marges droite et gauche presque nulles, (ex = 2%)
- Mettre les labels de champs, dans les champs avec icone , « Input with icon/image** » exemple https://www.w3schools.com/css/tryit.asp?filename=trycss_form_icon & ci contre**
Ordre des champs « commentaires » et « message » dans le formulaire
Il y a une subtilité psychologique, qui suggère de placer en premier le champ « commentaire - texte » et ensuite l’adresse email et le nom.
Le premier réflexe suite à la lecture d’un article, ou quand on veut poser sa question, est d’écrire son idée, son texte … et ensuite, quand on a bien pataugé avec les doigts, le dicteur vocal et l’écran à écrire son texte, on ajoute son nom et son adresse email avant de valider.
Incorporer d’emblée le champ commentaire sous l’article ?C’est surtout valable pour les formulaires du forum sous articles. Afficher, montrer d’emblée la case « texte du commentaire » sous l’article, suggère de la remplir. Pas besoin de rajouter un bouton intermédiaire en dessous de l’article. Et ensuite on demande nom et email pour valider le commentaire. Le fait de visualiser la case commentaire donne plus envie de la remplir que de cliquer sur un bouton intermédiaire.
Incorporer d’emblée la case à cocher inscription newsletter dans tous les questionnaires publics qui récupèrent une adresse emailceci pour ne pas à avoir à présenter une deuxieme fois la demande d’adresse email pour la validation d’inscription à la newsletter.
Voilà quelques idées qui me passent.
@+
ben ça existe déjà
voir du coté du vieux plugin case a cocher
Va falloir que l’on tricole le html de la page contact …
Le 16/01/2018 à 13:05, amilcar a écrit :
ben ça existe déjà
voir du coté du vieux plugin case a cocher
n’existe que pour un vieux SPIP 2.0
Le 16/01/2018 à 10:22, JASEUR BOREAL a écrit :
Incorporer d’emblée la case à cocher inscription newsletter dans tous les questionnaires publics qui récupèrent une adresse email
ceci pour ne pas à avoir à présenter une deuxieme fois la demande d’adresse email pour la validation d’inscription à la newsletter.
Pour incorporer d’emblée la case à cocher inscription newsletter dans la page contact avec l’adresse email automatiquement récupérée,
Il faudrait bricoler quelque chose qui ressemble à ce que fait déjà le plugin MAILSUSCRIBER https://contrib.spip.net/Mailsubscribers
qui ajoute une case à cocher lors lors de l’inscription au site pour s’abonner à la Newsletter
« Si vous activez cette option, une case à cocher sera automatiquement ajoutée sur le formulaire d’inscription au site pour permettre l’inscription à la Newsletter en même temps ».
Il y a besoin de réaliser la même démarche, mais pour le formulaire page-contact. Ainsi on évite une double demande de l’adresse email, et l’on suggère l’inscription lors de chaque contact.
On pourrait aussi appliquer la même méthode pour le formulaire message du forum de chaque article.
@+
effectivement il faut mettre les mains dans le cambouis …
il faut surcharger
je te laisse decouvrir les joie du code 
ps/ a quand l’article pour les portables
Hello
Loin de répondre à toutes attentes de Jaseur, un premier jet d’amélioration de la page contact que je viens de livrer.
Evidemment, pour le tester, il faut enlever toutes les surcharges css ou html qui auraient pu être faites.
Le résultat est déjà visible sur le site de test que Stéphane m’a gentiment ouvert, merci à lui.
http://escal.spipfactory.com/spip.php?page=contact&lang=fr&var_mode=recalcul
Merci Jean-Christophe,
Il y a un truc sur lequel je bloque, c’est la marge incompressible à gauche (en rouge).
Sur petits écrans, comment faire réduire cette marge à presque zéro,
ou au moins l’aligner sur le texte du dessus ?
ul#item {
padding-left: 10px;
}
Le 16/01/2018 à 21:02, Jean Christophe Villeneuve a écrit :
ul#item {
padding-left: 10px;
}
Le 16/01/2018 à 20:51, JASEUR BOREAL a écrit :
Merci Jean-Christophe,
Il y a un truc sur lequel je bloque, c'est la marge incompressible à
gauche (en rouge).
Sur petits écrans, comment faire réduire cette marge à presque zéro,
ou au moins l'aligner sur le texte du dessus ?
Bonsoir,
Ça fait quelques jours que je reste en observateur sur la liste.
Là justement je m'intéresse à l'habillage graphique de SPIP.
Donc je trouve ce genre de petits échanges très instructif!
J'interviens donc juste pour dire Merci.
--
_ Amour Paix Joie _
David
Merci pour les fleurs
Je bosse dessus et en avant première, voici un début de ce que ça devrait donner
Bonjour,
Petite question, sur les blocs latéraux ont trouve la noisette "sur le web" au niveau "Page d'accueil" et "Les articles", pas dans "Les rubriques".
Y a t'il une raison particulière ?
Cordialement,
André
La seule raison est que personne ne l'a demandé encore et que quand je l'ai rajouté pour les pages articles, j'ai du avoir la flemme de le rajouter pour les pages rubrique
Tu souhaiterais donc que je le rajoute ?
JC
Le 17/01/2018 à 12:24, André Gomez a écrit :
Bonjour,
Petite question, sur les blocs latéraux ont trouve la noisette "sur le web" au niveau "Page d'accueil" et "Les articles", pas dans "Les rubriques".
Y a t'il une raison particulière ?
Cordialement,
André
_______________________________________________
Spip-avec-escal@rezo.net - http://listes.rezo.net/mailman/listinfo/spip-avec-escal
Disons que cela parait plus équilibré, j'avais envie que cette noisette soit sur toutes mes pages.
Mais ce n'est pas obligatoire, simplement un plus et cela n'a aucune urgence!
André
Le 17/01/2018 à 15:09, Jean Christophe Villeneuve a écrit :
La seule raison est que personne ne l'a demandé encore et que quand je l'ai rajouté pour les pages articles, j'ai du avoir la flemme de le rajouter pour les pages rubrique
Tu souhaiterais donc que je le rajoute ?
JC
Le 17/01/2018 à 12:24, André Gomez a écrit :
Bonjour,
Petite question, sur les blocs latéraux ont trouve la noisette "sur le web" au niveau "Page d'accueil" et "Les articles", pas dans "Les rubriques".
Y a t'il une raison particulière ?
Cordialement,
André
_______________________________________________
Spip-avec-escal@rezo.net - http://listes.rezo.net/mailman/listinfo/spip-avec-escal
_______________________________________________
Spip-avec-escal@rezo.net - http://listes.rezo.net/mailman/listinfo/spip-avec-escal
Ok je te ferais ça
Le 17/01/2018 à 15:13, André Gomez a écrit :
Disons que cela parait plus équilibré, j'avais envie que cette noisette soit sur toutes mes pages.
Mais ce n'est pas obligatoire, simplement un plus et cela n'a aucune urgence!
André
Le 17/01/2018 à 15:09, Jean Christophe Villeneuve a écrit :
La seule raison est que personne ne l'a demandé encore et que quand je l'ai rajouté pour les pages articles, j'ai du avoir la flemme de le rajouter pour les pages rubrique
Tu souhaiterais donc que je le rajoute ?
JC
Le 17/01/2018 à 12:24, André Gomez a écrit :
Bonjour,
Petite question, sur les blocs latéraux ont trouve la noisette "sur le web" au niveau "Page d'accueil" et "Les articles", pas dans "Les rubriques".
Y a t'il une raison particulière ?
Cordialement,
André
_______________________________________________
Spip-avec-escal@rezo.net - http://listes.rezo.net/mailman/listinfo/spip-avec-escal
_______________________________________________
Spip-avec-escal@rezo.net - http://listes.rezo.net/mailman/listinfo/spip-avec-escal
_______________________________________________
Spip-avec-escal@rezo.net - http://listes.rezo.net/mailman/listinfo/spip-avec-escal
Bonsoir,
pourrais je avoir url du site pour voir si je l'ai déjà épingler sur
les escaliens de spipfactory.com
Le 16/01/2018 à 21:46, David T a écrit :
Le 16/01/2018 à 21:02, Jean Christophe Villeneuve a écrit :
ul#item {
padding-left: 10px;
}
Le 16/01/2018 à 20:51, JASEUR BOREAL a écrit :
Merci Jean-Christophe,
Il y a un truc sur lequel je bloque, c'est la marge incompressible à
gauche (en rouge).
Sur petits écrans, comment faire réduire cette marge à presque zéro,
ou au moins l'aligner sur le texte du dessus ?
Bonsoir,
Ça fait quelques jours que je reste en observateur sur la liste.
Là justement je m'intéresse à l'habillage graphique de SPIP.
Donc je trouve ce genre de petits échanges très instructif!
J'interviens donc juste pour dire Merci.
--
@micalement
https://spipfactory.com/ : Plateforme d’hébergement autogéré en association de loi 1901
Propulsée par la mutualisation de Spip, sous habillage Escal
D’après ce que j’en ai vu, ça passe par un fonction CVT dans un pipeline … très compliqué pour mes petites compétences en ce domaine
J’essaierais peut-être mais je ne promet rien.
ouep
fraudais mieux regardé l’ancien plugin case a cocher
ou demandé a arnaud il a déjà fait ça pour un plugin : sf_hebergé
J’ai posté un message sur le forum du plugin. On verra bien.
