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 site Web ecommerceIntégrer et Développer un…
Voici une formation complète dédiée à l'intégration et…

Un menu complet à partir d'une seule imageUn menu complet à partir…
Dans ce tuto vous allez apprendre à créer un menu complet…

Créer un site e-commerce de A à Z avec WordpressCréer un site e-commerce…
Dans ce pack, nous allons apprendre à créer un thème de site…

Les fondamentaux de Dreamweaver CC : 5- Flux de données et interactivitéLes fondamentaux de Dreamweaver…
Tuto Dreamweaver CC : Enrichissement de contenu et expérience…

Découper et intégrer une maquette de site internet web 2.0Découper et intégrer une…
Dans cette seconde et dernière partie du tutoriel "Créer une…

Créer votre site Internet / Portfolio de A à ZCré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 :

Partagez cet extrait

Lien vers cet extrait : Embed code :

team8.fr , formateur certifié

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

De bon tutos qui m'ont permis de progresser

Ce formateur est compétent et compréhensible !

Merci pour la formation

Très bon formateur, très professionnel. Je recommande les yeux fermés !

excellent formateur proposant des tutos vraiment très intéressants! j'ai déjà suivi plusieurs de ses tutos et je pense continuer, j’apprends beaucoup avec ce formateur

Lire les autres témoignages

 

D'autres tuto de team8.fr

Supprimer les yeux rouges d'une photo avec PhotoshopSupprimer 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 PhotoshopVos 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 MySqlAdministrer 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 DreamweaverMontage 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…

voir tous les tuto de team8.fr

Notes attribuées par les utilisateurs (20 votes)

Note moyenne des utilisateurs  

Votez pour ce tuto


 

Les avis / Questions des utilisateurs (55)

par dan59000a voté :
(a acheté ce tuto - 19 décembre 2013)

" 5/5 "

par allvisuala voté :
(a acheté ce tuto - 14 décembre 2013)

" super tuto
Vos explications sont simple, avec votre aide je vais finir par mettre en ligne ma page contact.
note 5/5.
josé "

par team8.fr
(auteur de ce tuto - 08 novembre 2013)

" Salut laurent3d,
Pouvez vous envoyer vos fichiers zippés par mail (hugo at team8.fr)
Bonne journée "

par laurent3d
(a acheté ce tuto - 06 novembre 2013)

" Bonjour,

Je viens de terminer ce tuto, cela fonctionne très bien.

Néanmoins pouvez vous m'expliquer comment faut il faire pour que le fond du champs prénom soit de la même couleur que les autres champs et que la police dans le champ message soit également la même que dans les autres zones de texte ? "

par team8.fr
(auteur de ce tuto - 29 octobre 2013)

" nedana,
tu as du te tromper dans les if.
Peux tu m'envoyer l'ensemble de tes fichiers damien(at)team8.fr "

par nedana
(a acheté ce tuto - 29 octobre 2013)

" merci pour votre réponse,

J'ai appliqué votre code, du coup effectivement il y a un le message qui indique qu'il faut remplir tous les champs qui s'affiche sur mon smartphone.
Seul problème, si l'on rempli tous les champs depuis le smartphone ou depuis un ordi et que l'on envoie le mail, le message de confirmation d'envoie apparait... mais aucun mail ne m'arrive sur ma BAL...!!!

voici mon code.. y a t'il une erreur..???

/* envoi mail */

if($nom==""){
echo "Vous n'avez pas remplis les champs obligatoires, merci de recommencer";
}else{
mail($to, $sujet, $msg, $headers);
}

mail($to, $sujet, $msg, $headers);

?> "

par team8.fr
(auteur de ce tuto - 28 octobre 2013)

" nedana,

