Come visualizzare le voci dei moduli di WordPress sul vostro sito

La visualizzazione dei moduli di WordPress sul frontend del sito può renderlo più interattivo e coinvolgente.

Questo approccio consente di mostrare informazioni importanti proprio dove i visitatori possono vederle. Ad esempio, è possibile utilizzare questa caratteristica per evidenziare le recensioni positive, creare directory, visualizzare calendari di eventi e molto altro.

In questo articolo vi guideremo attraverso i passaggi per visualizzare i 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 correggere i loro problemi e altro ancora. Visualizzare i moduli sul vostro sito web WordPress per i vostri visitatori può essere utile in alcune situazioni.

Ad esempio, è possibile visualizzare testimonianze e recensioni di prodotti che gli utenti inviano attraverso un modulo online. In questo modo, potete sfruttare la riprova sociale per costruire la fiducia nel brand 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, quando gli utenti inviano un modulo sul vostro sito web WordPress, le loro voci sono mantenute private in modo predefinito. Solo l’amministratore di WordPress e altri utenti con autorizzazione possono visualizzare i moduli inviati.

Nelle sezioni seguenti, condivideremo il modo in cui potete mostrare i moduli sul frontend del vostro sito web WordPress utilizzando Formidable Forms e WPForms. Potete fare clic sui link sottostanti per passare alla sezione che preferite:

Pronti? Iniziamo con il video tutorial.

Video tutorial

Se preferite le istruzioni scritte, continuate a leggere.

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

Il modo più semplice per mostrare i 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, directory e calcolatori.

Per iniziare, installiamo e attiviamo 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 Pro di Formidable Forms, perché include l’add-on “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à di selezionare un tipo di modulo, ad esempio un modulo di contatto, un modulo di registrazione utente, un sondaggio o altro.

Procedere con la selezione del tipo di modulo preferito. Per questa esercitazione, 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 builder per personalizzare il modulo.

Formidable offre un builder trascina e rilascia, facilissimo da usare. È sufficiente selezionare qualsiasi campo del modulo che si desidera add-on dalle opzioni a sinistra e inserirlo nel template del modulo.

Dopo aver personalizzato, è 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, quindi selezionare una pagina esistente o creare una nuova pagina per aggiungere il modulo.

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

Per questa esercitazione, sceglieremo l’opzione “Crea nuova pagina”.

Una volta entrati nell’editor di contenuti, si vedrà che è stata creata una pagina dedicata al modulo Formidable Forms.

Prima di renderlo attivo, è possibile visualizzarlo in anteprima facendo clic sul pulsante “Anteprima”.

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

Una volta che il modulo è attivo e si iniziano a ricevere le voci, è necessario installare e attivare l’add-on “Visualizzazioni” di Formidable Forms.

Per farlo, basta andare su Formidable ” Add-on dalla propria Bacheca di WordPress. Quindi, scorrere verso il basso fino all’add-on “Visualizzazioni visive” e fare clic sul pulsante “Installa”.

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

Quindi, fare clic sul pulsante “+ Aggiungi nuovo” in alto.

Appare una finestra a comparsa. Qui è necessario selezionare un tipo di visualizzazione, ad esempio griglia, tabella, calendario e visualizzazione classica.

Per questa esercitazione, sceglieremo la vista “Griglia” per mostrare le voci dei moduli.

Il passo successivo consiste nel selezionare un’origine dati per la visualizzazione.

Fare clic sul menu a discesa “Usa voci dal modulo” per selezionare il modulo. È anche possibile 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”.

È possibile aggiungere contenuti al builder della visualizzazione 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 di sfondo, il bordo e altro ancora nel pannello “Impostazioni stile griglia” sulla sinistra.

Sotto il campo “Visualizza nome” è presente anche uno shortcode, necessario per visualizzare i moduli sul sito.

Nel pannello “Impostazioni stile griglia” sono disponibili opzioni più 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, è necessario visualizzare i moduli sul sito web di WordPress. Per farlo, copiate lo shortcode indicato sotto il “Nome visualizzazione”.

Il codice breve avrà il seguente aspetto:

[display-frm-data id=2410]

Una volta copiato lo shortcode negli appunti, si può andare in qualsiasi pagina o post in cui si desidera visualizzare i moduli. Nell’editor dei contenuti, è sufficiente aggiungere un blocco ‘Shortcode’.

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

Dopo di che, è possibile vedere l’anteprima della pagina prima di pubblicarla.

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

Ecco come appaiono sul nostro sito web dimostrativo:

Metodo 2: visualizzare le voci dei moduli di WordPress utilizzando 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.

Dopo l’attivazione, è possibile iniziare a creare un modulo online utilizzando WPForms. Potete verificare la nostra guida passo passo su come creare un modulo di contatto in WordPress.

Una volta che iniziate a ricevere moduli, dovrete inserire il seguente codice nel file functions.php del vostro tema. Si noti però che questa operazione può danneggiare il sito web se si commette anche solo un piccolo errore, quindi 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.

È sufficiente copiare questo shortcode negli appunti:

[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.

E questo è tutto!

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

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

Suggerimento bonus: Creare moduli conformi al GDPR

Il Regolamento generale sulla protezione dei dati (GDPR) è una legge dell’Unione Europea entrata in vigore il 25 maggio 2018. Chi siamo ha l’obiettivo di dare ai cittadini dell’UE un maggiore controllo sui propri dati personali e di assicurarsi che le aziende li gestiscano correttamente.

Se avete un sito WordPress, probabilmente raccoglie informazioni sugli utenti, soprattutto attraverso i moduli. Per assicurarvi che i vostri moduli seguano le regole del GDPR, dovreste:

1. Ottenere il consenso esplicito: Chiedere agli utenti se sono d’accordo a memorizzare e utilizzare i loro dati personali.
2. Richieste di accesso: Consentono agli utenti di vedere le informazioni personali che avete su di loro.
3. Richieste di eliminazione: Consentite agli utenti di chiedere l’eliminazione dei loro dati dal vostro sito.

Per maggiori dettagli, potete consultare la nostra guida su come creare moduli conformi al GDPR in WordPress. Risponderà a tutte le vostre domande con un linguaggio facile da capire.

Speriamo che questo articolo vi abbia aiutato a capire come visualizzare i moduli di WordPress sul vostro sito. Potreste anche consultare le nostre guide su come creare un modulo d’ordine online e su come add-on un campo per il codice coupon nei vostri moduli.

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