Come visualizzare le voci dei moduli di WordPress sul vostro sito

Volete mostrare le voci del vostro modulo WordPress sul front-end del vostro sito?

La visualizzazione delle voci dei moduli sul front-end consente di mostrare informazioni importanti ai visitatori. È possibile utilizzarlo per mostrare recensioni positive, creare elenchi, visualizzare calendari di eventi e altro ancora.

In questo articolo vi mostreremo come visualizzare le voci dei moduli di WordPress sul vostro sito.

Perché visualizzare gli inserimenti dei moduli di WordPress nel frontend?

I moduli sono ottimi per tenersi in contatto con i visitatori, ottenere feedback e suggerimenti, aiutare gli utenti a risolvere i loro problemi e altro ancora. La visualizzazione delle voci dei moduli sul vostro sito WordPress per i vostri visitatori può essere utile in alcune situazioni.

Ad esempio, è possibile visualizzare testimonianze e recensioni di prodotti inviate dagli utenti tramite un modulo online. In questo modo, potete sfruttare la riprova sociale per costruire la fiducia nel marchio e aumentare le conversioni.

È inoltre possibile visualizzare le voci dei moduli per creare una directory aziendale, visualizzare gli eventi inviati dagli utenti su un calendario, visualizzare le statistiche e mostrare altre informazioni importanti raccolte attraverso i moduli online sul sito web. È un ottimo modo per fornire una prova sociale preziosa per i vostri prodotti e servizi, aggiungendo credibilità alla vostra azienda.

Tuttavia, per impostazione predefinita, quando gli utenti inviano un modulo sul vostro sito web WordPress, le loro voci vengono mantenute private. Solo l’amministratore di WordPress e gli altri utenti autorizzati possono visualizzare le voci del modulo.

Vediamo come mostrare le voci dei moduli sul front-end del vostro sito WordPress utilizzando Formidable Forms e WPForms. Potete cliccare sui link sottostanti per passare alla sezione che preferite.

Video tutorial

Se preferite le istruzioni scritte, continuate a leggere.

Visualizzazione delle voci dei moduli di WordPress tramite Formidable Forms

Il modo più semplice per mostrare le voci dei moduli in WordPress è utilizzare Formidable Forms. È un popolare plugin per i moduli di contatto di WordPress e offre un builder di moduli tutto-in-uno con molte caratteristiche personalizzate.

È possibile creare tutti i tipi di moduli, come sondaggi, quiz, moduli di pagamento e moduli avanzati come calendari di eventi, elenchi e calcolatori.

Per prima cosa, dovrete installare e attivare il plugin Formidable Forms sul vostro sito. Se avete bisogno di aiuto, consultate la nostra guida su come installare un plugin di WordPress.

Per questo tutorial, utilizzeremo la versione Formidable Forms Pro, che include l’addon Visual Views.

Dopo l’attivazione, è possibile andare su Formidable ” Moduli e fare clic sul pulsante ‘+ Aggiungi nuovo’ in alto.

Successivamente, apparirà un popup che chiederà all’utente di selezionare un tipo di modulo, ad esempio un modulo di contatto, un modulo di registrazione utente, un sondaggio e altro ancora.

Selezionate il tipo di modulo che preferite. Per questo tutorial, creeremo un modulo di contatto per raccogliere le testimonianze degli utenti.

Successivamente, è necessario inserire il nome e la descrizione del modulo.

Una volta terminato, è sufficiente fare clic sul pulsante “Crea”.

Ora è possibile utilizzare il costruttore di moduli per personalizzare il modulo.

Formidable offre un builder trascina e rilascia, facilissimo da usare. È sufficiente selezionare i campi del modulo che si desidera add-on dalle opzioni sulla sinistra e inserirli nel template del modulo.

Dopo la personalizzazione, è possibile incorporare il modulo in qualsiasi punto del sito web.

Il plugin offre diverse opzioni per aggiungere il modulo. Il modo più semplice è fare clic sul pulsante “Incorpora” nel builder del modulo in alto e poi selezionare una pagina esistente o creare una nuova pagina per aggiungere il modulo.

In alternativa, è possibile utilizzare un blocco Formidable Forms o un blocco shortcode nell’editor di contenuti di WordPress per incorporare i moduli.

Successivamente, è possibile assegnare un nome alla pagina e visualizzarne l’anteprima.

Quando si è soddisfatti del suo aspetto, si procede alla pubblicazione della pagina.

Quando il modulo è attivo e si iniziano a ricevere iscrizioni, è necessario installare e attivare l’add-on Visual Views in Formidable Forms.

Per farlo, basta andare su Formidable ” Add-Ons dal cruscotto di WordPress. Quindi, scorrere fino all’addon “Visual Views” e fare clic sul pulsante “Installa”.

Una volta che l’addon è attivo, si può andare su Formidable ” Views dalla dashboard di WordPress.

Dopodiché, è sufficiente fare clic sul pulsante “+ Aggiungi nuovo” in alto.

Successivamente, apparirà una finestra a comparsa in cui sarà necessario selezionare un tipo di visualizzazione. Il plugin offre una griglia, una tabella, un calendario e una visualizzazione classica.

