Formulaire de contact

**Che57** · 01/04/2014, 23h27

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

**NoSmoking** · 02/04/2014, 18h28

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.

**Che57** · 02/04/2014, 18h42

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 ?

**NoSmoking** · 02/04/2014, 18h57

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>

.

**Che57** · 02/04/2014, 19h07

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 ?

**NoSmoking** · 02/04/2014, 19h50

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">

Formulaire de contact

HTML

Vue hybride

Discussions similaires

Partager

Partager