Cum să afișați intrările formularelor WordPress pe site-ul dvs. (2 moduri)

Colectați trimiteri de formulare pe site-ul dvs. WordPress, dar nu le afișați niciodată vizitatorilor? Aceasta este o oportunitate ratată.

Afișarea intrărilor precum recenzii, liste de membri sau calendare de evenimente pe site-ul dvs. le conferă un scop. Ele pot ajuta vizitatorii să găsească informații, să vadă feedback real sau să descopere oameni și evenimente din comunitatea dvs.

La WPBeginner, am ajutat o mulțime de proprietari de site-uri să facă utile datele ascunse din formularele lor. După ce am testat o mulțime de abordări, am găsit 2 care funcționează foarte bine.

În acest ghid, vă vom arăta cum să afișați intrările din formularele WordPress pe site-ul dvs. în 2 moduri ușoare – indiferent dacă gestionați un director, o prezentare sau un site comunitar. 🙌

De ce să afișați intrările formularelor WordPress pe partea frontală?

Afișarea intrărilor din formular înseamnă preluarea datelor pe care vizitatorii dvs. le trimit și afișarea lor pe paginile publice ale site-ului dvs. WordPress. Unul dintre cele mai mari beneficii este construirea dovadă socială.

În mod implicit, trimiterile de formulare sunt vizibile doar administratorilor.

Dar afișarea testimonialelor sau a recenziilor de produse care folosesc feedback real de la clienți este o modalitate excelentă de a construi încredere. De fapt, un studiu a constatat că afișarea recenziilor poate crește ratele de conversie cu până la 270%.

De asemenea, puteți utiliza intrările din formular pentru a crea alte resurse utile pentru vizitatorii dvs., cum ar fi directoare de afaceri, liste de membri sau evenimente trimise de utilizatori pe un calendar.

În secțiunile următoare, vă vom arăta cum să afișați intrările din formular pe partea frontală a site-ului dvs. WordPress utilizând Formidable Forms și WPForms.

Iată o prezentare generală rapidă a tuturor lucrurilor pe care le vom acoperi în acest ghid:

• Displaying WordPress Form Entries by Using Formidable Forms (Easy Way)
  • Pasul 1: Configurați Formidable Forms
  • Pasul 2: Creați un formular
  • Pasul 3: Publicați formularul
  • Pasul 4: Activați vizualizările vizuale
  • Pasul 5: Afișați intrările formularului pe frontend
• Displaying WordPress Form Entries by Using WPForms (Advanced)
  • Pasul 1: Instalați WPForms
  • Step 2: Create a Form and Display Its Entries
• Sfat bonus: Crearea formularelor conforme cu GDPR
• Întrebări frecvente despre afișarea intrărilor formularului în WordPress
• Tutorial video: Afișarea intrărilor formularului WordPress
• Resurse suplimentare pentru utilizarea formularelor WordPress

Să începem.

Metoda 1: Afișarea intrărilor formularului WordPress utilizând Formidable Forms

Cel mai ușor mod de a afișa intrările formularului în WordPress este prin utilizarea Formidable Forms. Este un popular plugin de formulare de contact pentru WordPress și oferă un constructor de formulare all-in-one cu multe funcții de personalizare.

Puteți crea tot felul de formulare, în special formulare avansate precum calendare de evenimente, directoare și calculatoare.

Am testat Formidable Forms în detaliu pentru a afla despre toate caracteristicile sale. Puteți vedea de ce îl recomandăm în recenzia noastră completă Formidable Forms: Formidable Forms.

Pasul 1: Configurați Formidable Forms

Pentru a începe, să instalăm și să activăm pluginul Formidable Forms pe site-ul dvs. Pentru acest tutorial, vom folosi versiunea Formidable Forms Pro, deoarece include addon-ul „Visual Views”.

Dacă aveți nevoie de ajutor, consultați ghidul nostru despre cum să instalați un plugin WordPress.

La activare, puteți accesa Formidable » Forms și faceți clic pe butonul „+ Add New” din partea de sus.

Pasul 2: Creați un formular

După aceea, va apărea o fereastră pop-up în care vi se va cere să selectați un tip de formular, cum ar fi un formular de contact,  formular de înregistrare utilizator, sondaj sau altul.

Continuați și selectați tipul de formular preferat. Pentru acest tutorial, vom crea un formular de contact pentru a colecta mărturii de la utilizatori.

În continuare, va trebui să introduceți un nume și o descriere pentru formular.

Când ați terminat, pur și simplu faceți clic pe butonul „Creare”.

