Formulaire  responsive  Ajax/PHP

logo-wubijacq-mail-html-php

wubijacq.com

L 'adjectif "responsive" en anglais signifie " réactif" en français.
"A responsive car" est une voiture nerveuse, qui réagit au quart de tour.


En fait c' est un site qui s' adapte rapidement à plusieurs tailles de résolutions d' écran
Plus de 10% des internautes utilisent des appareils mobiles pour aller sur internet et leur nombre va en croissant

Étant un site de téléchargements et de tutoriels pour des logiciels PC, je n'ai aucun intérêt pour aller vers la mobilité.,
Je maintiens cependant un autre site, qui, lui, est en responsive web design: Nicorama Site. Avec mon associé j' y fais plutôt des tutoriels et .... des formulaires.



Formulaire de contact ou formulaire de commentaires ?


Vous avez la possibilité de faire un vrai formulaire de commentaires en créant des tables SQL avec votre gestionnaire de bases de données.
Il faut avoir des connaissances en PHP/SQL
Les commentaires s'afficheront immédiatement dans la page. Mais ce n'est pas forcément la meilleure solution
Plus simplement, vous avez la possibilité de faire un formulaire de contact qui aura la même fonction d'enregister des commentaires, mais il s'afficheront d'abord dans votre messagerie.
Vous aurez la possibilité de faire vous-même l'affichage des commentaires par copier-coller. C'est plus facile pour permettre la modération et éviter les SPAM.
Vous devrez recopier fidèlement le commentaire de votre correspondant (si vous acceptez son message bien sur)


DEMO                            ZIP




rendu d' un message (test) dans la boite mail Zimbra



Exemples de placement de mon formulaire
dans une page responsive web design


Mon formulaire peut se placer indifféremment dans la partie principale ou dans la barre latérale d' une page responsive


Je choisis de placer mon formulaire dans la barre latérale

Le formulaire devra être placé tout en haut de cette barre latérale, si celle-ci est située à droite
Les commentaires seront affichés tout en bas de la page principale
Lorsque l'écran est réduit vers 625px, le bas de la page principale se retrouve juste en haut de l'encart latéral, et le contenu de toute la page se présente alors sur une seule colonne.
Les commentaires se retrouvent donc juste au-dessus du formulaire dans un appareil mobile par exemple.

Mon formulaire placé dans la barre latérale de timovn-test



Je choisis de mettre mon formulaire dans la partie principale

Bien que ce formulaire est étudié pour être placé dans la barre latérale, il peut aussi se mettre dans la partie principale
En général c'est en bas de cette partie principale qu'on le place, les commentaires venant s' afficher juste au-dessus du formulaire

Mon formulaire placé dans la partie principale de Initializr



Je choisis de mettre mon formulaire seul dans une page web (standalone)

C' est une page consacrée uniquement au formulaire de contact

Mon formulaire placé en standalone






Annonce Google



Pour l' alignement des intitulés avec leurs champs de saisie, je remplace souvent les balises LABEL par des balises SPAN en display:inline-block qui ont les mêmes propriétés d'alignement horizontal
Chaque intitulé est renfermé avec son champs de saisie entre des balises P (ou des balises DIV de préférence)
Je donne aux intitulés une même plus petite largeur possible en pixels (qui contiendra bien l'intitulé le plus long)
Ensuite, je peux régler la largeur des champs de saisie (INPUT et TEXTAREA) en pixels ou en faisant attention d'être visible sur très petit écran

Champs de saisie: pour faciliter son utilisation avec un téléphone mobile (touches tactiles)
  • INPUT
  • type=text pour Nom et Sujet
  • type=email pour Courriel,
  • type=url pour Site web
  • TEXTAREA
  • type=text pour Message

Source: http://lehollandaisvolant.net/img/input-de-type-email.png


statistiques

who's.amung.us
  Partager



wubijacq.com Cliquez ici pour vous abonner à ce flux RSS