Dans le cas des formulaires de gravité, nous devons seulement changer l'action et les attributs de nom:

étant donné que toutes les informations requises sont disponibles dans le HTML, nous sommes prêts à envoyer la demande. Une fa?on de le faire est d'utiliser le formdata en combinaison avec le fetch:

 const FormSubmissionHandler = (événement) => {
  event.PreventDefault ();

  const Formement = event.target,
    {action, méthode} = formation,
    Body = new FormData (formation);

  fetch (action, {
    méthode,
    corps
  })
    .Then ((réponse) => réponse.json ())
    .Then ((réponse) => {
      // déterminer si la soumission n'est pas valide
      if (isformSubmissionError (réponse)) {
        // gérer le cas lorsqu'il y a des erreurs de validation
      }
      // gérer le chemin heureux
    })
    .Catch ((error) => {
      // gérer le cas lorsqu'il y a un problème avec la demande
    });
};

const FormElement = document.QuerySelector ("form");

FormElement.AddeventListener ("Soumider", FormSubmissionHandler);

Nous pouvons envoyer la soumission avec peu d'effort, mais l'expérience utilisateur est pour le moins. Nous devons aux utilisateurs autant de conseils que possible pour soumettre le formulaire avec succès. à tout le moins, cela signifie que nous devons:

• afficher un message d'erreur ou de réussite globale,
• Ajouter des messages d'erreur de validation de champ en ligne et des instructions possibles, et
• Attirez l'attention sur les pièces qui nécessitent une attention avec les classes spéciales.

Validation du terrain

En plus de l'utilisation de la validation du formulaire HTML intégré, nous pouvons utiliser JavaScript pour une validation supplémentaire c?té client et / ou profiter de la validation c?té serveur.

En ce qui concerne la validation c?té serveur, les formulaires de contact 7 et les formulaires de gravité l'offrent hors de la bo?te et renvoient les messages d'erreur de validation dans le cadre de la réponse. Ceci est pratique car nous pouvons contr?ler les règles de validation de l'administrateur WordPress.

Pour des règles de validation plus complexes, comme la validation conditionnelle du champ, il pourrait être logique de se fier uniquement à la c?té du serveur, car la maintenance de la validation JavaScript frontale en synchronisation avec le paramètre des plugins peut devenir un problème de maintenance.

Si nous allons uniquement avec la validation c?té serveur, la tache devient en analysant la réponse, en extraction des données pertinentes et en manipulation DOM comme l'insertion d'éléments et basculer les noms de classe.

Messages de réponse

La réponse lorsqu'il y a une erreur de validation pour le formulaire de contact 7 ressemble à ceci:

 {
  "dans": "#",
  "statut": "validation_failed",
  "Message": "Un ou plusieurs champs ont une erreur. Veuillez vérifier et réessayer.",
  "posté_data_hash": "",
  "invalid_fields": [
    {
      "Into": "span.wpcf7-form-control-wap.somebodys-name",
      "Message": "Le champ est requis.",
      "idref": null,
      "error_id": "-ve-somebodys-name"
    },
    {
      "Into": "span.wpcf7-form-control-wap.any-email",
      "Message": "Le champ est requis.",
      "idref": null,
      "error_id": "-ve-any-email"
    },
    {
      "Into": "span.wpcf7-form-control-wap.before space-age",
      "Message": "Le champ est requis.",
      "idref": null,
      "error_id": "-ve-avant-espace-age"
    },
    {
      "dans": "span.wpcf7-form-control-wap.fake-terms",
      "Message": "Vous devez accepter les termes et conditions avant d'envoyer votre message.",
      "idref": null,
      "error_id": "-ve-tterms"
    }
  ]]
}

Sur une soumission réussie, la réponse ressemble à ceci:

 {
  "dans": "#",
  "statut": "mail_sent",
  "Message": "Merci pour votre message. Il a été envoyé.",
  "Publié_data_hash": "d52f9f9de995287195409fe6dcde0c50"
}

Par rapport à cela, la réponse d'erreur de validation des formulaires Gravity est plus compacte:

 {
  "is_valid": false,
  "validation_messages": {
    "1": "Ce champ est requis.",
    "2": "Ce champ est requis.",
    "3": "Ce champ est requis.",
    "5": "Ce champ est requis."
  },
  "page_number": 1,
  "source_page_number": 1
}

Mais la réponse sur une soumission réussie est plus grande:

 {
  "is_valid": vrai,
  "page_number": 0,
  "source_page_number": 1,
  "Confirmation_Message": "<div id="'gform_confirmation_wrapper_1'" class="'gform_confirmation_wrapper'"> <div id="'gform_confirmation_message_1'" class="'gform_confirmation_message_1" gform_confirmation_message> GORIED US!
  "confirmation_type": "message"
}<p> Bien que les deux contiennent les informations dont nous avons besoin, ils ne suivent pas une convention commune et ont leurs bizarreries. Par exemple, le message de confirmation dans les formulaires de gravité contient HTML, et les touches de message de validation n'ont pas le préfixe Input_ - le préfixe requis lorsque nous envoyons la demande. De l'autre c?té, les erreurs de validation dans le formulaire de contact 7 contiennent des informations pertinentes uniquement pour leur implémentation frontale. Les touches de champ ne sont pas immédiatement utilisables; Ils doivent être extraits.</p>
<p> Dans une situation comme celle-ci, au lieu de travailler avec la réponse que nous obtenons, il vaut mieux trouver un format idéal souhaité. Une fois que nous avons cela, nous pouvons trouver des moyens de transformer la réponse originale à ce que nous jugeons. Si nous combinons le meilleur des deux scénarios et supprimons les pièces non pertinentes pour notre cas d'utilisation, nous nous retrouvons avec quelque chose comme ceci:</p>
<pre rel="JSON" data-line=""> {
  "Issuce": faux,
  "Message": "Un ou plusieurs champs ont une erreur. Veuillez vérifier et réessayer.",
  "ValidationError": {
    "Somebodys-name": "Ce champ est requis.",
    "Any-Email": "Ce champ est requis.",
    "Input_3": "Ce champ est requis.",
    "Input_5": "Ce champ est requis."
  }
}