Acum, puteți utiliza constructorul de formulare pentru a vă personaliza formularul.

Formidable oferă un constructor drag-and-drop care este foarte ușor de utilizat. Pur și simplu selectați orice câmp de formular pe care doriți să îl adăugați la formularul dvs. din opțiunile din stânga și plasați-l în șablonul formularului.

Pasul 3: Publicați formularul

După personalizare, puteți încorpora formularul oriunde pe site-ul dvs..

Pluginul oferă multiple opțiuni pentru adăugarea formularului dvs. Cea mai ușoară metodă este să faceți clic pe butonul „Embed” din constructorul de formulare din partea de sus, apoi să selectați o pagină existentă sau să creați o pagină nouă pentru a adăuga formularul dvs.

Alternativ, puteți utiliza un bloc „Formidable Forms” sau un bloc de scurtcod în editorul de conținut WordPress pentru a încorpora formularele dvs.

Pentru acest tutorial, vom alege opțiunea „Creare pagină nouă”.

Odată ce sunteți în editorul de conținut, veți vedea că ați creat o pagină dedicată pentru formularul dvs. Formidable Forms.

Înainte de a-l publica, s-ar putea să doriți să previzualizați făcând clic pe butonul „Previzualizare”.

Când sunteți mulțumit de aspectul său, continuați și publicați pagina.

Pasul 4: Activați vizualizările vizuale

După ce formularul dvs. este activ și începeți să primiți intrări, va trebui să instalați și să activați addon-ul „Visual Views” în Formidable Forms.

Pentru a face acest lucru, accesați pur și simplu Formidable » Add-Ons din zona de administrare WordPress. Apoi, puteți derula în jos la addon-ul „Visual Views” și faceți clic pe butonul „Install”.

Odată ce addon-ul este activ, puteți accesa pagina Formidable » Views.

Apoi, faceți clic pe butonul „+ Adăugare nouă” din partea de sus.

Va apărea o fereastră pop-up. Aici, va trebui să selectați un tip de vizualizare, cum ar fi grilă, tabel, calendar sau vizualizare clasică.

Pentru acest tutorial, vom alege vizualizarea „Grilă” pentru a afișa intrările formularelor.

Următorul pas este să selectați o sursă de date pentru vizualizarea dvs.

Faceți clic pe meniul derulant „Utilizare intrări din formular” pentru a selecta formularul dvs. Puteți, de asemenea, să introduceți un nume de vizualizare.

După selectarea sursei de date, pur și simplu faceți clic pe butonul „Creare vizualizare”.

Aceasta va lansa constructorul de vizualizări în Formidable Forms.

Pentru a începe, faceți clic pe butonul „Layout Builder”.

În continuare, va trebui să selectați un aspect pentru a afișa intrările formularului.

Pur și simplu alegeți un aspect din opțiunile oferite în partea de sus. Puteți adăuga mai multe aspecte pentru a afișa intrările formularului.

După selectarea unui aspect, continuați și faceți clic pe butonul „Salvare aspect”.

Puteți apoi adăuga conținut la builderul de vizualizări făcând clic pe butonul „+”. Există opțiuni pentru a personaliza aspectul intrărilor formularului și pentru a adăuga conținut înainte și după intrările formularului.

Pluginul oferă, de asemenea, opțiuni pentru a schimba tipografia, culoarea de fundal, bordura și multe altele în panoul „Setări stil grilă” din stânga ta.

Veți vedea, de asemenea, un shortcode sub câmpul „Nume vizualizare”, de care veți avea nevoie atunci când afișați intrările formularului pe site-ul dvs.

Există opțiuni mai avansate în panoul „Setări stil grilă”. În setările avansate, puteți limita numărul de înregistrări, dimensiunea paginii și multe altele.

Când ați personalizat vizualizarea, nu uitați să faceți clic pe butonul „Actualizare” din partea de sus.

Pasul 5: Afișați intrările formularului pe frontend

Apoi, va trebui să afișați intrările formularului pe site-ul dvs. WordPress. Pentru a face acest lucru, copiați shortcode-ul furnizat sub „Numele vizualizării”.

Shortcode-ul va arăta astfel:

[display-frm-data id=2410]

După ce ați copiat shortcodul în clipboard, puteți accesa orice postare sau pagină unde doriți să afișați intrările formularului.

În editorul de conținut, adăugați pur și simplu un bloc „Shortcode”.

Acum, adăugați shortcodul pe care l-ați copiat anterior în blocul shortcode.

După aceea, s-ar putea să doriți să previzualizați pagina înainte de a o publica.

