Chargement…
Formulaire de Contact HTML5

Formulaire de Contact HTML5 Responsive



Je vous est déjà montrer comment créer un formulaire de contact CSS3. Mais avec ce tutoriel, on va créer un formulaire de contact HTML5 responsive. Cela veux dire que l’affichage de ce formulaire s’adapte aux appareils mobiles et tablettes. La plupart des CMS (Content Management System) scripts tel que Joomla ou WordPress intègrent des formulaires de contact via l’utilisation de modules ou d’extensions, mais des fois pour notre propre besoin ou celui d’un client, on est obliger de créer un formulaire personnalisé.
Ce formulaire peut être intégrer dans n’importe quelle page web et il est totalement personnalisable, il vous suffis de modifier les champs pour l’adapter à vos propres besoins.

Télécharger Code Source

Formulaire de Contact HTML5

Formulaire de Contact HTML5 Responsive

Le HTML de Notre Formulaire

Notre code est un HTML5 intégrer dans index.php :

<div class="wrapper">  
    <div id="notreformulaire">
    <form name="form1" id="formulairedecontact" method="post" action="envoyer.php">
    <h1>Formualire de Contact HTML5 Responsive</h1>
	<p>Celui la est un formulaire de contact HTML5 rersponsive et qui peut etre utiliser dans n'importe quelle page web.</p>	
        <label>
		<span>Nom*:</span>
        <input type="text" placeholder="Entrez votre nom" name="name" id="name" required autofocus>
        </label>
        
        <label>
		<span>Ville*:</span>    
		<input type="text" placeholder="Entrez votre ville" name="city" id="city" required>
        </label>
        
        <label>
		<span>Telephone:</span>
        <input type="tel" placeholder="Votre numero de telephone" name="phone" id="phone">
        </label>
        
        <label>
		<span>Email*:</span>
        <input type="email" placeholder="Votre-email@gmail.com" name="email" id="email" required>
      	</label>
      
	    <label>
		<span>Message:</span>
		<textarea name="monmessage" id="monmessage" rows="4" cols="50"></textarea>
		
      	</label>
		
		<input class="sendButton" type="submit" name="Submit" value="Envoyer">
			
	</form>
	</div>
   </div>

Notre CSS

J’utilise CSS pour les éléments des champs de notre formulaire et pour que le modèle soit responsive, j’utilise un max-width:580px; pour la class wrapper et un width:90%; pour les champs du formulaire (Input).

La Partie PHP (Envoie et Remerciement)

Le fichier envoyer.php est celui charger d’envoie des champs remplis à notre email est cela on utilisant la méthode $_POST de tous les variables ($name=$_POST[‘nom’];). Le fichier merci.html est le message de remerciement que vous pouvez modifier.

<?php

// Get values from the form
$name=$_POST['name'];
$city=$_POST['city'];
$phone=$_POST['phone'];
$email=$_POST['email'];
$monmessage=$_POST['monmessage'];
 
$to = "votre-email@gmail.com";
$subject = "Mon Contact Form";
$message = " Name: " . $name . "\r\n City: " . $city . "\r\n Phone: " . $phone . "\r\n Email: " . $email . "\r\n Monmessage: " . $monmessage;
 
 
$from = "Blueseodesign";
$headers = "From:" . $from . "\r\n";
$headers .= "Content-type: text/plain; charset=UTF-8" . "\r\n"; 
 
if(@mail($to,$subject,$message,$headers))
{
  print "<script>document.location.href='http://mon-site/merci.htm';</script>";
}else{
  echo "Erreur! Veuillez Remplir les Champs Requis.";
}


?>

N’oublier pas de modifier : votre-email@gmail.com par votre propre Email, Blueseodesign et mon-site.fr/merci.html

Voilà, vous avez maintenant un formulaire de contact HTML5 Responsive! Si cet article vous a plu alors n’hésitez pas à le partager avec vos amis(es), et suivez nous sur Facebook, Twitter et Google+ Pour recevoir des notifications de tous Nos nouveaux tutoriaux et conseils.



One thought on “Liste de Générateurs de Banniéres Gratuit

Laisser un commentaire