Voilà le contexte ; imaginez que vous avez réalisé un site-web sur mesure, mais qu’en cours de route, votre client souhaite y ajouter un blog qui lui permet d’ajouter/éditer et supprimer des articles. Plus tard encore, notre même client souhaite ajouter un formulaire de contact duquel il peut télécharger les entrées sous un format csv. Et enfin, comment lier le tout sous une même et unique plateforme ?
Le contexte
Ce type de scénario est tout à fait probable, pour l’avoir vécu plusieurs fois. Dans le meilleur des mondes, on espérerait avoir une vue globale sur le futur du projet décidé en amont, mais ce n’est pas toujours le cas dans le web où la production peut évoluer dans le temps. Dans ce cas précis, que faire ?
L’ajout d’articles éditables sur des pages web demandent une gestion de base de données. Et cela se complique assez vite quand s’y ajoute une gestion de fichiers (pièces jointes, images, etc.), et des rôles utilisateurs (accès, connexion, niveaux, etc.). Dès lors, nous pourrions de tourner vers des CMS qui ont l’habitude de gérer tout cela. Mais alors, comment intégrer tout ce qui a été développé au préalable si ce n’est que de passer par une intégration alors coûteuse en temps ? Une troisième voie est possible.
Lier les deux projets
Ce n’est sans doute pas la plus recommandée, mais il existe une troisième voie qui serait de lier les 2 idées séparées au départ ; côté « frontend » et possiblement statique au départ, à un CMS en tant que gestionnaire de contenu côté backend. Je l’ai d’ailleurs souvent proposé à travers ce blog ici ou encore ici.
Dans ces deux cas, nous pourrions utiliser l’API WordPress pour rendre dynamique le contenu de certaines pages par la suite.
Mais qu’en est-il du formulaire et de l’enregistrement de ces entrées ? Là aussi, WordPress peut nous aider. Plusieurs pluggins de formulaires sont connues de la toile afin d’envoyer un email pour enregistrer vos visiteurs sur votre site. Moi, j’ai pris l’habitude de travailler avec Contact Form 7, pour sa facilité et son côté un peu brut de sa mise en place (via ses shortcodes notamment). Mais nativement, Contact Form 7 n’enregistre pas les données de ses formulaires. À cela, peut s’ajouter un autre pluggin ; Flamingo.
Un formulaire sur mesure lié à Flamingo
Revenons à nos moutons. Nous pouvons dès lors construire un formulaire sur mesure et en phase avec le design frontend du site tout en liant les données envoyées sur la plateforme WordPress alors installée. Il suffit pour cela d’installer les plugins nécessaires et d’ajouter un peu de code dans le fichier function.php de WordPress (ou ailleurs dans votre thème, mais lié à votre thème). Voilà ci-dessous un exemple côté fontend en Javascript. (Attention, il s’agit d’un exemple très simple, vous pouvez par exemple au préalable, vérifier si chaque champs ne comportent pas d’erreurs, … ! )
const
main_url = "https://votresiteweb.be/wp/",
ajax_file = "wp-admin/admin-ajax.php"
document.querySelector('form').addEventListener('submit', function(event) {
event.preventDefault()
var formData = new FormData(this)
formData.append('action', 'handle_custom_form')
fetch(main_url + ajax_file, {
method: 'POST',
body: formData,
headers: {
'X-Requested-With': 'XMLHttpRequest'
}
})
.then(response => response.json())
.then(data => {
if( data.success) {
console.log("ok")
}
})
.catch(error => {
console.error('Error:', error)
})
})On notera que la méthode « Fetch » appelle le fichier de WordPress qui est à chaque fois appelé pour une requête de ce type : admin-ajax.php. Il envoie les données du formulaires (formData), mais on y ajoute également une action avec le nom de la fonction à éxécuter (handle_custom_form).
Si tout s’est bien passé, je peux ensuite exploiter les données ou continuer de réaliser d’autres actions (comme faire disparaître le formulaire ou afficher une popup de validation par exemple). Ici, j’affiche dans la console de mon navigateur ; « ok ».
Côté Backend
Comment se comporte le fichier inclus dans notre thème WordPress ? En voilà un exemple :
add_action('wp_ajax_handle_custom_form', 'handle_custom_form');
function handle_custom_form() {
if (isset($_POST['your-name']) && isset($_POST['your-email']) ) {
$name = sanitize_text_field($_POST['your-name']);
// ... autre champs éventuellement
$email = sanitize_email($_POST['your-email']);
$yoursubject = sanitize_text_field($_POST['your-subject']);
$flamingo_name = sanitize_text_field ( $name . " " . $fname ) ;
$flamingo_subject = sanitize_text_field ( "Nouveau message" );
$submission = new Flamingo_Inbound_Message();
$submission->channel = 'custom-form';
$submission->address = $email;
$submission->subject = $flamingo_subject;
$submission->from = $flamingo_name;
$submission->fields = array(
'your-name' => $name,
'your-fname' => $fname,
'your-email' => $email,
'your-url' => $url,
'your-tel' => $tel,
);
if ($submission->save()) {
wp_send_json_success('Form submitted successfully');
}
else {
wp_send_json_error('Failed to save submission');
}
}
else {
wp_send_json_error('Invalid form data');
}
}Comme vous le verrez, nous exécutons bel et bien la fonction appelée en JS par la méthode fetch comme ceci : add_action(‘wp_ajax_handle_custom_form’, ‘handle_custom_form’). Ensuite, il faut écrire cette fonction à exécuter. On doit dans un premier temps vérifier chacun des champs avec les fonctions natives de WordPress afin de cleaner les données. Ensuite, on initialise Flamingo comme ceci : new Flamingo_Inbound_Message(). (Orienté objet).
À partir de là, on peut lancer Flamingo. Ce dernier a besoin d’un sujet, d’un nom et d’un email afin de garantir au mieux l’affichage des données dans le Dashboard du CMS. Enfin on enregistre tout avec « $submission->save() ». Si cela retourne « true », on peut retourner une réponse sous format JSON avec la fonction de WordPress « wp_send_json_success(‘Form submitted successfully’); » et dont le data.success est à « true ». C’est bien cette réponse-là qu’on attend côté frontend.
Et la boucle est bouclée !
