Jak wyświetlać wpisy formularzy WordPress na twojej witrynie?

Czy chcesz wyświetlać wpisy formularzy WordPress na front-endzie twojej witryny?

Wyświetlanie wpisów z formularzy na front-endzie pozwala na pokazanie importowanych informacji Twoim odwiedzającym. Możesz go użyć do wyświetlania pozytywnych recenzji, tworzenia katalogów, wyświetlania kalendarzy wydarzeń i nie tylko.

W tym artykule pokażemy, jak wyświetlać wpisy formularzy WordPress na twojej witrynie.

Dlaczego warto wyświetlać wpisy formularzy WordPress na frontendzie?

Formularze są świetne do utrzymywania kontaktu z twoimi odwiedzającymi, uzyskiwania uwag i sugestii, pomagania użytkownikom w rozwiązywaniu ich problemów i nie tylko. Wyświetlanie wpisów formularzy na twojej witrynie internetowej WordPress dla odwiedzających może być pomocne w niektórych sytuacjach.

Możesz na przykład wyświetlać referencje i recenzje produktów, które użytkownicy przesyłają za pośrednictwem formularza online. W ten sposób możesz wykorzystać dowód społeczny do budowania zaufania do marki i zwiększania konwersji.

Możesz także wyświetlać wpisy z formularzy, aby utworzyć katalog firm, wyświetlać wydarzenia przesłane przez użytkowników w kalendarzu, wyświetlać statystyki i pokazywać inne ważne informacje zebrane za pośrednictwem formularzy online na twojej witrynie internetowej. To świetny sposób na zapewnienie cennego dowodu społecznego dla twoich produktów i usług, jednocześnie dodając wiarygodności twojej firmie.

Jednak domyślnie, gdy użytkownicy przesyłają formularz na twojej witrynie internetowej WordPress, ich wpisy są przechowywane jako prywatne. Tylko administrator WordPress i inni użytkownicy, którzy mają uprawnienia, mogą zobaczyć wpisy formularza.

Zobaczmy, jak możesz wyświetlać wpisy formularzy na front-endzie twojej witryny internetowej WordPress za pomocą Formidable Forms i WPForms. Możesz kliknąć poniższe odnośniki, aby przejść do twojej preferowanej sekcji.

Film instruktażowy

Jeśli wolisz pisemne instrukcje, czytaj dalej.

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

Najłatwiejszym sposobem wyświetlania wpisów formularzy w WordPress jest użycie Formidable Forms. Jest to popularna wtyczka do formularzy kontaktowych WordPress, która oferuje wszechstronny kreator formularzy z wieloma funkcjami dostosowywania.

Możesz tworzyć wszelkiego rodzaju formularze, takie jak ankiety, quizy, formularze płatności i zaawansowane formularze, takie jak kalendarze wydarzeń, katalogi i kalkulatory.

Najpierw musisz zainstalować i włączyć wtyczkę Formidable Forms na swojej witrynie. Jeśli potrzebujesz pomocy, zapoznaj się z naszym przewodnikiem na temat instalacji wtyczki WordPress.

W tym poradniku będziemy używać wersji Formidable Forms Pro, ponieważ zawiera ona dodatek Visual Views.

Po włączaniu można przejść do Formidable ” Forms i kliknąć przycisk „+ Add New” u góry.

Następnie pojawi się wyskakujące okienko z prośbą o wybranie rodzaju formularza, takiego jak formularz kontaktowy, formularz rejestracji użytkownika, ankieta i inne.

Przejdź dalej i wybierz twój preferowany rodzaj formularza. Na potrzeby tego poradnika stworzymy formularz kontaktowy do zbierania opinii od użytkowników.

Następnie wpisz nazwę i opis formularza.

Gdy skończysz, 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 bardzo łatwy w użyciu. Po prostu wybierz dowolne pole formularza, które chcesz dodać do twojego formularza z opcji po lewej stronie i umieść je w szablonie formularza.

Po dostosowaniu, przejdź dalej i osadzaj formularz w dowolnym miejscu na twojej witrynie internetowej.

Wtyczka oferuje wiele opcji dodawania twojego formularza. Najprostszym sposobem jest kliknięcie przycisku „Osadzaj” w kreatorze formularzy u góry, a następnie wybranie istniejącej strony lub utworzenie nowego utworu, aby dodać twój formularz.

Alternatywnie możesz również użyć bloku Formidable Forms lub krótkiego kodu w edytorze treści WordPress, aby osadzać twoje formularze.

Następnie możesz nadać nazwę twojej stronie i wyświetlić jej podgląd.

Gdy będziesz zadowolony z wyglądu twojej strony, opublikuj ją.

Po uruchomieniu twojego formularza i rozpoczęciu otrzymywania wpisów, musisz zainstalować i włączyć dodatek Visual Views w Formidable Forms.

Aby to zrobić, po prostu przejdź do Formidable ” Add-Ons z twojego kokpitu WordPress. Następnie przewiń w dół do dodatku „Visual Views” i kliknij przycisk „Zainstaluj”.

