Jak wyświetlać wpisy z formularzy WordPress na swojej stronie (2 sposoby)

Czy zbierasz zgłoszenia formularzy na swojej stronie WordPress, ale nigdy ich nie pokazujesz odwiedzającym? To stracona szansa.

Pokazywanie wpisów, takich jak recenzje, listy członków lub kalendarze wydarzeń na Twojej stronie, nadaje im cel. Mogą one pomóc odwiedzającym znaleźć informacje, zobaczyć rzeczywiste opinie lub odkryć ludzi i wydarzenia w Twojej społeczności.

W WPBeginner pomogliśmy wielu właścicielom stron sprawić, by ich ukryte dane z formularzy były użyteczne. Po przetestowaniu wielu podejść znaleźliśmy 2, które działają naprawdę dobrze.

W tym przewodniku pokażemy Ci, jak wyświetlać wpisy z formularzy WordPress na swojej stronie na 2 proste sposoby – niezależnie od tego, czy prowadzisz katalog, wystawę, czy stronę społecznościową. 🙌

Dlaczego wyświetlać wpisy z formularzy WordPress na stronie front-end?

Wyświetlanie wpisów z formularzy oznacza pobieranie danych, które odwiedzający przesyłają, i pokazywanie ich na publicznych stronach Twojej witryny WordPress. Jedną z największych zalet jest budowanie dowodu społecznościowego.

Domyślnie zgłoszenia formularzy są widoczne tylko dla administratorów.

Ale pokazywanie referencji lub recenzji produktów, które wykorzystują rzeczywiste opinie klientów, to świetny sposób na budowanie zaufania. W rzeczywistości badanie wykazało, że wyświetlanie recenzji może zwiększyć współczynniki konwersji nawet o 270%.

Możesz również wykorzystać wpisy z formularzy do tworzenia innych przydatnych zasobów dla odwiedzających, takich jak katalogi firm, listy członków lub wydarzenia zgłaszane przez użytkowników w kalendarzu.

W poniższych sekcjach pokażemy Ci, jak wyświetlać wpisy formularzy na stronie front-end Twojej witryny WordPress, korzystając z Formidable Forms i WPForms.

Oto szybki przegląd wszystkich rzeczy, które omówimy w tym przewodniku:

• Displaying WordPress Form Entries by Using Formidable Forms (Easy Way)
  • Krok 1: Konfiguracja Formidable Forms
  • Krok 2: Tworzenie formularza
  • Krok 3: Publikowanie formularza
  • Krok 4: Włączenie widoków wizualnych
  • Krok 5: Wyświetlanie wpisów formularzy na stronie front-end
• Displaying WordPress Form Entries by Using WPForms (Advanced)
  • Krok 1: Instalacja WPForms
  • Step 2: Create a Form and Display Its Entries
• Wskazówka bonusowa: Tworzenie formularzy zgodnych z RODO
• Często zadawane pytania dotyczące wyświetlania wpisów formularzy w WordPress
• Samouczek wideo: Wyświetlanie wpisów formularzy WordPress
• Dodatkowe zasoby dotyczące korzystania z formularzy WordPress

Zacznijmy.

Metoda 1: Wyświetlanie wpisów formularzy WordPress za pomocą Formidable Forms

Najprostszym sposobem na wyświetlanie wpisów z formularzy w WordPress jest użycie Formidable Forms. Jest to popularny plugin formularzy kontaktowych dla WordPress i oferuje wszechstronny kreator formularzy z wieloma funkcjami dostosowywania.

Możesz tworzyć wszelkiego rodzaju formularze, zwłaszcza zaawansowane, takie jak kalendarze wydarzeń, katalogi i kalkulatory.

Dokładnie przetestowaliśmy Formidable Forms, aby poznać wszystkie jego funkcje. Możesz dowiedzieć się, dlaczego go polecamy, w naszej kompletnej recenzji Formidable Forms.

Krok 1: Konfiguracja Formidable Forms

Aby rozpocząć, zainstaluj i aktywuj wtyczkę Formidable Forms na swojej stronie. W tym samouczku użyjemy wersji Formidable Forms Pro, ponieważ zawiera ona dodatek „Visual Views”.

Jeśli potrzebujesz pomocy, zapoznaj się z naszym przewodnikiem jak zainstalować wtyczkę WordPress.

Po aktywacji możesz przejść do Formidable » Forms i kliknąć przycisk „+ Add New” na górze.

Krok 2: Tworzenie formularza

Następnie pojawi się okienko z prośbą o wybranie typu formularza, takiego jak formularz kontaktowy, formularz rejestracji użytkownika, ankieta lub inny.

Wybierz preferowany typ formularza. W tym samouczku utworzymy formularz kontaktowy do zbierania referencji od użytkowników.

Następnie musisz wprowadzić nazwę i opis formularza.

