Comment afficher les formulaires WordPress sur votre site

Voulez-vous afficher vos formulaires WordPress sur l’interface publique de votre site ?

L’affichage des entrées de formulaires sur l’interface publique vous permet d’afficher des informations importantes à vos internautes. Vous pouvez l’utiliser pour afficher des avis positifs, créer des répertoires, afficher des calendriers d’évènements, et bien plus encore.

Dans cet article, nous allons vous afficher comment afficher les formulaires WordPress sur votre site.

Pourquoi afficher les formulaires WordPress sur l’interface publique ?

Les formulaires sont parfaits pour rester en contact avec vos internautes, obtenir des retours et des suggestions, aider les utilisateurs/utilisatrices à résoudre leurs problèmes, et plus encore. Afficher les entrées de formulaires sur votre site WordPress pour vos internautes peut être utile dans certaines situations.

Par exemple, vous pouvez afficher des témoignages et des avis sur les produits que les utilisateurs/utilisatrices envoient par le biais d’un formulaire en ligne. De cette façon, vous pouvez tirer parti de la preuve sociale pour renforcer la confiance dans la marque et stimuler les conversions.

Vous pouvez également afficher les entrées de formulaires pour créer un répertoire d’entreprises, afficher les évènements envoyés par les utilisateurs sur un calendrier, afficher des statistiques et afficher sur votre site d’autres informations importantes collectées par le biais de formulaires en ligne.

Cependant, par défaut, lorsque les utilisateurs/utilisatrices envoient un formulaire sur votre site WordPress, leurs entrées restent privées. Seuls l’administrateur de WordPress et les utilisateurs/utilisatrices ayant un droit peuvent voir les entrées du formulaire.

Voyons comment afficher les formulaires sur l’interface publique de votre site WordPress en utilisant Formidable Forms et WPForms. Vous pouvez cliquer sur les liens ci-dessous pour passer à la section de votre choix.

Tutoriel vidéo

Si vous préférez des instructions écrites, continuez à lire.

Afficher les entrées d’un formulaire WordPress en utilisant Formidable Forms

La façon la plus simple d’afficher les entrées de formulaires dans WordPress est d’utiliser Formidable Forms. C’est une extension populaire de formulaire de contact WordPress et offre un Constructeur de formulaires tout-en-un avec beaucoup de fonctionnalités pour la personnalisation.

Vous pouvez créer toutes sortes de formulaires tels que des enquêtes, des quiz, des formulaires de paiement, ainsi que des formulaires avancés tels que des calendriers d’évènements, des répertoires et des calculatrices.

Tout d’abord, vous devrez installer et activer l’extension Formidable Forms sur votre site. Si vous avez besoin d’aide, veuillez consulter notre guide sur l ‘installation d’une extension WordPress.

Pour ce tutoriel, nous utiliserons la version Formidable Forms Pro car elle inclut le module Visual Views.

Une fois activé, vous pouvez aller sur Formidable  » Formulaires et cliquer sur le bouton ‘+ Ajouter une nouvelle’ en haut.

Ensuite, une fenêtre surgissante vous demandera de sélectionner un type de formulaire, comme un formulaire de contact, un formulaire d’inscription des utilisateurs, une enquête, etc.

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

Vous devez ensuite saisir le nom et la description du formulaire.

Lorsque vous avez terminé, cliquez simplement sur le bouton « Créer ».

Vous pouvez maintenant utiliser le Constructeur de formulaires pour personnaliser votre formulaire.

Formidable offre un Constructeur drag-and-drop qui est super facile à utiliser. Il suffit de sélectionner n’importe quel champ de formulaire que vous souhaitez ajouter à votre formulaire à partir des options sur votre gauche et de les placer dans le modèle de formulaire.

Après avoir personnalisé le formulaire, vous pouvez l’embarquer n’importe où sur votre site.

L’extension offre de multiples options pour ajouter votre formulaire. Le plus simple est de cliquer sur le bouton  » Contenu embarqué  » dans le constructeur de formulaires en haut, puis de sélectionner une page existante ou de créer une nouvelle page pour ajouter votre formulaire.

Vous pouvez également utiliser un bloc Formidable Forms ou un bloc de codes courts dans l’éditeur de contenu de WordPress pour intégrer vos formulaires.

Ensuite, vous pouvez donner un nom à votre page et la prévisualiser.

Lorsque vous êtes satisfait de son Apparence, allez-y et publiez votre page.

Une fois que votre formulaire est en direct et que vous commencez à recevoir des entrées, vous devez installer et activer le module Visual Views dans Formidable Forms.

Pour ce faire, il vous suffit de vous rendre dans Formidable  » Modules complémentaires depuis votre tableau de bord WordPress. Ensuite, défilez vers le bas jusqu’au module  » Visual Views  » et cliquez sur le bouton  » Installer « .

Une fois le module activé, vous pouvez vous rendre dans Formidable  » Vues depuis votre tableau de bord WordPress.

Ensuite, il suffit de cliquer sur le bouton « + Ajouter une nouvelle » en haut de la page.

