Hola sign, Jon Tyson on Unsplash Hola sign, Jon Tyson on Unsplash

Formulaire de contact AMP avec Hexo

Pour intégrer un formulaire au format AMP dans un site web, il existe le composant amp-form. L'utilisation de ce composant ne pose pas de problème particulier et les exemples fournis sur le site amp.dev sont bien expliqués.

Je vais maintenant décrire comment j'ai créé et intégré un formulaire de contact avec le composant amp-form et le framework Hexo.

Activation

Pour activer le composant de formulaire AMP, j'ajoute l'import amp-form dans la balise <head> de mon template principal.

<!-- fichier: base.swig aka layout -->
<head>
...
<script
async
custom-element="amp-form"
src="https://cdn.ampproject.org/v0/amp-form-0.1.js">
</script>
...
</head>

Le formulaire

Mon thème Hexo utilise le moteur de template javascript swig.
Je crée un nouveau partial dans les templates que je nomme form.swig .

Je reprend l'exemple donné sur amp.dev et je l'intègre dans mon fichier.
J'emprunte la conception des blocs et des classes css à Bootstrap et je refactorise le formulaire à ma convenance.

<!-- fichier: form.swig -->
<form
class="contact-form"
method="post"
action-xhr="https://mon_site/contact.php"
target="_top"
custom-validation-reporting="show-all-on-submit">

<div class="form-head">
<div class="form-group">
<input
type="text"
id="show-firstname"
name="firstname"
class="form-control" />

<input
type="text"
id="show-all-on-submit-name"
name="name"
placeholder="Nom"
required
pattern="\p{L}+\s\p{L}+"
class="form-control" />

<span
visible-when-invalid="valueMissing"
validation-for="show-all-on-submit-name">
</span>
<span
visible-when-invalid="patternMismatch"
validation-for="show-all-on-submit-name">

Merci de saisir votre prénom et votre nom séparés par un espace (ex.
Jean Dupont).
</span>
</div>
<div class="form-group">
<input
type="email"
id="show-all-on-submit-email"
name="email"
placeholder="Email"
class="form-control"
required />

<span
visible-when-invalid="valueMissing"
validation-for="show-all-on-submit-email">
</span>
<span
visible-when-invalid="typeMismatch"
validation-for="show-all-on-submit-email">
</span>
</div>
</div>
<div class="form-group">
<textarea
name="message"
id="show-all-on-submit-message"
rows="1"
placeholder="Message"
class="form-control"
required>
</textarea>
<span
visible-when-invalid="valueMissing"
validation-for="show-all-on-submit-message">
</span>
<span
visible-when-invalid="typeMismatch"
validation-for="show-all-on-submit-message">
</span>
</div>
<input
type="submit"
value="Envoyer"
class="form-submit btn btn-primary" />

<div submit-success>Succés !</div>
<div submit-error>Erreur !</div>
</form>

Action

Comme j'utilise la méthode POST pour l'envoi des données du formulaire, l'action doit être de la forme action-xhr.

Validation

Le composant amp-form propose plusieurs types de validation. J'ai choisi la stratégie de validation à la soumission du formulaire soit show-all-on-submit.

Spam

Pour limiter le spam, j'ai introduit le champ fictif ou « honeypot » show-firstname dans le formulaire.

Page contact

Je crée la page contact pour afficher le formulaire.

$ hexo new page "contact"

Dans le partial article.swig, j'ajoute une condition après item.content pour inclure le formulaire dans la page.

{# fichier: article.swig #}
...
<div class="article__entry">

{% if item.excerpt && index %}
{{ item.excerpt }}
{% else %}
{{ item.content }}
{% if is_current('/contact') %}
{% include 'form.swig' %}
{% endif %}
{% endif %}
</div>
...

Récupération des données

Pour récupérer et traiter les données du formulaire, je crée le fichier contact.php à la racine de mon thème.

/* fichier: contact.php */
if(!empty($_POST)) {

if(!empty($_POST['firstname'])) {
return;

} else {
$name = $_POST['name'];
$email = $_POST['email'];
$message = $_POST['message'];

header("Content-type: application/json");
header("Access-Control-Allow-Credentials: true");
header("Access-Control-Allow-Origin: *.ampproject.org");
header("AMP-Access-Control-Allow-Source-Origin: https://mon_site.fr");

$email_to = "mon_adresse_mail@mon_site.fr";
$email_subject = "Sujet du message";

$email_message .= "<html><head></head><body>";
$email_message .= "<p>Expéditeur</p>";
$email_message .= "<p>Nom :&nbsp;".$name."<br>";
$email_message .= "Email :&nbsp;".$email."</p>";
$email_message .= "<p>Message</p>";
$email_message .= "<p>".$message."</p>";
$email_message .= "</body></html>";

$email_header = "MIME-Version: 1.0" . "\r\n";
$email_header .= "Content-type: text/html; charset=UTF-8" . "\r\n";
$email_header .= "From:" .$email."\r\n";

$data = array();
$data['name'] = $_POST['name'];

if(!mail($email_to, $email_subject, $email_message, $email_header)){
header("HTTP/1.0 412 Precondition Failed", true, 412);
echo json_encode($data);
die();

} else {
header("AMP-Redirect-To: https://mon_site.fr/confirmation/");
header("Access-Control-Expose-Headers: AMP-Access-Control-Allow-Source-Origin, AMP-Redirect-To");
echo json_encode($data);
die();
}
}
}

Redirection

Après soumission du formulaire, amp-form permet de rediriger l'utilisateur vers une nouvelle page avec AMP-Redirect-To. J'ai choisi cette solution pour afficher une page de confirmation.

Page confirmation

Je crée la page de confirmation.

$ hexo new page "confirmation"

Récapitulatif

Je dispose d'une page contact qui affiche mon formulaire.
Les données de celui-ci sont récupérées et traitées par le fichier contact.php .
En cas de succés, contact.php redirige l'utilisateur vers la page confirmation.

Liens