Affichage des shortcodes à l'intérieur des étiquettes de champs de formulaire

Souhaitez-vous améliorer les étiquettes de vos formulaires avec des info-bulles interactives ou du contenu dynamique à l'aide de shortcodes ? Bien que WPForms ne prenne pas en charge les shortcodes dans les étiquettes par défaut, vous pouvez facilement ajouter cette fonctionnalité à l'aide de PHP.

Ce guide vous montrera comment afficher n'importe quel shortcode à l'intérieur des étiquettes de vos champs de formulaire.

Installation du plugin Shortcodes Ultimate (facultatif)

Si vous n'avez pas encore de plugin de shortcodes, vous pouvez installer Shortcodes Ultimate depuis le répertoire des plugins WordPress. Cette étape est facultative si vous avez déjà un autre plugin de shortcodes ou si vous utilisez les shortcodes intégrés de votre thème.

Pour obtenir de l'aide sur l'installation de plugins, vous pouvez consulter le guide de WPBeginner sur la façon d'installer un plugin.

Création de votre formulaire

Vous pouvez créer un nouveau formulaire ou modifier un formulaire existant. Pour toute aide sur la création d'un formulaire, veuillez consulter cette documentation.

Nous n'aurons pas besoin de l'étiquette pour le champ de formulaire Téléphone car nous allons utiliser le texte de l'info-bulle comme étiquette. Par conséquent, dans l'onglet Avancé du champ de formulaire, sélectionnez l'option Masquer l'étiquette, puis cliquez sur Enregistrer sur le formulaire.

Ajout du code

Pour afficher des shortcodes dans les étiquettes de vos formulaires, vous devrez ajouter un extrait de code à votre site. Si vous ne savez pas comment ajouter du code personnalisé, veuillez consulter notre guide sur l'ajout d'extraits de code.

Dans l'extrait de code ci-dessus, vous devrez modifier trois valeurs clés :

• À la ligne 10 : Remplacez 1055 par l'ID de votre formulaire
• À la ligne 10 : Remplacez 4 par l'ID de votre champ
• À la ligne 12 : Remplacez le shortcode par le shortcode souhaité

Lorsque vos visiteurs verront maintenant le formulaire et cliqueront sur l'info-bulle, 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 différents shortcodes, vous le pourriez certainement.

/**
 * 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=&ldquo;https://myexamplesite.com/privacy/&ldquo;>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 );

Et c'est tout ce dont vous avez besoin pour afficher n'importe quel shortcode dans une étiquette de formulaire HTML. Souhaitez-vous afficher des shortcodes dans le champ HTML ? Consultez notre article sur Comment afficher des shortcodes dans le champ HTML.

Action de référence

wpforms_display_field_before