Puteți vizita acum site-ul dvs. pentru a vedea intrările formularului în acțiune.

Iată cum arată pe site-ul nostru demo:

Metoda 2: Afișarea intrărilor formularului WordPress folosind WPForms

Puteți afișa intrările formularului și folosind WPForms, unul dintre cele mai bune pluginuri de formulare de contact pentru WordPress. Această metodă este mai avansată, deoarece necesită adăugarea unui fragment de cod PHP pe site-ul dvs.

Pentru a face acest lucru, veți avea nevoie de WPForms Pro, care stochează toate intrările formularului în baza de date WordPress. Versiunea gratuită WPForms Lite trimite intrările doar prin e-mail și nu le salvează, deci nu va funcționa pentru această metodă.

La WPBeginner, folosim WPForms pentru a crea diverse formulare, cum ar fi formulare de contact și sondaje anuale ale utilizatorilor. Obțineți mai multe informații despre acesta în recenzia noastră detaliată WPForms.

Pasul 1: Instalați WPForms

Mai întâi, să ne înregistrăm pentru un cont WPForms.

Puteți pur și simplu să faceți clic pe butonul „Get WPForms Now” de pe site-ul lor pentru a achiziționa un plan și a vă crea contul.

Cu asta gata, copiați cheia de licență.

Acum, să configurăm pluginul.

Pentru a face acest lucru, va trebui să instalați versiunea gratuită a pluginului WPForms din depozitul WordPress, care oferă cadrul de bază. După aceea, veți introduce cheia de licență pentru a debloca toate funcționalitățile Pro.

Pentru început, puteți accesa Pluginuri » Adaugă Plugin Nou din zona de administrare WordPress.

Apoi, folosiți funcția de căutare pentru a găsi rapid pluginul WPForms.

În rezultatul relevant al căutării, faceți clic pe „Instalează acum” și „Activează”. Pentru mai multe detalii, consultați ghidul nostru despre cum să instalezi un plugin WordPress.

Pasul 2: Creați un formular și afișați intrările acestuia

După activare, puteți începe să creați un formular online folosind WPForms. Puteți consulta ghidul nostru pas cu pas despre cum să creezi un formular de contact în WordPress.

Odată ce începeți să primiți intrări în formular, va trebui să introduceți următorul cod în fișierul functions.php al temei dvs.

Dar reține că acest lucru poate defecta site-ul tău dacă faci chiar și o mică greșeală.

Acesta este motivul pentru care recomandăm întotdeauna utilizarea WPCode, cel mai bun plugin de fragmente de cod pentru WordPress.

Unele dintre mărcile noastre partenere folosesc acest plugin deoarece este cea mai sigură și mai ușoară modalitate de a adăuga fragmente de cod personalizate în WordPress fără riscul de a deteriora site-ul. Pentru o analiză mai aprofundată a platformei, consultați recenzia noastră WPCode.

Nu vă faceți griji, nu trebuie să înțelegeți ce face codul de mai jos.

Trebuie doar să-l copiați. Apoi, pentru a introduce codul, vă rugăm să consultați ghidul nostru despre cum să adăugați ușor cod personalizat în WordPress pentru mai multe informații.

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

Odată ce ați adăugat codul pe site-ul dvs. web folosind pluginul gratuit WPCode, sunteți gata să afișați intrările formularului dvs. Veți face acest lucru folosind un shortcode pe care îl puteți plasa pe orice pagină sau postare.

Shortcode-ul de bază arată astfel:

[wpforms_entries_table id="FORMID"]

Doar amintiți-vă să înlocuiți FORMID cu ID-ul real al formularului dvs.

Poți găsi ID-ul formularului mergând la WPForms » Toate formularele și apoi uitându-te la coloana Shortcode.

Personalizarea afișării intrărilor WPForms (Alternativă)

Puteți, de asemenea, să personalizați acest shortcode pentru a schimba ce câmpuri sunt afișate și câte intrări sunt afișate. Acest lucru este foarte util pentru crearea de afișări curate și concentrate.

Iată câteva opțiuni utile:

• Afișați câmpuri specifice: Pentru a afișa doar anumite coloane, adăugați un atribut fields cu ID-urile câmpurilor din formularul dvs. De exemplu, pentru a afișa doar câmpurile cu ID-urile 1 și 3, ați folosi:
  [wpforms_entries_table id="123" fields="1,3"]
• Limitați numărul de intrări: Pentru a afișa doar cele mai recente 5 intrări, adăugați atributul number: [wpforms_entries_table id="123" number="5"]

