Souhaitez-vous améliorer vos étiquettes de formulaire avec des infobulles interactives ou du contenu dynamique en utilisant des shortcodes ? Bien que WPForms ne supporte pas les shortcodes dans les étiquettes par défaut, vous pouvez facilement ajouter cette fonctionnalité en utilisant PHP.
Ce guide vous montrera comment afficher n'importe quel shortcode à l'intérieur des étiquettes des champs de votre formulaire.
Installation du plugin Shortcodes Ultimate (facultatif)
Si vous n'avez pas encore de plugin de shortcodes, vous pouvez installer Shortcodes Ultimate depuis le dépôt de plugins de WordPress. Cette étape est facultative si vous avez déjà un autre plugin de shortcodes ou si vous utilisez les shortcodes intégrés à votre thème.
Pour obtenir de l'aide sur l'installation des plugins, vous pouvez consulter le guide de WPBeginner sur l'installation d'un plugin.
Création du formulaire
Vous pouvez créer un nouveau formulaire ou modifier un formulaire existant. Si vous avez besoin d'aide pour créer un formulaire, veuillez consulter cette documentation.
Nous n'aurons pas besoin de l'étiquette pour le champ de formulaire Téléphone puisque nous allons utiliser le texte de l'infobulle comme étiquette, donc dans l'onglet Avancé du champ de formulaire, sélectionnez l'option Masquer l'étiquette et cliquez ensuite sur Enregistrer dans le formulaire.
Ajouter le code
Pour afficher des shortcodes dans les étiquettes de vos formulaires, vous devez ajouter un extrait de code à votre site. Si vous ne savez pas comment ajouter un code personnalisé, consultez notre guide sur l'ajout d'extraits de code.
Dans l'extrait de code ci-dessus, vous devrez modifier trois valeurs clés :
- A la ligne 10: Remplacer 1055 par l'ID de votre formulaire
- A la ligne 10: Remplacez 4 par l'identifiant de votre champ
- A la ligne 12: Remplacez le shortcode par le shortcode de votre choix
Lorsque vos visiteurs verront le formulaire et cliqueront sur l'infobulle, ils verront votre message.
FAQ
Q : Comment ajouter différents shortcodes pour différents formulaires et étiquettes ?
R : Si vous souhaitez réutiliser cet extrait pour d'autres formulaires utilisant des shortcodes différents, c'est tout à fait possible.
/**
* Run shortcodes on the form label field.
*
* @link https://wpforms.com/developers/how-to-display-shortcodes-inside-the-label-of-the-form-field/
*/
function add_shortcode_to_label( $field, $form_data ) {
// Check that the form ID is 1055 and the field id is 4 for the Phone field
if ( 1055 === absint( $form_data[ 'id' ] ) && 4 === absint( $field[ 'id' ] ) ) {
echo do_shortcode( ' [su_tooltip text="Your information is completely protected and will not be sold!<br><a href=“https://myexamplesite.com/privacy/“>Click here to learn more.</a>" behavior="click" hide_delay="500"]Click Me![/su_tooltip] ' );
}
// Check that the form ID is 1055 and the field id is 2 for the Name field
if ( 1055 === absint( $form_data[ 'id' ] ) && 2 === absint( $field[ 'id' ] ) ) {
echo do_shortcode( ' [su_tooltip text="I am a different tooltip for a different field on the same form." behavior="click" hide_delay="500"]Click Me Too![/su_tooltip] ' );
}
// Check that the form ID is 1072 and the field id is 6 for the Comments field
if ( 1072 === absint( $form_data[ 'id' ] ) && 6 === absint( $field[ 'id' ] ) ) {
echo do_shortcode( ' [su_tooltip text="I am a different tooltip for a different field on a completely different form." behavior="click" hide_delay="500"]Click Me Too![/su_tooltip] ' );
}
}
add_action( 'wpforms_display_field_before', 'add_shortcode_to_label', 16, 2 );
C'est tout ce dont vous avez besoin pour afficher n'importe quel shortcode à l'intérieur d'un champ de formulaire Label. Vous souhaitez afficher des shortcodes à l'intérieur du champ HTML? Jetez un coup d'œil à notre article sur Comment afficher des shortcodes dans le champ HTML.