Per questa esercitazione, utilizzeremo la vista ‘Griglia’ per mostrare le voci del modulo.

Successivamente, si dovrà selezionare un’origine dati per la vista.

Fare clic sul menu a discesa “Usa voci dal modulo” per selezionare il modulo. C’è anche un’opzione per inserire il nome della visualizzazione.

Dopo aver selezionato l’origine dati, è sufficiente fare clic sul pulsante “Crea una vista”.

In questo modo si avvia il costruttore di viste di Formidable Forms.

Per iniziare, fare clic sul pulsante “Layout Builder”.

Successivamente, è necessario selezionare un layout per visualizzare le voci del modulo.

È sufficiente scegliere un layout tra le opzioni disponibili in alto. È possibile aggiungere più layout per mostrare le voci del modulo.

Dopo aver selezionato un layout, fare clic sul pulsante “Salva layout”.

Successivamente, è possibile aggiungere contenuti al costruttore di viste facendo clic sul pulsante ‘+’. Sono disponibili opzioni per personalizzare il layout delle voci del modulo e per aggiungere contenuti prima e dopo le voci del modulo.

Il plugin offre anche opzioni per modificare la tipografia, il colore dello sfondo, il bordo e altro ancora nel pannello delle impostazioni dello stile della griglia sulla sinistra.

Sotto il campo View Name è presente anche uno shortcode, che vi servirà per mostrare le voci del modulo sul vostro sito.

Nel pannello Impostazioni stile griglia sono disponibili altre opzioni avanzate. Nelle impostazioni avanzate è possibile limitare il numero di voci, le dimensioni della pagina e altro ancora.

Una volta personalizzata la vista, non dimenticate di fare clic sul pulsante “Aggiorna” in alto.

Successivamente, dovrete visualizzare le voci del modulo sul vostro sito web WordPress. A tale scopo, copiare il codice breve indicato sotto il nome della vista.

Il codice breve avrà il seguente aspetto:

[display-frm-data id=2410]

Dopodiché, andare su qualsiasi post o pagina in cui si desidera visualizzare le voci del modulo. Una volta nell’editor di contenuti, è sufficiente aggiungere un blocco ‘Shortcode’.

A questo punto, inserire lo shortcode copiato in precedenza nel blocco shortcode.

Dopodiché, è possibile visualizzare l’anteprima della pagina e pubblicarla.

Ora è possibile visitare il sito web per vedere le voci del modulo in azione.

Ecco come appaiono sul nostro sito web dimostrativo:

Visualizzare le voci dei moduli di WordPress usando WPForms

Un altro modo per visualizzare le voci dei moduli sul front-end del vostro sito WordPress è attraverso WPForms. Tuttavia, questo metodo richiede la modifica del codice ed è consigliato agli utenti avanzati che hanno conoscenze di codifica.

WPForms è il miglior plugin per moduli di contatto per WordPress e consente di creare diversi tipi di moduli utilizzando un builder di moduli trascina e rilascia.

Per prima cosa, è necessario installare e attivare il plugin WPForms. Per maggiori dettagli, consultate la nostra guida su come installare un plugin di WordPress.

Successivamente, è necessario creare un modulo online utilizzando WPForms. Potete consultare la nostra guida passo passo su come creare un modulo di contatto in WordPress.

Una volta che iniziate a ricevere i moduli, dovrete inserire il seguente codice nel file functions.php del vostro tema. Se si commette anche solo un piccolo errore, si può danneggiare il sito web, per cui si consiglia di utilizzare WPCode.

Per ulteriori informazioni, consultare la nostra guida su come aggiungere facilmente codice personalizzato in WordPress.

/**
 * 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' );

Una volta aggiunto il codice al vostro sito web utilizzando il plugin gratuito WPCode, dovrete inserire il seguente shortcode in qualsiasi pagina o post per mostrare le voci del modulo.

[wpforms_entries_table id="FORMID"]

Basta sostituire FORMID con l’ID del modulo.

È possibile trovare l’ID del modulo andando su WPForms ” Tutti i moduli e poi guardando la colonna Shortcode.

Per aggiungere uno shortcode, basta creare una nuova pagina o modificarne una esistente.

Quindi, aggiungere un blocco ‘Shortcode’.

Dopo aver aggiunto il blocco, è sufficiente inserire lo shortcode.

Ora visualizzate l’anteprima della vostra pagina WordPress e fate clic sul pulsante “Pubblica” in alto.

Ecco come appariva l’anteprima delle voci del modulo sul frontend:

È possibile personalizzare ulteriormente la visualizzazione utilizzando stili CSS personalizzati, se necessario.

Speriamo che questo articolo vi abbia aiutato a capire come visualizzare i moduli di WordPress sul vostro sito. Potreste anche voler consultare la nostra guida su come creare un tema personalizzato per WordPress o le nostre scelte degli esperti sui migliori plugin per moduli di contatto per WordPress.

Se questo articolo vi è piaciuto, iscrivetevi al nostro canale YouTube per le esercitazioni video su WordPress. Potete trovarci anche su Twitter e Facebook.