Puteți găsi „ID-ul câmpului” pentru orice câmp deschizând formularul dvs. WordPress în constructorul WPForms și făcând clic pe acel câmp. ID-ul este afișat în partea de sus a panoului de setări din stânga.

Pasul 3: Adăugarea Shortcode-ului pe pagina dvs.

Pentru a adăuga un shortcode, pur și simplu creați o pagină nouă sau editați una existentă.

Apoi, adăugați un bloc „Shortcode”.

Apoi, pur și simplu adăugați shortcode-ul dvs. în bloc.

Cu aceasta făcută, puteți previzualiza pagina dvs. WordPress și faceți clic pe butonul „Publicare” din partea de sus.

Și asta e tot!

Iată cum arăta previzualizarea intrărilor formularului nostru pe partea frontală:

Puteți personaliza în continuare afișarea folosind stiluri CSS personalizate, după cum este necesar.

Sfat bonus: Crearea formularelor conforme cu GDPR

Regulamentul General privind Protecția Datelor (GDPR) este o lege a Uniunii Europene care oferă persoanelor mai mult control asupra datelor lor personale. Dacă site-ul dvs. colectează informații de la utilizatori, în special prin intermediul formularelor, este important să respectați aceste reguli.

Pentru a face formularele dvs. conforme cu GDPR, ar trebui să:

1. Obțineți consimțământ explicit: Întrebați utilizatorii dacă este în regulă să le stocați și să le utilizați informațiile personale.
2. Respectați cererile de acces: Permiteți utilizatorilor să vadă informațiile personale pe care le aveți despre ei.
3. Respectați cererile de ștergere: Permiteți utilizatorilor să solicite ștergerea datelor lor de pe site-ul dvs.

Pentru mai multe detalii, puteți consulta ghidul nostru despre cum să creați formulare conforme GDPR în WordPress. Acesta va răspunde tuturor întrebărilor dumneavoastră într-un limbaj ușor de înțeles.

Întrebări frecvente despre afișarea intrărilor formularului în WordPress

Pot afișa intrările formularului fără un plugin?

Da, dar este foarte tehnic. Ar trebui să scrieți cod personalizat PHP și SQL pentru a interoga baza de date WordPress și a afișa rezultatele. Utilizarea unui plugin precum Formidable Forms sau metoda de fragment de cod WPForms este mult mai ușoară și mai sigură pentru majoritatea utilizatorilor.

Este sigur să afișez date trimise de utilizatori pe site-ul meu?

Poate fi, dar trebuie să fii atent. Obțineți întotdeauna consimțământul explicit al utilizatorilor înainte de a face publice datele acestora.

În plus, este foarte important să moderați trimiterile înainte ca acestea să apară pe site-ul dvs. Ar trebui să revizuiți fiecare intrare pentru a preveni publicarea de conținut necorespunzător.

Regula generală: Nu afișați public informații personale sensibile precum nume complete, adrese de e-mail, numere de telefon sau adrese de domiciliu fără permisiunea explicită, caz cu caz.

Cum pot stiliza aspectul intrărilor din formularul meu?

Ambele metode din acest ghid vă permit să stilizați intrările. Addon-ul Visual Views de la Formidable Forms are setări încorporate pentru culori, fonturi și aspect. Metoda tabelului WPForms produce un tabel HTML de bază pe care îl puteți stiliza cu CSS personalizat pentru a se potrivi temei dvs.

Tutorial video: Afișarea intrărilor formularului WordPress

🎬 Vedeți-l în acțiune! Urmăriți tutorialul nostru video pentru a afișa intrările formularelor WordPress pe site-ul dvs.:

Resurse suplimentare pentru utilizarea formularelor WordPress

Sperăm că acest articol v-a ajutat să învățați cum să afișați intrările din formularele WordPress pe site-ul dvs.

În continuare, s-ar putea să doriți să consultați și celelalte ghiduri utile ale noastre despre:

• Cum să creezi un formular de comandă online
• Cum să adaugi un câmp pentru cod de cupon la formularele tale WordPress
• How to Add Autocomplete for Address Fields in WordPress
• Modalități de a utiliza logica condițională în formularele WordPress
• Cum am blocat 18.000 de atacuri de spam asupra lead-urilor în formularul meu WordPress
• Ghidul complet pentru utilizarea formularelor WordPress

Dacă ți-a plăcut acest articol, te rugăm să te abonezi la canalul nostru de YouTube pentru tutoriale video WordPress. Ne poți găsi, de asemenea, pe Twitter și Facebook.