4 astuces pour optimiser vos formulaires Gravity Forms

Gravity Forms est une excellente extension de création de formulaires pour WordPress. Elle dispose de nombreux hooks afin de la personnaliser dans ses moindres détails.

Au préalable, activez le code HTML5 en allant dans Formulaires puis Réglages. Cochez Utiliser le code HTML5 puis faites Enregistrer les réglages.

Les astuces présentées ci-dessous peuvent être injectées dans le fichier functions.php de votre thème ou dans une extension de type mu-plugin.

1 – Charger les scripts dans le pied de page

/* JS in Footer */
add_filter('gform_init_scripts_footer', '__return_true');

function wpc_gform_cdata_open($content = '') {
	$content = 'document.addEventListener("DOMContentLoaded", function() { ';
	return $content;
}
add_filter('gform_cdata_open', 'wpc_gform_cdata_open');

function wpc_gform_cdata_close($content = '') {
	$content = ' }, false);';
	return $content;
}
add_filter('gform_cdata_close', 'wpc_gform_cdata_close');

Cette astuce méconnue vise à optimiser vos temps de chargement. C’est la solution ultime mise en oeuvre sur ce site en combinaison via WP Rocket avec des réglages optimaux. Une fois ce bout de code en place, tous les fichiers JavaScript y compris le JavaScript en ligne chargeront dans le pied de page après jQuery.

2 – Utiliser un button pour le bouton d’envoi

/* Change Submit Button */
function wpc_gf_input_to_button($button, $form) {
	$dom = new DOMDocument();
	$dom->loadHTML($button);
	$input = $dom->getElementsByTagName('input')->item(0);
	$new_button = $dom->createElement('button');
	$new_button->appendChild($dom->createTextNode($input->getAttribute('value')));
	$input->removeAttribute('value');
	foreach($input->attributes as $attribute) {
		$new_button->setAttribute($attribute->name, $attribute->value);
	}
	$input->parentNode->replaceChild($new_button, $input);
	return $dom->saveHtml($new_button);
}
add_filter('gform_next_button', 'wpc_gf_input_to_button', 10, 2);
add_filter('gform_previous_button', 'wpc_gf_input_to_button', 10, 2);
add_filter('gform_submit_button', 'wpc_gf_input_to_button', 10, 2);

Le bouton d’envoi utilise un input classique de formulaire. Ce bout de code le transforme en button selon la norme HTML5. Notez le recours à 3 hooks pour prendre en compte les boutons précédent et suivant sur les formulaires en plusieurs pages.

3 – Ajouter les classes CSS de Bootstrap 4

/* Add Bootstrap 4 Classes on Submit Button */
function wpc_gf_custom_css_classes($button, $form) {
	$dom = new DOMDocument();
	$dom->loadHTML($button);
	$input = $dom->getElementsByTagName('button')->item(0);
	$classes = $input->getAttribute('class');
	$classes .= " btn btn-primary text-uppercase";
	$input->setAttribute('class', $classes);
	return $dom->saveHtml($input);
}
add_filter('gform_submit_button', 'wpc_gf_custom_css_classes', 10, 2);


/* Add Bootstrap 4 Classes on Fields */
function wpc_gf_bs4($content, $field, $value, $lead_id, $form_id) {
	if ($field["type"] != 'hidden' && $field["type"] != 'list' && $field["type"] != 'checkbox' && $field["type"] != 'html' && $field["type"] != 'address') {
		$content = str_replace('class=\'medium', 'class=\'form-control medium', $content);
		$content = str_replace('class=\'large', 'class=\'form-control large', $content);
	}
	if ($field["type"] == 'name' || $field["type"] == 'address') {
		$content = str_replace('<input ', '<input class=\'form-control\' ', $content);
	}
	if ($field["type"] == 'textarea') {
		$content = str_replace('class=\'textarea', 'class=\'form-control textarea', $content);
	}
	if ($field["type"] == 'consent') {
		$content = str_replace('<input ', '<input class=\'custom-control-input\' ', $content);
		$content = str_replace('gfield_consent_label', 'gfield_consent_label custom-control-label', $content);
	}
	return $content;
	}
add_filter('gform_field_content', 'wpc_gf_bs4', 10, 5);

Bootstrap 4 est le framework CSS le plus populaire au monde pour le développement de sites Web. C’est celui que nous utilisons pour le développement de thèmes sur-mesure pour l’ensemble de nos projets clients.

Une des étapes va consister à décliner les classes CSS de Bootstrap sur nos formulaires conçus à partir de Gravity Forms. Là encore, les hooks disponibles répondent à ce type de besoin. Pour cette astuce, je vous conseille de désactiver les CSS injectés par Gravity Forms à partir des réglages de l’extension. Cette astuce est idéale pour gagner de précieuses millisecondes en allégeant votre poids de page.

Dans notre exemple, nous ajoutons les classes btn btn-primary text-uppercase sur le bouton de soumission du formulaire et les classes form-control sur les champs de formulaire. C’est ainsi que nous obtenons une case à cocher respectant notre charte graphique.

4 – Afficher les messages d’erreurs comme des alertes Bootstrap 4

/* Add Bootstrap 4 Validation Message */
function wpc_gf_validation($message, $form) {
	return "<div class='validation_error alert alert-danger'>" . esc_html__('There was a problem with your submission.', 'gravityforms') . ' ' . esc_html__('Errors have been highlighted below.', 'gravityforms') . '</div>';
}
add_filter('gform_validation_message', 'wpc_gf_validation', 10, 2);

