Wie man WordPress-Formulareinträge auf der Website anzeigt

Möchten Sie Ihre WordPress-Formulareinträge auf dem Frontend Ihrer Website anzeigen?

Die Anzeige von Formulareinträgen im Frontend ermöglicht es Ihnen, Ihren Besuchern wichtige Informationen zu zeigen. Sie können damit positive Bewertungen anzeigen, Verzeichnisse erstellen, Veranstaltungskalender anzeigen und vieles mehr.

In diesem Artikel zeigen wir Ihnen, wie Sie WordPress-Formulareinträge auf Ihrer Website anzeigen können.

Warum WordPress-Formulareingaben im Frontend anzeigen?

Formulare eignen sich hervorragend, um mit Ihren Besuchern in Kontakt zu bleiben, Feedback und Vorschläge zu erhalten, Benutzern bei der Lösung ihrer Probleme zu helfen und vieles mehr. Die Anzeige von Formulareinträgen auf Ihrer WordPress-Website für Ihre Besucher kann in bestimmten Situationen hilfreich sein.

Sie können zum Beispiel Erfahrungsberichte und Produktbewertungen anzeigen, die Nutzer über ein Online-Formular einreichen. Auf diese Weise können Sie Social Proof nutzen, um das Vertrauen in Ihre Marke zu stärken und die Konversionsrate zu erhöhen.

Sie können auch Formulareinträge anzeigen, um ein Unternehmensverzeichnis zu erstellen, von Nutzern eingereichte Veranstaltungen in einem Kalender anzuzeigen, Statistiken darzustellen und andere wichtige Informationen, die über Online-Formulare gesammelt wurden, auf Ihrer Website anzuzeigen. Dies ist eine großartige Möglichkeit, wertvolle soziale Beweise für Ihre Produkte und Dienstleistungen zu liefern und Ihrem Unternehmen Glaubwürdigkeit zu verleihen.

Wenn Benutzer jedoch ein Formular auf Ihrer WordPress-Website einreichen, bleiben ihre Eingaben standardmäßig privat. Nur der WordPress-Administrator und andere Benutzer mit entsprechender Berechtigung können die Formulareinträge sehen.

Sehen wir uns an, wie Sie Formulareingaben im Frontend Ihrer WordPress-Website mit Formidable Forms und WPForms anzeigen können. Sie können auf die Links unten klicken, um zum gewünschten Abschnitt zu springen.

Video-Anleitung

Wenn Sie eine schriftliche Anleitung bevorzugen, lesen Sie einfach weiter.

Anzeige von WordPress-Formulareinträgen mit Formidable Forms

Der einfachste Weg, Formulareinträge in WordPress anzuzeigen, ist die Verwendung von Formidable Forms. Es ist ein beliebtes WordPress-Kontaktformular-Plugin und bietet einen All-in-One-Formular-Builder mit vielen Anpassungsfunktionen.

Sie können alle Arten von Formularen wie Umfragen, Quiz, Zahlungsformulare und erweiterte Formulare wie Veranstaltungskalender, Verzeichnisse und Rechner erstellen.

Zunächst müssen Sie das Formidable Forms-Plugin auf Ihrer Website installieren und aktivieren. Wenn Sie Hilfe benötigen, lesen Sie bitte unsere Anleitung zur Installation eines WordPress-Plugins.

Für dieses Tutorial verwenden wir die Version Formidable Forms Pro, weil sie das Addon Visual Views enthält.

Nach der Aktivierung können Sie zu Formidable “ Formulare gehen und oben auf die Schaltfläche „+ Neu hinzufügen“ klicken.

Danach erscheint ein Popup-Fenster, in dem Sie aufgefordert werden, einen Formulartyp auszuwählen, z. B. ein Kontaktformular, ein Benutzerregistrierungsformular, eine Umfrage usw.

Wählen Sie nun den gewünschten Formulartyp aus. Für dieses Tutorial werden wir ein Kontaktformular erstellen, um Erfahrungsberichte von Nutzern zu sammeln.

Als nächstes müssen Sie einen Formularnamen und eine Beschreibung eingeben.

