Après avoir réaliser un article sur la mise en page de pages amp, je, je vais vous montrer dans cet exemple comment mettre en place un formulaire amp-form dans vos pages. Je donne ici un exemple complet afin de gérer l’affichage et le traitement des données.
Si vous avez un des messages d’erreur ci-dessous, vous trouverez toutes les informations nécessaires pour résoudre vos problèmes.
POST ERROR STATUS 500
The tag ‘amp-form extension .js script’ is missing or incorrect, but required by ‘FORM [method=POST]’
Response must contain the AMP-Access-Control-Allow-Source-Origin header
Form submission failed: Error: Response must contain the AMP-Access-Control-Allow-Source-Origin header??? _reported_
action-xhr requiert un site un https. Vous ne pourrez donc pas mettre en place se formulaire si votre site est en HTTP
Votre route dans le fichier web.php
Route::any('frontend/sendCommentsAmp', ['as'=>'frontend/sendCommentsAmp','uses'=>'Frontend\Posts\CommentsController@sendCommentsAmp']);Partie html / page amp
Voilà un exemple de code html pour afficher un formulaire. Si vous utiliser Laravel n’oubliez pas le token avec {{ csrf_field() }} sinon vous aurez des erreurs
/* A include dans le section head*/
<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.1.js"></script>
/* fin de l'inclusion dans head */
<form id='form_review' class='clearboth form_review' method="POST"
action-xhr='<?php echo route('frontend/sendCommentsAmp');?>'
target="_top">
{{ csrf_field() }} /* Sinon vous aurez une erreur*/
<input type="hidden" name="idpost" value="22">
<input type="text" name="name" id="name" value="" required>
<label for="txt_comment">Commentaire</label>
<textarea name='txt_comment' id='txt_comment' rows="6" required> </textarea>
<div submit-success>
<template type="amp-mustache">
@{{reponse}} /* le @ permet d'échapper les { afin de ne pas avoir d'erreur avec blade*/
</template>
</div>
<input class="btn btn-primary" type="submit" id='send_comment' value="Send"/>
</form>Controller
Dans le controller, vous devez retourner les bon header sous peine d’avoir des erreurs.
class CommentsController extends Controller
{
public function sendCommentsAmp(Request $request)
{
$error_data=false;
if(is_null($request->idpost) || !is_numeric($request->idpost) || is_null($request->txt_comment)
|| is_null($request->name) ) {
$error_data = true;
}
if(!$error_data){
$check_post = DB::table('mes_posts')->where('id',$request->idpost)->limit(1)->get();
if($check_post->count()==0){
$error_data = true;
}
}
if($error_data){
$output = ['reponse' => 'Error'];
} else {
/* On fait le traitement voulu*/
$output = [ 'reponse' => 'Merci votre commentaire est en cours de validation.'];
}
header("Access-Control-Allow-Origin: https://cdn.ampproject.org");
header("AMP-Access-Control-Allow-Source-Origin: https://".$_SERVER["SERVER_NAME"]);
header("Access-Control-Expose-Headers:AMP-Access-Control-Allow-Source-Origin");
echo json_encode($output);
die();
}
}
