Comment afficher les entrées de formulaire WordPress sur votre site (2 méthodes)

Vous collectez des soumissions de formulaires sur votre site WordPress mais ne les montrez jamais à vos visiteurs ? C'est une opportunité manquée.

Afficher des entrées comme des avis, des listes de membres ou des calendriers d'événements sur votre site leur donne un but. Ils peuvent aider les visiteurs à trouver des informations, à voir des retours réels, ou à découvrir des personnes et des événements dans votre communauté.

Chez WPBeginner, nous avons aidé de nombreux propriétaires de sites à rendre utiles leurs données de formulaire cachées. Après avoir testé de nombreuses approches, nous en avons trouvé 2 qui fonctionnent très bien.

Dans ce guide, nous vous montrerons comment afficher les entrées de formulaire WordPress sur votre site de 2 manières simples – que vous gériez un répertoire, une vitrine ou un site communautaire. 🙌

Pourquoi afficher les entrées de formulaire WordPress sur le front-end ?

Afficher les entrées de formulaire signifie prendre les données que vos visiteurs soumettent et les montrer sur les pages publiques de votre site WordPress. L'un des plus grands avantages est de créer une preuve sociale.

Par défaut, les soumissions de formulaires ne sont visibles que par les administrateurs.

Mais afficher des témoignages ou des avis de produits utilisant les retours réels des clients est un excellent moyen de renforcer la confiance. En fait, une étude a révélé que l'affichage des avis peut augmenter les taux de conversion jusqu'à 270%.

Vous pouvez également utiliser les entrées de formulaire pour créer d'autres ressources utiles pour vos visiteurs, comme des annuaires d'entreprises, des listes de membres, ou des événements soumis par les utilisateurs sur un calendrier.

Dans les sections suivantes, nous vous montrerons comment afficher les entrées de formulaire sur le front-end de votre site WordPress à l'aide de Formidable Forms et WPForms.

Voici un bref aperçu de tout ce que nous aborderons dans ce guide :

• Displaying WordPress Form Entries by Using Formidable Forms (Easy Way)
  • Étape 1 : Configurer Formidable Forms
  • Étape 2 : Créer un formulaire
  • Étape 3 : Publier le formulaire
  • Étape 4 : Activer les vues visuelles
  • Étape 5 : Afficher les entrées de formulaire sur le front-end
• Displaying WordPress Form Entries by Using WPForms (Advanced)
  • Étape 1 : Installer WPForms
  • Step 2: Create a Form and Display Its Entries
• Astuce bonus : Créer des formulaires conformes au RGPD
• Foire aux questions sur l'affichage des entrées de formulaire dans WordPress
• Tutoriel vidéo : Afficher les entrées de formulaire WordPress
• Ressources supplémentaires pour utiliser les formulaires WordPress

Commençons.

Méthode 1 : Afficher les soumissions de formulaires WordPress en utilisant Formidable Forms

La manière la plus simple d'afficher les soumissions de formulaires dans WordPress est d'utiliser Formidable Forms. C'est un plugin de formulaire de contact WordPress populaire et il offre un constructeur de formulaires tout-en-un avec de nombreuses fonctionnalités de personnalisation.

Vous pouvez créer toutes sortes de formulaires, en particulier des formulaires avancés comme des calendriers d'événements, des annuaires et des calculateurs.

Nous avons testé Formidable Forms en profondeur pour découvrir toutes ses fonctionnalités. Vous pouvez voir pourquoi nous le recommandons dans notre examen complet de Formidable Forms.

Étape 1 : Configurer Formidable Forms

Pour commencer, installons et activons le plugin Formidable Forms sur votre site. Pour ce tutoriel, nous utiliserons la version Formidable Forms Pro car elle inclut le module complémentaire ‘Visual Views’.

Si vous avez besoin d'aide, veuillez consulter notre guide sur comment installer un plugin WordPress.

Après l'activation, vous pouvez aller dans Formidable » Forms et cliquer sur le bouton ‘+ Add New’ en haut.

