Image de l'article Faire un formulaire AMP vers une page PHP

Commentaires sur l'article Faire un formulaire AMP vers une page PHP

#1

Par reg à 12h41 :

Salut et merci pour l'article super intéressant.

J'ai réalisé le formulaire comme dans les exemples ampproject

Il vérifie bien que les champs sont valide (texte, adresse mail...).

Mais une fois tous les champs valides... l'envoie est impossible...
Il ne se passe rien que faut-il faire comment traiter les données avec action-xhr

#2

Par reg à 11h33 :

Encore merci pour l'article.

Si je veux récupérer les données par mail comment faire ???

Si je mets wp_mail() dans la page contact du formulaire (AMP ne me valide pas l'envoie)

Si je mets wp_mail() dans le fichier qui créé le fichier json il me met une erreur...

#3

Par Patrice à 11h49 :

Bonjour reg,

L'envoi du mail doit se faire avec PHP.
Donc quand vous traiter vos données avec PHP vous en profiter pour envoyer un mail avec la fonction :
- http://php.net/manual/fr/function.mail.php

AMP ne change rien à ce niveau.

#4

Par reg à 11h55 :

J'utilise wordpress

Si je mets

if(isset($_POST['submitted'])) ... wp_mail()
dans ma page formulaire le mail n'est pas envoyé

et si je mets
if(isset($_POST['submitted'])) ... wp_mail()
dans le fichier qui génère le json AMP m'affiche un message d'erreur dans le formulaire

#5

Par reg à 11h56 :

Je voulais écrire

if(isset($_POST['submitted']))

#6

Par Patrice à 12h02 :

Je ne connais pas WordPress. Mais je doute que le soucis vienne d'AMP.
Sur une page sans AMP le mail est envoyé ?

#7

Par reg à 12h09 :

Oui j'utilisais wp_mail() avant AMP il fonctionne comme mail()

#8

Par ARNAUD à 05h15 :

Bonjour,
Merci pour cet article, malheureusement je l'ai recopié et cela n'affiche rien... je n'arrive pas à comprendre où est mon erreur
https://www.sarlepc.fr/AMP/formulaire4-AMP.html
Merci d'avance pour votre retour

#9

Par Patrice à 08h54 :

Bonjour ARNAUD,

Regardez dans la console, vous avez des erreurs :
- [Error] Failed to load resource: Une erreur SSL s’est produite et il est impossible d’établir une connexion sécurisée avec le serveur. (mailchimp-post.php, line 0)
- [Error] [amp-form] Form submission failed: Error: XHR Failed fetching (https://www.sarlepc.fr/...): Une erreur SSL s’est produite et il est impossible d’établir une connexion sécurisée avec le serveur.
Oa (v0.js:8:344)
ta (v0.js:9:317)
error (v0.js:10)
Bc (amp-form-0.1.js:80)
(fonction anonyme) (amp-form-0.1.js:79:377)
promiseReactionJob

#10

Par Arnaud à 10h41 :

Bonjour Patrice,
Merci pour votre réponse mais quand je regarde sur ma console googlechrome je n'ai aucune erreur. Le fichier formulaire communique bien avec mailchimp puisque si je supprime le fichier mailchimp-post.php alors mon fichier https://www.sarlepc.fr/AMP/formulaire5-AMP écrit 'Erreur' quand j'envoie le texte, donc ça veut bien dire que dans le 1er cas le formulaire communique avec le fichier mailchimp-post qui malheureusement ne renvoie rien...


S'il faut faire un audit plus poussé, pas de problème pour vous missionner, car j'ai vraiment besoin de faire fonctionner cela, puisque je change tout mon site en AMP (exemple sur https://www.sarlepc.fr/AMP/page3.html) et que j'ai des formulaires... il ne me manque plus que ça pour mettre en ligne!
Egalement des questions pour pouvoir envoyer un formulaire sur un email, mais ça c'est un autre sujet...
Dans l'attente de votre réponse svp!

Je remets ci-dessous mes fichiers qui sont un copier coller des votres:

XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
https://www.sarlepc.fr/AMP/formulaire5-AMP.php
<!doctype html>
<html amp lang="fr">
<head>
<title>Test formulaire AMP</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
<link rel="canonical" href="/test_amp.html">
<script async src="https://cdn.ampproject.org/v0.js"></script>
<script async custom-element="amp-form" src="https://cdn.ampproject.org/v0/amp-form-0.1.js"></script>
<script async custom-template="amp-mustache" src="https://cdn.ampproject.org/v0/amp-mustache-0.2.js"></script>

<style amp-boilerplate>body{-webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:-amp-start 8s steps(1,end) 0s 1 normal both;animation:-amp-start 8s steps(1,end) 0s 1 normal both}@-webkit-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}</style><noscript><style amp-boilerplate>body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}</style></noscript>
</head>
<body>
<h1>Exemple de formulaire AMP vers un fichier PHP</h1>
<p>Le texte est envoyé par le formulaire AMP vers le fichier PHP qui renvoit une réponse au format JSON.</p>
<!--<form method="post" action-xhr="https://blog.niap3d.com/amp-form/form.php" target="_blank">-->
<form method="post" action-xhr="https://www.sarlepc.fr/AMP/mailchimp-post.php" target="_blank">
<p><label for="email">Entrez un texte : </label><input type="text" name="name" value="" required></p>
<p><label> </label><input type="submit" value="Envoyer"></p>

<div submit-success>
<template type="amp-mustache">Le texte renvoyé par PHP : {{name}}</template>
</div>
<div submit-error>
<template type="amp-mustache">Erreur !</template>
</div>
</form>
</body>
</html>

XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
mailchimp-post.php
<?php
// on définit les entêtes HTTP
header('Content-Type: application/json');
header('Access-Control-Allow-Origin: https://'.$_SERVER['HTTP_HOST']);
header('Access-Control-Allow-Credentials: true');
header('Access-Control-Expose-Headers: AMP-Access-Control-Allow-Source-Origin');
header('AMP-Access-Control-Allow-Source-Origin: https://'.$_SERVER['HTTP_HOST']);

// on peut traiter les données $_POST
$data = array();
$data['name'] = $_POST['name'];

// pour finir on renvoi le résultat au format JSON
echo json_encode($data);
?>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

#11

Par Patrice à 16h57 :

Bonjour Arnaud,

Si vous regarder dans la console après avoir cliqué sur le bouton "Envoyer" s'affiche
- XHR POST https://www.sarlepc.fr/AMP/mailchimp-post.php?__amp_source_origin=https%3A%2F%2Fwww.sarlepc.fr
[HTTP/2.0 301 Moved Permanently 18ms]
- XHR GET https://www.sarlepc.fr/AMP/mailchimp-post?__amp_source_origin=https%3A%2F%2Fwww.sarlepc.fr

Vos URLs sont correctes ?

#12

Par ARNAUD à 07h53 :

MERCI!!!!!!
J'ai supprimé le .php et donc ça devient <form method="post" action-xhr="https://www.sarlepc.fr/AMP/mailchimp-post" target="_blank">
ET CA MARCHE!!!!
Le problème vient de mon .htaccess qui supprime le .php dans toutes les adresses de mon site.
Merci encore et au plaisir de relire vos articles très intéressants.
Arnaud

Ajouter votre commentaire

Votre adresse ne sera pas affichée.

Elle sert à vous envoyer une notification.

 

Image Viewer