HeadstartWP – Ein Formular mit Contact Form 7 hinzufügen
Fast jede Website verfügt über ein Kontaktformular, oder zumindest erhalte ich bei jeder Website, die ich erstelle, die ausdrückliche Bitte, eines auf der Kontaktseite einzubinden. In WordPress sind die beliebtesten Plugins zum Einfügen eines Kontaktformulars: Contact Form 7, Ninja Forms und Gravity Forms. Ich persönlich verwende Contact Form 7, da es kostenlos, weit verbreitet, auf dem neuesten Stand und leicht erweiterbar ist.
Wenn Sie mehr erfahren möchten, besuchen Sie die Seite im Repository:
Kommen wir gleich zum Kern dieses Artikels, der ziemlich umfangreich zu werden verspricht. Ich habe mich gefragt: „Kann ich Contact Form 7 installieren, einen Gutenberg-Block hinzufügen und so ein Formular auf meiner mit HeadstartWP erstellten Website einbinden?“ Die Antwort lautet „Ja“, aber wir müssen etwas Code schreiben. In diesem Artikel sehen wir uns an, wie wir vorgehen müssen.
Erstellung des Kontaktformulars
Wenn wir uns ein wenig mit WordPress auskennen – und davon gehe ich aus –, installieren wir Contact Form 7 über das Backend und erstellen ein Kontaktformular mit folgendem Inhalt:
1
2
3
4
5
6
7
8
9
10
11
12
13
<label> Your name
[text* your-name autocomplete:name] </label>
<label> Your email
[email* your-email autocomplete:email] </label>
<label> Subject
[text* your-subject] </label>
<label> Your message (optional)
[textarea your-message] </label>
[submit "Enter"]In diesem Artikel werden wir eine einfache Lösung erstellen und verwalten, die nicht alle Fälle abdeckt, sondern nur Eingabefelder oder Textbereiche mit Feldern, die in Label-Tags enthalten sind.
Erstellen der Seite mit dem Kontaktformular
Wir erstellen nun eine Testseite, in die wir den Gutenberg-Block von Contact Form 7 einfügen und sorgfältig das soeben erstellte Formular auswählen. Die Seite im Backend sieht dann so aus:
Im Frontend sehen wir hingegen nichts außer dem Titel. Bei der Überprüfung des Codes finden wir etwas, das dem folgenden Beispiel sehr ähnlich ist:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<div class="dg3g6rf">
<div class="wp-block-contact-form-7-contact-form-selector" data-wp-block="{"id":151,"title":"Modulo di contatto 1","output":"form"}" data-wp-block-name="contact-form-7/contact-form-selector">
<div class="wpcf7 no-js" id="wpcf7-f151-o1">
<div class="screen-reader-response">
<p role="status"></p>
<ul></ul>
</div>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
</div>
</div>
</div>Also habe ich ein wenig gegoogelt und festgestellt, dass wir dank der „Form-ID“ von Contact Form 7, die wir in „data-wp-block“ finden, die unter [backend]/wp-json/contact-form-7/v1/contact-forms/[cf7-id]/feedback. [ An dieser Stelle möchte ich mich bei diesem Artikel bedanken, in dem ich einige sehr nützliche Informationen gefunden habe, und ich empfehle, ihn zur Vertiefung zu lesen: https://medium.com/@mahesh_joshi/wordpress-contact-form-7-rest-api-endpoints-bf45907b571c ] Wir können eine POST-Anfrage an den Endpunkt senden, um die E-Mail zu versenden.
Probieren wir es doch einmal mit Postman aus. Ich gehe davon aus, dass ihr alle mit Postman vertraut seid https://web.postman.co/; lest auf jeden Fall einfach den folgenden Absatz. Wir senden eine POST-Anfrage an den Endpunkt [backend]/wp-json/contact-form-7/v1/contact-forms/[cf7-id]/feedback where [backend] ist die Host-URL unseres WordPress-Backends und [cf7-id] die ID des Kontaktformulars ist. Wenn wir auf die Schaltfläche „Senden“ klicken, erhalten wir die folgende Antwort:
1
2
3
4
5
6
7
{
"code": "wpcf7_unsupported_media_type",
"message": "The request payload format is not supported.",
"data": {
"status": 415
}
}Nebenbei bemerkt: Da Italienisch als Backend-Sprache eingestellt war, lautete die Meldung „Circuito di pagamento non supportato.“, was nicht der Übersetzung der Meldung entspricht, die ihr stattdessen auf Englisch seht. Falls ihr möchtet: Ich habe einen Artikel darüber geschrieben, wie man WordPress die richtigen Übersetzungen vorschlagen kann.
Wir wechseln nun zur Registerkarte „Body“, wählen „Form-Data“ aus und fügen für alle von der E-Mail benötigten Felder den Schlüssel „value“ hinzu:
Auf diese Weise solltest du eine ähnliche Antwort wie ich mit dem Status erhalten: "mail_sent" und die E-Mail in Ihrem Posteingang erhalten.
Wir haben also gesehen, dass es auf sehr einfache Weise funktioniert. Kommen wir nun zu einer sehr unkomplizierten Frontend-Implementierung, bei der wir in dieser Phase auf die Eingabevalidierung und den Spamfilter verzichten werden.
Machen wir uns mit Blocks.js vertraut Nun zum Hauptteil dieses Artikels, in dem wir uns ein wenig mit Code beschäftigen werden. Wie immer würde ich Ihnen zunächst raten, sich mit der entsprechenden Dokumentation unter https://headstartwp.10up.com/docs/learn/gutenberg/rendering-blocks/ vertraut zu machen, da es wichtig ist zu verstehen, wie die Umwandlung von Backend-Blöcken in Frontend-Komponenten in HeadstartWp funktioniert.
Um es ganz einfach auszudrücken: In der Datei src/components/Blocks.js die darin eingefügten Komponenten <BlocksRenderer> gerendert werden, wenn bestimmte Bedingungen erfüllt sind.
In unserem Fall definieren wir eine Komponente namens „ContactFormBlock“, die wir rendern, sobald ein div mit dem TagName und der Klasse "wp-block-contact-form-7-contact-form-selector" parst. An diese Komponente übergeben wir als Props den HTML-Code des Blocks. Dank dieses HTML-Codes können wir die ID des Kontaktformulars und mit Hilfe von regulären Ausdrücken auch alle Eingabefelder, Beschriftungen, Namen und Typen der Eingabefelder abrufen. Ich werde euch den Code in wenigen Zeilen zeigen, aber zunächst möchte ich euch zwei Ressourcen vorstellen, die ich sehr nützlich fand: https://regex101.com/ und https://nextjs.org/docs/pages/building-your-application/data-fetching/building-forms.
Bevor ich euch meine Codezeilen zeige, möchte ich noch darauf hinweisen, dass, wie wir im vorherigen Kapitel gesehen haben, „enctype“ auf „multipart/form-data sein muss. Mein Rat ist, diesen Code als Proof-of-Concept zu betrachten. Falls ihr ihn in die Produktion übernehmen wollt, solltet ihr zunächst eine JavaScript-Funktion für die POST-Anfrage schreiben, um die Daten validieren zu können und zu verhindern, dass die POST-Seite beim Absenden angezeigt wird.
Sehen wir uns nun das Ergebnis an:
Nach dem Ausfüllen und Klicken auf „Absenden“ wird Ihnen diese Seite mit dem Status „mail_sent“ angezeigt, und Sie finden diese E-Mail in Ihrem Posteingang:
Wie versprochen findest du den gesamten Code unter diesem Link: https://gist.github.com/riccardodicurti/2bf7cafb419237a257975323588a8760. Denk daran, dass er ausschließlich zu Demonstrationszwecken dient und noch lange nicht als produktionsreif angesehen werden kann. Lies aber bitte den nächsten Absatz weiter, da wir einige Schlussfolgerungen ziehen möchten.
Schlussfolgerungen
Wir haben gesehen, dass die Erstellung einer mit einem Gutenberg-Block verknüpften Komponente nicht nur möglich, sondern auch sehr einfach ist. Ich möchte jedoch darauf hinweisen, dass die bisher entwickelte Lösung sehr rudimentär ist. Würde ich eine stabilere Lösung entwickeln, würde ich mich höchstwahrscheinlich für die Erstellung eines benutzerdefinierten Gutenberg-Blocks entscheiden, der mir alle für die Erstellung der Komponente notwendigen Informationen im JSON-Format übermitteln würde, ohne dass ich in großem Umfang auf reguläre Ausdrücke zurückgreifen müsste. Außerdem haben wir in diesem Beispiel die Validierung und die Spam-Prüfung komplett ausgelassen. Jeder, der eine WordPress-Website betreibt, weiß, wie überwältigend die Menge an Spam sein kann, wenn man sein Kontaktformular nicht mit einem Honeypot oder reCAPTCHA schützt. Möge Ihr Code fehlerfrei sein.