Étape 2 : Créer un formulaire

Après cela, une fenêtre contextuelle apparaîtra vous demandant de sélectionner un type de formulaire, tel qu'un formulaire de contact, un formulaire d'inscription d'utilisateur, une enquête ou autre.

Allez-y et sélectionnez votre type de formulaire préféré. Pour ce tutoriel, nous allons créer un formulaire de contact pour recueillir des témoignages d'utilisateurs.

Ensuite, vous devrez entrer un nom et une description pour le formulaire.

Lorsque vous avez terminé, cliquez simplement sur le bouton ‘Create’.

Maintenant, vous pouvez utiliser le constructeur de formulaires pour personnaliser votre formulaire.

Formidable propose un constructeur par glisser-déposer très facile à utiliser. Sélectionnez simplement n'importe quel champ de formulaire que vous souhaitez ajouter à votre formulaire parmi les options à gauche et placez-le dans le modèle de formulaire.

Étape 3 : Publier le formulaire

Après la personnalisation, vous pouvez intégrer le formulaire n'importe où sur votre site web.

Le plugin offre plusieurs options pour ajouter votre formulaire. La méthode la plus simple consiste à cliquer sur le bouton « Intégrer » dans le constructeur de formulaire en haut, puis à sélectionner une page existante ou à en créer une nouvelle pour y ajouter votre formulaire.

Alternativement, vous pouvez utiliser un bloc « Formidable Forms » ou un bloc de shortcode dans l'éditeur de contenu WordPress pour intégrer vos formulaires.

Pour ce tutoriel, nous choisirons l'option « Créer une nouvelle page ».

Une fois dans l'éditeur de contenu, vous verrez que vous avez créé une page dédiée à votre formulaire Formidable Forms.

Avant de la publier, vous voudrez peut-être la prévisualiser en cliquant sur le bouton « Aperçu ».

Lorsque vous êtes satisfait de son apparence, publiez votre page.

Étape 4 : Activer les vues visuelles

Une fois votre formulaire en ligne et que vous commencez à recevoir des soumissions, vous voudrez installer et activer le module complémentaire « Visual Views » dans Formidable Forms.

Pour ce faire, allez simplement dans Formidable » Add-Ons depuis votre zone d'administration WordPress. Ensuite, vous pouvez faire défiler jusqu'à l'extension « Vues visuelles » et cliquer sur le bouton « Installer ».

Une fois l'extension active, vous pouvez aller à la page Formidable » Vues.

Ensuite, cliquez sur le bouton « + Ajouter nouveau » en haut.

Une fenêtre contextuelle apparaîtra. Ici, vous devrez sélectionner un type de vue, tel que grille, tableau, calendrier ou vue classique.

Pour ce tutoriel, nous choisirons la vue « Grille » pour afficher les soumissions du formulaire.

L'étape suivante consiste à sélectionner une source de données pour votre vue.

Cliquez sur le menu déroulant « Utiliser les soumissions du formulaire » pour sélectionner votre formulaire. Vous pouvez également saisir un nom de vue.

Après avoir sélectionné votre source de données, cliquez simplement sur le bouton « Créer une vue ».

Cela lancera le constructeur de vues dans Formidable Forms.

Pour commencer, cliquez sur le bouton « Constructeur de mise en page ».

Ensuite, vous devrez sélectionner une mise en page pour afficher les entrées de votre formulaire.

Choisissez simplement une mise en page parmi les options proposées en haut. Vous pouvez ajouter plusieurs mises en page pour afficher les entrées du formulaire.

Après avoir sélectionné une mise en page, cliquez sur le bouton « Enregistrer la mise en page ».

Vous pouvez ensuite ajouter du contenu au constructeur de vues en cliquant sur le bouton « + ».

Le plugin offre également des options pour modifier la typographie, la couleur d'arrière-plan, les bordures, et plus encore sous le panneau « Paramètres de style de grille » sur votre gauche.

