70 modèles de formulaires HTML et CSS

logo wufoo

Si vous n’êtes pas un grand spécialiste de la création des formulaires, cet article est pour vous ! Voici 70 modèles de formulaires HTML, de quoi vous économiser quelques heures de travail 😉

Si en plus de cela le design de ces derniers vous semble insurmontable, vous pourrez toujours utiliser les modèles de formulaires CSS à appliquer directement aux modèles HTML que vous aurez précédemment téléchargés.

Si le sujet des formulaires vous intéresse, je vous conseille la lecture des articles suivants :

Je me suis d’ailleurs inspiré de ces formulaires, pour créer celui de drone mariage.

Validation de formulaire (2) – JotForm

Je vous parlais il y a quelques jours de ce modeste script permettant de valider les champs d’un formulaire en javascript. Voici un petit service en ligne qui fait la même chose, même plus besoin de mettre la main à la pâte pour faire de beaux formulaires. Il suffit de se rendre à cette adresse http://www.jotform.com, créer un compte (100% gratuit) et d’utiliser un des assistants pour créer votre formulaire (contact, sondage, etc.). Les formulaires sont entièrement paramètrables, l’application est rudement bien foutue.

Vous trouverez plus bas dans cet article un exemple de formulaire de contact créer avec JotForm.

Alors quel est le point noir de ce service ? Le code généré n’est pas des plus propre (utilisation de tableaux pour la mise en page).

Personnellement je n’utilise pas ce type de service, j’utilise mon propre générateur de code (j’aurai l’occasion de vous en reparler) associé à une feuille de style. Par contre je trouve l’interface de JotForm vraiment bien pensée, une très belle utilisation des technologies AJAX et plus particulièrement de la bibliothèque scriptaculous.

     
   

 
   
     

dans Web Design | | 424 Mots Commentaires fermés sur Validation de formulaire (2) – JotForm

Validation de formulaire sans rechargement de la page

Cela faisait quelques temps que je cherchais un petit script pour contrôler mes formulaires avec un retour immédiat (sans rechargement de la page) en cas d’erreur. Eh bien je l’ai trouvé !

Il s’agît d’un script développé par Andrew Tetlaw qui est disponible à cette adresse : Really easy field validation. Il permet de valider un formulaire de façon simple et esthétique. La prise en main est très rapide, en quelques minutes vous serez capable de le mettre en place 😉

Un exemple est préférable à de longues explications, vous pourrez donc tester cela lors de la saisie de commentaires sur mon blog.

Mais comment ça fonctionne ?

Tout d’abord il s’agît d’un script basé sur Prototype.js (la fameuse librairie Javascript / Ajax). Pour le faire fonctionner il suffit d’intégrer ces deux fichiers (prototype.js & validation.js) dans votre page HTML comme ci-dessous :

<script src="prototype.js" type="text/javascript"></script>
<script src="validation.js" type="text/javascript"></script>

Ensuite, pour chaque champ du formulaire que vous souhaitez contrôler, écrivez votre code comme suit :

<input class="required" id="field1" name="field1" />

La validation se fera en fonction de la class CSS utilisée (c-a-d class="required"), il existe de nombreuses options permettant par exemple de tester les adresses email (validate-email), dates (validate-date-au), urls (validate-url), etc. …

Pour conclure il convient d’activer la validation sur l’ID de notre formulaire :

<script type="text/javascript">new Validation('form-id'); // OR new Validation(document.forms[0]);</script>

Les messages d’alertes sont entièrement personnalisables (texte et apparence). Pour plus d’information je vous conseille d’aller jeter un oeil au site de l’auteur.

Intégration du script dans dotclear 1.2.x (pour les commentaires)

Si comme moi vous avez un blog dotclear (1.2.x) et vous souhaitez utiliser ce script pour les commentaires, voici le code et les fichiers à insérer sur la page "form.php" de votre thème.
Un problème avec le script ? Contactez moi