Po zakończeniu po prostu kliknij przycisk „Utwórz”.

Teraz możesz użyć kreatora formularzy, aby dostosować swój formularz.

Formidable oferuje kreator typu „przeciągnij i upuść”, który jest niezwykle łatwy w użyciu. Po prostu wybierz dowolne pole formularza, które chcesz dodać do swojego formularza z opcji po lewej stronie i umieść je w szablonie formularza.

Krok 3: Publikowanie formularza

Po dostosowaniu możesz osadzić formularz w dowolnym miejscu na swojej stronie internetowej.

Wtyczka oferuje wiele opcji dodawania formularza. Najprostszym sposobem jest kliknięcie przycisku „Embed” w kreatorze formularzy na górze, a następnie wybranie istniejącej strony lub utworzenie nowej strony, aby dodać swój formularz.

Alternatywnie, możesz użyć bloku „Formidable Forms” lub bloku kodu skróconego w edytorze treści WordPress, aby osadzić swoje formularze.

W tym samouczku wybierzemy opcję „Utwórz nową stronę”.

Po wejściu do edytora treści zobaczysz, że utworzyłeś dedykowaną stronę dla swojego formularza Formidable Forms.

Zanim opublikujesz, możesz chcieć wyświetlić podgląd, klikając przycisk „Podgląd”.

Gdy będziesz zadowolony z wyglądu, przejdź dalej i opublikuj swoją stronę.

Krok 4: Włączenie widoków wizualnych

Po uruchomieniu formularza i rozpoczęciu otrzymywania wpisów, będziesz chciał zainstalować i aktywować dodatek „Visual Views” w Formidable Forms.

Aby to zrobić, przejdź po prostu do Formidable » Dodatki z Twojego obszaru administracyjnego WordPress. Następnie możesz przewinąć w dół do dodatku „Widoki wizualne” i kliknąć przycisk „Zainstaluj”.

Po aktywacji dodatku możesz przejść do strony Formidable » Widoki.

Następnie kliknij przycisk „+ Dodaj nowy” na górze.

Pojawi się okno podręczne. Tutaj będziesz musiał wybrać typ widoku, taki jak siatka, tabela, kalendarz lub widok klasyczny.

W tym samouczku wybierzemy widok „Siatka”, aby wyświetlić wpisy formularza.

Następnym krokiem jest wybranie źródła danych dla widoku.

Kliknij menu rozwijane „Użyj wpisów z formularza”, aby wybrać swój formularz. Możesz również wprowadzić nazwę widoku.

Po wybraniu źródła danych po prostu kliknij przycisk „Utwórz widok”.

Spowoduje to uruchomienie kreatora widoków w Formidable Forms.

Aby rozpocząć, kliknij przycisk „Kreator układu”.

Następnie musisz wybrać układ do wyświetlania wpisów formularza.

Po prostu wybierz układ z podanych opcji u góry. Możesz dodać wiele układów, aby wyświetlić wpisy formularza.

Po wybraniu układu kliknij przycisk „Zapisz układ”.

Następnie możesz dodać zawartość do kreatora widoków, klikając przycisk „+”. Dostępne są opcje dostosowania układu wpisów formularza oraz dodania treści przed i po wpisach formularza.

Wtyczka daje również opcje zmiany typografii, koloru tła, obramowania i więcej w panelu „Ustawienia stylu siatki” po lewej stronie.

Zobaczysz również krótki kod pod polem „Nazwa widoku”, który będzie potrzebny podczas wyświetlania wpisów z formularza na Twojej stronie.

Bardziej zaawansowane opcje znajdują się w panelu „Ustawienia stylu siatki”. W zaawansowanych ustawieniach możesz ograniczyć liczbę wpisów, rozmiar strony i inne.

Po dostosowaniu widoku nie zapomnij kliknąć przycisku „Aktualizuj” u góry.

Krok 5: Wyświetlanie wpisów formularzy na stronie front-end

Następnie musisz wyświetlić wpisy formularza na swojej stronie WordPress. Aby to zrobić, skopiuj krótki kod podany w sekcji „Nazwa widoku”.

Krótki kod będzie wyglądał tak:

[display-frm-data id=2410]

Po skopiowaniu krótkiego kodu do schowka możesz przejść do dowolnego wpisu lub strony, na której chcesz wyświetlić wpisy formularza.

W edytorze treści po prostu dodaj blok „Krótki kod”.

Teraz dodaj wcześniej skopiowany krótki kod do bloku krótkiego kodu.

Następnie możesz podglądnąć stronę przed jej opublikowaniem.

Możesz teraz odwiedzić swoją stronę internetową, aby zobaczyć wpisy z formularzy w akcji.

Oto jak wyglądają na naszej stronie demonstracyjnej:

Metoda 2: Wyświetlanie wpisów z formularzy WordPress za pomocą WPForms

Możesz również wyświetlać wpisy formularzy za pomocą WPForms, jednego z najlepszych wtyczek formularzy kontaktowych WordPress. Ta metoda jest bardziej zaawansowana, ponieważ wymaga dodania fragmentu kodu PHP do Twojej witryny.

Aby to zrobić, będziesz potrzebować WPForms Pro, który przechowuje wszystkie wpisy formularzy w Twojej bazie danych WordPress. Darmowa wersja WPForms Lite wysyła wpisy tylko e-mailem i ich nie zapisuje, więc nie zadziała w tej metodzie.

W WPBeginner używamy WPForms do tworzenia różnych formularzy, takich jak formularze kontaktowe i coroczne ankiety użytkowników. Dowiedz się więcej o tym w naszej szczegółowej recenzji WPForms.

Krok 1: Instalacja WPForms

Najpierw zarejestrujmy konto WPForms.

Możesz po prostu kliknąć przycisk „Get WPForms Now” na ich stronie internetowej, aby kupić plan i utworzyć konto.

Po wykonaniu tej czynności skopiuj swój klucz licencyjny.

Teraz skonfigurujmy wtyczkę.

Aby to zrobić, musisz zainstalować darmową wersję wtyczki WPForms z repozytorium WordPress, która zapewnia podstawową strukturę. Następnie wprowadzisz swój klucz licencyjny, aby odblokować wszystkie funkcje Pro.

Na początek możesz przejść do Wtyczki » Dodaj nową wtyczkę z obszaru administracyjnego WordPress.

Następnie użyj funkcji wyszukiwania, aby szybko znaleźć wtyczkę WPForms.

W odpowiednim wyniku wyszukiwania kliknij „Zainstaluj teraz” i „Aktywuj”. Więcej szczegółów znajdziesz w naszym przewodniku na temat jak zainstalować wtyczkę WordPress.

Krok 2: Utwórz formularz i wyświetl jego wpisy

Po aktywacji możesz zacząć tworzyć formularz online za pomocą WPForms. Możesz zapoznać się z naszym przewodnikiem krok po kroku na temat tworzenia formularza kontaktowego w WordPress.

Gdy zaczniesz otrzymywać wpisy formularzy, będziesz musiał dodać następujący kod do pliku functions.php swojego motywu.

Należy jednak pamiętać, że zrobienie tego może zepsuć Twoją stronę internetową, jeśli popełnisz nawet niewielki błąd.

Dlatego zawsze zalecamy korzystanie z WPCode, najlepszej wtyczki fragmentów kodu dla WordPress.

Niektóre z naszych marek partnerskich używają tej wtyczki, ponieważ jest to najbezpieczniejszy i najłatwiejszy sposób dodawania niestandardowych fragmentów kodu do WordPress bez ryzyka uszkodzenia witryny. Aby dowiedzieć się więcej o platformie, zapoznaj się z naszą recenzją WPCode.

Nie martw się, nie musisz rozumieć, co robi poniższy kod.

Musisz go tylko skopiować. Następnie, aby wprowadzić kod, zapoznaj się z naszym przewodnikiem na temat jak łatwo dodawać niestandardowy kod w WordPress, aby uzyskać więcej informacji.

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

Po dodaniu kodu do swojej witryny za pomocą darmowej wtyczki WPCode, możesz wyświetlić wpisy swojego formularza. Zrobisz to za pomocą krótkiego kodu, który możesz umieścić na dowolnej stronie lub wpisie.

Podstawowy krótki kod wygląda tak:

[wpforms_entries_table id="FORMID"]

Pamiętaj tylko, aby zastąpić FORMID rzeczywistym identyfikatorem formularza.

Identyfikator formularza można znaleźć, przechodząc do WPForms » Wszystkie formularze, a następnie patrząc na kolumnę Krótki kod.

Dostosowywanie wyświetlania wpisów WPForms (alternatywa)

Możesz również dostosować ten krótki kod, aby zmienić wyświetlane pola i liczbę wyświetlanych wpisów. Jest to bardzo pomocne w tworzeniu przejrzystych, skoncentrowanych wyświetleń.

Oto kilka przydatnych opcji:

• Wyświetl konkretne pola: Aby wyświetlić tylko określone kolumny, dodaj atrybut fields z identyfikatorami pól z Twojego formularza. Na przykład, aby wyświetlić tylko pola o identyfikatorach 1 i 3, użyj:
  [wpforms_entries_table id="123" fields="1,3"]
• Ogranicz liczbę wpisów: Aby wyświetlić tylko 5 najnowszych wpisów, dodaj atrybut number: [wpforms_entries_table id="123" number="5"]

