Formulaire, template AVEC tutoriel
Azmind - Avec tuto
- Opérationnel, tout fonctionne bien
- Bootstrap 3, PHP, Ajax
Caractéristiques
- L'exemple est stocké sur Web Soluces
- Code HTML5 : Cadre Bootstrap
- Présentation en CSS3
- Contrôles d'existence des champs
- Contrôle de cohérence de l'adresse mail
- Validation et envoi en Php, Ajax
- Impeccable
Image cliquable pour voir l'exemple
Références
Site web
[Créé / modifié] [19-09-2018 / 13-02-2021]
Bootstrapious - Avec tuto
- Très bon tutoriel, tout fonctionne bien
- Bootstrap 4 pour le formulaire
- Site extrêmement riche.
Caractéristiques
- L'exemple est stocké sur Web Soluces
- Code HTML5 : Cadre Bootstrap 4
- Présentation en CSS3
- Contrôles d'existence des champs
- Contrôle de cohérence de l'adresse mail
- Validation et envoi en Php, Ajax
- Code difficile à appréhender pour un débutant
Image cliquable pour voir l'exemple
Références
Site web
[Créé / modifié] [28-08-2018 / 14-02-2021]
C2 Script - Avec tuto
- Code un peu fouillis, aucune présentation
- Sinon, tout marche bien
Caractéristiques
- L'exemple est stocké sur Web Soluces
- Envoyer d'un mail en PHP avec ou sans pièce(s) jointe(s). A paramétrer
- L'envoi de pièce jointe ne fonctionne pas du fait du pare-feu de mon hébergeur. C'est normal.
- Paramètres à modifier : Nb de fichiers max, min; Taille max d'un fichier; L'adresse mail de destination; création du répertoire "./pieces-jointes/".
- Conservation du fichier sur le serveur ou pas
- Contrôle de cohérence de l'adresse mail
- Validation et envoi en Php
Image cliquable pour voir l'exemple
Références
Site web
[Créé / modifié] [14-10-2020 / 14-02-2021]
Cody House - Avec tuto
- Présentation agréable, contrôles
- Aucun traitement d'envoi
Caractéristiques
- L'exemple est stocké sur Web Soluces
- Code HTML5
- Présentation en CSS3 avec des étiquettes flottantes
- Contrôles d'existence des champs
- Contrôle de cohérence de l'adresse mail
- Validation
- Icônes fournis
Image cliquable pour voir l'exemple
Références
Site web
[Créé / modifié] [20-09-2018 / 14-02-2021]
Majestic Form - SCRIPT PHP
- Script PHP de tout premier ordre.
Caractéristiques
- L'exemple n'est, ici, pas fonctionnel
- Il suffit de renseigner EMAIL_TO et EMAIL_FROM pour qu'il fonctionne
- Utilisation de PHPMailer et SMTP
- Extraction gratuite d'un script pro
- Remarquable !
Image cliquable pour voir l'exemple
Références
Site web
[Créé / modifié] [21-06-2022 / 21-06-2022]
Neo Mail - Générateur
- Formulaire PHP avec tutoriel et Captcha light
- Formulaire en parfait état de fonctionnement.
Caractéristiques
- L'exemple est stocké sur Web Soluces
- CSS, JS, jQuery, Bootstrap 3.3.7
- Contrôles de présence des champs et de validité de l'adresse mail
- Utilisation de PHPMailer
- Captcha inclus
Image cliquable pour voir l'exemple
Références
Site web
[Créé / modifié] [03-05-2022 / 03-05-2022]
Php Astux - Avec tuto
- Formulaire PHP avec tutoriel et Antispam light
- Formulaire en parfait état de fonctionnement.
Caractéristiques
- L'exemple est stocké sur Web Soluces
- Code HTML/PHP sans mise en forme en CSS
- Contrôles de présence des champs et de validité de l'adresse mail
- Validation des champs en PHP, PAS DE JAVASCRIPT
- Appel de PHP "mail()"
- Pas de base de données.
- Antispam light inclus
Image cliquable pour voir l'exemple
Références
Site web
[Créé / modifié] [02-01-2021 / 02-01-2021]
PhpPot - Avec tuto
- Ce tutoriel permet de créer un formulaire responsive qui fonctionne
- Il faut les codes SMTP pour l'uliser
Caractéristiques
- Code HTML avec mise en forme en CSS
- Utilisation de jQuery version 2.1
- Contrôles de présence des champs et de validité de l'adresse mail
- Envoi de l'e-mail de contact à l'aide de Gmail SMTP
- La conception réactive du formulaire fait l'objet d'un autre tuto.
Image cliquable pour voir l'exemple
Références
Site web
[Créé / modifié] [26-08-2020 / 26-08-2020]
Php Pot 2 - Avec tuto
- Ce tutoriel permet de créer un formulaire responsive prêt à l'emploi
- Fonctionne parfaitement hormis un problème d'accent et l'affichage du message d'envoi qui ne s'efface pas avec F5, pour en envoyer un autre
- Pas de Captcha
Caractéristiques
- L'exemple est stocké sur Web Soluces
- Code HTML/PHP avec mise en forme en CSS
- Iris sur base Bootstrap
- Utilisation de Vendor
- Contrôles de présence des champs et de validité de l'adresse mail
- Validation des champs par javascript
- Appel de PHP Mail Script
- Ecriture en base des données. Pour ne pas l'utiliser : "$isDatabase = false;"
Image cliquable pour voir l'exemple
Références
Site web
[Créé / modifié] [02-01-2021 / 15-02-2021]
Reusable Forms - Avec tuto
- Bon tuto, vidéo de démonstration. Tout fonctionne
- Bootstrap 3
Caractéristiques
- L'exemple est stocké sur Web Soluces
- Ajouter votre email pour que ça fonctionne : $pp->sendEmailTo('someone@gmail.com');
- Code HTML5 : Cadre Bootstrap
- Présentation en CSS3
- Contrôles d'existence des champs
- Contrôle de cohérence de l'adresse mail
- Validation et envoi en Php
- Captcha
Image cliquable pour voir l'exemple
Site web
[Créé / modifié] [07-10-2018 / 09-11-2020]
Tangled - Avec tuto
- Formulaire et tuto sympas et simples... malgré les anomalies !
- Pour le rendre responsive il suffit 'presque' de remplacer les tailles en pixels par des tailles en pourcentage
- Envoi, contrôle des champs, tout est là, même l'anti spam basique !
Caractéristiques
- Avec tutoriel progressif et explicatif
- Contrôles de l'email et des champs obligatoires
- Code HTML5, CSS3
- Envoi du formulaire avec PHP
- Captcha
- Il faut modifier la fonction d'affichage des champs obligatoires, parce que ceux qui sont saisis s'effacent après validation, s'il y a une erreur
- De plus il faut tester le cas $POST pour éviter les erreurs PHP au démarrage pour champ vide
- Il faut aussi gérer les accents.
Image cliquable pour voir l'exemple
Site web
[Créé / modifié] [31-03-2019 / 15-02-2021]
Tutorial Zine - Avec tuto
- Excellent tuto mais...
- ... une version PHP à faire évoluer, pas responsive et l'antispam ne marche pas à tous les coups !
Caractéristiques
- Avec tutoriel
- Code HTML5
- Présentation en CSS3
- Envoi du formulaire avec PHP
- Captcha
Image cliquable pour voir l'exemple
Site web
[Créé / modifié] [15-04-2019 / 21-02-2021]
Formulaire et template sans tutoriel
Alien Areal - Formulaire
Caractéristiques
- CSS totalement pur
- Rollover sur champ et bouton
- Contrôle de présence des champs obligatoires
- Contrôle de cohérence de l'email
- Envoi du mail
- Norvège
Image cliquable pour voir l'exemple
Références
Site web
[Créé / modifié] [09-02-2022 / 09-02-2022]
Amli - Formulaire
Caractéristiques
- CSS pur
- Aucun contrôle
- La zone semble s'aplatir et le texte en exposant s'étire
- Rollover sur le bouton d'envoi
- Très jolie proposition
- Indonésie
Image cliquable pour voir l'exemple
Références
Site web
[Créé / modifié] [18-02-2022 / 18-02-2022]
Bad Cat Design - Formulaire
Caractéristiques
- CSS, Normalize.css, JS
- Contrôles en PHP
- Fonction mail() d'envoi du formulaire
- MàJ le 25 avril 2022
Image cliquable pour voir l'exemple
Références
Site web
[Créé / modifié] [03-05-2022 / 03-05-2022]
Boffey Alex - Formulaire
- Je trouve ce template beau mais chacun ses goûts
- Aucun contrôle; Pas responsive
Caractéristiques
- Template
- CSS, JS, Normalize
- Aucun contrôle
Image cliquable pour voir l'exemple
Références
Site web
[Créé / modifié] [01-09-2020 / 01-09-2020]
Colorlib - Formulaire
- Présentation sympa...
Caractéristiques
- L'exemple est celui de la démo du site fournisseur du service
- Code HTML5
- Présentation en CSS3
- Contrôles d'existence des champs
- Contrôle de cohérence de l'adresse mail
- Validation
Image cliquable pour voir l'exemple
Références
Site web
[Créé / modifié] [28-08-2018 / 28-08-2018]
Gaunt Connor - Formulaire
- Un air de messagerie professionnelle... au début
Caractéristiques
- CSS, JS, rien d'autre
- Aucun contrôle
- Après avoir cliqué sur 'envoi' le formulaire se transforme en papier à lettre et s'insère dans l'enveloppe
- Une fois refermée, l'enveloppe glisse vers la droite et disparait
- Un message de validation s'affiche à la fin
- Ce mélange est étonnant !
- Blackpool, Royaume-Uni
Image cliquable pour voir l'exemple
Références
Site web
[Créé / modifié] [14-03-2022 / 14-03-2022]
Giri Akash - Formulaire
- Formulaire complet à l'intérieur d'un modèle de site web
Caractéristiques
- L'exemple est hébergé sur Web Soluces
- Cadre Bootstrap 4.0.0
- Se trouve à l'intérieur d'un template de site
- Contrôles d'existence des champs
- Contrôle de cohérence de l'adresse mail
- Pas de validation ni d'envoi
Image cliquable pour voir l'exemple
Références
Site web
[Créé / modifié] [17-12-2020 / 17-12-2020]
Gruson Max - Formulaire
- Travail d'artiste
Caractéristiques
- CSS, JS, jQuery
- Au clic sur un bouton une enveloppe modale arrive en glissant par la gauche
- En cliquant dessus, l'enveloppe se retire pour laisser apparaître une carte de contact
- Aucun contrôle
- À la validation l'enveloppe reprend la possession de la carte et disparait sur la droite
- Superbe !
- Pays-Bas
Image cliquable pour voir l'exemple
Références
Site web
Site de l'auteur
[Créé / modifié] [02-03-2022 / 02-03-2022]
Harry Joe - Formulaire
- Beau travail
- Une zone mal renseignée reste noire même corrigée si on tabule
Caractéristiques
- Le clic sur un bouton lance une fenêtre modale
- Transition discrète d'apparition de la fenêtre
- Tremblement au survol du bouton et pour signaler qu'un champ est mal renseigné
- CSS, Normalize.css, JS, jQuery
- Contrôles d'existence des champs
- Contrôle de cohérence de l'adresse mail
Image cliquable pour voir l'exemple
Références
Site web
[Créé / modifié] [15-12-2020 / 15-12-2020]
Holmes Danny - Formulaire
- Formulaire agréable et complet
- Un peu trop clair
Caractéristiques
- Le clic sur un bouton lance une fenêtre modale
- CSS, jQuery
- Contrôles d'existence des champs
- Contrôle de cohérence de l'adresse mail
Image cliquable pour voir l'exemple
Références
Site web
[Créé / modifié] [15-12-2020 / 15-12-2020]
Ichinose Takane - Formulaire
- Possibilité de mettre ce template sur toutes les pages
- Aucun contrôle
Caractéristiques
- Fenêtre glissante
- Rollover sur tous les boutons
- Contrôle de présence des champs obligatoires
- Pas de contrôle de cohérence de l'email
- Message de fin d'envoi
- Kanagawa, Japon
Image cliquable pour voir l'exemple
Références
Site web
[Créé / modifié] [09-02-2022 / 09-02-2022]
Khan Shawon - Formulaire
- Possibilité de mettre ce template sur toutes les pages
- Aucun contrôle
Caractéristiques
- Fenêtre modale glissante
- Bouton fixe
- CSS pur
- Aucun contrôle
Image cliquable pour voir l'exemple
Références
Site web
[Créé / modifié] [01-09-2020 / 01-09-2020]
Koplik Olga - Formulaire
- Original et très beau à mon goût
Caractéristiques
- CSS, Normalize.css, React.js
- Contôle de présence des champs obligatoires
- Contôle de cohérence de l'adresse mail
- Responsive
- J'adore !
Image cliquable pour voir l'exemple
Références
Site web
[Créé / modifié] [06-11-2020 / 06-11-2020]
Korec Bobby - Formulaire
- Pour la présentation
Caractéristiques
- CSS, JS, jQuery, Bootstrap 3.3.5
- Contôle de présence des champs obligatoires
- Contôle de cohérence de l'adresse mail
- Dommage que les icônes sociaux soient supprimés en mode mobile
Image cliquable pour voir l'exemple
Références
Site web
[Créé / modifié] [15-04-2021 / 15-04-2021]
Liu Hong - Formulaire
- Pas responsive
Caractéristiques
- CSS, JS, rien d'autre
- Contôles de présence des champs obligatoires et de la cohérence de l'email
- Design à l'ancienne du style 'par avion'
- Beijing, Chine
Image cliquable pour voir l'exemple
Références
Site web
[Créé / modifié] [14-03-2022 / 14-03-2022]
Mac Intire Trevor - Formulaire
- Beau design
- Manque la zone texte.
Caractéristiques
- CSS, JS, jQuery
- Aucun contôle
- Presque responsive
- J'adore le design
- J'ai ajouté une ligne pour le message et cadré l'envoi (send) à gauche pour une meilleure présentation
Image cliquable pour voir l'exemple
Références
Site web
[Créé / modifié] [13-01-2021 / 07-11-2021]
Martsoukos George - Formulaire
Caractéristiques
- CSS, JS, rien d'autre
- Très joli rollover sur les boutons
- Le clic dans un champ déclenche une translation et un changement de couleur
- Contrôle de présence des champs obligatoires
- Contrôle de cohérence de l'email
- Les boutons s'activent une fois la case des conditions cochée
- Néa IonÃa, Attique, Grèce
Image cliquable pour voir l'exemple
Références
Site web
Site de l'auteur
[Créé / modifié] [09-02-2022 / 09-02-2022]
Md Bootstrap - Formulaire
- Le tutoriel est en grande partie réservé aux inscrits
- Il faut remplacer un bout de code par une autre : <div class="status"></div> par <div id="status"></div>
Caractéristiques
- L'exemple est hébergé sur Web-Soluces
- Il suffit d'ajouter l'adresse mail du destinataire pour qu'il fonctionne
- Code HTML5 : Cadre Bootstrap
- Présentation en CSS3
- Contrôles d'existence des champs
- Contrôle de cohérence de l'adresse mail
- Validation et envoi en Php, Ajax
Image cliquable pour voir l'exemple
Références
Site web
[Créé / modifié] [31-08-2018 / 31-08-2018]
Mengu Vivek - Formulaire
- Présentation top
- Aucun contrôle. Pas d'envoi
Caractéristiques
- Présenté avec Google Maps
- CSS, Normalize.min.css, Email-decode.min.js
- Pas d'envoi
- Aucun contrôle
Image cliquable pour voir l'exemple
Références
Site web
[Créé / modifié] [04-11-2020 / 04-11-2020]
Mohammed Asmaa - Formulaire
- Travail d'artiste
Caractéristiques
- CSS, JS, jQuery
- Au rollover sur l'enveloppe la partie haute se soulève et laisse apparaître une carte de contact
- Au clic la carte sort de l'enveloppe et vient se mettre par dessus
- Les supposés champs ne sont pas accessibles
- À la validation l'enveloppe récupère la carte et cette dernière disparait sur la droite
- Superbe !
Image cliquable pour voir l'exemple
Références
Site web
[Créé / modifié] [02-03-2022 / 02-03-2022]
Norris Ben - Formulaire
- Magnifique proposition, look d'enfer
- Dommage, je n'ai pas réussi à récupérer le code en totalité
Caractéristiques
- CSS, Normalize.css, JS, Modernizr.js, jQuery, + autre chose ?
- Aucun contrôle
- L'envoi fonctionne
- Rollover sur tous les accès
- Utah, USA
Image cliquable pour voir l'exemple
Références
Site web
[Créé / modifié] [18-02-2022 / 18-02-2022]
PrepBootstrap - Formulaire
- Sympa
Caractéristiques
- L'exemple est hébergé sur Web-Soluces.net
- Code HTML5 : Cadre Bootstrap
- Présentation en CSS3
Image cliquable pour voir l'exemple
Références
Site web
[Créé / modifié] [08-02-2016 / 08-02-2016]
Projapati Ananda - Formulaire
- Simple, classique mais suffisant
Caractéristiques
- CSS pur
- Contrôle de présence des champs
- Contrôle du format de l'email
Image cliquable pour voir l'exemple
Site web
[Créé / modifié] [01-09-2020 / 01-09-2020]
Requena Aina - Formulaire
- Design épuré
Caractéristiques
- CSS, JS, jQuery
- Contrôle de présence des champs
- Contrôle du format de l'email
- Responsive ???
Image cliquable pour voir l'exemple
Site web
[Créé / modifié] [13-01-2021 / 13-01-2021]
Ruparelia Rhythm - Template
Caractéristiques
- CSS, TaiWind.css, JS
- Aucun contrôle
- Présentation intéressante
- Rajkot, Gujarat, Inde
Image cliquable pour voir l'exemple
Site web
[Créé / modifié] [17-05-2022 / 17-05-2022]
Rusu Stefan - Formulaire
- Très simple mais suffisant
Caractéristiques
- CSS, JS, jQuery, Prefixfree.js, Bootstrap 3.3
- Contrôles d'existence des champs
- Contrôle de cohérence de l'adresse mail
Image cliquable pour voir l'exemple
Site web
[Créé / modifié] [17-12-2020 / 17-12-2020]
Sindre Sorhus - Formulaire
- Simple et correctement présenté
- Pas de Captcha
Caractéristiques
- CSS, JS, jQuery
- Contrôles d'existence des champs
- Contrôle de cohérence de l'adresse mail
- Possibilité de joindre un fichier
- Sans doute d'après : https://formcarry.com/
Image cliquable pour voir l'exemple
Site web
[Créé / modifié] [07-01-2021 / 07-01-2021]
Solodev - Formulaire
- Sympa mais...
- ... s'affiche en trop petit caractère sur Samsung Note
Caractéristiques
- L'exemple est hébergé sur Web-Soluces
- Code HTML5
- Présentation en CSS3
- Contrôles d'existence des champs
- Contrôle de cohérence de l'adresse mail
- Validation par le Validator de Bootstrap
Image cliquable pour voir l'exemple
Site web
[Créé / modifié] [20-09-2018 / 09-11-2020]
Stamp Paul - Formulaire
- Formulaire original et très bien pensé. On peut même ne l'ouvrir qu'au clic sur l'enveloppe du bas.
- Pas responsive, quel dommage !
- Newcastle-under-Lyme, United Kingdom
Caractéristiques
- L'exemple est hébergé sur Web-Soluces
- CSS, Javascript, jQuery, TweenMax.js
- Contrôles d'existence des champs
- Contrôle de cohérence de l'adresse mail
- Le code proposé n'a pas exactement le même rendu
Image cliquable pour voir l'exemple
Site web
[Créé / modifié] [10-12-2020 / 10-12-2020]
Umoren - Formulaire
- Exemple original et responsive
- Bootstrap 3
Caractéristiques
- Avec fenêtre modale
- L'exemple est hébergé sur Web-Soluces.net
- Code HTML5 : Cadre Bootstrap
- Présentation en CSS3
Image cliquable pour voir l'exemple
Site web
[Créé / modifié] [07-10-2018 / 09-11-2020]
Tabby alias @tabz - Formulaire
- Très original, beau et magnifique à exécuter
Caractéristiques
- CSS, JS
- Contrôles d'existence des champs
- Contrôle de cohérence de l'adresse mail
- Sympa
- Citoyen du monde
Image cliquable pour voir l'exemple
Site web
[Créé / modifié] [17-05-2022 / 17-05-2022]
Teslia Valeriia - Formulaire
- Très original, beau et magnifique à exécuter
Caractéristiques
- CSS, Normalize.css, JS
- Aucun contrôle
- Pour que ce soir presque responsive: Supprimer la largeur de la classe '.wrapper'; Mettre un 'max-width: 30rem;' à la classe '.letter' et pour que ce soit plus joli un ' padding: 10px;' à la classe '.letter'
- Ukraine
Image cliquable pour voir l'exemple
Site web
[Créé / modifié] [19-02-2019 / 03-05-2022]
Web-Soluces.net - Formulaire
- Je suis parti de la base du template de login de Condori William
- Solution 'anti spam' non contraignante et non Captcha. Voir cet article
Caractéristiques
- CSS, Normalize.css, JS
- Toutes les couleurs sont facilement modifiables du fait de l'utilisation de variables en début de fichier CSS
- Une solution 'anti spam' : Le champ caché. S'il est rempli c'est que le visiteur est un robot. Le champ doit être décrit comme les autres.
- 2 ruptures pour le responsive design : 576px et 1024px
- Une fois le formulaire envoyé, cliquez sur le lien tout en dessous du formulaire pour vérifier que le champ caché "Email2" est bien vide
Image cliquable pour voir l'exemple
[Créé / modifié] [24-04-2022 / 24-04-2022]
Zobayer Ahmed Shah - Formulaire
- Bon principe sauf la croix comme motif de contact au départ
- Dhaka, Bangladesh
Caractéristiques
- Avec fenêtre modale
- CSS, JS, jQuerey, Bootstrap 3.3
- Contrôle présence des champs
- Contrôle de cohérence de l'adresse mail
- De nombreux autres modèles sur le site
Image cliquable pour voir l'exemple
Site web
[Créé / modifié] [10-12-2020 / 10-12-2020]