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:

• Verwenden wir unsere eigene API, wenn wir so etwas haben? Wenn nicht, und wir m?chten keinen erstellen, k?nnen wir mit einem Service gehen. Es gibt viele gute statische Formanbieter, und neue tauchen st?ndig auf.
• K?nnen wir weiterhin das WordPress -Plugin verwenden, das wir bereits zur Validierung, des Speichers und der Integration verwenden und nutzen?

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.

Die Endpunkte

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.

Der K?rper der Anfrage

Unser Beispielformular enth?lt fünf Felder mit den folgenden Regeln:

• ein erforderliches Textfeld
• Ein erforderliches E -Mail -Feld
• Ein erforderliches Datumfeld, das Daten vor dem 4. Oktober 1957 akzeptiert
• ein optionaler Textbereich
• ein erforderliches Kontrollk?stchen

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"
}

Senden der Daten

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:

• Zeigen Sie einen globalen Fehler oder eine Erfolgsnachricht,
• Fügen Sie Inline -Feld Validierungsmeldungen und m?gliche Richtungen hinzu und
• Achten Sie auf Teile, die mit speziellen Klassen Aufmerksamkeit erfordern.

Feldvalidierung

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.

Antwortmeldungen

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.

Einpacken

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!