Créer une page contact

Discussion dans 'Tutoriels' démarrée par kevin13008, Jan 1, 2009.

  1. kevin13008

    kevin13008 New Member

    Bonjour, aujourd'hui je vais vous préparer un petit tutoriel pour apprendre a créer une page « contact » pour votre site.
    Il y auras en tous deux pages :
    Une page html et une page php

    On commence pas créer une page html :

    Exemple : contact.html

    On y insérera c’est quelques lignes

    HTML:
    <html>
    <head></head>
    <body>
    <form method="post" action="contact.php">
    Nom :<input type="text" name="nom" /><br />
    Email :<input type="text" name="email" /><br />
    Message :<textarea name="message" cols="30" rows="15"></textarea><br/>
    <input type="submit" value="Envoyer" />
    </form>
    </body>
    </html>
    
    " La balise input sert a créer un nouveau champ "


    Passons a la page php :

    Nous l'appélerons contact.php

    PHP:
    <?php

    if(isset($_POST) && isset($_POST['nom']) && isset($_POST['email']) && isset($_POST['message'])){
       
    extract($_POST);
       if(!empty(
    $nom) && !empty($email) && !empty($message)){
            
    $message=str_replace("\'","'",$message);
            
    $destinataire="Votre email";
            
    $sujet="Formulaire de contact";
            
    $message="Une nouvelle question est arrivée \n
            Nom : 
    $nom \n
            Email : 
    $email \n
            Message: 
    $message";
            
    $entete="From: $nom \n Reply-To: $email";
            
    mail($destinataire,$sujet,$message,$entete);
            echo 
    "Le mail a bien été envoyé.";
       }
       else{
            echo 
    "Vous n'avez pas rempli tous les champs.";
       }
    }
    ?>
    Vous devez remplacer "Votre email" par .... Votre email bravo :d

    Voila le tutoriel est terminé il ne vous reste plus qu'a uploadé tous ça sur votre hébergeur planethoster et le tour est joué.
     
    Dernière édition: Jan 1, 2009
  2. Dinguy

    Dinguy New Member

    Tuto simple et efficace bravo :)
     
  3. kevin13008

    kevin13008 New Member

    Merci j'espère qu'il servira.
     
  4. Christophe123

    Christophe123 New Member

    si je peut me permettre j'ai découvert se script uniquement php aussi mes avec une captcha

    voici le : contact.php

    PHP:
    <?
    session_start(); //ouverture la session pour conserver le captcha

    if (!isset($_POST["action"])) $_POST["action"]="";
    if (!isset(
    $_POST["nom"])) $_POST["nom"]=""//déclaration de chaque élément de formulaire
    if (!isset($_POST["prenom"])) $_POST["prenom"]="";
    if (!isset(
    $_POST["email"])) $_POST["email"]="";
    if (!isset(
    $_POST["sujet"])) $_POST["sujet"]="";
    if (!isset(
    $_POST["message"])) $_POST["message"]="";
    if (!isset(
    $_POST["captcha"])) $_POST["captcha"]="";
    $msg="";
    $flag=1;
    // CI-DESSOUS remplacez l'adresse ($destinataire="contact@votreadresse.com";) par la vôtre
    if ($_POST["action"]=="Envoyer" && $_POST["email"]!="" && strtolower($_POST["captcha"])==$_SESSION["phrase"]){
        
    $destinataire="contact@votresite.com"//mettez ici votre adresse e-mail 
        
    $objet="Formulaire de contact"// titre du mail automatique
        
    $message_envoi="Vous avez reçu une demande de contact !   \n";
        
    $message_envoi.="Voici le contenu :   \n"//déclaration du contenu du message
        
    $message_envoi.="Nom du contact :  ".$_POST["nom"]." \n";
        
    $message_envoi.="Prénom du contact :  ".$_POST["prenom"]." \n";
        
    $message_envoi.="E-mail du contact :  ".$_POST["email"]." \n";
        
    $message_envoi.="Site web :  ".$_POST["url"]." \n";
        
    $message_envoi.="Sujet :  ".$_POST["sujet"]." \n";
        
    $message_envoi.="Message du contact :  ".$_POST["message"]." \n\n"//rajouter apres cette ligne les autres éléments du formulaire
        
        
    mail($destinataire,$objet,$message_envoi); // envoi du message
        
        
    $flag=0//si tout est OK, on passe cette variable à 1
    }
    else{
        
    $msg="<span class='info'>Vous devez remplir tous les champs, portant un astérisque <span class='asterisque'>*</span>.</span> <span class='info-bis'>Merci</span>";
    }

    // début de la gestion de l'affichage du captcha
    $monfichier=fopen("captcha.txt","r");
    $i=0;
    while(!
    feof($monfichier)){
        
    $montab[$i]=fgets($monfichier,4096);
        
    $i++;
    }
    fclose($monfichier);
    shuffle($montab);
    $elem0=explode(";",$montab[0]);
    $elem1=explode(";",$montab[1]);
    $elem2=explode(";",$montab[2]);
    $elem3=explode(";",$montab[3]);
    $elem4=explode(";",$montab[4]);
    $phrase=$elem0[0].$elem1[0].$elem2[0].$elem3[0].$elem4[0];
    $_SESSION["phrase"]=$phrase
    $img="<span class='img'><img src='img_captcha/".$elem0[1]."' alt=''/><img src='img_captcha/".$elem1[1]."' alt=''/><img src='img_captcha/".$elem2[1]."' alt=''/><img src='img_captcha/".$elem3[1]."' alt=''/><img src='img_captcha/".$elem4[1]."' alt=''/></span>";
    //fin de la gestion du captcha
    ?>

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">

    <head>

    <title>Formulaire de contact</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <link rel="stylesheet" media="screen" type="text/css" title="Contact captcha" href="contact-captcha.css" />

    </head>

    <body>

    <? 
    if($flag==0){
     
    // quand le message est parti voici ce qui est affiche, avec un lien retour vers la page de votre choix
     //libre à vous de procéder aux modifications que vous souhaitez
     
    echo "Merci pour votre message, nous vous répondrons dans les meilleurs délais<br />";
     echo 
    '<a href="http://www.images-hebergement.com/upload/">Retour</a>';
    }
    else {
    ?>

    <!-- A partir d'ici il s'agit du traitement du formulaire (ce qui est apparent)-->
    <div id="formu">
    <form method="post" name="contact" action="<?php echo $PHP_SELF ?>">
    <fieldset>
        <legend>Formulaire de Contact</legend>
        <p><? echo $msg ?></p>
        <p><label>Nom <span class='asterisque'>*</span> : </label><input type="text" name="nom" value="<?php echo $_POST["nom"?>" /></p>
        <p><label>Prénom <span class='asterisque'>*</span> : </label><input type="text" name="prenom" value="<?php echo $_POST["prenom"?>" /></p>
        <p><label>E-mail <span class='asterisque'>*</span> : </label><input type="text" name="email" value="<?php echo $_POST["email"?>"/></p>
        <p><label>Site web : </label><input type="text" name="url" value="<?php echo $_POST["url"?>"/></p>
        <p><label>Sujet <span class='asterisque'>*</span> : </label><input type="text" name="sujet" value="<?php echo $_POST["sujet"?>" /></p>
        <!-- vous pouvez rajouter des éléments de formulaires ici -->
        <p><label>Message <span class='asterisque'>*</span> : <br /><br /></label><textarea name="message" cols="40" rows="8"><?php echo $_POST["message"?></textarea></p>
        <p class="captcha"><? echo $img ?>&nbsp;Recopiez le texte de l'image : <input type="text" name="captcha" size="5"/></p>
        <p class="signature"><?
    // Ce script a été créé gratuitement pour vous !

    ?></p>
    </fieldset>
    <br /><input type="submit" name="action" value="Envoyer" />&nbsp;&nbsp;<input type="reset" name="reset" value="Réinitialiser" class="button" />
    </form></div>
    <!-- Ici c'est la fin du traitement du formulaire-->

    <? ?>

    </body>

    </html>
    ensuite le .css : contact_captcha.css

    Code:
    /* Feuille de style pour le formulaire de contact -Captcha v.1*/
    
    #formu
    {
       width:500px;
       font-family:verdana,sans-serif;
       font-size:0.8em;
       margin: auto;
    }
    legend /* On met un peu plus en valeur les titres des fieldset */
    {
       font-family: Arial, "Arial Black", Georgia, "Times New Roman", Times, serif;
       color: #0B7DAE;
       background-color: white;
       font-weight: bold;
    } 
    .img{border:1px solid black;width:125px;}
    label
    {
       display:block;
       width:150px;
       float:left;
       color: #2C485C;
       background-color: white;
    }
    .captcha
    {
       color:  #E34405;
       background-color: white;
    }
    .info
    {
       font-family: "Trebuchet MS", Arial, Georgia, "Times New Roman", Times, serif;
       font-size:0.9em;
       color: #008000;
       background-color: white;
       font-style: italic;
    }
    .info-bis
    {
       font-family: verdana, Arial, Georgia, "Times New Roman", Times, serif;
       font-size:0.9em;
       color: #008000;
       background-color: white;
       font-style:normal;
    }
    .asterisque
    {
      color: red;
      background-color: white;
    }
    .signature
    {
       text-align: right; 
       font-family: "Comic Sans MS", Georgia, "Times New Roman", serif;
       color: gray;
       background-color: white;
       font-size: 80%;
       text-decoration:none;
    }
    ouvrez aussi un document depuis bloc note appelez le : captcha.txt

    Code:
    a;img1.gif
    b;img2.gif
    c;img3.gif
    d;img4.gif
    e;img5.gif
    f;img6.gif
    g;img7.gif
    h;img8.gif
    i;img9.gif
    j;img10.gif
    k;img11.gif
    l;img12.gif
    m;img13.gif
    n;img14.gif
    o;img15.gif
    p;img16.gif
    q;img17.gif
    r;img18.gif
    s;img19.gif
    t;img20.gif
    u;img21.gif
    v;img22.gif
    w;img23.gif
    x;img24.gif
    y;img25.gif
    z;img26.gif
    0;img27.gif
    1;img28.gif
    2;img29.gif
    3;img30.gif
    4;img31.gif
    5;img32.gif
    6;img33.gif
    7;img34.gif
    8;img35.gif
    9;img36.gif
    et en fichier joint le zip du dossier des images captcha

    voila à vous de voir
     

    Pièces jointes:

  5. holdup65

    holdup65 New Member

    Bien le tuto , sa va m'aider !

    Moi qui utiliser le form2mail !

    Merci
     
  6. Christophe123

    Christophe123 New Member

    bas de rien j'ai bien chercher sur le net et voila mais il faut aussi prendre le zip pour les images
     

Partager cette page