Discussion :

[Invité]

Bon y a quand même un gros souci dans la logique : tu définis l'attribut action="processForm.php" de ton formulaire et tu attends un traitement ajax...

En fait, non.

Si on regarde le script vers les lignes 70 (posté ici), on a bien envoi via Ajax (+ mes explications ici) :

Code :

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

1
2
3
4
5
6
    $.ajax( {
      url: contactForm.attr( 'action' ) + "?ajax=true",
      type: contactForm.attr( 'method' ),
      data: contactForm.serialize(),
      success: submitFinished
    } );

Ton script est une solution "PLUS CLASSIQUE" (que j'utilise aussi) et plus claire...

[rawsrc]

Le fait de définir un attribut action le rend prioritaire sur tout le reste. Donc, pas possible avec d'avoir de l'ajax.

[marcha]

Le fait de définir un attribut action le rend prioritaire sur tout le reste. Donc, pas possible avec d'avoir de l'ajax.

Au contraire, javascript a le dessus. Par contre une erreur de syntaxe dans le javascript et c'est le submit "naturel" qui aura lieu. Donc c'est trompeur pendant le dev. Utilise par exemple la console de firebug en mode permanent, ça permet de voir les erreurs javascript avant l'envoi du formulaire.

Il faut éviter l'usage de l'attribut onsubmit et utiliser les évenement chainés et non obstrusifs. telle que $('form').submit(...) avec JQuery

Ceci dit, la comparaison $_GET['ajax']===true est fausse, car le paramètre
passé dans l'url de l'action est une chaine de caractère qui vaut "true" et
non un boolean true. Essaie déjà de tester $_GET['ajax']=="true"

Sinon utilise print_r($_REQUEST); dans le php pour renvoyé la totalité de ce qui est passé dans la requête afin de l'afficher dans la zone de réponse ajax.

Enfin l'onglet FireBug Réseau te permet de voir exactement les paramètre envoyés par le formulaire.

[Sventovit]

Bonjour Messieurs
j’ai pris et testé l’ensemble des scripts et codes de Martin (quel boulot !) et, suivant la reommandation de Marc, tracé leurs déroulements via l’onglet réseau de Firebug qui m’indique 2 erreurs :

"NetworkError: 404 Not Found - http://domaine.com/undefined?ajax=true"

You've used the same selector more than once.
Selector: "#senderName"

mais là, je sèche.

[Invité]

Bonjour,
bien dormi ?
Redonne-nous tes codes (PHP/JS), stp.

[Sventovit]

Bonjour bonjour…
malgré tout, très très bien dormi… en comptant des boutons "envoyer".

Bon… alors voilà tout le couscous (car c’est dans le semoule que je pédale, dans le bouillon que je nage) :

L’appel aux frameworks :

Code :

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

1
2
3
 
<script src='//code.jquery.com/jquery-latest.min.js'></script>
<script src='//ajax.googleapis.com/ajax/libs/jqueryui/1.8.23/jquery-ui.min.js'></script>

La partie HTML pour 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
 
<form id='contactForm' action='processForm.php' method='post'>
		    <h2>Pour m'envoyer un message...</h2>
    <ul>
        <li>
            <label for="senderName">Votre nom</label>
            <input type="text" name="senderName" id="senderName" placeholder="Ainsi que votre prénom" required="required" maxlength="40" />
        </li>
        <li>
            <label for="senderEmail">Courriel</label>
            <input type="email" name="senderEmail" id="senderEmail" placeholder="Pour que je puisse vous répondre" required="required" maxlength="50" />
        </li>
        <li>
            <label for="message" style="padding-top: .5em;">Votre message</label>
            <textarea name="message" id="message" placeholder="Sans balise HTML ni code." required="required" cols="80" rows="10" maxlength="10000"></textarea>
        </li>
        <input type="text" name="spambot" id="spambot" value="" />
    </ul>
    <div id="formButtons">
        <input type="submit" id="sendMessage" name="sendMessage" value="Envoyer" />
        <input type="button" id="cancel" name="cancel" value="Annuler" />
    </div>
</form>
<div id="sendingMessage" class="statusMessage"><p>Le message est en partance. Merci de patienter...</p></div>
<div id="successMessage" class="statusMessage"><p>Merci pour votre message ! Je vous réponds dès que possible.</p></div>
<div id="failureMessage" class="statusMessage"><p>Il y a eu un problème à l'envoi de votre message. Merci de réessayer.</p></div>
<div id="incompleteMessage" class="statusMessage"><p>Merci de remplir tous les champs avant d’envoyer votre message.</p></div>

La ligne dans la CSS qui masque le contenu aux humains :

Code :

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

1
2
 
input#spambot{visibility: hidden; display:  none;}

Le script JS qui s’occupe (entre autres) du traitement :

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
85
86
 
<script>
var messageDelay = 2000;  // How long to display status messages (in milliseconds)
 
// Init the form once the document is ready
$( init );
 
 
// Initialize the form
 
function init() {
 
  // Hide the form initially.
  // Make submitForm() the form's submit handler.
  // Position the form so it sits in the centre of the browser window.
  $('#contactForm').hide().submit( submitForm ).addClass( 'positioned' );
 
  // When the "Send us an email" link is clicked:
  // 1. Fade the content out
  // 2. Display the form
  // 3. Move focus to the first field
  // 4. Prevent the link being followed
 
  $('a[href="#contactForm"]').click( function() {
    $('#content').fadeTo( 'slow', .2 );
    $('#contactForm').fadeIn( 'slow', function() {
      $('#senderName').focus();
    } )
 
    return false;
  } );
 
  // When the "Cancel" button is clicked, close the form
  $('#cancel').click( function() { 
    $('#contactForm').fadeOut();
    $('#content').fadeTo( 'slow', 1 );
  } );  
 
  // When the "Escape" key is pressed, close the form
  $('#contactForm').keydown( function( event ) {
    if ( event.which == 27 ) {
      $('#contactForm').fadeOut();
      $('#content').fadeTo( 'slow', 1 );
    }
  } );
 
}
 
 
// Submit the form via Ajax
 
function submitForm() {
    var messageDelay = 2000;
    var contactForm = $('#contactForm');
    if ( !$('#senderName').val() || !$('#senderEmail').val() || !$('#message').val() ) {
        // No; display a warning message and return to the form
        $('#incompleteMessage').fadeIn().delay(messageDelay).fadeOut();
        contactForm.fadeOut().delay(messageDelay).fadeIn();
        return false;
    }
 
    $('#sendingMessage').fadeIn();
    contactForm.fadeOut();
 
    $.ajax({
        type: 'POST',
        url: 'processForm.php',
        data: $('#contactForm').serialize(),
        dataType: 'json',
        error: function(response) { alert('Error during call'); },
        success: function(response) {
            if(response.status == "success") {
                $('#successMessage').fadeIn().delay(messageDelay).fadeOut();
                $('#senderName').val("");
                $('#senderEmail').val("");
                $('#message').val("");             
                $('#content').delay(messageDelay+500).fadeTo('slow', 1);
            }
            else {
                $('#failureMessage').fadeIn().delay(messageDelay).fadeOut();
                contactForm.delay(messageDelay+500).fadeIn();
            }
        }
    });
}
</script>

Le processeur du formulaire (processForm.php) :

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
 
<?php
 
// Define some constants
define( "RECIPIENT_NAME", "Clément" );
define( "RECIPIENT_EMAIL", "clement@domaine.fr" );
define( "EMAIL_SUBJECT", "Un message en provenance du site" );
 
// Read the form values
$success = false;
$senderName = isset( $_POST['senderName'] ) ? preg_replace( "/[^\.\-\' a-zA-Z0-9]/", "", $_POST['senderName'] ) : "";
$senderEmail = isset( $_POST['senderEmail'] ) ? preg_replace( "/[^\.\-\_\@a-zA-Z0-9]/", "", $_POST['senderEmail'] ) : "";
$message = isset( $_POST['message'] ) ? preg_replace( "/(From:|To:|BCC:|CC:|Subject:|Content-Type:)/", "", $_POST['message'] ) : "";
 
// If all values exist, send the email
 
if ( $senderName && $senderEmail && $message ) {
  $recipient = RECIPIENT_NAME . " <" . RECIPIENT_EMAIL . ">";
  $headers = "From: " . $senderName . " <" . $senderEmail . ">";
  $success = mail( $recipient, EMAIL_SUBJECT, $message, $headers );
}
 
 
// Return an appropriate response to the browser
if ( isset($_GET["ajax"]) ) {
  echo $success ? "success" : "error";
} else {
?>
<html>
  <head>
    <title>Merci</title>
  </head>
  <body>
  <?php if ( $success ) echo "<p>Merci pour votre message ! Je vous réponds dès que possible.</p>" ?>
  <?php if ( !$success ) echo "<p>Il y a eu un problème à l’envoi de votre message. Merci de réessayer.</p>" ?>
  <p>Cliquer sur le bouton de retour dans votre navigateur pour revenir sur la page.</p>
  </body>
</html>
<?php
}
?>

En principe tout devrait être là.

Cette solution pour contrer le spam est simple en elle-même, facile à intégrer dans un formulaire basique, et elle a fait ses preuves.
Ce serait bien sûr dommage pour mon poulain de pas l’avoir sur son site, mais pas seulement pour lui. Tout le monde en profitera. Mort aux spams !

Et merci.

[Invité]

Bon.
J'ai testé tel quel.
Juste en commentant l'envoi :

Code :

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

1
2
//  $success = mail( $recipient, EMAIL_SUBJECT, $message, $headers );
  $success = true;

Ca semble... fonctionner !

Merci pour votre message ! Je vous réponds dès que possible.
Cliquer sur le bouton de retour dans votre navigateur pour revenir sur la page.

A mon avis, soit ça vient de la fonction mail() (mauvais paramétrage ?), soit...

"... La Vérité est ailleurs ! ..."

[Sventovit]

Je n’ai peut-être pas compris quelque chose.

Les codes plus hauts sont les codes originaux (seule la ligne <input type="text" name="spambot" id="spambot" value="" /> a été rajoutée) qui fonctionnent bien, mais il n’y a pas la protection dans le formulaire quand ce champ est rempli par un robot qui empêche l’envoi.

Je vais reprendre un café. Peut-être serais-je plus intelligent à mon retour.

[Invité]

Connais-tu la technique du "j-efface-tout-et-je-recommence-depuis-le-debut" ?

Bon courage !

[Sventovit]

Je comprends ta lassitude et te remercie pour ta patience.

Si, comme vous le disiez il suffisait de placer en tête du script de traitement,

Code :

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

1
2
3
4
5
6
 
<?php
 
if ( ! empty($_POST['spambot'])) {
    // non-humain
}

ça aurait été à ma portée.
Mais comme ça ne marche pas (les humains comme les robots peuvent envoyer des mails), je vais chercher une solution.
Merci tout de même pour le support.

[Damien51]

Je viens d'essayer de modifier ta valeur spambot manuellement et j'ai modifié ton code source comme cela.

Code :

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

1
2
3
4
5
6
7
8
9
if(empty($_POST['spambot'])){
 // If all values exist, send the email
 
if ( $senderName && $senderEmail && $message ) {
  $recipient = RECIPIENT_NAME . " <" . RECIPIENT_EMAIL . ">";
  $headers = "From: " . $senderName . " <" . $senderEmail . ">";
  $success = mail( $recipient, EMAIL_SUBJECT, $message, $headers );
}
 }

Donc si je rentre une valeur manuellement à spambot, il me dit qu'il y a une erreur dans l'envoi et quand je rentre aucune valeur, il me dit "Message envoyé"

[Sventovit]

Du premier coup ! Testé et retesté… le traitement est bloqué quand le champ est rempli et les visiteurs peuvent poster : je reçois leurs messages.

Alors là chapeau !
Ma profonde gratitude et celle de mon poulain qui va voir maintenant avancer.

Merci à toi.

Merci à tous.

Le problème est résolu.
Bonne journée.

[marcha]

Encore une remarque de dernière minute :-)

Je trouve intéressant d'ajouter un sleep() lorsqu'un robot est détecté.

Cela ralenti le robot.

[Sventovit]

Ah ben avec ça…
Et comment placer cette berceuse sleep(10); ? pour endormir le robot ?

[marcha]

Lors de l'affichage du message d'erreur

Code :

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

1
2
3
4
5
 
 if ( !$success ) {
   echo "<p>Il y a eu un problème à l’envoi de votre message. Merci de réessayer.</p>";
   sleep(10);
 }

[Sventovit]

Mission accomplie : le robot dort dans un coin.
Encore merci.

Si tu vois d’autres améliorations à apporter, des peaufinements… cela pourrait servir à d’autres, comme moi, qui ne veulent pas protéger leurs formulaires par un Captcha.

En tout cas sachez tous que je suis soulagé et ravi.
Merci.