Discussion :

[Gil49]

Bonjour à toutes et tous,

Je suis intéressé par le formulaire trouvé ici : https://codepen.io/christopherduffy/pen/egmbYp.

Hors, celui ci n'a pas de fichier de traitement php. Il faudrait donc que j'en improvise un pour envoyer ensuite à mon adresse mail les données.

Le code html est celui ci:

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
<form id="form" method="post" action="xx.php">
 
<div id="1" class="form-group">
<input class="form__input" type="text" id="f_name" name="callback_name" placeholder="Name" data-empty="Name required">
</div>
 
<div id="2" class="form-group">
<input class="form__input" type="tel" id="f_number" name="callback_number" placeholder="Phone number" data-empty="Phone number required" data-error="Valid phone number required">
</div>
 
<div id="3" class="form-group">
<input class="form__input" type="email" id="f_email" name="callback_email" placeholder="Email address" data-empty="Email address required" data-error="Valid email address required">
</div>
 
<span class="form-progress-bar">
<span class="form-progress-bar__position"></span>
</span>
 
<div class="form-footer">
<span class="form-footer__progress">
<span>Step <span id="current-form-group">1</span> of <span id="total-form-group"></span></span>
</span>
<a href="#" class="form-footer__back">Go back a step</a>
<span class="form-footer__message"></span>
</div>
 
</form>

Il y a une partie JS visible sur le lien que je vous ai indiqué et qui valide et contrôle que les champs sont bien remplis correctement.

Pour la partie PHP, j'ai pensé à ceci mais étant grand débutant, ça ne vaut pas grand chose :

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
<?php
if (isset($_POST["submit"])) {
$name = $_POST['name'];
$email = $_POST['email'];
$number = $_POST['number'];
$from = 'Demo Contact Form';
$to = 'example@domain.com';
$subject = 'Message de Contact Demo ';
 
$body ="de: $name\n E-Mail: $email\n Message:\n $message";
}
 