Identyfikator pola („Field ID”) dla dowolnego pola można znaleźć, otwierając swój formularz WordPress w kreatorze WPForms i klikając na to pole. Identyfikator jest wyświetlany na górze panelu ustawień po lewej stronie.

Krok 3: Dodawanie shortcode'u do strony

Aby dodać krótki kod, po prostu utwórz nową stronę lub edytuj istniejącą.

Następnie dodaj blok „Shortcode”.

Następnie po prostu dodaj swój skrócony kod do bloku.

Po wykonaniu tej czynności możesz wyświetlić podgląd swojej strony WordPress i kliknąć przycisk „Opublikuj” u góry.

I to wszystko!

Oto jak wyglądał podgląd naszych wpisów formularza na froncie:

Możesz dalej dostosowywać wyświetlanie za pomocą niestandardowych stylów CSS, jeśli zajdzie taka potrzeba.

Wskazówka bonusowa: Tworzenie formularzy zgodnych z RODO

Ogólne rozporządzenie o ochronie danych (RODO) to prawo Unii Europejskiej, które daje ludziom większą kontrolę nad ich danymi osobowymi. Jeśli Twoja witryna zbiera informacje od użytkowników, zwłaszcza za pośrednictwem formularzy, ważne jest, aby przestrzegać tych zasad.

Aby Twoje formularze były zgodne z RODO, powinieneś:

1. Uzyskaj wyraźną zgodę: Zapytaj użytkowników, czy mogą przechowywać i wykorzystywać ich dane osobowe.
2. Spełniaj żądania dostępu: Pozwól użytkownikom zobaczyć informacje osobiste, które o nich posiadasz.
3. Honoruj żądania usunięcia: Pozwól użytkownikom poprosić o usunięcie ich danych z Twojej witryny.

Aby uzyskać więcej informacji, zapoznaj się z naszym przewodnikiem na temat tworzenia formularzy zgodnych z RODO w WordPressie. Odpowie on na wszystkie Twoje pytania w łatwym do zrozumienia języku.

Często zadawane pytania dotyczące wyświetlania wpisów formularzy w WordPress

Czy mogę wyświetlać wpisy z formularzy bez wtyczki?

Tak, ale jest to bardzo techniczne. Musiałbyś napisać niestandardowy kod PHP i SQL, aby zapytać bazę danych WordPress i wyświetlić wyniki. Korzystanie z wtyczki, takiej jak Formidable Forms, lub metody fragmentów kodu WPForms jest znacznie łatwiejsze i bezpieczniejsze dla większości użytkowników.

Czy bezpieczne jest wyświetlanie danych przesłanych przez użytkowników na mojej stronie?

Może tak, ale musisz uważać. Zawsze uzyskaj wyraźną zgodę użytkowników, zanim udostępnisz ich dane publicznie.

Ponadto bardzo ważne jest moderowanie zgłoszeń, zanim pojawią się na Twojej stronie. Powinieneś przejrzeć każdy wpis, aby zapobiec publikacji nieodpowiednich treści.

Złota zasada: Nigdy nie publikuj publicznie wrażliwych danych osobowych, takich jak pełne imiona i nazwiska, adresy e-mail, numery telefonów ani adresy domowe bez wyraźnego, indywidualnego zezwolenia.

Jak mogę stylizować wygląd wpisów mojego formularza?

Obie metody opisane w tym przewodniku pozwalają na stylizację wpisów. Dodatek Visual Views Formidable Forms ma wbudowane ustawienia dotyczące kolorów, czcionek i układu. Metoda tabeli WPForms tworzy podstawową tabelę HTML, którą można stylizować za pomocą niestandardowego kodu CSS, aby pasował do Twojego motywu.

Samouczek wideo: Wyświetlanie wpisów formularzy WordPress

🎬 Zobacz to w akcji! Obejrzyj nasz samouczek wideo, aby wyświetlić wpisy z formularzy WordPress na swojej stronie:

Dodatkowe zasoby dotyczące korzystania z formularzy WordPress

Mamy nadzieję, że ten artykuł pomógł Ci dowiedzieć się, jak wyświetlać wpisy z formularzy WordPress na swojej stronie.

Następnie możesz również zapoznać się z naszymi innymi pomocnymi przewodnikami na temat:

• Jak utworzyć formularz zamówienia online
• Jak dodać pole kodu kuponu do formularzy WordPress
• Jak dodać autouzupełnianie pól adresowych w WordPress
• Sposoby wykorzystania logiki warunkowej w formularzach WordPress
• Jak zablokowałem 18 000 ataków spamowych na moje formularze WordPress
• Ostateczny przewodnik po korzystaniu z formularzy WordPress

Jeśli podobał Ci się ten artykuł, zasubskrybuj nasz kanał YouTube po samouczki wideo WordPress. Możesz nas również znaleźć na Twitterze i Facebooku.