Wenn Sie fertig sind, klicken Sie einfach auf die Schaltfläche „Erstellen“.

Jetzt können Sie den Formularersteller verwenden, um Ihr Formular anzupassen.

Formidable bietet einen Drag-and-Drop-Builder, der sehr einfach zu bedienen ist. Wählen Sie einfach ein beliebiges Formularfeld, das Sie Ihrem Formular hinzufügen möchten, aus den Optionen auf der linken Seite aus und platzieren Sie es in der Formularvorlage.

Nach der Anpassung können Sie das Formular überall auf Ihrer Website einbetten.

Das Plugin bietet mehrere Optionen zum Hinzufügen Ihres Formulars. Am einfachsten ist es, oben im Formularersteller auf die Schaltfläche „Einbetten“ zu klicken und dann eine bestehende Seite auszuwählen oder eine neue Seite zu erstellen, um Ihr Formular hinzuzufügen.

Alternativ können Sie auch einen Formidable Forms-Block oder einen Shortcode-Block im WordPress Content Editor verwenden, um Ihre Formulare einzubetten.

Anschließend können Sie Ihrer Seite einen Namen geben und eine Vorschau anzeigen.

Wenn Sie mit dem Aussehen Ihrer Seite zufrieden sind, können Sie sie veröffentlichen.

Nachdem Ihr Formular live ist und Sie beginnen, Einträge zu erhalten, müssen Sie das Visual Views Addon in Formidable Forms installieren und aktivieren.

Gehen Sie dazu einfach in Ihrem WordPress-Dashboard zu Formidable “ Add-Ons. Scrollen Sie dann nach unten zum Addon „Visual Views“ und klicken Sie auf die Schaltfläche „Installieren“.

Sobald das Addon aktiv ist, können Sie in Ihrem WordPress-Dashboard zu Formidable “ Views gehen.

Klicken Sie dann einfach oben auf die Schaltfläche „+ Neu hinzufügen“.

Als Nächstes wird ein Popup-Fenster angezeigt, in dem Sie einen Ansichtstyp auswählen müssen. Das Plugin bietet ein Raster, eine Tabelle, einen Kalender und eine klassische Ansicht, die Sie verwenden können.

In diesem Tutorial verwenden wir die „Grid“-Ansicht, um Formulareinträge anzuzeigen.

Danach müssen Sie eine Datenquelle für Ihre Ansicht auswählen.

Klicken Sie auf das Dropdown-Menü „Use Entries from Form“, um Ihr Formular auszuwählen. Es gibt auch die Möglichkeit, einen Namen für die Ansicht einzugeben.

Nachdem Sie Ihre Datenquelle ausgewählt haben, klicken Sie einfach auf die Schaltfläche „Ansicht erstellen“.

Dadurch wird der View Builder in Formidable Forms gestartet.

Um zu beginnen, klicken Sie auf die Schaltfläche „Layout Builder“.

Als nächstes müssen Sie ein Layout für die Anzeige Ihrer Formulareinträge auswählen.

Wählen Sie einfach ein Layout aus den oben angegebenen Optionen aus. Sie können mehrere Layouts hinzufügen, um Formulareinträge anzuzeigen.

Nachdem Sie ein Layout ausgewählt haben, klicken Sie auf die Schaltfläche „Layout speichern“.

Anschließend können Sie dem View Builder Inhalte hinzufügen, indem Sie auf die Schaltfläche „+“ klicken. Es gibt Optionen, um das Layout der Formulareinträge anzupassen und Inhalte vor und nach den Formulareinträgen hinzuzufügen.

Das Plugin bietet außerdem Optionen zum Ändern der Typografie, der Hintergrundfarbe, der Umrandung und mehr unter dem Panel Grid Style Settings auf der linken Seite.

Unter dem Feld Ansichtsname sehen Sie außerdem einen Shortcode, den Sie benötigen, wenn Sie Formulareinträge auf Ihrer Website anzeigen.

Im Bereich Rastereinstellungen gibt es weitere erweiterte Optionen. In den erweiterten Einstellungen können Sie die Anzahl der Einträge, die Seitengröße und mehr begrenzen.

