Contact Form 7 et IE6

On le sait, la compatibilité multi-plateformes n’est pas toujours évidente malgré toutes les avancées actuelles en programmation. Récemment je me suis retrouvé bloqué avec le plugin de formulaires de contact « Contact Form 7 » pour WordPress. Celui-ci ne voulait pas envoyer de mail sur IE6. Voici d’où vient le problème et comment le résoudre.

Au passage, j’apprécie énormément ce plugin car il est très flexible, on peut faire tout ce qu’on veut avec et on peut même le doter d’un captcha. Il fera l’objet d’un over-view si cela vous intéresse.

Spinning arrows

Revenons à nos déboires.

Le symptôme: sur IE6, lorsque l’on soumet le formulaire en cliquant sur « envoyer », la petite image .gif avec les flèches tournantes apparait mais ne disparait jamais. Le message de félicitation n’apparait pas et le mail ne part pas.

Des indications: il semblerait que la validation soit en cause car, que les champs soient vides ou remplis, le résultat est le même. En désactivant javascript dans les options de IE6, la validation « en dur » s’effectue bien, et le mail part (Ha! On avance!).
Ce que j’ai découvert sur un forum c’est que IE6 a parfois du mal avec les « friendly url » de WordPress. Si on regarde l’url de soumission du formulaire on a ça:

<form action="/contact/#wpcf7-f1-p18-o1" method="post" class="wpcf7-form">

En étudiant la requête, on s’aperçoit que IE retourne une erreur 404. Mais pourquoi donc? En fait, avec l’adresse « /contact/#wpcf7-f1-p18-o1 », IE6 va chercher le fichier « wpcf7-f1-p18-o1 » situé dans le dossier « contact », qui n’existe pas bien sûr.

L’astuce

L’astuce consiste donc à fournir une adresse de soumission « compréhensible ».
1- Ce qui pose problème c’est le caractère « / » avant le « # ».
2- Comme il s’agit d’un problème qui survient avec la validation javascript uniquement, on peut trouver une solution javascript sans gêner quoi que ce soit.
Il nous faut donc remplacer ce « / » par « ? » via javascript. Pour être plus précis, on va remplacer « /# » par « ?# » car il peut y avoir plusieurs « / » dans l’adresse et il n’y en a qu’un seul qu’on veut remplacer. Allez, un petit coup de jQuery:

jQuery(document).ready(function($){
    var reg=new RegExp("/#","g");
    $("form.wpcf7-form").each(function(){
	url=$(this).attr("action").replace(reg,"?#");
	$(this).attr("action",url);
    })
});

Avec ceci, on cible le premier formulaire Contact Form 7 de la page et on remplace son attribut « action ». Si vous avez plusieurs formulaires Contact Form 7 sur la page, il faudra faire la même chose mais avec une boucle « each ».
[update] J’ai modifié la fonction car elle provoquait une erreur javascript lorsqu’elle ne trouvait pas de formulaire sur la page. J’en ai profité pour utiliser « each », qui permet de simplifier la correction du bogue.
La fonction va rechercher tous les formulaires Contact Form 7 sur la page et va modifier l’attribut « action » pour chacun d’entre eux grâce à une expression régulière.

Sur le forum de WordPress, j’ai croisé le développeur de Simple Captcha (utilisé par Contact Form 7 pour son captcha) qui me disait que le script de validation retire normalement tout ce qui se trouve après le « # » dans l’url avant soumission. Bref, je ne sais pas exactement pourquoi la validation foire alors sur IE6 (peut-être parce qu’il ne vire pas le « / » posant problème?) mais ce petit bout de code a résolu mon problème ;)