Po włączeniu dodatku możesz przejść do Formidable ” Views z twojego kokpitu WordPress.

Następnie wystarczy kliknąć przycisk „+ Utwórz nowy” u góry.

Następnie pojawi się wyskakujące okno, w którym należy wybrać rodzaj widoku. Wtyczka oferuje widok siatki, tabeli, kalendarza i klasyczny.

W tym poradniku użyjemy widoku „Grid”, aby wyświetlić wpisy formularza.

Następnie należy wybrać źródło danych dla twojego widoku.

Kliknij menu rozwijane „Użyj wpisów z formularza”, aby wybrać twój formularz. Istnieje również opcja wpisz nazwę widoku.

Po wybraniu twojego źródła danych wystarczy kliknąć przycisk „Utwórz widok”.

Spowoduje to uruchomienie kreatora widoków w Formidable Forms.

Aby rozpocząć, kliknij przycisk „Kreator układów”.

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

Wystarczy wybrać układ z podanych opcji u góry. Możesz dodać wiele układów do wyświetlania wpisów formularza.

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

Następnie można dodać treść do konstruktora widoku, klikając przycisk „+”. Dostępne są opcje dostosowania układu wpisów formularza i dodawania treści przed i po wpisach formularza.

Wtyczka oferuje również opcje zmiany typografii, koloru tła, obramowania i inne w panelu ustawień stylu siatki po twojej lewej stronie.

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

W panelu ustawień stylu siatki dostępnych jest więcej zaawansowanych opcji. W ustawieniach zaawansowanych można ograniczyć liczbę wpisów, rozmiar strony i nie tylko.

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

Następnie musisz wyświetlić twoje wpisy formularza na swojej witrynie internetowej WordPress. Aby to zrobić, skopiuj krótki kod podany pod nazwą widoku.

Krótki kod będzie wyglądał następująco:

[display-frm-data id=2410]

Następnie przejdź do dowolnego wpisu lub strony, na której chcesz wyświetlać wpisy formularzy. Gdy znajdziesz się w edytorze treści, po prostu dodaj blok „Krótki kod”.

Teraz wpisz skopiowany wcześniej krótki kod w bloku shortcode.

Następnie można wyświetlić podgląd strony i opublikować ją.

Możesz teraz przejść na twoją witrynę internetową, aby zobaczyć wpisy formularza w działaniu.

Oto jak wyglądają one na naszej demonstracyjnej witrynie internetowej:

Wyświetlanie wpisów formularzy WordPress za pomocą WPForms

Innym sposobem wyświetlania wpisów formularzy na front-endzie twojej witryny internetowej WordPress jest WPForms. Jednak ta metoda wymaga edycji kodu i jest zalecana dla zaawansowanych użytkowników, którzy mają wiedzę na temat kodowania.

WPForms to najlepsza wtyczka do formularzy kontaktowych dla WordPressa, która umożliwia tworzenie różnego rodzaju formularzy za pomocą kreatora formularzy typu „przeciągnij i upuść”.

Najpierw musisz zainstalować i włączyć wtyczkę WPForms. Aby uzyskać więcej informacji, zapoznaj się z naszym przewodnikiem na temat instalacji wtyczki WordPress.

Następnie należy utworzyć formularz internetowy za pomocą WPForms. Możesz sprawdzić nasz przewodnik krok po kroku, jak utworzyć formularz kontaktowy w WordPress.

Gdy zaczniesz otrzymywać wpisy formularzy, będziesz musiał wpisz poniższy kod do pliku functions.php twojego motywu. Wykonanie tej czynności może zepsuć twoją witrynę internetową, jeśli popełnisz nawet mały błąd, dlatego zalecamy użycie WPCode.

Więcej informacji można znaleźć w naszym przewodniku na temat łatwego dodawania własnego kodu w 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' );

Po dodaniu kodu do twojej witryny internetowej za pomocą darmowej wtyczki WPCode, będziesz musiał wpisz następujący krótki kod na dowolnej stronie lub wpisie, aby wyświetlić wpisy formularza.

[wpforms_entries_table id="FORMID"]

Wystarczy zastąpić FORMID identyfikatorem twojego formularza.

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

Aby dodać krótki kod, wystarczy utworzyć nową stronę lub edytować istniejącą.

Następnie dodaj blok „Krótki kod”.

Po dodaniu bloku, po prostu wpisz twój krótki kod.

Teraz wyświetl podgląd twojej strony WordPress i kliknij przycisk „Opublikuj” u góry.

Oto jak wyglądał podgląd wpisów naszego formularza na front-endzie:

Wyświetlacz można dodatkowo dostosować za pomocą własnych stylów CSS.

Mamy nadzieję, że ten artykuł pomógł ci dowiedzieć się, jak wyświetlać wpisy formularzy WordPress na twojej witrynie. Możesz również zapoznać się z naszym przewodnikiem na temat tworzenia własnego motywu WordPress lub naszymi typami ekspertów dla najlepszych wtyczek formularzy kontaktowych dla WordPress.

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.