Wie man WordPress-Formulareinträge auf der Website anzeigt

Wenn Sie Ihre WordPress-Formulareinträge im Frontend Ihrer Website anzeigen, kann diese interaktiver und ansprechender gestaltet werden.

Auf diese Weise können Sie wichtige Informationen genau dort anzeigen, wo die Besucher sie sehen können. Sie können diese Funktion zum Beispiel nutzen, um positive Rezensionen hervorzuheben, Verzeichnisse zu erstellen, Veranstaltungskalender anzuzeigen, und vieles mehr.

In diesem Artikel führen wir Sie durch die Schritte, um WordPress-Formulareinträge auf Ihrer Website anzuzeigen.

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 Rezensionen anzeigen, die Benutzer ü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, werden ihre Einträge standardmäßig privat gehalten. Nur der WordPress-Administrator und andere Benutzer, die die Berechtigung haben, können die Formulareinträge anzeigen.

In den folgenden Abschnitten zeigen wir Ihnen, wie Sie mit Formidable Forms und WPForms Formulareingaben im Frontend Ihrer WordPress-Website anzeigen können. Sie können auf die Links unten klicken, um zum gewünschten Abschnitt zu springen:

Sind Sie bereit? Beginnen wir mit dem Video-Tutorial.

Video-Anleitung

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

Methode 1: 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 Plugin für WordPress-Kontaktformulare und bietet einen All-in-One-Formular-Builder mit vielen Funktionen zur individuellen Anpassung.

Sie können alle Arten von Formularen erstellen, z. B. Befragungen, Quizfragen, Zahlungsformulare und erweiterte Formulare wie Veranstaltungskalender, Verzeichnisse und Rechner.

Um loszulegen, installieren und aktivieren Sie das Plugin Formidable Forms auf Ihrer Website. 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, da sie das Add-on „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 Formular zur Registrierung von Benutzern, eine Befragung oder etwas anderes.

Wählen Sie nun den gewünschten Formulartyp aus. In diesem Tutorial werden wir ein Kontaktformular erstellen, um Erfahrungsberichte von Benutzern 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“.

Mit dem Form Builder können Sie nun Ihr Formular individuell anpassen.

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.

Nachdem Sie das Formular individuell angepasst haben, können Sie es überall auf Ihrer Website einbetten.

Das Plugin bietet mehrere Optionen zum Hinzufügen Ihres Formulars. Am einfachsten ist es, oben im Formular-Builder auf den Button „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 einen „Formidable Forms“-Block oder einen Shortcode-Block im WordPress Content Editor verwenden, um Ihre Formulare einzubetten.

Für diesen Lehrgang wählen wir die Option „Neue Seite erstellen“.

Sobald Sie sich im Editor befinden, sehen Sie, dass Sie eine eigene Seite für Ihr Formidable Forms-Formular erstellt haben.

Bevor Sie es in Betrieb nehmen, können Sie es durch Anklicken des Buttons „Vorschau“ in der Vorschau betrachten.

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

Nachdem Ihr Formular in Betrieb ist und Sie erste Einträge erhalten haben, sollten Sie das Add-on ‚Visual Views‘ in Formidable Forms installieren und aktivieren.

Gehen Sie dazu einfach von Ihrem WordPress-Dashboard aus zu Formidable “ Add-ons. Scrollen Sie dann nach unten zum Add-on „Visual Views“ und klicken Sie auf den Button „Installieren“.

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

Klicken Sie dann oben auf den Button „+ Neu hinzufügen“.

Ein Popup-Fenster wird angezeigt. Hier müssen Sie einen Ansichtstyp auswählen, z. B. Raster, Tabelle, Kalender und klassische Ansicht.

Für dieses Tutorial wählen wir die Anzeige „Raster“, um die Formulareinträge anzuzeigen.

Der nächste Schritt ist die Auswahl einer Datenquelle für Ihre Aufrufe.

Klicken Sie auf das Dropdown-Menü „Use Entries from Form“, um Ihr Formular auszuwählen. Sie können auch einen Namen für die Anzeige eingeben.

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“.

Durch Klicken auf den „+“-Button können Sie dann Inhalte in den Anzeigenersteller einfügen. Es gibt Optionen zum Anpassen des Layouts der Formulareinträge und zum Hinzufügen von Inhalten vor und nach den Formulareinträgen.

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

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

Im Bereich „Raster-Stil-Einstellungen“ gibt es weitere erweiterte Optionen. In den erweiterten Einstellungen können Sie die Anzahl der Einträge, die Größe der Seiten und vieles 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 „Name der Ansicht“ angegeben ist.

Der Shortcode wird wie folgt aussehen:

[display-frm-data id=2410]

Sobald Sie den Shortcode in die Zwischenablage kopiert haben, können Sie zu jedem Beitrag oder jeder Seite gehen, auf der Sie Formulareinträge veröffentlichen möchten. Fügen Sie im Editor für den Inhalt einfach einen Shortcode-Block hinzu.

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

Danach sollten Sie die Seite in der Vorschau anzeigen, bevor Sie 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:

Methode 2: 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-Formularersteller 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.

Nach der Aktivierung können Sie damit beginnen, ein Online-Formular mit WPForms zu erstellen. In unserer Schritt-für-Schritt-Anleitung erfahren Sie , wie Sie ein Kontaktformular in WordPress erstellen.

Sobald Sie die ersten Formulareinträge erhalten, müssen Sie den folgenden Code in die Datei functions.php Ihres Themes eingeben. Beachten Sie jedoch, dass dies Ihre Website zerstören kann, wenn Sie auch nur einen kleinen Fehler machen. Wir empfehlen daher 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.

Kopieren Sie diesen Shortcode einfach in die Zwischenablage:

[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“.

Und das ist alles, was es zu tun gibt!

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

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

Bonus-Tipp: Erstellen von DSGVO-konformen Formularen

Die Allgemeine Datenschutzverordnung (DSGVO) ist ein Gesetz in der Europäischen Union, das am 25. Mai 2018 in Kraft getreten ist. Es geht darum, den Menschen in der EU mehr Kontrolle über ihre persönlichen Daten zu geben und sicherzustellen, dass Unternehmen mit diesen Daten richtig umgehen.

Wenn Sie eine WordPress Website haben, sammelt diese wahrscheinlich Benutzerdaten, insbesondere über Formulare. Um sicherzustellen, dass Ihre Formulare die DSGVO-Regeln einhalten, sollten Sie dies tun:

1. Holen Sie die ausdrückliche Zustimmung ein: Fragen Sie die Benutzer, ob sie mit der Speicherung und Verwendung ihrer persönlichen Daten einverstanden sind.
2. Zugriffsanfragen: Lassen Sie Benutzer die persönlichen Daten einsehen, die Sie über sie haben.
3. Löschen von Anfragen: Erlauben Sie Benutzern, das Löschen ihrer Daten von Ihrer Website zu verlangen.

Weitere Einzelheiten finden Sie in unserem Leitfaden zum Erstellen von DSGVO-konformen Formularen in WordPress. Darin werden alle Ihre Fragen in leicht verständlicher Sprache beantwortet.

Wir hoffen, dass dieser Artikel Ihnen geholfen hat, zu erfahren, wie Sie WordPress-Formulareinträge auf Ihrer Website anzeigen können. Vielleicht interessieren Sie sich auch für unsere Anleitungen zum Erstellen eines Online-Bestellformulars und zum Hinzufügen eines Gutscheincode-Feldes zu Ihren Formularen.

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.