Et sur une soumission réussie, nous définissons l'émission sur true et renvoie un objet d'erreur de validation vide:

 {
  "émetteur": vrai,
  "Message": "Merci de nous avoir contactés! Nous vous contacterons sous peu.",
  "ValidationError": {}
}

Maintenant, il s'agit de transformer ce que nous avons obtenu en ce dont nous avons besoin. Le code pour normaliser la réponse des formulaires de contact 7 est le suivant:

 const normalizontactform7Response = (réponse) => {
  // Les autres statuts possibles sont différents types d'erreurs
  const Issucess = réponse.status === 'Mail_sent';
  // Un message est fourni pour tous les statuts
  const Message = Response.Message;
  const ValidationError = émetteur
    ? {}
    : // nous transformons un tableau d'objets en un objet
    Object.fromentries (
      réponse.invalid_fields.map ((erreur) => {
        // extrait la pièce après "cf7-form-control-wap"
        const Key = /cf7[-Aze .*.(.*)/.exec(Error.into)@1];

        return [key, error.sessage];
      })
    ));

  retour {
    émetteur,
    message,
    ValidationError,
  };
};

Le code pour normaliser la réponse des formulaires de gravité se termine par le fait:

 const normalisegravityformsResponse = (réponse) => {
  // fourni déjà comme booléen dans la réponse
  const issucess = réponse.is_valid;
  const Message = Issucess
    ? // vient enveloppé dans un HTML et nous n'avons probablement pas besoin de cela
      StripHtml (réponse.confirmation_message)
    : // Pas de message d'erreur général, nous définissons donc un repli
      ?Il y avait un problème avec votre soumission.?;
  const ValidationError = émetteur
    ? {}
    : // nous remplacons les touches par la version préfixée;
      // De cette fa?on, la demande et la réponse correspondent
      Object.fromentries (
        Object.ntries (
            réponse.validation_messages
        ) .map (([clé, valeur]) => [`entrée _ $ {key}`, valeur])
      ));

  retour {
    émetteur,
    message,
    ValidationError,
  };
};

Il nous manque toujours un moyen d'afficher les erreurs de validation, les messages de réussite et les classes basculantes. Cependant, nous avons une fa?on intéressante d'accéder aux données dont nous avons besoin, et nous avons supprimé toutes les incohérences dans les réponses avec une abstraction légère. Une fois assemblé, il est prêt à être déposé dans une base de code existante, ou nous pouvons continuer à construire par-dessus.

Il existe de nombreuses fa?ons de s'attaquer à la partie restante. Ce qui est logique dépendra du projet. Pour les situations où nous devons principalement réagir aux modifications de l'état, une bibliothèque déclarative et réactive peut beaucoup aider. Alpine.js était couvert ici sur CSS-Tricks, et c'est un ajustement parfait pour les deux démonstrations et l'utiliser dans les sites de production. Presque sans aucune modification, nous pouvons réutiliser le code de l'exemple précédent. Nous n'avons qu'à ajouter les directives appropriées et aux bons endroits.

Emballage

Faire correspondre l'expérience frontale que les plugins WordPress Forms peuvent être réalisés avec une facilité relative pour des formulaires simples et sans tracas - et d'une manière réutilisable d'un projet à l'autre. Nous pouvons même l'accomplir d'une manière qui nous permet de changer le plugin sans affecter l'avant.

Bien s?r, il faut du temps et des efforts pour créer une forme de plusieurs pages, des aper?us des images téléchargées ou d'autres fonctionnalités avancées que nous serions normalement cuites dans un plugin, mais plus les exigences que nous devons répondre, plus il est logique d'utiliser le point de terminaison de la soumission car nous n'avons pas à travailler contre la mise en ?uvre frontale donnée que les tests pour résoudre de nombreux problèmes, mais jamais le particulier que nous voulons.

L'utilisation de WordPress comme CMS sans tête pour accéder à l'API REST d'un plugin de formulaire pour frapper les points de terminaison de soumissions deviendra s?rement une pratique plus largement utilisée. C'est quelque chose qui vaut la peine d'explorer et de garder à l'esprit. à l'avenir, je ne serais pas surpris de voir des plugins de formulaires WordPress con?us principalement pour fonctionner dans un contexte sans tête comme celui-ci. Je peux imaginer un plugin où le rendu frontal est une fonctionnalité complémentaire qui ne fait pas partie intégrante de son noyau. Quelles conséquences qui auraient, et si cela pouvait avoir un succès commercial, reste à explorer mais est un espace fascinant à regarder évoluer.