L’extension Contact Form 7 est très bien pour créer des formulaires sur un site WordPress. Mais on peut rencontrer deux problèmes :
- temps de chargement des pages plus long puisque l’extension ajoute un script JavaScript et une feuille de style.
- Mauvaise prise en charge des calendriers pour choisir une date lorsque l’internaute utilise Safari ou internet Explorer.
J’explique ici comment j’ai corrigé ces deux difficultés.
Charger les scripts additionnels seulement sur les pages qui les utilisent
Source principale : documentation du plugin Contact Form 7.
Dans functions.php du thème enfant, j’ai ajouté :
/* add-on for contact form 7 */ add_action( 'wp_enqueue_scripts', 'clea_child_add_on_contact_form_7' );
Puis j’ai créé la fonction suivante :
function clea_child_add_on_contact_form_7() {
// disable load js and load css for wpcf7
add_filter( 'wpcf7_load_js', '__return_false' );
add_filter( 'wpcf7_load_css', '__return_false' );
// enable cf7 js and css on specific pages
// wpcf7_enqueue_scripts() and wpcf7_enqueue_styles() must be called before wp_head()
// only on the contact form page
if ( is_page( 'contactez-nous' ) ){
if ( function_exists( 'wpcf7_enqueue_scripts' ) ) {
wpcf7_enqueue_scripts();
}
if ( function_exists( 'wpcf7_enqueue_styles' ) ) {
wpcf7_enqueue_styles();
}
}
}
Maintenant, le JavaScript et le CSS de contact form 7 ne sont chargés que sur la page « contactez-nous », la seule qui contienne un formulaire contact form 7 dans ce site.
Prise en charge du calendrier pour tous les navigateurs
Source d’inspiration : documentation, en anglais, de Contact Form 7 sur les « input » HTML5
Le problème
HTML5 n’est que partiellement supporté par les navigateurs internet, même les plus récents.
Contact Form 7 permet à l’internaute de choisir une date (par exemple si vous voulez utiliser le formulaire pour faire des demandes de rendez-vous). Mais cette fonctionnalité est parfaitement prise en charge dans Chrome Version 46.0.2490.80 m, mais pas dans FireFox, ni Safari, ni Internet Explorer ! L’internaute se retrouve bien embêté car il ne sait pas quel format de date est demandé et ne parvient pas à envoyer sa demande de rendez-vous s’il n’utilise pas le bon format de date !
Analyse du problème
Dans notre cas, la ligne HTML qui propose le champs date est la suivante :
<input type="date" name="date-108" value="" class="wpcf7-form-control wpcf7-date wpcf7-validates-as-date" aria-invalid="false" placeholder="jj/mm/AA">
HTML5 a introduit la notion de type= »date ». Si la valeur saisie n’est pas une chaine de caractère valide pour une date, le formulaire refuse la saisie de l’internaute. Pour faciliter la vie de l’internaute, il y a une interface utilisateur (UI) qui propose un calendrier pour choisir la date. C’est du code qui transforme la date choisie dans le calendrier en chaine de caractère valide. Mais quand le calendrier ne s’affiche pas, rien ne va plus !
Contact Form 7 propose un « fallback » en JQuery pour le champs date, si le navigateur ne supporte pas correctement ce champs. Ce « fallback » est désactivé par défaut car il provoque le chargement de scripts qui pourraient ralentir le chargement des pages.
La solution
Il faut qu’on ajoute la ligne suivante :
add_filter( 'wpcf7_support_html5_fallback', '__return_true' );
On va l’ajouter de la même manière que pour le problème précédent, uniquement sur la page qui contient un formulaire Contact Form 7.
Dans la fonction clea_child_add_on_contact_form_7(), j’ajoute donc cette ligne.
Et ça ne fonctionne pas (dans firefox au moins).
Je désactive le plugin puis je le réactive. Ca ne fonctionne pas non plus.
Je passe au plan B : installer l’extension « html5-fallback-wpcf7 » disponible ici sur GitHub. Je n’aime pas utiliser des extensions qui n’ont pas été validées par WordPress mais là c’est une extension simple (donc facile de vérifier le code) et en plus elle fonctionne sur FireFox !