Les required (ce qui sert a "bloquer l'envoi" ne sont pas reconnus sur tous les smartphones.

Il faudrait rajouter dans le fichier envoi.php avant la fonction:

mail($to, $sujet, $msg, $headers);

Cette ligne :

if($nom==""){
echo "Vous n'avez pas remplis les champs obligatoires, merci de recommencer";
}else{
mail($to, $sujet, $msg, $headers);
}

C'est un exemple, mais c'est une solution de remplacement "

par nedana
(a acheté ce tuto - 28 octobre 2013)

" bonjour, j'ai installé se tuto et il est top...
Par contre j'ai un gros problème, si quelqu'un essaye de m'envoyer un mail via son smartphone, les champs obligatoires sont inactifs..
Du coup, sans les renseigner, et en cliquant sur envoyer, je reçois dans ma boite mail un message vide de tout contenu..

Donc comment résoudre se problème svp...!!??

d'avance merci
"

par combellasa voté :
(a acheté ce tuto - 19 octobre 2013)

" Preum's pour réclamer un tuto d'intégration de captcha...
;) "

par team8.fr
(auteur de ce tuto - 08 octobre 2013)

" Salut combellas,
Super ! Par contre non nous n''avons pas de suite à venir.
Nous avons déjà un tuto complet web one page / responsive avec la création d'un formulaire + captcha en PHP :
http://fr.tuto.com/images/fr_fr/galerie/41/41913/10383623_950x.jpg

Après pourquoi pas refaire un tuto juste sur la création d'un captcha, c'est à envisager pour les intéressés :)

A bientôt "

par combellasa voté :
(a acheté ce tuto - 07 octobre 2013)

" Merci Damien...
J'ai réussi à intégrer mon formulaire!
:))
Auriez vous un lien pour y insérer un captcha ou bien est-ce que ça sera l'objet d'un prochain tuto?
;) "

par team8.fr
(auteur de ce tuto - 05 septembre 2013)

" Salut Anonyminecraft, fais tu tes tests en local ou directement via ton hébergeur ? "

par Anonyminecrafta voté :
(a acheté ce tuto - 03 septembre 2013)

" Salut c'est un très bon tuto que tu nous fais là, mais j'ai tout suivit à la lettre et je n'arrive pas à recevoir le message... :/ Pourrais tu m'aider?
Cordialement, "

par combellasa voté :
(a acheté ce tuto - 26 août 2013)

" C'est parfait...
Ca a marché avec UnrarX!
Merci... "

par team8.fr
(auteur de ce tuto - 24 août 2013)

" Salut combellas, sur mac essayes de décompresser avec UnrarX.
Redis moi :) "

par combellasa voté :
(a acheté ce tuto - 23 août 2013)

" Bonjour!
Je n'arrive pas à télécharger le fichier source!
Ni sur Mac, ni sur PC...
Comment faire?
Merci de la réponse!
Cordialement...
J-L F. "

par FlashMana voté :
(a acheté ce tuto - 23 août 2013)

" SUPER !
Clair, net et précis... et excellemment expliqué !
Merci ! "

par team8.fr
(auteur de ce tuto - 12 août 2013)

" @superpikart,


Il me semble que nous vous avons déjà envoyé la source par mail ?

Pour ce qui est de la réception du mail, vérifier vos spams, ou essayer avec une deuxième adresse. "

par superpikarta voté :
(a acheté ce tuto - 09 août 2013)

" bonjour, très bon tuto, mais je suis sur mac et le fichier est déjà sur l'hébergeur donc plus en interne ... il me semble fonctionner il me donne le message "envoyé" mais je nerçois pas de mail en retour ???
sur safari il ne prends pas en compte les champs exigés ... le téléchargement du fichier ne fonctionne pas il le refuse ...
Cldt Philippe "

par superpikarta voté :
(a acheté ce tuto - 29 juillet 2013)

" merci pour la rapidité ... ok mais pour le téléchargement mais pour décompresser il faut pouvoir le télécharger naturellement je vous envoie ces dossiers par mail de suite ...
cldt Philippe "

par team8.fr
(auteur de ce tuto - 29 juillet 2013)

" Bonjour superpikart,
Pouvez vous nous envoyer vos fichiers (hugo@team8.fr) que l'on regarde tout ça.
Le fichier source se décompresse avec UnrarX (équivalent de winrar sous mac).
Bonne journée "