Ensuite, une fenêtre surgissante apparaîtra où vous devrez sélectionner un type de vue. L’extension propose une grille, un tableau, un calendrier et une vue classique que vous pouvez utiliser.

Pour ce tutoriel, nous utiliserons la vue « Grille » pour afficher les formulaires.

Ensuite, vous devrez sélectionner une source de données pour votre vue.

Cliquez sur le menu déroulant « Utiliser les sélections du formulaire » et sélectionnez votre formulaire. Vous avez également l’option de saisir un nom de vue.

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

Ceci lancera le Constructeur de vues dans Formidable Forms.

Pour Premiers pas, cliquez sur le bouton « Mise en page ».

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

Il suffit de choisir une mise en page parmi les options proposées en haut de page. 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 ».

Ensuite, vous pouvez ajouter du contenu au Constructeur de vues en cliquant sur le bouton « + ». Des options permettent de personnaliser la mise en page des entrées de formulaire et d’ajouter du contenu avant et après les entrées de formulaire.

L’extension offre également des options pour modifier la typographie, la couleur d’arrière-plan, la bordure et plus encore sous le panneau Réglages du style de la grille sur votre gauche.

Vous verrez également un code court sous le champ Nom de la vue, dont vous aurez besoin pour afficher les entrées de formulaires sur votre site.

Il existe des options plus avancées dans le panneau Réglages du style de grille. Dans les Réglages avancés, vous pouvez limiter le nombre d’entrées, la taille de la page, etc.

Lorsque vous avez personnalisé la vue, n’oubliez pas de cliquer sur le bouton « Mettre à jour » en haut de la page.

Ensuite, vous devez afficher les entrées de votre formulaire sur votre site WordPress. Pour ce faire, copiez le code court indiqué sous le Nom de l’expéditeur.

Le code court ressemblera à ceci :

[display-frm-data id=2410]

Après cela, rendez-vous dans n’importe quelle publication ou page où vous aimeriez afficher les entrées de formulaire. Une fois dans l’éditeur/éditrices de contenu, ajoutez simplement un bloc « Code court ».

Saisissez maintenant le code court que vous avez copié plus tôt dans le bloc de code court.

Vous pouvez ensuite prévisualiser la page et la publier.

Vous pouvez maintenant visiter votre site pour voir les formulaires en action.

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

Afficher les entrées d’un formulaire WordPress en utilisant WPForms

Une autre façon d’afficher les formulaires sur l’interface publique de votre site WordPress est d’utiliser WPForms. Cependant, cette méthode nécessite de modifier le code et est recommandée aux utilisateurs/utilisatrices avancés qui ont des connaissances en matière de codage.

WPForms est le meilleur plugin de formulaire de contact pour WordPress et vous permet de créer différents types de formulaires à l’aide d’un constructeur de formulaires glisser-déposer.

Note : si vous voulez voir les entrées de votre formulaire dans le Tableau de bord WordPress, vous aurez besoin de la version WPForms Pro. Il existe également une version WPForms Lite que vous pouvez utiliser gratuitement, qui envoie des notifications par e-mail de toutes les entrées de votre formulaire.

Tout d’abord, vous devrez installer et activer l’extension WPForms. Pour plus de détails, veuillez consulter notre guide sur l ‘installation d’une extension WordPress.

Ensuite, vous devrez créer un formulaire en ligne à l’aide de WPForms. Vous pouvez consulter notre guide étape par étape sur la création d’un formulaire de contact sur WordPress.

Lorsque vous commencerez à recevoir des formulaires, vous devrez saisir le code suivant dans le fichier functions.php de votre thème. Cette opération peut endommager votre site si vous faites la moindre erreur, c’est pourquoi nous vous recommandons d’utiliser WPCode.

Veuillez consulter notre guide sur la façon d’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 le code ajouté à votre site à l’aide de l’extension gratuite WPCode, vous devez saisir le code court suivant dans n’importe quelle page ou publication pour afficher les formulaires remplis.

[wpforms_entries_table id="FORMID"]

Remplacez simplement FORMID par l’ID de votre formulaire.

Vous pouvez trouver l’ID du formulaire en allant dans WPForms  » All Forms et en regardant la colonne Shortcode.

Pour ajouter un code court, il suffit de créer une nouvelle page ou de modifier une page existante.

Ensuite, ajoutez un bloc « Shortcode ».

Après avoir ajouté le bloc, saisissez simplement votre code court.

Prévisualisez votre page WordPress et cliquez sur le bouton « Publier » en haut de la page.

Voici à quoi ressemble la prévisualisation des entrées de notre formulaire sur l’interface publique :

Vous pouvez personnaliser davantage l’affichage à l’aide de styles CSS personnalisés si nécessaire.

Nous espérons que cet article vous a aidé à apprendre comment afficher les entrées de formulaires WordPress sur votre site. Vous pouvez également consulter notre guide sur la façon de créer un thème WordPress personnalisé, ou nos choix d’experts pour les meilleures extensions de formulaires de contact pour WordPress.

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.