Vous verrez également un shortcode sous le champ « Nom de la vue », dont vous aurez besoin pour afficher les entrées du formulaire sur votre site.

Il existe des options plus avancées dans le panneau « Paramètres de style de grille ». Dans les paramètres avancés, vous pouvez limiter le nombre d'entrées, la taille de la page, et plus encore.

Une fois que vous avez personnalisé la vue, n'oubliez pas de cliquer sur le bouton « Mettre à jour » en haut.

Étape 5 : Afficher les entrées de formulaire sur le front-end

Ensuite, vous devrez afficher les entrées de votre formulaire sur votre site Web WordPress. Pour ce faire, copiez le shortcode indiqué sous le « Nom de la vue ».

Le shortcode ressemblera à ceci :

[display-frm-data id=2410]

Une fois que vous avez copié le shortcode dans le presse-papiers, vous pouvez aller sur n’importe quel article ou page où vous souhaitez afficher les entrées du formulaire.

Dans l'éditeur de contenu, ajoutez simplement un bloc « Shortcode ».

Maintenant, ajoutez le shortcode que vous avez copié précédemment dans le bloc shortcode.

Après cela, vous voudrez peut-être prévisualiser la page avant de la publier.

Vous pouvez maintenant visiter votre site Web pour voir les entrées de formulaire en action.

Voici à quoi elles ressemblent sur notre site Web de démonstration :

Méthode 2 : Afficher les entrées de formulaire WordPress à l'aide de WPForms

Vous pouvez également afficher les entrées de formulaire en utilisant WPForms, l'un des meilleurs plugins de formulaire de contact WordPress. Cette méthode est plus avancée car elle nécessite l'ajout d'un extrait de code PHP à votre site.

Pour ce faire, vous aurez besoin de WPForms Pro, qui stocke toutes les entrées de formulaire dans votre base de données WordPress. La version gratuite WPForms Lite envoie uniquement les entrées par e-mail et ne les enregistre pas, elle ne fonctionnera donc pas pour cette méthode.

Chez WPBeginner, nous utilisons WPForms pour créer divers formulaires, tels que des formulaires de contact et des enquêtes annuelles auprès des utilisateurs. Obtenez plus d'informations à ce sujet dans notre examen détaillé de WPForms.

Étape 1 : Installer WPForms

Tout d'abord, inscrivons-nous à un compte WPForms.

Vous pouvez simplement cliquer sur le bouton « Obtenir WPForms maintenant » sur leur site Web pour acheter un plan et créer votre compte.

Une fois cela fait, copiez votre clé de licence.

Maintenant, configurons le plugin.

Pour ce faire, vous devrez installer la version gratuite du plugin WPForms depuis le répertoire WordPress, qui fournit le cadre de base. Ensuite, vous saisirez votre clé de licence pour débloquer toutes les fonctionnalités Pro.

Pour commencer, vous pouvez aller dans Plugins » Ajouter un nouveau plugin depuis votre zone d'administration WordPress.

Ensuite, utilisez la fonction de recherche pour trouver rapidement le plugin WPForms.

Dans le résultat de recherche pertinent, cliquez sur « Installer maintenant » et « Activer ». Pour plus de détails, veuillez consulter notre guide sur comment installer un plugin WordPress.

Étape 2 : Créez un formulaire et affichez ses entrées

Après l'activation, vous pouvez commencer à créer un formulaire en ligne à l'aide de WPForms. Vous pouvez consulter notre guide étape par étape sur comment créer un formulaire de contact dans WordPress.

Une fois que vous commencez à recevoir des entrées de formulaire, vous devrez entrer le code suivant dans le fichier functions.php de votre thème.

Mais notez que cela peut casser votre site web si vous faites même une petite erreur.

C'est pourquoi nous recommandons toujours d'utiliser WPCode, le meilleur plugin d'extraits de code pour WordPress.

