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 formularza oznacza pobranie danych przesłanych przez odwiedzających i pokazanie ich na publicznych stronach Twojej witryny WordPress. Jedną z największych zalet jest budowanie dowodu społecznego.

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

Ale pokazywanie referencji lub recenzji produktów, które wykorzystują prawdziwe 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 formularza do tworzenia innych przydatnych zasobów dla odwiedzających, takich jak katalogi firm, listy członków lub wydarzenia przesłane 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:

Zacznijmy.

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

Najłatwiejszym sposobem wyświetlania wpisów formularza w WordPress jest użycie Formidable Forms. Jest to popularny wtyczka formularza kontaktowego 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. W naszej kompletnej recenzji Formidable Forms możesz zobaczyć, dlaczego go polecamy.

Krok 1: Konfiguracja Formidable Forms

Aby rozpocząć, zainstalujmy i aktywujmy wtyczkę Formidable Forms na Twojej 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 na temat instalacji wtyczki 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ę okno podręczne 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 krótkiego 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ź do Formidable » Dodatki z Twojego obszaru administracyjnego WordPress. Następnie przewiń w dół do dodatku „Visual Views” i kliknij 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 oferuje również opcje zmiany typografii, koloru tła, obramowania i innych 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 będziesz musiał wyświetlić swoje wpisy formularza na swojej witrynie WordPress. Aby to zrobić, skopiuj kod krótki podany pod „Nazwą widoku”.

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

[display-frm-data id=2410]

Po skopiowaniu kodu krótkiego 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 formularza za pomocą WPForms, jednej 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 formularza w 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 roczne ankiety użytkowników. Dowiedz się więcej w naszej szczegółowej recenzji WPForms.

Krok 1: Instalacja WPForms

Najpierw zarejestrujmy konto WPForms.

Możesz po prostu kliknąć przycisk „Kup WPForms Teraz” 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ć bezpłatną 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”. Aby uzyskać więcej szczegółów, zapoznaj się z naszym przewodnikiem na temat instalowania wtyczki 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 polecamy używanie WPCode, najlepszej wtyczki do 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 uzyskać głębszy wgląd w platformę, 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 łatwego dodawania niestandardowego kodu 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ą bezpłatnej wtyczki WPCode, możesz wyświetlić wpisy z 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"]

Możesz znaleźć „ID pola” dla dowolnego pola, otwierając swój formularz WordPress w kreatorze WPForms i klikając to pole. ID jest wyświetlane 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 krótki 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 szczegółów, możesz zapoznać się z naszym przewodnikiem na temat tworzenia formularzy zgodnych z RODO w WordPress. 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 pobrać dane z bazy danych WordPress i wyświetlić wyniki. Używanie 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 być, ale musisz być ostrożny. Zawsze uzyskaj wyraźną zgodę od 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 w tym przewodniku pozwalają na stylizację wpisów. Dodatek Visual Views firmy 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 CSS, aby pasowała 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.