if (!$errName && !$errEmail && !$errnumber && ! {
if (mail ($to, $subject, $body, $from)) {
$result='<div class="alert alert-success">merci</div>';
} else {
$result='<div class="alert alert-danger">Désolé.Réessayez.</div>';
}
?>

C'est un fichier qui ne vérifie pas que les champs sont remplis correctement vu que la partie JS le fait. Sa fonction est juste d'envoyer les données.
Voilà.

[Invité]

Bonjour,

1/

...qui ne vérifie pas que les champs sont remplis correctement vu que la partie JS le fait.

GROSSE ERREUR !!
Il FAUT ABSOLUMENT vérifier les erreurs en PHP !!
JS peut en effet être désactivé par le client, ou les données modifiées (coté client) pour "tromper" JS.


2/ dans le formulaire, les input ont pour name "callback_name", "callback_...".
Il faut donc les récupérer comme tel (et avec $_POST) :

Code php :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
  $name = $_POST['callback_name'];
  $number = $_POST['callback_number'];
  $email = $_POST['callback_email'];

[Gil49]

Salut Jreaux62,

j'ai un peu modifié mon code php entre temps, je ne sais pas si tu as vu. Vérifier les erreur en php, ça ajoute une difficulté de plus dont je me serais bien passé :/ J'ai déjà du mal à m'en sortir avec l'envoi des données :/

Donc ça ferait peut-être ça:

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
<?php
if (isset($_POST["submit"])) {
$callback_name = $_POST['name'];
$callback_email = $_POST['email'];
$callback_number = $_POST['number'];
$from = 'Demo Contact Form';
$to = 'example@domain.com';
$subject = 'Message de Contact Demo ';
 
$body ="de: $callback_name\n E-Mail: $callback_email\n: $callback_number";
}
if (!$errName && !$errEmail && !$errnumber && ! {
if (mail ($to, $subject, $body, $from)) {
$result='<div class="alert alert-success">merci</div>';
} else {
$result='<div class="alert alert-danger">Désolé.Réessayez.</div>';
}
?>

[Invité]

1/ Je ne vois pas dans ton formualire de :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

<input type="submit name="submit" ..... />

Or il est nécessaire pour :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

if (isset($_POST["submit"])) {

2/ Commence par réussir l'envoi d'un email.

Mais il faut ABSOLUMENT PROTEGER les données reçues coté PHP (Gestion d'erreurs,...) !

3/ Si on regarde plus loin dans le code, on trouve :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

if (!$errName && !$errEmail && !$errnumber && ! {

C'est donc qu'il existait bien une gestion d'erreur dans le code initial (avant de TU le modifies)...

[Gil49]

Il n'y a pas de bouton submit sur le code html d'origine. Je pense que le formulaire se valide et s'envoie lorsque les champs sont bien remplis.

[Invité]

Houla.
Je n'avais pas eu la curiosité de cliquer sur le lien... : on a du SCSS et du jQuery !
Si tu débutes, ce n'est sûrement pas avec ça que tu vas t'en sortir...

• Un simple formulaire devrait suffire dans un premier temps.
• Traitement sur la meme page : le code PHP est à mettre AVANT le 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
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
<?php
//-----------------------
	$contact_name = '';
	$contact_number = '';
	$contact_email = '';
	$contact_err = array();
//-----------------------
// Traitement du formulaire ?
if (isset($_POST['contact_submit'])) 
{
	// ------------------
	// 1/ Récupération des données
	$contact_name = $_POST['contact_name'];
	$contact_number = $_POST['contact_number'];
	$contact_email = $_POST['contact_email'];
	// ------------------
	// 2/ Gestion d'erreurs
 
	// champs requis (required)
	if( empty($contact_name) ) {
		$contact_err['Name'] = 'Name required';
	}
	if( empty($contact_number) ) {
		$contact_err['Number'] = 'Phone number required';
	}elseif( !is_numeric($contact_number) ) {
		$contact_err['Number'] = 'Valid Phone number required';
	}
	if( empty($contact_email) ) {
		$contact_err['Email'] = 'Email address required';
	}elseif( !filter_var($contact_email, FILTER_VALIDATE_EMAIL) ) {
		$contact_err['Email'] = 'Valid Email address required';
	}
	// ------------------
	// 3/ Envoi par email
	$result = '';
	if ( empty($contact_err) ) // si pas d'erreur
	{
		$from = 'Demo Contact Form';
		$to = 'example@domain.com';
		$subject = 'Message de Contact Demo ';
 
		$body = "de: $contact_name\n E-Mail: $contact_email\n: $contact_number";
	//	if (mail ($to, $subject, $body, $from)) {
		if (true) {
			$result = '<div class="alert alert-success">merci</div>';
		} else {
			$result = '<div class="alert alert-danger">Désolé.Réessayez.</div>';
		}
	}
	// ------------------
	unset($_POST);
	// Resultat de l'envoi
	if( !empty($result) ){ 
	 echo $result;
	}
	// ------------------
}
//-----------------------
// Affichage du formulaire
?>
<?php if( !empty($result) ){ echo $result; } ?>
 
<form id="form" method="post" action=""><!-- traitement sur la meme page -->
 
	<div>
		<input type="text" name="contact_name" placeholder="Name" value="<?php echo $contact_name; ?>" required="required" />
		<?php if( !empty($contact_err['Name']) ){ echo '<div class="alert alert-danger">'.$contact_err['Name'].'</span>'; } ?>
	</div>
 
	<div>
		<input type="tel" name="contact_number" placeholder="Phone number" value="<?php echo $contact_number; ?>" required="required" />
		<?php if( !empty($contact_err['Number']) ){ echo '<div class="alert alert-danger">'.$contact_err['Number'].'</span>'; } ?>
	</div>
 
	<div>
		<input type="email" name="contact_email" placeholder="Email address" value="<?php echo $contact_email; ?>" required="required" />
		<?php if( !empty($contact_err['Email']) ){ echo '<div class="alert alert-danger">'.$contact_err['Email'].'</span>'; } ?>
	</div>
 
	<div>
		<input type="submit" name="contact_submit" value="Send" />
	</div>
 
</form>