Certaines de nos marques partenaires utilisent ce plugin car c'est le moyen le plus sûr et le plus simple d'ajouter des extraits de code personnalisés à WordPress sans risquer de casser le site. Pour un aperçu plus approfondi de la plateforme, consultez notre avis sur WPCode.

Ne vous inquiétez pas, vous n'avez pas besoin de comprendre ce que fait le code ci-dessous.

Il vous suffit de le copier. Ensuite, pour saisir le code, veuillez consulter notre guide sur comment ajouter facilement du code personnalisé dans WordPress pour plus d'informations.

/**
 * Custom shortcode to display WPForms form entries in table view.
 *
 * Basic usage: [wpforms_entries_table id="FORMID"].
 * 
 * Possible shortcode attributes:
 * id (required)  Form ID of which to show entries.
 * user           User ID, or "current" to default to current logged in user.
 * fields         Comma separated list of form field IDs.
 * number         Number of entries to show, defaults to 30.
 * 
 * @link https://wpforms.com/developers/how-to-display-form-entries/
 *
 * Realtime counts could be delayed due to any caching setup on the site
 *
 * @param array $atts Shortcode attributes.
 * 
 * @return string
 */
 
function wpf_entries_table( $atts ) {
 
    // Pull ID shortcode attributes.
    $atts = shortcode_atts(
        [
            'id'     => '',
            'user'   => '',
            'fields' => '',
            'number' => '',
                        'type' => 'all' // all, unread, read, or starred.
        ],
        $atts
    );
 
    // Check for an ID attribute (required) and that WPForms is in fact
    // installed and activated.
    if ( empty( $atts['id'] ) || ! function_exists( 'wpforms' ) ) {
        return;
    }
 
    // Get the form, from the ID provided in the shortcode.
    $form = wpforms()->form->get( absint( $atts['id'] ) );
 
    // If the form doesn't exists, abort.
    if ( empty( $form ) ) {
        return;
    }
 
    // Pull and format the form data out of the form object.
    $form_data = ! empty( $form->post_content ) ? wpforms_decode( $form->post_content ) : '';
 
    // Check to see if we are showing all allowed fields, or only specific ones.
    $form_field_ids = isset( $atts['fields'] ) && $atts['fields'] !== '' ? explode( ',', str_replace( ' ', '', $atts['fields'] ) ) : [];
 
    // Setup the form fields.
    if ( empty( $form_field_ids ) ) {
        $form_fields = $form_data['fields'];
    } else {
        $form_fields = [];
        foreach ( $form_field_ids as $field_id ) {
            if ( isset( $form_data['fields'][ $field_id ] ) ) {
                $form_fields[ $field_id ] = $form_data['fields'][ $field_id ];
            }
        }
    }
 
    if ( empty( $form_fields ) ) {
        return;
    }
 
    // Here we define what the types of form fields we do NOT want to include,
    // instead they should be ignored entirely.
    $form_fields_disallow = apply_filters( 'wpforms_frontend_entries_table_disallow', [ 'divider', 'html', 'pagebreak', 'captcha' ] );
 
    // Loop through all form fields and remove any field types not allowed.
    foreach ( $form_fields as $field_id => $form_field ) {
        if ( in_array( $form_field['type'], $form_fields_disallow, true ) ) {
            unset( $form_fields[ $field_id ] );
        }
    }
 
    $entries_args = [
        'form_id' => absint( $atts['id'] ),
    ];
 
    // Narrow entries by user if user_id shortcode attribute was used.
    if ( ! empty( $atts['user'] ) ) {
        if ( $atts['user'] === 'current' && is_user_logged_in() ) {
            $entries_args['user_id'] = get_current_user_id();
        } else {
            $entries_args['user_id'] = absint( $atts['user'] );
        }
    }
 
    // Number of entries to show. If empty, defaults to 30.
    if ( ! empty( $atts['number'] ) ) {
        $entries_args['number'] = absint( $atts['number'] );
    }
 
// Filter the type of entries all, unread, read, or starred
    if ( $atts['type'] === 'unread' ) {
        $entries_args['viewed'] = '0';
    } elseif( $atts['type'] === 'read' ) {
        $entries_args['viewed'] = '1';
    } elseif ( $atts['type'] === 'starred' ) {
        $entries_args['starred'] = '1';
    }
 
    // Get all entries for the form, according to arguments defined.
    // There are many options available to query entries. To see more, check out
    // the get_entries() function inside class-entry.php (https://a.cl.ly/bLuGnkGx).
    $entries = wpforms()->entry->get_entries( $entries_args );
 
    if ( empty( $entries ) ) {
        return '<p>No entries found.</p>';
    }
 
    ob_start();
 
    echo '<table class="wpforms-frontend-entries">';
 
        echo '<thead><tr>';
 
            // Loop through the form data so we can output form field names in
            // the table header.
            foreach ( $form_fields as $form_field ) {
 
                // Output the form field name/label.
                echo '<th>';
                    echo esc_html( sanitize_text_field( $form_field['label'] ) );
                echo '</th>';
            }
 
        echo '</tr></thead>';
 
        echo '<tbody>';
 
            // Now, loop through all the form entries.
            foreach ( $entries as $entry ) {
 
                echo '<tr>';
 
                // Entry field values are in JSON, so we need to decode.
                $entry_fields = json_decode( $entry->fields, true );
 
                foreach ( $form_fields as $form_field ) {
 
                    echo '<td>';
 
                        foreach ( $entry_fields as $entry_field ) {
                            if ( absint( $entry_field['id'] ) === absint( $form_field['id'] ) ) {
                                echo apply_filters( 'wpforms_html_field_value', wp_strip_all_tags( $entry_field['value'] ), $entry_field, $form_data, 'entry-frontend-table' );
                                break;
                            }
                        }
 
                    echo '</td>';
                }
 
                echo '</tr>';
            }
 
        echo '</tbody>';
 
    echo '</table>';
 
    $output = ob_get_clean();
 
    return $output;
}
add_shortcode( 'wpforms_entries_table', 'wpf_entries_table' );

