Contact Form 7 est une des extensions de création de formulaires les plus populaires pour WordPress, mais ses options sont parfois assez limitées.

Pour améliorer l’accessibilité d’un formulaire, je souhaitais rajouter un attribut title sur un champ, comme préconisé par cette bonne pratique Opquast.

Or Contact Form 7 ne propose pas d’attribut title pour les champs, ni de moyen « propre » de rajouter ce comportement via un filter par exemple.

La solution qui m’a semblé la plus complète c’est de créer mon propre « shortcode » pour Contact Form 7 avec la syntaxe suivante, basée sur un id donné à l’élément que l’on souhaite compléter :

[attributes:<id de l'élément> <attributs à ajouter>]

En réalité ce n’est pas un shortcode qui va gérer cela, mais un simple rechercher-remplacer sur le formulaire généré par Contact Form 7, grâce au filter si dessous :

add_filter ( 'wpcf7_form_elements', function ( $form ) {
	preg_match_all ( '/\[attributes:[^]]*]/', $form, $matches );
	$l = strlen ( '[attributes:' );

	if ( !empty( $matches[ 0 ] ) ) {
		foreach ( $matches[ 0 ] as $match ) {
			$i          = strpos ( $match, ' ' );
			$id         = substr ( $match, $l, $i - $l );
			$attributes = substr ( $match, $i + 1, strlen ( $match ) - $i - 2 );

			$form = str_replace ( $match, '', $form );
			$form = str_replace ( 'id="' . $id . '"', 'id="' . $id . '" ' . $attributes, $form );
		}
	}

	return $form;
} );

Exemple d’utilisation

<div class="fields">
	<div class="field ctn-name">
		<label for="cf-name">Votre nom *</label> [text* lastname id:cf-name]
	</div>

	<div class="field ctn-email">
		<label for="cf-email">Votre email *</label> [email* email id:cf-email]
	</div>

	<div class="field ctn-message">
		[textarea message id:cf-message placeholder "Votre projet, votre question... "]
		[attributes:cf-message title="Votre message"]
	</div>

	<div class="field ctn-submit">
		[submit "Envoyer"]
	</div>
</div>

Les commentaires sont fermés.