Tuto publié par 
Cette formation est consacrée à la création d'un formulaire de contact graphique à l'aide de css3 / HTML5 ainsi qu'a la création d'une page d'envoi de mail en PHP pour une réception dans un client de messagerie du type outlook, thunderbird...
Au programme de ce tutoriel, 3 chapitres :
- 1 - Création du formulaire de contact
- 2 - Création de la feuille de style en CSS
- 3 - Création de la page d'envoi en PHP
Nous apprendrons à réaliser certains effets esthétiques au sein même des champs du formulaire, à savoir :
- un effet de transition de couleur animé au clique sur les différents champs
- un effet de transition de couleur animé sur nos labels
- un effet au rollover sur le bouton envoyer
Nous n'utiliserons aucun élément JQUERY, ces effets animés seront directement créés grâce au CSS3. Nous aborderons l'attribut required qui permet de créer des champs obligatoires au sein de notre formulaire, et de vérifier si ces derniers ont bien été remplis.
Pour toutes questions, n'hésitez pas à me contacter !
Bon tuto à tous :)
Jetez un oeil à ces autres tuto Dreamweaver, Php 5, CSS 3
Intégrer et Développer un…
Voici une formation complète dédiée à l'intégration et…
Un menu complet à partir…
Dans ce tuto vous allez apprendre à créer un menu complet…
Dreamweaver CC : Les nouveautés…
Voici une formation Dreamweaver CC en vidéo. Cette nouvelle…
Présentation de Dreamweaver…
Au travers de cette présentation de Birnou Sébarte, vous allez…
Découper et intégrer une…
Dans cette seconde et dernière partie du tutoriel "Créer une…
Créer votre site Internet…
Dans cette formation Photoshop et Dreamweaver, nous allons apprendre,…
Cette formation contient 3 leçons en vidéo pour une durée totale de 1h12.
Voici le programme complet abordé au cours de cette formation :
- Création d'un formulaire de contact00:18:25
- Création d'une feuille de style css00:35:40
- Création d'un formulaire d'envoi en php00:18:10
Pour vous faire un avis, voici un extrait de quelques secondes. La version complète et téléchargeable de ce tuto Dreamweaver, Php 5, CSS 3 de 1 heure 12 minutes est proposée dans une résolution plus grande que l’extrait suivant :
team8.fr
, Formateur
Bonjour, Damien Graphiste Illustrateur / Directeur artistique - Agence Team8.fr
Je suis spécialisé dans la création visuelle d'images numériques, ainsi que dans la conception graphique de sites Internet / HTML / CSS.
N'hésitez pas à me poser vos questions concernant les tutos !
Toutes les formations de Team8.fr
Témoignage des clients de team8.fr
JE VIENS D'ACQUERIR ET VISUALISER LE TUTO DE " EFFACER DEPLACER DUPLIQUER ...... C'EST VRAIMENT UNE QUALITE DE VIDEO SON ET SUJET BIEN EXPLIQUES. MERCI
De très beaux tutos, j'aime particulièrement celui sur la transformation en zombie :) Bonne continuation. Continuez comme ça !
Des tutos toujours clairs et bien détaillés. Agréables à suivre et à écouter. Un bonheur pour apprendre !!! Et équipe toujours disponible en cas de besoins. SAV super bien assuré. Note 10/10. JC
je trouve vos formations toujours aussi intéressantes et j'attends avec impatience la troisième partie d'intégration du site avec wordpress. Merci
Merci beaucoup pour ces tutoriels intéressants et pertinents. Ces formations m'aident à progresser et à échanger avec d'autres amateurs. Merci encore !
Lire les autres témoignages
D'autres tuto de team8.fr
Supprimer les yeux rouges d'une photo avec Photoshop
Voici un mini tuto très facile permettant de supprimer les yeux rouges d'une photo avec…
Vos photos d'époque en couleur avec Photoshop
Voici une formation qui va vous permettre de coloriser vos images d'époque à l'aide…
Administrer votre site Internet avec PHP et MySql
Cette formation sera consacrée à la création d'un backoffice à l'aide de PHP et MYSQL…
Montage HTML/CSS d’une maquette graphique sur Dreamweaver
Voici une formation dédiée à la découpe et au montage HTML / CSS de notre maquette…
Notes attribuées par les utilisateurs (11 votes)
Les avis / Questions des utilisateurs (28)
Donnez votre avis ou posez une question au formateur.
Vous souhaitez commenter ce tuto vidéo ? Créez un compte gratuit. Déjà membre ? Identifiez-vous
Ce tuto en résumé ...
Ce tuto Dreamweaver, Php 5, CSS 3 d’une durée de 1 heure 12 minutes a été acheté 175 fois et a reçu une note moyenne de 5/5.
Ce tuto a été publié le 28 novembre 2012 par team8.fr, contributeur, ayant reçu une note moyenne de 4,7/5 pour l’ensemble de ses vidéos, dans la catégorie Tuto Dreamweaver Formulaire.
Tous les fichiers sources sont fournis avec cette formation. Ces derniers vous permettront de reproduire les manipulations expliquées dans cette formation.
Cette formation qui se présente sous la forme de plusieurs vidéos, vous expliquera étape par étape, toutes les manipulations présentées par le formateur.
Toutes nos vidéos sont visionnées par notre équipe, avant d’être mises en ligne, garantissant ainsi la qualité des produits téléchargés.
Choisissez parmi tuto classés dans nos 236 logiciels ou langages informatiques.
(auteur de ce tuto - 16 mai 2013)
" Bonjour mess,
Tu devrais essayer avec l'attribut "input:required:invalid" ou "input:invalid" dans ton css !
Bon courage "
(a acheté ce tuto - 15 mai 2013)
" Bon tutoriel complet et facile à comprendre!
J'ai une question :
Comment gère-t-on la bordure rouge autour des champs qui s'affiche lorsqu'il y a une erreur ? j'aimerai si possible mettre la couleur de mon choix!
Merci :) "
(auteur de ce tuto - 13 mai 2013)
" Bonjour Marc,
L'équivalent de easyphp sous mac c'est MAMP. Cela ne marchera pas si vous travailler en local sans simulation d'un serveur.
Lien pour le télécharger:
http://www.mamp.info/en/downloads/ "
(a acheté ce tuto - 13 mai 2013)
" Bonjour,
j'ai acheté votre tuto : "Création d'un formulaire de contact graphique".
C'est tout à fait ce que je recherchais. Mais... je suis sous mac, et j'ai des soucis.
J'ai pris directement les fichiers sources et tout ne fonctionne pas (les champs obligatoires...).
Mais surtout, je n'arrive pas à envoyer le formulaire dans ma boîte mail, même si le message "votre mail a bien été envoyé" s'affiche.
Je pense que ça vient du fait que je n'arrive pas à télécharger "easyphp" car je suis sous mac. J'ai essayé plusieurs fois par différents liens, mais ça ne fonctionne pas.
Que puis-je faire ?
D'avance merci pour votre réponse,
cordialement,
Marc Bernard. "
(a acheté ce tuto - 12 mai 2013)
" Très bon tuto, clair, et créatif.
C'est toujours un plaisir, bonne continuation. "
(auteur de ce tuto - 12 avril 2013)
" Salut bjmdrx,
Peux tu envoyer l'ensemble de tes fichiers à hugo@team8.fr ? (ça ne doit pas être méchant)
a+ :) "
(a acheté ce tuto - 11 avril 2013)
" Merci pour ce tuto trés clair
cependant, l'envoi du formulaire ne fonctionne pas pour moi.
En effet, au clic du submit, une erreur 500 s'affiche.
Pourrait-tu m'orienter stp?
Cordialement. "
(auteur de ce tuto - 08 avril 2013)
" Salut jcv440,
Peux tu envoyer l'ensemble de tes fichiers à hugo@team8.fr afin d'analyser ton code.
Merci :) "
(a acheté ce tuto - 08 avril 2013)
" Excellent ! Comme d'haitude chez Team8.
REQUIRED ! HAHA "
(auteur de ce tuto - 04 avril 2013)
" Hello jcv440,
Nous n’utilisons pas ce type de serveur. Êtes-vous sous Windows / Mac ?
Personnellement (sous mac) j'utilise mamp comme serveur local
Le mail est-il envoyé ?
Si oui, qui y'a t-il écrit au niveau de l’expéditeur ?
"
(a acheté ce tuto - 01 avril 2013)
" Très bon tuto bien expliqué. Même les débutant peuvent s'en sortir :) "
(a acheté ce tuto - 25 mars 2013)
" C'était un super bon Tuto !
Clair et précis.
Je vous le conseil. "
(a acheté ce tuto - 28 février 2013)
" Limpide et bien rythmé. Bravo pour ce tuto dont je me demande pourquoi je ne l'ai pas acquis plus tôt. "
(auteur de ce tuto - 26 février 2013)
" Salut mrludo, peux tu envoyer tes fichiers zip à damien@team8.fr ? merci :-) "
(a acheté ce tuto - 26 février 2013)
" Bonjour, en fonction du naviguateur la couleur de bordure des labels change : aucune sur firefox, jaune sur google chrome et bleu sur safari. Comment faire si on souhaite uniformiser la couleur sur tous les naviguateurs ? Merci bien par avance. "
(auteur de ce tuto - 11 février 2013)
" Salut x3xtaziix,
Si je comprends bien tu as remplacé le label et input prénom par ta ligne Gamertag ? Car sinon il y aurait 2 fois un input prénom !
Par contre, si tu as ajouté : $Skype=utf8_decode($_POST['Skype']); dans envoi.php, il faudrait aussi que tu rajoutes un champs dans ton formulaire (un input avec comme nom et id "Skype")
Si tu n'y arrive toujours pas tu peux envoyer tes fichier envoi.php et contact.html à l'adresse hugo@team8.fr
Bon courage "
(a acheté ce tuto - 10 février 2013)
" Très bon tuto, et en plus quand tu parles anglais je te comprend très bien !!! "
(a acheté ce tuto - 09 février 2013)
" Sinon le tuto très très très bien expliquer a recommandé ++++++++++ je suis débutants qui bien de commencé avec se tuto "
(a acheté ce tuto - 09 février 2013)
" Bonjour je voudrais s'avoir pourquoi sa marche pas j'ai rajouter Gamertag et Skype avec Nom email ... et j'ai rajoutez ($Skype=utf8_decode($_POST['Skype']); ) et (<p>
<label for="prenom">Gamertag</label>
<input type="text" name="prenom" id="prenom" placeholder="Votre Gamertag" />
</p>)
et
$msg = 'Bonjour,'."
";
$msg.= 'Ce mail a ete envoye depuis votre site internet par '.$prenom.' '.$nom."
";
$msg .= 'Voici son message :'."
";
$msg.= 'Sujet : '.$sujet."
";
$msg.= 'Skype : '.$Skype."
";
$msg.= 'Gamertag : '.$Gamertag."
";
$msg.= '*********************'."
";
$msg.= $message."
";
$msg.= '*********************'."
";
voila et sa marche toujours pas
aidez moi svp "
(a acheté ce tuto - 23 janvier 2013)
" Explications claires et précises. Très agréable à suivre... Merci "
(a acheté ce tuto - 07 janvier 2013)
" très bon tuto mais manque un peu d'infos au sujet des balises php. "
(a acheté ce tuto - 04 janvier 2013)
" merci beaucoup :)
"
(auteur de ce tuto - 04 janvier 2013)
" Bonjour, merci pour vos retours :)
glance > merci de re-télécharger la source, je viens de faire une mise à jour du fichier ^^
a+:) "
(a acheté ce tuto - 03 janvier 2013)
" Bonjour,
Je ne trouve pas le "nouveau document texte qui va vous permettre de configurer le php.ini d'easyphp afin de faire vos tests d'envois de mails", dans le fichier source.
Où puis je le trouver, ou comment puis-je configurer le php.ini d'easyphp afin de faire mes tests d'envois de mails?
Merci "
(a acheté ce tuto - 03 janvier 2013)
" Trés bon tuto. Rien à dire, ca marche nickel^^. Merci "
(a acheté ce tuto - 02 janvier 2013)
" bonjour
j'adore vos cours, ils sont précis et simples.
Bien détaillés et expliqué. "
(a acheté ce tuto - 09 décembre 2012)
" Super tuto bien expliqué bien que je suis débutant je n'ai pas rencontré de difficulté a réliser ce tutorielle :) "
(auteur de ce tuto - 29 novembre 2012)
" Hello à tous ! j'ai mis un nouveau fichier source (à 11h15 le 29/11) avec un nouveau document texte qui va vous permettre de configurer le php.ini d'easyphp afin de faire vos tests d'envois de mails ! a+:-) "