par superpikarta voté :
(a acheté ce tuto - 29 juillet 2013)

" Bonjour, super tuto ... mais installé sur site il ne me renvoie pas de mail pourtant il semble fonctionner normalement et me signale que le message à bien été envoyé.
De plus impossible de télécharger le fichier source ... je suis sur mac et avec safari il ne prend pas en compte les champs exigés ...
Merci de me répondre
Cldt Philippe "

par team8.fr
(auteur de ce tuto - 18 juillet 2013)

" Salut, il marche bien de mon coté. Je peux t'envoyer les sources par mail. "

par shinobi1984a voté :
(a acheté ce tuto - 18 juillet 2013)

" Le fichier source est corrompu, je tenais à le signaler "

par team8.fr
(auteur de ce tuto - 14 juin 2013)

" Salut legion,
Merci pour ton retour.

Tu peux intégrer une comments box. Voir le lien ci dessous :
https://developers.facebook.com/docs/reference/plugins/comments/

A bientôt "

par legiona voté :
(a acheté ce tuto - 13 juin 2013)

" super et très bien expliquer. Je voudrais savoir comment mettre une facebook comment sur une de mes pages static de mon site merci je suis preneur de ce genre de tuto ^^ a bientôt "

par numeroneufa voté :
(a acheté ce tuto - 04 juin 2013)

" Explications claires et précises j'attaque la suite ! "

par team8.fr
(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 "

par mess
(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 :) "

par team8.fr
(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/ "

par CRAM
(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. "

par BLONDINa voté :
(a acheté ce tuto - 12 mai 2013)

" Très bon tuto, clair, et créatif.
C'est toujours un plaisir, bonne continuation. "

par team8.fr
(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+ :) "

par bjmdrxa voté :
(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. "

par team8.fr
(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 :) "

par AGZORa voté :
(a acheté ce tuto - 08 avril 2013)

" Excellent ! Comme d'haitude chez Team8.
REQUIRED ! HAHA "

par team8.fr
(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 ?

"

par MSalphaa voté :
(a acheté ce tuto - 01 avril 2013)

" Très bon tuto bien expliqué. Même les débutant peuvent s'en sortir :) "

par mariedga voté :
(a acheté ce tuto - 25 mars 2013)

" C'était un super bon Tuto !
Clair et précis.
Je vous le conseil. "

par philseba voté :
(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. "

par team8.fr
(auteur de ce tuto - 26 février 2013)

" Salut mrludo, peux tu envoyer tes fichiers zip à damien@team8.fr ? merci :-) "

par ludo74
(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. "

par team8.fr
(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 "

par Gweg83a voté :
(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 !!! "

par x3xtaziix
(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 "

par x3xtaziix
(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>
&lt;input type="text" name="prenom" id="prenom" placeholder="Votre Gamertag" /&gt;
</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 "

par Chocolat18a voté :
(a acheté ce tuto - 23 janvier 2013)

" Explications claires et précises. Très agréable à suivre... Merci "

par rucoya voté :
(a acheté ce tuto - 07 janvier 2013)

" très bon tuto mais manque un peu d'infos au sujet des balises php. "

par glancea voté :
(a acheté ce tuto - 04 janvier 2013)

" merci beaucoup :)
"

par team8.fr
(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+:) "

par glancea voté :
(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 "

par glancea voté :
(a acheté ce tuto - 03 janvier 2013)

" Trés bon tuto. Rien à dire, ca marche nickel^^. Merci "

par gegedeona voté :
(a acheté ce tuto - 02 janvier 2013)

" bonjour
j'adore vos cours, ils sont précis et simples.
Bien détaillés et expliqué. "

par MSalphaa voté :
(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 :) "

par team8.fr
(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+:-) "

 

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é 327 fois et a reçu une note moyenne de 5/5.

Ce tuto a été publié le 28 novembre 2012 par team8.fr, formateur certifié par Tuto.com, 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.

N'hésitez pas à nous contacter si vous avez la moindre question !