La gestion des erreurs dans un formulaire est un élément fondamental dans l’expérience utilisateur. Les messages doivent être clairs et accessibles.

Par défaut, les styles visuels obtenus en cas d’erreur ne sont pas des plus attractifs. Une fois de plus, il est possible d’utiliser le composant relatif aux alertes de Bootstrap 4 et de l’appliquer sur notre formulaire. Faites donc le test sur notre formulaire de contact en validant sans saisir de données.

Code final

Voici l’ensemble des astuces regroupées dans un fichier de type mu-plugin. Ce fichier est à téléverser dans /wp-content/mu-plugins/ de votre installation WordPress.

<?php if (!defined('ABSPATH')) die('Restricted Area');


/*
* Plugin Name: Gravity Forms Enhancements
* Description: Tweaks for Gravity Forms plugin.
* Version: 20191102
* Author: Aurélien Denis
* Author URI: https://wpchannel.com/
*/


/* Check if Gravity Forms is available */
include_once(ABSPATH . 'wp-admin/includes/plugin.php');
if (is_plugin_active('gravityforms/gravityforms.php')) {

	/* JS in Footer */
	add_filter('gform_init_scripts_footer', '__return_true');
	
	function wpc_gform_cdata_open($content = '') {
		$content = 'document.addEventListener("DOMContentLoaded", function() { ';
		return $content;
	}
	add_filter('gform_cdata_open', 'wpc_gform_cdata_open');
	
	function wpc_gform_cdata_close($content = '') {
		$content = ' }, false);';
		return $content;
	}
	add_filter('gform_cdata_close', 'wpc_gform_cdata_close');


	/* Change Submit Button */
	function wpc_gf_input_to_button($button, $form) {
		$dom = new DOMDocument();
		$dom->loadHTML($button);
		$input = $dom->getElementsByTagName('input')->item(0);
		$new_button = $dom->createElement('button');
		$new_button->appendChild($dom->createTextNode($input->getAttribute('value')));
		$input->removeAttribute('value');
		foreach($input->attributes as $attribute) {
			$new_button->setAttribute($attribute->name, $attribute->value);
		}
		$input->parentNode->replaceChild($new_button, $input);
		return $dom->saveHtml($new_button);
	}
	add_filter('gform_next_button', 'wpc_gf_input_to_button', 10, 2);
	add_filter('gform_previous_button', 'wpc_gf_input_to_button', 10, 2);
	add_filter('gform_submit_button', 'wpc_gf_input_to_button', 10, 2);


	/* Add Bootstrap 4 Classes on Submit Button */
	function wpc_gf_custom_css_classes($button, $form) {
		$dom = new DOMDocument();
		$dom->loadHTML($button);
		$input = $dom->getElementsByTagName('button')->item(0);
		$classes = $input->getAttribute('class');
		$classes .= " btn btn-primary text-uppercase";
		$input->setAttribute('class', $classes);
		return $dom->saveHtml($input);
	}
	add_filter('gform_submit_button', 'wpc_gf_custom_css_classes', 10, 2);
	
	
	/* Add Bootstrap 4 Classes on Fields */
	function wpc_gf_bs4($content, $field, $value, $lead_id, $form_id) {
		if ($field["type"] != 'hidden' && $field["type"] != 'list' && $field["type"] != 'checkbox' && $field["type"] != 'html' && $field["type"] != 'address') {
			$content = str_replace('class=\'medium', 'class=\'form-control medium', $content);
			$content = str_replace('class=\'large', 'class=\'form-control large', $content);
		}
		if ($field["type"] == 'name' || $field["type"] == 'address') {
			$content = str_replace('<input ', '<input class=\'form-control\' ', $content);
		}
		if ($field["type"] == 'textarea') {
			$content = str_replace('class=\'textarea', 'class=\'form-control textarea', $content);
		}
		if ($field["type"] == 'consent') {
			$content = str_replace('<input ', '<input class=\'custom-control-input\' ', $content);
			$content = str_replace('gfield_consent_label', 'gfield_consent_label custom-control-label', $content);
		}
		return $content;
	}
	add_filter('gform_field_content', 'wpc_gf_bs4', 10, 5);
	

	/* Add Bootstrap 4 Validation Message */
	function wpc_gf_validation($message, $form) {
		return "<div class='validation_error alert alert-danger'>" . esc_html__('There was a problem with your submission.', 'gravityforms') . ' ' . esc_html__('Errors have been highlighted below.', 'gravityforms') . '</div>';
	}
	add_filter('gform_validation_message', 'wpc_gf_validation', 10, 2);
}

Gravity Forms c’est bien plus qu’une simple extension pour créer des formulaires de contact. Nous l’utilisons pour générer de la prise de rendez-vous sur des plages de dates dynamiquement injectées, de la personnalisation de produits WooCommerce ou encore de la création de compte utilisateur. Les possibilités sont infinies et la documentation technique de qualité.

Par Aurélien Denis

Consultant & Développeur WordPress / WooCommerce. Un site à créer, à maintenir ou à débuguer ? Contactez-moi.

Des tutoriels et des bons plans en exclusivité !
  • Ce champ n’est utilisé qu’à des fins de validation et devrait rester inchangé.
Laisser un commentaire