Une fois que vous avez ajouté le code à votre site Web en utilisant le plugin gratuit WPCode, vous êtes prêt à afficher les entrées de votre formulaire. Vous le ferez à l'aide d'un shortcode que vous pouvez placer sur n'importe quelle page ou publication.

Le shortcode de base ressemble à ceci :

[wpforms_entries_table id="FORMID"]

N'oubliez pas de remplacer FORMID par l'ID de votre formulaire réel.

Vous pouvez trouver l'ID du formulaire en allant dans WPForms » Tous les formulaires et en regardant la colonne Shortcode.

Personnalisation de l'affichage des entrées WPForms (Alternative)

Vous pouvez également personnaliser ce shortcode pour modifier les champs affichés et le nombre d'entrées présentées. C'est très utile pour créer des affichages clairs et ciblés.

Voici quelques options utiles :

• Afficher des champs spécifiques : Pour n'afficher que certaines colonnes, ajoutez un attribut fields avec les identifiants de champ de votre formulaire. Par exemple, pour n'afficher que les champs avec les identifiants 1 et 3, vous utiliseriez :
  [wpforms_entries_table id="123" fields="1,3"]
• Limiter le nombre d'entrées : Pour n'afficher que les 5 entrées les plus récentes, ajoutez l'attribut number : [wpforms_entries_table id="123" number="5"]

Vous pouvez trouver l'« identifiant de champ » de n'importe quel champ en ouvrant votre formulaire WordPress dans le constructeur WPForms et en cliquant sur ce champ. L'identifiant est affiché en haut du panneau des paramètres à gauche.

Étape 3 : Ajouter le shortcode à votre page

Pour ajouter un shortcode, créez simplement une nouvelle page ou modifiez-en une existante.

Ensuite, ajoutez un bloc « Shortcode ».

Ensuite, il vous suffit d'ajouter votre shortcode au bloc.

