IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

HTML Discussion :

Formulaire de contact


Sujet :

HTML

  1. #1
    Membre averti
    Homme Profil pro
    Sans emploi
    Inscrit en
    Avril 2014
    Messages
    22
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France

    Informations professionnelles :
    Activité : Sans emploi

    Informations forums :
    Inscription : Avril 2014
    Messages : 22
    Par défaut Formulaire de contact
    Bonsoir à tous

    Ma question va sûrement vous paraître simple mais à vrai dire, mes connaissance en HTML sont assez limitées.

    Recherchant actuellement un emploi, je travaille sur un projet de site personnel à l'attention d'éventuels recruteurs. J'ai pour cela pris un modèle de site sur HTML5 UP! qui propose des sites élégants et simples.

    A la fin de mon site déroulant (je ne connais pas le terme exact pour qualifier un site que l'on parcourt en défilant à la souris), il y a un formulaire de contact composé des champs "Nom", "Email", "Sujet" et d'une zone de texte "Message". Très classique.

    Voici le code de ce formulaire :

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    <div>
        <div class="row">
            <div class="12u">
                <form method="post" action="contact.php">
                    <div>
                        <div class="row half">
                            <div class="6u">
                                <input type="text" name="nom" id="nom" placeholder="Nom" />
                            </div>
                            <div class="6u">
                                <input type="text" name="email" id="email" placeholder="Email" />
                            </div>
                        </div>
                        <div class="row half">
                            <div class="12u">
                                <input type="text" name="sujet" id="sujet" placeholder="Sujet" />
                            </div>
                        </div>
                        <div class="row half">
                            <div class="12u">
                                <textarea name="message" id="message" placeholder="Message"></textarea>
                            </div>
                        </div>
                        <div class="row">
                            <div class="12u">
                                <input type="hidden">
                                <a href="#" class="button form-button-submit">Envoyer</a>
                                <a href="#" class="button button-alt form-button-reset">Tout effacer</a>
                            </div>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    Bien entendu, c'est en appuyant sur le bouton "Envoyer" codé en ligne 28, qu'un message est envoyé vers ma boîte.

    Parallèlement à ça, j'ai trouvé le script en PHP permettant de faire fonctionner ce genre de formulaire. J'ai réussi à le faire fonctionner dans un fichier HTML à part. Cependant, à la différence du code HTML de mon site présenté ci-dessus, le bouton sur lequel l'appui permet l'envoi du message n'est pas un hyperlien <a></a>, mais un <input/> (ligne 20), comme on peut le voir ci-dessous :

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    <html>
    <head>
    </head>
    <body>
        <div class="row">
            <div class="span9">
                <form id="contact" method="post" action="traitement_formulaire.php">
                    <fieldset>
                        <legend>Vos coordonnées</legend>
                        <p><label for="nom">Nom :</label><input type="text" id="nom" name="nom" tabindex="1" /></p>
                        <p><label for="email">Email :</label><input type="text" id="email" name="email" tabindex="2" /></p>
                    </fieldset>
                    <fieldset>
                        <legend>Votre message :</legend>
                        <p><label for="objet">Objet :</label><input type="text" id="objet" name="objet" tabindex="3" /></p>
                        <p><label for="message">Message :</label><textarea id="message" name="message" tabindex="4" cols="30" rows="8"></textarea></p>
                    </fieldset>
                    <div style="text-align:center;"><input type="submit" name="envoi" value="Envoyer le formulaire !" /></div>
                </form>
            </div>
        </div>
    </body>
    <html>
    Là, quand j'appuie sur le bouton "Envoyer le formulaire !", le script PHP s'exécute et le message est bien envoyé sur ma boîte mail.

    Mon problème est que je ne parviens pas à trouver à "adapter", faire en sorte que lorsque j'appuie sur le bouton "Envoyer" de mon site, le code PHP s'exécute correctement. A faire la liaison entre ma feuille HTML et mon code PHP.

    Une idée ?

    Merci à vous.
    Cordialement,
    Che57

  2. #2
    Modérateur

    Avatar de NoSmoking
    Homme Profil pro
    Inscrit en
    Janvier 2011
    Messages
    17 213
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Isère (Rhône Alpes)

    Informations forums :
    Inscription : Janvier 2011
    Messages : 17 213
    Par défaut
    Bonjour,
    Mon problème est que je ne parviens pas à trouver à "adapter", faire en sorte que lorsque j'appuie sur le bouton "Envoyer" de mon site, le code PHP s'exécute correctement.
    pas vraiment compris quel était ton problème, l'envoi d'un formulaire via un INPUT type submit envoi les données présentent dans ton formulaire à l'adresse figurant dans l'action de celui ci, qui sont traitées coté serveur des données.

  3. #3
    Membre averti
    Homme Profil pro
    Sans emploi
    Inscrit en
    Avril 2014
    Messages
    22
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France

    Informations professionnelles :
    Activité : Sans emploi

    Informations forums :
    Inscription : Avril 2014
    Messages : 22
    Par défaut
    Bonjour NoSmoking,

    Le problème qui se pose dans mon cas, est que dans le code HTML de mon site (premier code affiché), le bouton qui permet d'envoyer le formulaire n'est pas de type INPUT, mais il s'agit d'un hyperlien.

    En remplaçant les balises <a> </a> par une balise <input/>, ça fonctionne. Les données de mon formulaire sont bien envoyées vers le script. Mais si j'effectue ce changement, cela modifie le design de mon site (boutons non alignés) puisque il y a plusieurs feuilles CSS derrière.

    Ce que je voudrais, c'est conserver le code pour mon bouton "Envoyer" :

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    <a href="#" class="button form-button-submit">Envoyer</a>
    Mais lors de l'appuie sur ce lien, pouvoir envoyer les données à mon script.

    Serait-ce un peu plus clair ?

  4. #4
    Modérateur

    Avatar de NoSmoking
    Homme Profil pro
    Inscrit en
    Janvier 2011
    Messages
    17 213
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Isère (Rhône Alpes)

    Informations forums :
    Inscription : Janvier 2011
    Messages : 17 213
    Par défaut
    Serait-ce un peu plus clair ?
    je crois

    Il existe une solution bien simple, c'est de conserver ton INPUT et de le styler via le CSS cela se fait trés bien.

    Une autre solution est de passer par un peu de javascript pour faire un submit de ta FORM.

    Perso je vote pour la 1
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    <!DOCTYPE html>
    <html lang="fr">
    <head>
    <meta charset="UTF-8">
    <title>[...]</title>
    <style>
    .comme_un_lien, a{
      color:#00F;
      font-family:Verdana;
      font-size: 1em;
      line-height:1.25em;
      text-decoration:underline;
    }
    .comme_un_lien{
      border:0;
      padding:0;
      margin:0;
      background:#FFF;
    }
    </style>
    </head>
    <body>
    <input class="comme_un_lien" type="submit" value="Envoyer"> - <a href="#">Envoyer</a>
    </body>
    </html>
    .

  5. #5
    Membre averti
    Homme Profil pro
    Sans emploi
    Inscrit en
    Avril 2014
    Messages
    22
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France

    Informations professionnelles :
    Activité : Sans emploi

    Informations forums :
    Inscription : Avril 2014
    Messages : 22
    Par défaut
    Tout comme toi, j'avais aussi pensé à modifier le CSS pour l'INPUT. Le hic est que d'une part, ce n'est pas moi qui a réalisé le CSS de ce site. De plus, le CSS et moi ça fait deux...

    J'avais aussi vu qu'on pouvait utiliser le JS dans mes recherches. Mais tu as l'air d'émettre quelques réserves quant à cette méthode.

    D'ailleurs, dans le fichier JS de mon site, je vois cette ligne qui est apparemment rattachée à mon bouton "Envoyer" (je me fie à la class form-button-submit pour avancer cela) :

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    jQuery('form .form-button-submit').click(function(e) { e.preventDefault(); jQuery(this).closest('form').submit(); });
    Comment modifier ce code pour envoyer les données données vers mon script PHP lors d'un événement appui bouton ?

  6. #6
    Modérateur

    Avatar de NoSmoking
    Homme Profil pro
    Inscrit en
    Janvier 2011
    Messages
    17 213
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Isère (Rhône Alpes)

    Informations forums :
    Inscription : Janvier 2011
    Messages : 17 213
    Par défaut
    Comment modifier ce code pour envoyer les données données vers mon script PHP lors d'un événement appui bouton ?
    si tu envoies via l'appui sur l'INPUT tu n'a pas besoin de ce code, ce code fait la même chose, soumission du formulaire, mais après appui sur le lien.

    Je note quand même que l'action sur tes deux exemples est différente.
    d'un coté
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    <form method="post" action="contact.php">
    et de l'autre
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    <form id="contact" method="post" action="traitement_formulaire.php">

  7. #7
    Membre averti
    Homme Profil pro
    Sans emploi
    Inscrit en
    Avril 2014
    Messages
    22
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France

    Informations professionnelles :
    Activité : Sans emploi

    Informations forums :
    Inscription : Avril 2014
    Messages : 22
    Par défaut
    L'action est différente car le deuxième code est juste pour réaliser l'essai de mon script PHP (avec un INPUT en somme). Sinon, il faut prendre en compte le premier code que j'ai posté.

    Comment puis-je faire en JavaScript pour "submit" à mon script ?

    EDIT : je ne peux utiliser d'INPUT, sinon je suis obligé de revoir tout le design du bouton. A moins qu'il existe un input de type hyperlien, mais je crois pas.

    Je peux rien faire avec un INPUT type="hidden" ?

  8. #8
    Membre averti
    Homme Profil pro
    Sans emploi
    Inscrit en
    Avril 2014
    Messages
    22
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France

    Informations professionnelles :
    Activité : Sans emploi

    Informations forums :
    Inscription : Avril 2014
    Messages : 22
    Par défaut
    Pour faire très simple, j'aimerais que lorsque je clique sur Envoyer (ligne 23), le contenu des champs et de la zone de texte soit envoyée à mon script contact.php. J'ai entendu parler d'une solution avec du JavaScript, mais je n'y connais absolument rien.

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    <form method="post" action="contact.php">
    	<div>
    		<div class="row half">
    			<div class="6u">
    				<input type="text" name="name" id="name" placeholder="Nom" />
    			</div>
    			<div class="6u">
    				<input type="text" name="email" id="email" placeholder="Email" />
    			</div>
    		</div>
    		<div class="row half">
    			<div class="12u">
    				<input type="text" name="subject" id="subject" placeholder="Sujet" />
    			</div>
    		</div>
    		<div class="row half">
    			<div class="12u">
    				<textarea name="message" id="message" placeholder="Message"></textarea>
    			</div>
    		</div>
    		<div class="row">
    			<div class="12u">
    				<a href="#" class="button form-button-submit">Envoyer</a>
    				<a href="#" class="button button-alt form-button-reset">Tout effacer</a>
    			</div>
    		</div>
    	</div>
    </form>
    Voici mon script contact.php.

    Code php : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
    85
    86
    87
    88
    89
    90
    91
    92
    93
    94
    95
    96
    97
    98
    99
    100
    101
    102
    103
    104
    105
    106
    107
    108
    109
    110
    111
    112
    113
    114
    115
    116
    117
    118
    119
    120
    121
    122
    <?php
    /*
    ********************************************************************************************
    CONFIGURATION
    ********************************************************************************************
    */
    // destinataire est votre adresse mail. Pour envoyer à plusieurs à la fois, séparez-les par une virgule
    $destinataire = 'damien.ardito@me.com';
     
    // copie ? (envoie une copie au visiteur)
    $copie = 'oui'; // 'oui' ou 'non'
     
    // Messages de confirmation du mail
    $message_envoye = "Votre message nous est bien parvenu !";
    $message_non_envoye = "L'envoi du mail a échoué, veuillez réessayer SVP.";
     
    // Messages d'erreur du formulaire
    $message_erreur_formulaire = "Vous devez d'abord <a href=\"contact.html\">envoyer le formulaire</a>.";
    $message_formulaire_invalide = "Vérifiez que tous les champs soient bien remplis et que l'email soit sans erreur.";
     
    /*
    ********************************************************************************************
    FIN DE LA CONFIGURATION
    ********************************************************************************************
    */
     
    // on teste si le formulaire a été soumis
    if (!isset($_POST['envoi']))
    {
    	// formulaire non envoyé
    	echo '<p>'.$message_erreur_formulaire.'</p>'."\n";
    }
    else
    {
    	//cette fonction sert à nettoyer et enregistrer un texte
    	function Rec($text)
    	{
    		$text = htmlspecialchars(trim($text), ENT_QUOTES);
    		if (1 === get_magic_quotes_gpc())
    		{
    			$text = stripslashes($text);
    		}
    		$text = nl2br($text);
    		return $text;
    	};
    	//Cette fonction sert à vérifier la syntaxe d'un email
    	function IsEmail($email)
    	{
    		$value = preg_match('/^(?:[\w\!\#\$\%\&\'\*\+\-\/\=\?\^\`\{\|\}\~]+\.)*[\w\!\#\$\%\&\'\*\+\-\/\=\?\^\`\{\|\}\~]+@(?:(?:(?:[a-zA-Z0-9_](?:[a-zA-Z0-9_\-](?!\.)){0,61}[a-zA-Z0-9_-]?\.)+[a-zA-Z0-9_](?:[a-zA-Z0-9_\-](?!$)){0,61}[a-zA-Z0-9_]?)|(?:\[(?:(?:[01]?\d{1,2}|2[0-4]\d|25[0-5])\.){3}(?:[01]?\d{1,2}|2[0-4]\d|25[0-5])\]))$/', $email);
    		return (($value === 0) || ($value === false)) ? false : true;
    	}
    	// formulaire envoyé, on récupère tous les champs.
    	$nom = (isset($_POST['nom'])) ? Rec($_POST['nom']) : '';
    	$email = (isset($_POST['email'])) ? Rec($_POST['email']) : '';
    	$sujet = (isset($_POST['sujet'])) ? Rec($_POST['sujet']) : '';
    	$message = (isset($_POST['message'])) ? Rec($_POST['message']) : '';
     
    	// On va vérifier les variables et l'email ...
    	$email = (IsEmail($email)) ? $email : ''; // soit l'email est vide si erroné, soit il vaut l'email entré
     
    	if (($nom != '') && ($email != '') && ($sujet != '') && ($message != ''))
    	{
    		// les 4 variables sont remplies, on génère puis envoie le mail
    		$headers = 'MIME-Version: 1.0' . "\r\n";
    		$headers .= 'From:'.$nom.' <'.$email.'>' . "\r\n" .
    		'Reply-To:'.$email. "\r\n" .
    		'X-Mailer:PHP/'.phpversion();
     
    		// envoyer une copie au visiteur ?
    		if ($copie == 'oui')
    		{
    			$cible = $destinataire.','.$email;
    		}
    		else
    		{
    			$cible = $destinataire;
    		};
     
    		// Remplacement de certains caractères spéciaux
    		$message = str_replace("'","'",$message);
    		$message = str_replace("’","'",$message);
    		$message = str_replace("&quot;",'"',$message);
    		$message = str_replace('<br>','',$message);
    		$message = str_replace('<br />','',$message);
    		$message = str_replace("&lt;","<",$message);
    		$message = str_replace("&gt;",">",$message);
    		$message = str_replace("&amp;","&",$message);
     
    		function date_getMicroTime() 
    		{
    			list($usec, $sec) = explode(' ', microtime());
    			return ((float) $usec + (float) $sec);
    		} 
     
    		$total = 0;
    		while($total < 1)
    		{
    			$start = date_getMicroTime();
    			for($i = 0 ; $i < 999999 ; $i++) 1;
    			{
    				mail($cible, $sujet, $message, $headers);
    				$total = round(date_getMicroTime() - $start, 3);
    			}
    		}
     
    		// Envoi du mail
    		if (mail($cible, $sujet, $message, $headers))
    		{
    			echo '<p>'.$message_envoye.'</p>'."\n";
    		}
    			else
    		{
    			echo '<p>'.$message_non_envoye.'</p>'."\n";
    		};
    	}
    	else
    	{
    		// une des 3 variables (ou plus) est vide ...
    		echo '<p>'.$message_formulaire_invalide.' <a href="contact.html">Retour au formulaire</a></p>'."\n";
    	};
    };
    ?>

  9. #9
    Modérateur

    Avatar de NoSmoking
    Homme Profil pro
    Inscrit en
    Janvier 2011
    Messages
    17 213
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Isère (Rhône Alpes)

    Informations forums :
    Inscription : Janvier 2011
    Messages : 17 213
    Par défaut
    Ton soucis est un soucis qui se traite coté serveur et donc dans ton cas le mieux serait d'aller poser ta question sur le forum PHP

    Pas regardé tout le code mais un indice quand même, cette ligne de code
    Code php : Sélectionner tout - Visualiser dans une fenêtre à part
    if (!isset($_POST['envoi']))

  10. #10
    Membre Expert
    Avatar de laurentSc
    Homme Profil pro
    Webmaster débutant perpétuel !
    Inscrit en
    Octobre 2006
    Messages
    10 495
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 61
    Localisation : France, Isère (Rhône Alpes)

    Informations professionnelles :
    Activité : Webmaster débutant perpétuel !
    Secteur : Industrie

    Informations forums :
    Inscription : Octobre 2006
    Messages : 10 495
    Billets dans le blog
    1
    Par défaut
    Citation Envoyé par NoSmoking Voir le message
    Ton soucis est un soucis qui se traite coté serveur
    Pas sûr car voilà la solution en javascript (qui ne marchera que si celui-ci n'est pas désactivé)

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    <form method="post" action="contact.php" name="myform">
    	<div>
    		<div class="row half">
    			<div class="6u">
    				<input type="text" name="name" id="name" placeholder="Nom" />
    			</div>
    			<div class="6u">
    				<input type="text" name="email" id="email" placeholder="Email" />
    			</div>
    		</div>
    		<div class="row half">
    			<div class="12u">
    				<input type="text" name="subject" id="subject" placeholder="Sujet" />
    			</div>
    		</div>
    		<div class="row half">
    			<div class="12u">
    				<textarea name="message" id="message" placeholder="Message"></textarea>
    			</div>
    		</div>
    		<div class="row">
    			<div class="12u">
    				<a href="#" class="button form-button-submit" onclick="window.document.myform.submit();">Envoyer</a>
    				<a href="#" class="button button-alt form-button-reset">Tout effacer</a>
    			</div>
    		</div>
    	</div>
    </form>

  11. #11
    Modérateur

    Avatar de NoSmoking
    Homme Profil pro
    Inscrit en
    Janvier 2011
    Messages
    17 213
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Isère (Rhône Alpes)

    Informations forums :
    Inscription : Janvier 2011
    Messages : 17 213
    Par défaut
    Salut Laurent!

    Oui mais NON, il faut lire la discussion en entier, c'est déjà ce que fait Che57 en utilisant jQuery et même dans ton exemple on ne trouve pas de trace d'un élément possédant comme name "envoi"

Discussions similaires

  1. Réponses: 11
    Dernier message: 10/01/2006, 07h23
  2. [Formulaire] de contact
    Par inferno66667 dans le forum Langage
    Réponses: 6
    Dernier message: 19/12/2005, 19h32
  3. Prob avec formulaire de contact
    Par inferno66667 dans le forum Langage
    Réponses: 1
    Dernier message: 01/12/2005, 18h53
  4. Prob avec PHP sur le formulaire de contact
    Par inferno66667 dans le forum Langage
    Réponses: 7
    Dernier message: 16/11/2005, 17h06
  5. Problème d'accès formulaire de contact
    Par Mystic26 dans le forum Langage
    Réponses: 7
    Dernier message: 16/09/2005, 16h47

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo