Come visualizzare le voci dei moduli di WordPress sul tuo sito (2 modi)

Stai raccogliendo le richieste di moduli sul tuo sito WordPress ma non le mostri mai ai tuoi visitatori? È un'opportunità persa.

Mostrare voci come recensioni, elenchi di membri o calendari di eventi sul tuo sito conferisce loro uno scopo. Possono aiutare i visitatori a trovare informazioni, vedere feedback reali o scoprire persone ed eventi nella tua community.

Noi di WPBeginner abbiamo aiutato molti proprietari di siti a rendere utili i dati dei loro moduli nascosti. Dopo aver testato molti approcci, ne abbiamo trovati 2 che funzionano davvero bene.

In questa guida, ti mostreremo come visualizzare le voci dei moduli di WordPress sul tuo sito in 2 modi semplici, sia che tu gestisca una directory, una vetrina o un sito community. 🙌

Perché visualizzare le voci dei moduli di WordPress sul front-end?

Visualizzare le voci dei moduli significa prendere i dati che i tuoi visitatori inviano e mostrarli sulle pagine pubbliche del tuo sito web WordPress. Uno dei maggiori vantaggi è la creazione di social proof.

Per impostazione predefinita, le richieste di moduli sono visibili solo agli amministratori.

Ma mostrare testimonianze o recensioni di prodotti che utilizzano feedback reali dei clienti è un ottimo modo per creare fiducia. Infatti, uno studio ha rilevato che la visualizzazione delle recensioni può aumentare i tassi di conversione fino al 270%.

Puoi anche utilizzare le voci dei moduli per creare altre risorse utili per i tuoi visitatori, come directory aziendali, elenchi di membri o eventi inviati dagli utenti su un calendario.

Nelle sezioni seguenti, ti mostreremo come visualizzare le voci del modulo sul front-end del tuo sito web WordPress utilizzando Formidable Forms e WPForms.

Ecco una rapida panoramica di tutto ciò che tratteremo in questa guida:

• Displaying WordPress Form Entries by Using Formidable Forms (Easy Way)
  • Passaggio 1: Configura Formidable Forms
  • Passaggio 2: Crea un modulo
  • Passaggio 3: Pubblica il modulo
  • Passaggio 4: Attiva le viste visive
  • Passaggio 5: Visualizza le voci del modulo sul front-end
• Displaying WordPress Form Entries by Using WPForms (Advanced)
  • Passaggio 1: Installa WPForms
  • Step 2: Create a Form and Display Its Entries
• Suggerimento Bonus: Creare Moduli Conformi al GDPR
• Domande frequenti sulla visualizzazione delle voci del modulo in WordPress
• Tutorial video: Visualizzazione delle voci dei moduli di WordPress
• Risorse aggiuntive per l'utilizzo dei moduli di WordPress

Iniziamo.

Metodo 1: Visualizzare le voci dei moduli di WordPress utilizzando Formidable Forms

Il modo più semplice per mostrare le voci dei moduli in WordPress è utilizzare Formidable Forms. È un popolare plugin per moduli di contatto di WordPress e offre un costruttore di moduli all-in-one con molte funzionalità di personalizzazione.

Puoi creare tutti i tipi di moduli, in particolare moduli avanzati come calendari di eventi, directory e calcolatrici.

Abbiamo testato a fondo Formidable Forms per conoscere tutte le sue funzionalità. Puoi vedere perché lo raccomandiamo nella nostra recensione completa di Formidable Forms.

Passaggio 1: Configura Formidable Forms

Per iniziare, installiamo e attiviamo il plugin Formidable Forms sul tuo sito. Per questo tutorial, utilizzeremo la versione Formidable Forms Pro perché include l'addon 'Visual Views'.

Se hai bisogno di aiuto, consulta la nostra guida su come installare un plugin WordPress.

Dopo l'attivazione, puoi andare su Formidable » Forms e fare clic sul pulsante '+ Add New' in alto.

Passaggio 2: Crea un modulo

Dopodiché, apparirà un popup che ti chiederà di selezionare un tipo di modulo, come un modulo di contatto, modulo di registrazione utente, sondaggio o altro.

Procedi e seleziona il tuo tipo di modulo preferito. Per questo tutorial, creeremo un modulo di contatto per raccogliere testimonianze dagli utenti.

Successivamente, dovrai inserire un nome e una descrizione per il modulo.

Una volta terminato, fai semplicemente clic sul pulsante 'Create'.

Ora, puoi utilizzare il modulo builder per personalizzare il tuo modulo.

Formidable offre un builder drag-and-drop estremamente facile da usare. Seleziona semplicemente qualsiasi campo del modulo che desideri aggiungere al tuo modulo dalle opzioni a sinistra e posizionalo nel modello del modulo.

Passaggio 3: Pubblica il modulo

Dopo aver personalizzato, puoi incorporare il modulo ovunque sul tuo sito web.

Il plugin offre diverse opzioni per aggiungere il tuo modulo. Il modo più semplice è fare clic sul pulsante 'Incorpora' nell'editor del modulo in alto, quindi selezionare una pagina esistente o crearne una nuova per aggiungere il tuo modulo.

In alternativa, puoi utilizzare un blocco 'Formidable Forms' o un blocco shortcode nell'editor di contenuti di WordPress per incorporare i tuoi moduli.

Per questo tutorial, sceglieremo l'opzione 'Crea nuova pagina'.

Una volta all'interno dell'editor di contenuti, vedrai che hai creato una pagina dedicata per il tuo modulo Formidable Forms.

Prima di renderla pubblica, potresti volerla visualizzare in anteprima facendo clic sul pulsante 'Anteprima'.

Quando sei soddisfatto del suo aspetto, procedi e pubblica la tua pagina.

Passaggio 4: Attiva le viste visive

Dopo che il tuo modulo è online e inizi a ricevere iscrizioni, vorrai installare e attivare il componente aggiuntivo 'Visual Views' in Formidable Forms.

Per farlo, vai semplicemente su Formidable » Add-Ons dalla tua area di amministrazione di WordPress. Successivamente, puoi scorrere fino al componente aggiuntivo 'Visual Views' e fare clic sul pulsante 'Installa'.

Una volta che il componente aggiuntivo è attivo, puoi andare alla pagina Formidable » Views.

Quindi, procedi e fai clic sul pulsante '+ Aggiungi nuovo' in alto.

Apparirà una finestra popup. Qui dovrai selezionare un tipo di vista, come griglia, tabella, calendario o vista classica.

Per questo tutorial, sceglieremo la vista 'Griglia' per mostrare le iscrizioni al modulo.

Il passo successivo è selezionare una sorgente dati per la tua vista.

Fai clic sul menu a discesa ‘Usa voci dal modulo’ per selezionare il tuo modulo. Puoi anche inserire un nome di vista.

Dopo aver selezionato la tua origine dati, fai semplicemente clic sul pulsante ‘Crea una vista’.

Questo avvierà il generatore di viste in Formidable Forms.

Per iniziare, fai clic sul pulsante ‘Generatore di layout’.

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

Scegli semplicemente un layout tra le opzioni fornite in alto. Puoi aggiungere più layout per mostrare le voci del modulo.

Dopo aver selezionato un layout, fai clic sul pulsante ‘Salva layout’.

Puoi quindi aggiungere contenuto al generatore di viste facendo clic sul pulsante ‘+’. Ci sono opzioni per personalizzare il layout delle voci del modulo e aggiungere contenuto prima e dopo le voci del modulo.

Il plugin offre anche opzioni per modificare la tipografia, il colore di sfondo, il bordo e altro ancora nel pannello ‘Impostazioni stile griglia’ sulla sinistra.

Vedrai anche uno shortcode sotto il campo ‘Nome vista’, che ti servirà quando mostrerai le voci del modulo sul tuo sito.

Ci sono opzioni più avanzate nel pannello ‘Impostazioni stile griglia’. Nelle impostazioni avanzate, puoi limitare il numero di voci, la dimensione della pagina e altro ancora.

Una volta personalizzata la vista, non dimenticare di fare clic sul pulsante ‘Aggiorna’ in alto.

Passaggio 5: Visualizza le voci del modulo sul front-end

Successivamente, dovrai visualizzare le voci del tuo modulo sul tuo sito web WordPress. Per farlo, copia lo shortcode fornito sotto ‘Nome vista’.

Lo shortcode apparirà così:

[display-frm-data id=2410]

Una volta copiato lo shortcode negli appunti, puoi andare a qualsiasi articolo o pagina dove desideri visualizzare le voci del modulo.

Nell'editor di contenuti, aggiungi semplicemente un blocco ‘Shortcode’.

Ora, aggiungi lo shortcode che hai copiato in precedenza nel blocco shortcode.

Dopodiché, potresti voler visualizzare in anteprima la pagina prima di pubblicarla.

Ora puoi visitare il tuo sito web per vedere le voci del modulo in azione.

Ecco come appaiono sul nostro sito web demo:

Metodo 2: Visualizzare le voci dei moduli WordPress utilizzando WPForms

Puoi anche visualizzare le voci del modulo utilizzando WPForms, uno dei migliori plugin per moduli di contatto WordPress. Questo metodo è più avanzato perché richiede l'aggiunta di uno snippet di codice PHP al tuo sito.

Per fare ciò, avrai bisogno di WPForms Pro, che memorizza tutte le voci del modulo nel tuo database WordPress. La versione gratuita WPForms Lite invia solo le voci via email e non le salva, quindi non funzionerà per questo metodo.

Su WPBeginner, utilizziamo WPForms per creare vari moduli, come moduli di contatto e sondaggi annuali degli utenti. Ottieni maggiori informazioni a riguardo nella nostra recensione dettagliata di WPForms.

Passaggio 1: Installa WPForms

Innanzitutto, registriamoci per un account WPForms.

Puoi semplicemente fare clic sul pulsante 'Ottieni WPForms Ora' sul loro sito web per acquistare un piano e creare il tuo account.

Fatto ciò, procedi e copia la tua chiave di licenza.

Ora, configuriamo il plugin.

Per fare ciò, dovrai installare la versione gratuita del plugin WPForms dal repository di WordPress, che fornisce la struttura di base. Dopodiché, inserirai la tua chiave di licenza per sbloccare tutte le funzionalità Pro.

Per iniziare, puoi andare su Plugin » Aggiungi Nuovo Plugin dalla tua area di amministrazione di WordPress.

Quindi, utilizza la funzione di ricerca per trovare rapidamente il plugin WPForms.

Nel risultato di ricerca pertinente, fai clic su ‘Installa ora’ e ‘Attiva’. Per maggiori dettagli, consulta la nostra guida su come installare un plugin di WordPress.

Passaggio 2: Crea un modulo e visualizza le sue voci

Dopo l'attivazione, puoi iniziare a creare un modulo online utilizzando WPForms. Puoi consultare la nostra guida passo passo su come creare un modulo di contatto in WordPress.

Una volta che inizierai a ricevere le voci del modulo, dovrai inserire il seguente codice nel file functions.php del tuo tema.

Tieni presente, tuttavia, che farlo può compromettere il tuo sito web se commetti anche un piccolo errore.

Ecco perché consigliamo sempre di utilizzare WPCode, il miglior plugin per snippet di codice per WordPress.

Alcuni dei nostri marchi partner utilizzano questo plugin perché è il modo più sicuro e semplice per aggiungere snippet di codice personalizzati a WordPress senza rischiare di compromettere il sito. Per un'analisi più approfondita della piattaforma, consulta la nostra recensione di WPCode.

Non preoccuparti, non devi capire cosa fa il codice qui sotto.

Devi solo copiarlo. Quindi, per inserire il codice, consulta la nostra guida su come aggiungere facilmente codice personalizzato in WordPress per maggiori informazioni.

/**
 * 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 tuo sito web utilizzando il plugin gratuito WPCode, sei pronto per visualizzare le voci del tuo modulo. Lo farai utilizzando uno shortcode che puoi inserire in qualsiasi pagina o post.

Lo shortcode di base è simile a questo:

[wpforms_entries_table id="FORMID"]

Ricorda solo di sostituire FORMID con l'ID effettivo del tuo modulo.

Puoi trovare l'ID del modulo andando su WPForms » Tutti i moduli e quindi guardando nella colonna Shortcode.

Personalizzazione della visualizzazione delle voci di WPForms (Alternativa)

Puoi anche personalizzare questo shortcode per modificare quali campi vengono visualizzati e quante voci vengono mostrate. Questo è molto utile per creare visualizzazioni pulite e mirate.

Ecco un paio di opzioni utili:

• Mostra campi specifici: Per mostrare solo alcune colonne, aggiungi un attributo fields con gli ID dei campi del tuo modulo. Ad esempio, per mostrare solo i campi con ID 1 e 3, useresti:
  [wpforms_entries_table id="123" fields="1,3"]
• Limita il numero di voci: Per mostrare solo le 5 voci più recenti, aggiungi l'attributo number: [wpforms_entries_table id="123" number="5"]

Puoi trovare l'‘ID campo’ per qualsiasi campo aprendo il tuo modulo WordPress nell'editor di WPForms e facendo clic su quel campo. L'ID viene mostrato nella parte superiore del pannello delle impostazioni a sinistra.

Passaggio 3: Aggiungere lo shortcode alla tua pagina

Per aggiungere uno shortcode, crea semplicemente una nuova pagina o modifica una esistente.

Successivamente, procedi e aggiungi un blocco 'Shortcode'.

Quindi, semplicemente aggiungi il tuo shortcode al blocco.

Fatto ciò, puoi visualizzare in anteprima la tua pagina WordPress e fare clic sul pulsante ‘Pubblica’ in alto.

E questo è tutto!

Ecco come appariva l'anteprima delle voci del nostro modulo sul front-end:

Puoi personalizzare ulteriormente la visualizzazione utilizzando stili CSS personalizzati secondo necessità.

Suggerimento Bonus: Creare Moduli Conformi al GDPR

Il Regolamento generale sulla protezione dei dati (GDPR) è una legge dell'Unione Europea che conferisce alle persone un maggiore controllo sui propri dati personali. Se il tuo sito web raccoglie informazioni dagli utenti, specialmente tramite moduli, è importante seguire queste regole.

Per rendere i tuoi moduli conformi al GDPR, dovresti:

1. Ottieni il consenso esplicito: Chiedi agli utenti se è accettabile memorizzare e utilizzare le loro informazioni personali.
2. Gestire le richieste di accesso: Consenti agli utenti di visualizzare le informazioni personali che hai su di loro.
3. Onorare le richieste di eliminazione: Permetti agli utenti di richiedere l'eliminazione dei propri dati dal tuo sito.

Per maggiori dettagli, puoi consultare la nostra guida su come creare moduli conformi al GDPR in WordPress. Risponderà a tutte le tue domande in un linguaggio di facile comprensione.

Domande frequenti sulla visualizzazione delle voci del modulo in WordPress

Posso visualizzare le voci del modulo senza un plugin?

Sì, ma è molto tecnico. Dovresti scrivere codice PHP e SQL personalizzato per interrogare il tuo database WordPress e visualizzare i risultati. L'utilizzo di un plugin come Formidable Forms o il metodo dello snippet di codice WPForms è molto più semplice e sicuro per la maggior parte degli utenti.

È sicuro visualizzare i dati inviati dagli utenti sul mio sito?

Può esserlo, ma devi fare attenzione. Ottieni sempre il consenso esplicito dagli utenti prima di rendere pubblici i loro dati.

Inoltre, è molto importante moderare le richieste prima che appaiano sul tuo sito. Dovresti esaminare ogni voce per impedire la pubblicazione di contenuti inappropriati.

Regola generale: Non visualizzare mai pubblicamente informazioni personali sensibili come nomi completi, indirizzi email, numeri di telefono o indirizzi di casa senza un permesso esplicito caso per caso.

Come posso personalizzare l'aspetto delle mie richieste del modulo?

Entrambi i metodi in questa guida ti consentono di personalizzare le richieste. L'addon Visual Views di Formidable Forms ha impostazioni integrate per colori, font e layout. Il metodo della tabella di WPForms produce una tabella HTML di base che puoi personalizzare con CSS personalizzato per abbinarlo al tuo tema.

Tutorial video: Visualizzazione delle voci dei moduli di WordPress

🎬 Vedilo in azione! Guarda il nostro tutorial video per visualizzare le voci dei moduli di WordPress sul tuo sito:

Risorse aggiuntive per l'utilizzo dei moduli di WordPress

Speriamo che questo articolo ti abbia aiutato a imparare come visualizzare le richieste dei moduli di WordPress sul tuo sito.

Successivamente, potresti anche voler consultare le nostre altre guide utili su:

• Come creare un modulo d'ordine online
• Come aggiungere un campo codice coupon ai tuoi moduli WordPress
• Come aggiungere l'autocompletamento per i campi indirizzo in WordPress
• Modi per utilizzare la logica condizionale nei moduli WordPress
• Come ho bloccato 18.000 attacchi di spam ai lead nel mio modulo WordPress
• Guida definitiva all'uso dei moduli WordPress

Se ti è piaciuto questo articolo, iscriviti al nostro canale YouTube per tutorial video su WordPress. Puoi anche trovarci su Twitter e Facebook.