Wenn Sie die Ansicht angepasst haben, vergessen Sie nicht, oben auf die Schaltfläche „Aktualisieren“ zu klicken.

Als nächstes müssen Sie Ihre Formulareinträge auf Ihrer WordPress-Website anzeigen. Kopieren Sie dazu den Shortcode, der unter dem Namen der Ansicht angegeben ist.

Der Shortcode wird wie folgt aussehen:

[display-frm-data id=2410]

Gehen Sie dann zu einem beliebigen Beitrag oder einer Seite, auf der Sie Formulareinträge anzeigen möchten. Im Inhaltseditor fügen Sie einfach einen „Shortcode“-Block hinzu.

Geben Sie nun den zuvor kopierten Shortcode in den Shortcode-Block ein.

Danach können Sie eine Vorschau der Seite anzeigen und sie veröffentlichen.

Sie können nun Ihre Website besuchen, um die Formulareinträge in Aktion zu sehen.

So sehen sie auf unserer Demo-Website aus:

Anzeige von WordPress-Formular-Einträgen mit WPForms

Eine weitere Möglichkeit, Formulareingaben im Frontend Ihrer WordPress-Website anzuzeigen, ist WPForms. Diese Methode erfordert jedoch die Bearbeitung von Code und wird für fortgeschrittene Benutzer empfohlen, die über Kenntnisse in der Programmierung verfügen.

WPForms ist das beste Kontaktformular-Plugin für WordPress und ermöglicht es Ihnen, verschiedene Arten von Formularen mit einem Drag-and-Drop-Formular-Builder zu erstellen.

Zunächst müssen Sie das WPForms-Plugin installieren und aktivieren. Weitere Einzelheiten finden Sie in unserer Anleitung zur Installation eines WordPress-Plugins.

Als nächstes müssen Sie ein Online-Formular mit WPForms erstellen. In unserer Schritt-für-Schritt-Anleitung erfahren Sie, wie Sie ein Kontaktformular in WordPress erstellen.

Sobald Sie Formulareinträge erhalten, müssen Sie den folgenden Code in die Datei functions.php Ihres Themes eingeben. Dies kann Ihre Website zerstören, wenn Sie auch nur einen kleinen Fehler machen, daher empfehlen wir die Verwendung von WPCode.

Weitere Informationen finden Sie in unserem Leitfaden für das einfache Hinzufügen von benutzerdefiniertem Code 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' );

Sobald Sie den Code mit dem kostenlosen WPCode-Plugin zu Ihrer Website hinzugefügt haben, müssen Sie den folgenden Shortcode in eine beliebige Seite oder einen Beitrag einfügen, um Formulareinträge anzuzeigen.

[wpforms_entries_table id="FORMID"]

Ersetzen Sie einfach die FORMID durch die ID Ihres Formulars.

Sie finden die Formular-ID, indem Sie zu WPForms “ All Forms gehen und dann die Spalte Shortcode betrachten.

Um einen Shortcode hinzuzufügen, erstellen Sie einfach eine neue Seite oder bearbeiten Sie eine bestehende Seite.

Als nächstes fügen Sie einen ‚Shortcode‘-Block hinzu.

Nachdem Sie den Block hinzugefügt haben, geben Sie einfach Ihren Shortcode ein.

Zeigen Sie nun Ihre WordPress-Seite in der Vorschau an und klicken Sie oben auf die Schaltfläche „Veröffentlichen“.

So sieht die Vorschau unserer Formulareinträge auf dem Frontend aus:

Sie können die Anzeige bei Bedarf mit benutzerdefinierten CSS-Stilen weiter anpassen.

Wir hoffen, dass dieser Artikel Ihnen geholfen hat zu lernen, wie Sie WordPress-Formulareinträge auf Ihrer Website anzeigen können. Vielleicht interessieren Sie sich auch für unsere Anleitung zur Erstellung eines benutzerdefinierten WordPress-Themes oder unsere Expertenauswahl der besten Kontaktformular-Plugins für WordPress.

Wenn Ihnen dieser Artikel gefallen hat, dann abonnieren Sie bitte unseren YouTube-Kanal für WordPress-Videotutorials. Sie können uns auch auf Twitter und Facebook finden.