Une fois cela fait, vous pouvez prévisualiser votre page WordPress et cliquer sur le bouton « Publier » en haut.

Et c'est tout !

Voici à quoi ressemblait la prévisualisation des entrées de notre formulaire sur le front-end :

Vous pouvez personnaliser davantage l'affichage en utilisant des styles CSS personnalisés selon vos besoins.

Astuce bonus : Créer des formulaires conformes au RGPD

Le Règlement Général sur la Protection des Données (RGPD) est une loi de l'Union européenne qui donne aux individus plus de contrôle sur leurs données personnelles. Si votre site web collecte des informations auprès des utilisateurs, notamment via des formulaires, il est important de suivre ces règles.

Pour rendre vos formulaires conformes au RGPD, vous devriez :

1. Obtenir un consentement explicite : Demandez aux utilisateurs s'ils acceptent que vous stockiez et utilisiez leurs informations personnelles.
2. Traiter les demandes d'accès : Permettez aux utilisateurs de voir les informations personnelles que vous détenez à leur sujet.
3. Traiter les demandes de suppression : Permettez aux utilisateurs de demander la suppression de leurs données de votre site.

Pour plus de détails, vous pouvez consulter notre guide sur comment créer des formulaires conformes au RGPD dans WordPress. Il répondra à toutes vos questions dans un langage facile à comprendre.

Foire aux questions sur l'affichage des entrées de formulaire dans WordPress

Puis-je afficher les entrées de formulaire sans plugin ?

Oui, mais c'est très technique. Vous devriez écrire du code PHP et SQL personnalisé pour interroger votre base de données WordPress et afficher les résultats. L'utilisation d'un plugin comme Formidable Forms ou de la méthode de snippet de code WPForms est beaucoup plus facile et plus sûre pour la plupart des utilisateurs.

Est-il sûr d'afficher les données soumises par les utilisateurs sur mon site ?

Cela peut être le cas, mais vous devez être prudent. Obtenez toujours le consentement explicite des utilisateurs avant de rendre leurs données publiques.

De plus, il est très important de modérer les soumissions avant qu'elles n'apparaissent sur votre site. Vous devriez examiner chaque entrée pour empêcher la publication de contenu inapproprié.

Règle générale : N'affichez jamais publiquement d'informations personnelles sensibles comme les noms complets, les adresses e-mail, les numéros de téléphone ou les adresses de domicile sans permission explicite, au cas par cas.

Comment puis-je styliser l'apparence des entrées de mon formulaire ?

Les deux méthodes de ce guide vous permettent de styliser les entrées. Le module complémentaire Visual Views de Formidable Forms dispose de paramètres intégrés pour les couleurs, les polices et la mise en page. La méthode de tableau de WPForms produit un tableau HTML de base que vous pouvez styliser avec du CSS personnalisé pour correspondre à votre thème.

Tutoriel vidéo : Afficher les entrées de formulaire WordPress

🎬 Voyez-le en action ! Regardez notre tutoriel vidéo pour afficher les entrées de formulaire WordPress sur votre site :

Ressources supplémentaires pour utiliser les formulaires WordPress

Nous espérons que cet article vous a aidé à apprendre comment afficher les entrées de formulaire WordPress sur votre site.

Ensuite, vous voudrez peut-être consulter nos autres guides utiles sur :

• Comment créer un formulaire de commande en ligne
• Comment ajouter un champ de code de réduction à vos formulaires WordPress
• Comment ajouter l'autocomplétion pour les champs d'adresse dans WordPress
• Façons d'utiliser la logique conditionnelle dans les formulaires WordPress
• Comment j'ai bloqué 18 000 attaques de prospects spam dans mon formulaire WordPress
• Guide ultime sur l'utilisation des formulaires WordPress

Si cet article vous a plu, abonnez-vous à notre chaîne YouTube pour des tutoriels vidéo WordPress. Vous pouvez également nous retrouver sur Twitter et Facebook.