Wenn Sie eine WordPress -Site erstellen, benötigen Sie einen guten Grund, kein WordPress -Formular -Plugin auszuwählen. Sie sind bequem und bieten viele Anpassungen, die eine Menge Anstrengungen unternehmen würden, um von Grund auf neu zu bauen. Sie rendern die HTML, validieren die Daten, speichern die Einreichungen und bieten Integration in Dienste von Drittanbietern.
Nehmen wir jedoch an, wir planen, WordPress als kopfloses CMS zu verwenden. In diesem Fall werden wir hauptsächlich mit der Rest -API (oder GraphQL) interagieren. Der Front-End-Teil wird vollständig zu unserer Verantwortung, und wir können uns nicht mehr auf Form-Plugins verlassen, um das schwere Heben in diesem Bereich durchzuführen. Jetzt sind wir auf dem Fahrersitz, wenn es um das vordere Ende geht.
Formulare waren ein gelöstes Problem, aber jetzt müssen wir entscheiden, was wir gegen sie tun sollen. Wir haben ein paar Optionen:
Das beliebteste Plugin für freie Form, das Kontaktformular 7, verfügt über einen REST-API-Endpunkt der Submission-REST-API.
Aus technischer Sicht gibt es keinen wirklichen Unterschied zwischen der Übermittlung der Daten des Formulars an einen Endpunkt, der von einem Dienst oder einem WordPress -Plugin bereitgestellt wird. Wir müssen also auf der Grundlage verschiedener Kriterien entscheiden. Preis ist offensichtlich; Danach ist die Verfügbarkeit der WordPress -Installation und ihrer REST -API. Die Übermittlung eines Endpunkts setzt voraus, dass er immer öffentlich verfügbar ist. Das ist bereits klar, wenn es um Dienstleistungen geht, da wir dafür bezahlen, dass sie verfügbar sind. Einige Setups beschränken den WordPress -Zugriff möglicherweise nur auf Bearbeitungs- und Erstellungsprozesse. Eine andere Sache ist, wo Sie die Daten speichern möchten, insbesondere auf eine Weise, die sich an GPDR -Vorschriften hält.
Wenn es um Merkmale hinausgeht, die über die Einreichung hinausgehen, sind WordPress -Formular -Plugins schwer zu stimmen. Sie haben ihr Ökosystem, Add-Ons, die Berichte, PDFs, eine leicht verfügbare Integration in Newsletter und Zahlungsdienste generieren können. Nur wenige Dienste bieten so viel in einem einzigen Paket.
Auch wenn wir WordPress auf „traditionelle“ Weise mit dem vorderen Ende basierend auf einem WordPress -Thema verwenden, kann die Verwendung einer REST -API eines Formular -Plugins in vielen Fällen sinnvoll sein. Wenn wir beispielsweise ein Thema unter Verwendung eines Utility-First CSS-Frameworks entwickeln, lässt die gerenderte Form mit festem Markup mit einer BEM-ähnlichen Klassenkonvention einen sauren Geschmack in den Mund eines jeden Entwicklers.
Der Zweck dieses Artikels ist es, die beiden WordPress Form-Plugins-Endpunkte zu präsentieren und eine Möglichkeit zu zeigen, die typischen formbezogenen Verhaltensweisen nachzubilden, die wir uns gewöhnt haben, um aus dem Box herauszukommen. Wenn wir ein Formular einreichen, müssen wir uns im Allgemeinen mit zwei Hauptproblemen befassen. Einer ist die Einreichung der Daten selbst, und das andere liefert dem Benutzer aussagekräftiges Feedback.
Also fangen wir dort an.
Das Senden von Daten ist der einfachere Teil. Beide Endpunkte erwarten eine Postanforderung, und der dynamische Teil der URL ist die Formular -ID.
Die Kontaktformular 7 REST -API ist sofort verfügbar, wenn das Plugin aktiviert ist, und es sieht so aus:
https: //your--ite.tld/wp-json/contact-form-7/v1/contact-forts/ <form_id>/Feedback</form_id>
Wenn wir mit Schwerkraftformen arbeiten, nimmt der Endpunkt diese Form an:
https: //your-siite.tld/wp-json/gf/v2/forms/ <form_id>/Einreichungen</form_id>
Die Schwerkraftform REST -API ist standardmäßig deaktiviert. Um dies zu aktivieren, müssen wir zu den Einstellungen des Plugins, dann zur REST -API -Seite gehen und die Option „Zugriff auf die API aktivieren“ überprüfen. Es besteht keine Notwendigkeit, einen API -Schlüssel zu erstellen, da der Formular Submission -Endpunkt nicht erforderlich ist.
UPDATE (10. September 2024): Die IDs sind in Kontaktformular 7 Version 5.8 gehasht, können jedoch noch in der URL der Bearbeitungsseite des Formulars zu finden.
Unser Beispielformular enthält fünf Felder mit den folgenden Regeln:
Für die Körperschlüssel der Anfrage der Kontaktformular 7 müssen wir sie mit der Formular-Tag-Syntax definieren:
{
"SOMBODYS-NAME": "Marian Kenney",
"Any-Email": "[E-Mail geschützt]",
"Vor-Raum-Alter": "1922-03-11",
"Optional-message": "",
"FAKE-TERMS": "1"
}Schwerkraftformen erwarten die Schlüssel in einem anderen Format. Wir müssen eine automatisch generierte, inkrementelle Feld-ID mit dem Prefix input_ verwenden. Die ID ist sichtbar, wenn Sie das Feld bearbeiten.
{
"input_1": "Marian Kenney",
"input_2": "[E -Mail geschützt]",
"input_3": "1922-03-11",
"input_4": "",
"input_5_1": "1"
}Wir können uns viel Arbeit ersparen, wenn wir die erwarteten Schlüssel für die Namensattribute der Eingänge verwenden. Andernfalls müssen wir die Eingabenamen den Schlüssel zuordnen.
Wenn wir alles zusammenstellen, erhalten wir eine HTML -Struktur wie diese für Kontaktformular 7:
Bei Schwerkraftformularen müssen wir nur die Aktion und die Namensattribute wechseln:
Da alle erforderlichen Informationen in der HTML verfügbar sind, können wir die Anfrage senden. Eine Möglichkeit, dies zu tun, besteht darin, die FormData in Kombination mit dem Abruf zu verwenden:
const formSubmissionHandler = (Ereignis) => {
Event.PreventDefault ();
const formelement = event.target,
{Aktion, Methode} = Formelement,
Body = New FormData (Formelement);
fetch (action, {
Verfahren,
Körper
})
.then ((Antwort) => response.json ())
.then ((Antwort) => {
// Bestimmen Sie, ob die Einreichung nicht gültig ist
if (isFormSubmissionError (Antwort)) {
// Behandeln Sie den Fall, wenn Validierungsfehler vorliegen
}
// den glücklichen Weg umgehen
})
.Catch ((Fehler) => {
// Behandeln Sie den Fall, wenn ein Problem mit der Anfrage vorliegt
});
};
const formelement = document.querySelector ("Form");
formElement.adDeVentListener ("Submit", FormSubmissionHandler);Wir können die Einreichung mit wenig Aufwand senden, aber die Benutzererfahrung ist gelinde gesagt unterdurchschnittlich. Wir schulden den Benutzern so viel Anleitung wie möglich, um das Formular erfolgreich einzureichen. Zumindest bedeutet das, dass wir:
Zusätzlich zur Verwendung der integrierten HTML-Formularvalidierung können wir JavaScript für eine zusätzliche clientseitige Validierung verwenden und/oder die serverseitige Validierung nutzen.
Wenn es um die serverseitige Validierung geht, bieten sowohl Kontaktformular 7 als auch Schwerkraftformulare dies außerhalb der Box und geben die Validierungsfehlermeldungen als Teil der Antwort zurück. Dies ist bequem, da wir die Validierungsregeln vom WordPress -Administrator steuern können.
Für komplexere Validierungsregeln wie die bedingte Feldvalidierung kann es sinnvoll sein, sich nur auf die serverseitige Seite zu verlassen, da die Synchronisierung der Front-End-JavaScript-Validierung mit der Einstellung der Plugins zu einem Wartungsproblem werden kann.
Wenn wir uns ausschließlich mit der serverseitigen Validierung einlassen, geht es bei der Aufgabe darin, die Antwort zu analysieren, die relevanten Daten zu extrahieren und DOM-Manipulation wie das Einfügen von Elementen und Umschaltungsnamen.
Die Antwort, wenn ein Validierungsfehler für den Kontaktformular 7 vorliegt, sieht so aus:
{
"hinein": "#",
"Status": "Validation_Failed",
"Nachricht": "Ein oder mehrere Felder haben einen Fehler. Bitte überprüfen Sie und versuchen Sie es erneut."
"post_data_hash": "",
"Invaly_fields": [
{
"in": "span.wpcf7-form-control-wrap.somebodys-name",
"Nachricht": "Das Feld ist erforderlich.",,
"IDREF": NULL,
"ERROR_ID": "-VE-SOMEBODYS-NAME"
},
{
"in": "span.wpcf7-form-control-wrap.any-email",
"Nachricht": "Das Feld ist erforderlich.",,
"IDREF": NULL,
"ERROR_ID": "-VE-BEI-EMail"
},
{
"in": "span.wpcf7-form-control-wrap.before-space-altern",
"Nachricht": "Das Feld ist erforderlich.",,
"IDREF": NULL,
"ERROR_ID": "-VE-vor-vor-Raum-Alter"
},
{
"in": "span.wpcf7-form-control-wrap.fake-terms",
"Nachricht": "Sie müssen die Allgemeinen Geschäftsbedingungen akzeptieren, bevor Sie Ihre Nachricht senden.",.
"IDREF": NULL,
"ERROR_ID": "-VE-FAKE-TERMS"
}
]
}Bei erfolgreicher Einreichung sieht die Antwort so aus:
{
"hinein": "#",
"Status": "Mail_Sent",
"Nachricht": "Danke für Ihre Nachricht. Es wurde gesendet."
"post_data_hash": "d52f9f9de995287195409fe6dcde0c50"
}Im Vergleich dazu ist die Validierungsfehlerantwort von Schwerkraftformularen kompakter:
{
"is_valid": falsch,
"validation_messages": {
"1": "Dieses Feld ist erforderlich.",,
"2": "Dieses Feld ist erforderlich.",,
"3": "Dieses Feld ist erforderlich.",,
"5": "Dieses Feld ist erforderlich."
},
"Page_Number": 1,,
"Source_Page_Number": 1
}Die Antwort auf eine erfolgreiche Einreichung ist jedoch größer:
{
"is_valid": wahr,
"Page_Number": 0,,
"Source_Page_Number": 1,,
"Bestätigung_Message": "<div id="'gform_confirmation_wrapper_1'" class="'gform_confirirmation_wrapper'"> <div id="'gform_confirmation_message_1'" class="'gform_confirmation_message_1" gffirmation_message_message_message> Us. Kurz. </div> </div> ",
"Bestätigung_Type": "Nachricht"
}Während beide die Informationen enthalten, die wir benötigen, folgen sie nicht einer gemeinsamen Konvention und beide haben ihre Macken. Beispielsweise enthält die Bestätigungsnachricht in Schwerkraftformularen HTML, und die Validierungsnachrichtenschlüssel haben nicht das Präfix input_ - das Präfix, das bei Senden der Anforderung erforderlich ist. Auf der anderen Seite enthalten Validierungsfehler im Kontaktformular 7 Informationen, die nur für ihre Front-End-Implementierung relevant sind. Die Feldschlüssel sind nicht sofort verwendbar; Sie müssen extrahiert werden.
In einer solchen Situation ist es besser, ein gewünschtes, ideales Format zu erstellen, anstatt mit der Antwort zu arbeiten, die wir erhalten. Sobald wir das haben, können wir Wege finden, um die ursprüngliche Antwort auf das zu verwandeln, was wir für richtig halten. Wenn wir das Beste aus den beiden Szenarien kombinieren und die irrelevanten Teile für unseren Anwendungsfall entfernen, haben wir so etwas wie folgt:
{
"Issuccess": Falsch,
"Nachricht": "Ein oder mehrere Felder haben einen Fehler. Bitte überprüfen Sie und versuchen Sie es erneut."
"validationError": {
"SONBODYS-NAME": "Dieses Feld ist erforderlich.",,
"Any-Email": "Dieses Feld ist erforderlich.",,
"input_3": "Dieses Feld ist erforderlich.",,
"input_5": "Dieses Feld ist erforderlich."
}
}Und bei erfolgreicher Einreichung würden wir Issuccess auf true setzen und ein leeres Validierungsfehlerobjekt zurückgeben:
{
"Issuccess": wahr,
"Nachricht": "Danke, dass du uns kontaktiert hast! Wir werden uns in Kürze mit Ihnen in Verbindung setzen."
"validationError": {}
}Jetzt geht es darum, das zu verändern, was wir zu dem haben, was wir brauchen. Der Code zur Normalisierung der Kontaktformulare 7 Antwort lautet:
const normalizeContactform7Response = (Antwort) => {
// Die anderen möglichen Status sind unterschiedliche Art von Fehlern
const issuccess = Antwort.Status === 'Mail_Sent';
// Eine Nachricht wird für alle Status bereitgestellt
const message = response.message;
const validationError = issuccess
? {}
: // Wir verwandeln ein Array von Objekten in ein Objekt
Object.Fromentries (
response.invalid_fields.map ((Fehler) => {
// extrahiert den Teil nach "CF7-Form-Kontroll-Wrap".
const key = /cf7..az weibliche*.(.*)/.exec(Err.into) -A1];
return [key, error.message];
})
);
zurückkehren {
Issuccess,
Nachricht,
validationError,
};
};Der Code zur Normalisierung der Schwerkraft bildet die Reaktion auf: Folgendes: Folgendes:
const NormalizeGravityFormsResponse = (Antwort) => {
// Bereits als Booleschen in der Antwort bereitgestellt
const issuccess = response.is_valid;
const message = issuccess
? // kommt in ein HTML ein und wir brauchen das wahrscheinlich nicht
StripHTML (Antwort.Confirmation_Message)
: // Keine allgemeine Fehlermeldung, also setzen wir einen Fallback
"Es gab ein Problem mit Ihrer Einreichung."
const validationError = issuccess
? {}
: // Wir ersetzen die Schlüssel durch die vorangestellte Version;
// Auf diese Weise entspricht die Anfrage und die Antwort entsprechen
Object.Fromentries (
Object.Entries (
Antwort.Validation_Messages
) .Map (([Schlüssel, Wert]) => [`Eingabe _ $ {Key}`, Wert])
);
zurückkehren {
Issuccess,
Nachricht,
validationError,
};
};Wir fehlen immer noch eine Möglichkeit, die Validierungsfehler, Erfolgsnachrichten und Umschaltklassen anzuzeigen. Wir haben jedoch eine nette Möglichkeit, auf die Daten zuzugreifen, die wir benötigen, und wir haben alle Inkonsistenzen in den Antworten mit einer leichten Abstraktion entfernt. Bei der Zusammenstellung ist es bereit, in eine vorhandene Codebasis fallen zu lassen, oder wir können weiterhin darauf aufbauen.
Es gibt viele Möglichkeiten, den verbleibenden Teil anzugehen. Was Sinn macht, hängt vom Projekt ab. In Situationen, in denen wir hauptsächlich auf Zustandsänderungen reagieren müssen, kann eine deklarative und reaktive Bibliothek sehr helfen. Alpine.js wurde hier auf CSS-Tricks abgedeckt und passt perfekt zu beiden Demonstrationen und der Verwendung in Produktionsstandorten. Fast ohne Änderung können wir den Code aus dem vorherigen Beispiel wiederverwenden. Wir müssen nur die richtigen Richtlinien und an den richtigen Stellen hinzufügen.
Die Übereinstimmung mit dem Front-End-Erlebnis, das WordPress-Formular-Plugins bereitstellen, kann relativ leicht für einfache, unkomplizierte Formen durchgeführt werden-und auf eine Weise, die von Projekt zu Projekt wiederverwendbar ist. Wir können es sogar so erreichen, dass wir das Plugin wechseln, ohne das vordere Ende zu beeinflussen.
Sicher, es braucht Zeit und Mühe, um ein mehrseitiges Formular, die Voransichten der hochgeladenen Bilder oder andere erweiterte Funktionen zu erstellen, die wir normalerweise in ein Plugin einbringen würden, aber je einzigartig die Anforderungen, die wir erfüllen müssen, desto mehr ist es sinnvoll, den Einreichungsendpunkt zu verwenden, da wir nicht gegen die angegebene Front-End-Implementierung arbeiten müssen, um viele Probleme zu lösen, aber die besonderen, die wir wollen.
Die Verwendung von WordPress als kopfloses CMS, um auf die Rest -API eines Formular -Plugins zuzugreifen, um die Einreichungsendpunkte zu treffen, wird sicherlich zu einer weit verbreiteten Praxis. Es ist etwas, das es wert ist, erkunden zu werden und zu berücksichtigen. In Zukunft wäre ich nicht überrascht, dass WordPress -Plugins, die hauptsächlich in einem solchen kopflosen Kontext gearbeitet haben, entwickelt werden. Ich kann mir ein Plugin vorstellen, bei dem das Front-End-Rendering eine Add-On-Funktion ist, die kein wesentlicher Bestandteil seines Kerns ist. Welche Konsequenzen das haben und wenn es kommerziellen Erfolg haben könnte, bleibt abzuwarten, ist aber ein faszinierender Ort, um sich zu sehen.
Das obige ist der detaillierte Inhalt vonEinsendung mit Kopflosen Form mit der WordPress Rest API. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
Was passiert, wenn ich keine Verbindung zum Netzwerk herstellen kann?
Verbindung zurücksetzen Lösung
So optimieren Sie eine einzelne Seite
So kaufen und verkaufen Sie Bitcoin auf Huobi.com
So beheben Sie 500 interne Serverfehler
drücke irgendeine Taste zum Neustart
So implementieren Sie die JSP-Paging-Funktion
Einführung in parametrische Modellierungssoftware
So führen Sie ein Shell-Skript aus
![[Web-Frontend] Node.js-Schnellstart](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
