Contact Form 7 Formular als Beitrag in WordPress speichern

Das WordPress-Plugin Contact Form 7 (CF7) ist eine beliebtes Plugin zum Erstellen von Kontaktformularen auf WordPress-Webseiten. Es ermöglicht Benutzern, benutzerdefinierte Formulare mit verschiedenen Feldern zu erstellen und sie auf ihren Seiten oder Beiträgen einzubetten.

In diesem Artikel zeige ich dir, wie man die Daten, die von einem CF7-Formular gesendet werden, automatisch als Beitrag in WordPress speichern kann. Dies ist besonders nützlich, wenn du beispielsweise ein Bewertungsformular oder ein Formular für Benutzerfeedback auf deiner Website hast und diese Daten direkt als Beiträge veröffentlichen möchtest.

* Werbung/Affiliate Link

Erstelle dein Contact Form 7 Formular

Zuerst musst du das CF7-Formular erstellen, dass die Daten sammeln soll, die du als Beiträge speichern möchtest. Wenn du das Plugin noch nicht installiert hast, kannst du es dir unter „Plugins“ > „Neue Plugins hinzufügen“ herunterladen und aktivieren. Im Anschluss unter „Formulare“ > „Erstellen“ ein neues Formular erstellen. Füge die erforderlichen Felder hinzu, wir verwenden in unserem Tutorial folgende Felder:

• Überschrift
• Nachricht
• Vorname
• Nachname
• E-Mail
• Link

Contact Form 7 – Formular Beispiel

<label> Überschrift deines Beitrags [text* blog-title] </label>
<label> Deine Nachricht [textarea* blog-message] </label>
<label> Vorname [text* first-name] </label>
<label> Nachname [text* last-name] </label>
<label> Deine E-Mail-Adresse [email* user-email] </label>
<label> Link [text* user-link] </label>
[submit "Senden"]

Funktion zum Speichern der Daten als Beitrag

Hier kommt PHP ins Spiel. Du musst eine benutzerdefinierte PHP-Funktion erstellen, die die Daten aus dem CF7-Formular extrahiert und sie als neuen Beitrag in WordPress speichert. Diese Funktion kann als Teil deines WordPress-Themes in der functions.php oder als benutzerdefiniertes Plugin implementiert werden. Wir entscheiden uns für ein Plugin aus folgenden Gründen:

1. Wiederverwendbarkeit: Wenn du die Funktionalität in einem Plugin implementierst, kannst du es leichter auf anderen WordPress-Websites verwenden, indem du das Plugin einfach installierst und aktivierst. Wenn du die Funktionalität in der functions.php deines Themes implementierst, ist sie spezifisch für dieses Theme und muss kopiert und angepasst werden, wenn du sie auf anderen Websites verwenden möchtest.
2. Updates und Wartung: Plugins können separat aktualisiert und gewartet werden, unabhängig von deinem Theme. Dies erleichtert die Verwaltung und Aktualisierung der Funktionalität. Wenn du die Funktionalität direkt in der functions.php deines Themes implementierst, musst du darauf achten, dass sie bei Theme-Updates nicht verloren geht oder konfliktfrei bleibt.
3. Übersichtlichkeit und Organisation: Die Auslagerung der Funktionalität in ein Plugin kann deinen Code übersichtlicher machen, insbesondere wenn es sich um komplexe oder umfangreiche Funktionen handelt. Plugins haben ihre eigenen Dateien und Ordnerstruktur, während die functions.php manchmal unübersichtlich werden kann, wenn zu viele Funktionen darin enthalten sind.

Für das speichern verwenden wir Hooks von CF7

CF7 bietet Hooks (Ereignisse), die es ermöglichen, benutzerdefinierten Code auszuführen, bevor oder nachdem das Formular abgeschickt wird. Du kannst diese Hooks verwenden, um deine benutzerdefinierte Funktion aufzurufen, um die Formulardaten zu verarbeiten.

Im Plugin Ordner deiner WordPress Installation erstellst du dir einen Ordner, ich nenne ihn:

cf7-to-post

In dem Ordner erstellen wir uns noch ein PHP-File mit dem selben Namen wie der Ordner. Wir öffnen das File mit dem Editor deiner Wahl und fügen als erstes folgende Zeilen hinzu:

<?php

/*
Plugin Name: Contact Form 7 to Post
Description: Saves Contact Form 7 submissions as posts.
Version: 1.0
Author: Dein Name
*/

Wenn du die Datei speicherst könntest du das Plugin auch schon im Backend aktivieren. Allerdings wird noch nichts ausgeführt. Als nächstes fügen wir den CF7 Hook hinzu:

add_action( 'wpcf7_before_send_mail', 'save_form_to_post' );

Der Hook bewirkt dass nachdem das Formular abgeschickt wurde und bevor die E-Mail verschickt wird, eine benutzerdefinierte Funktion „save_form_to_post“ verarbeitet werden soll.

Speichere die Daten als Beitrag

Innerhalb der benutzerdefinierten Funktion musst du die Formulardaten verarbeiten und sie dann mit Hilfe der WordPress-Funktionen wp_insert_post() und update_post_meta() als neuen Beitrag speichern. Und so geht es:

function save_form_to_post( $contact_form ) {
    $form_id = $contact_form->id(); // Überprüfe, ob das Formular die richtige ID hat
    if ( $form_id == 25 ) { // Die Zahl 25 durch die ID deines Contact Form 7-Formulars ersetzen - Du findest die ID wenn du dein Formular bearbeitest oben in der Adresszeile z.B. post=25
        
        $submission = WPCF7_Submission::get_instance(); // Hole die eingereichten Formulardaten
        if ( $submission ) {
            $posted_data = $submission->get_posted_data();
            $safe_posted_data = array_map( 'sanitize_text_field', $posted_data );

            // Erstelle einen neuen Beitrag
            $postarr = [
                'post_title'   => $safe_posted_data['blog-title'], // Die Überschrift
                'post_content' => wp_kses_post( $safe_posted_data['blog-message'] ), // Inhalt
                'post_type'    => 'post', // Hier kannst du den Beitragstyp anpassen'
                'post_status'  => 'pending', // Status auf 'pending' setzen, damit ein Administrator ihn noch prüfen kann
            ];

            // Beitrag erstellen
            $post_id = wp_insert_post( $postarr );

            // Wenn der Beitrag erfolgreich erstellt wurde, die benutzerdefinierten Felder hinzufügen und befüllen
            if ( $post_id ) {
                $custom_fields = [
                    'first_name' => sanitize_text_field( $safe_posted_data['first-name']),
                    'last_name' => sanitize_text_field( $safe_posted_data['last-name']),
                    'user_email' => sanitize_text_field( $safe_posted_data['user-email']),
                    'link' => sanitize_text_field( $safe_posted_data['user-link']),
                ];

                foreach ( $custom_fields as $key => $value ) {
                    update_post_meta( $post_id, $key, $value );
                }
            }
        }
    }
}

Im Code habe ich schon einige Kommentare platziert die den Code verständlicher machen. Allerdings muss ich auf Zeile 8 genauer eingehen, diese ist sehr wichtig wenn es um Sicherheit geht.

Die Verwendung von array_map( 'sanitize_text_field', $posted_data ) bewirkt eine Bereinigung der Daten in dem assoziativen Array $posted_data. Folgend noch etwas genauer erklärt:

1. Funktionsaufruf (sanitize_text_field):
   • sanitize_text_field ist eine WordPress-Funktion, die Texteingaben bereinigt, indem sie unerwünschte Zeichen entfernt und den Text für die sichere Verwendung in HTML oder im Datenbankkontext vorbereitet.
2. Anwendung auf jedes Element des Arrays:
   • array_map wendet die Funktion sanitize_text_field auf jedes Element des Arrays $posted_data an. Das bedeutet, dass jeder Wert im Array durch sanitize_text_field verarbeitet wird.
3. Rückgabewert:
   • Das Ergebnis ist ein neues Array ($safe_posted_data), das die gleichen Schlüssel wie $posted_data enthält, jedoch mit den Werten, die durch sanitize_text_field bereinigt wurden.

Diese Technik wird typischerweise verwendet, um Eingabedaten aus Formularen oder anderen Quellen zu bereinigen, um die Daten vor Cross-Site Scripting (XSS) und anderen potenziellen Sicherheitsproblemen zu schützen. Es hilft auch, sicherzustellen, dass die Daten sicher in der Datenbank gespeichert oder anderweitig verwendet werden können, ohne unerwünschte Auswirkungen zu haben.

Wir haben also jetzt ein Formular und die Verarbeitung der Daten aus dem Formular. Was jetzt noch zu tun ist:

• Wenn noch nicht passiert, unser Plugin aktivieren
• Im Formular die Meldungen und die E-Mail-Vorlage anpassen
• Formular im Frontend mit CSS Stylen

Anzeigen auf der Webseite

Für Überschrift the_title(); und Text the_content(); können die bekannten Funktionen benutzt werden. Bei den benutzerdefinierten Feldern gehen wir wie folgt vor:

$first_name = get_post_meta(get_the_ID(), 'first_name', true);
$last_name = get_post_meta(get_the_ID(), 'last_name', true);
$user_email = get_post_meta(get_the_ID(), 'user_email', true);
$link = get_post_meta(get_the_ID(), 'link', true);

echo esc_html( $first_name ?? '' );
echo esc_html( $last_name ?? '' );
echo esc_html( $user_email ?? '' );
echo esc_html( $link ?? '' );

Teste und Fehlerbehebung

Wie bei jeder Neuprogrammierung ist es wichtig ausgiebig zu testen, in unserem Fall, um sicherzustellen, dass die Daten korrekt als Beitrag gespeichert werden. Überprüfe auch, ob Fehler auftreten und behebe sie gegebenenfalls.

In Kombination mit einem individuellem Content Type, könntest du somit auch andere Inhalte damit erstellen wie z.B. Erfahrungsberichte oder ähnliches.

Du hast Anregungen oder Fragen zu diesem Tutorial, dann schreibe mir das doch gerne in die Kommentare.

Viel Erfolg bei deinem Projekt.