Search code examples
phphtmlamp-htmlaccelerated-mobile-page

AMP form response not working in google cache


I created an AMP page for my website, all works fine on my desktop browser, tested and works fine on my mobile, if certain fields are empty or not valid, the submit-error correctly displays the error message, also, on successful submission it correctly displays the submit-success message.

When I submitted the page to Google to cache the amp page, I tested the form once again, this time it isn't displaying the error or success messages. But if the form submission is valid, it will send me an email but not display the success message.

Form html code:

<form action-xhr="posts/submit.php" method="POST" class="contactForm" target="_top">
    <fieldset>
        <div class="formFieldWrap">
            <label class="field-title">Select a product:<span>(required)</span></label>
            <div class="select-style full-bottom">
            <select name="product">
                    <option selected="" disabled="">Select a Product</option>
                    <option value="product1">product 1</option>
                    <option value="product2">product 2</option>
            </select>
            </div>
        </div>                  
        <div class="formFieldWrap">
            <label class="field-title">Full Name:<span>(required)</span></label>
            <input type="text" name="fullname" value="" class="contactField" />
        </div>
        <div class="formFieldWrap">
            <label class="field-title">Telephone: <span>(required)</span></label>
            <input type="text" name="telephone" value="" class="contactField" />
        <div class="formFieldWrap">
            <label class="field-title">Email: <span>(required)</span>
            </label>
            <input type="text" name="email" value="" class="contactField" />
        </div>
        <input type="hidden" name="ps" value="amp_Homepage">
        <div class="formSubmitButtonErrorsWrap contactFormButton">
            <input type="submit" class="buttonWrap button bg-teal-dark contactSubmitButton" value="Start my claim" />
        </div>
    </fieldset>
    <div submit-success>
        <template type="amp-mustache">
            <span class="center-text color-green-dark"><strong>Congratulations {{fullname}}!</strong> You have successfully submitted your claim. You can expect a telephone call from My Claim Solved just to confirm a few details.</span>
        </template>
    </div>
    <div submit-error>
        <template type="amp-mustache">
            <span class="center-text color-red-light"><strong>Oops!</strong> {{message}}</span>
        </template>
    </div>
</form>

PHP page:

<?php
$source_origin = trim($_REQUEST['__amp_source_origin']);//Security
if($source_origin != "https://example.com"){
echo "Not allowed origin";
return;
}
header('AMP-Access-Control-Allow-Source-Origin: https://example.com');
header('Content-Type: application/json; charset=UTF-8;'); 

$start = microtime(true);
$con=mysqli_connect("myip","myuser","mypass","mydb");


$Product = mysqli_real_escape_string($con, $_REQUEST['product']);
$FullName = mysqli_real_escape_string($con, $_REQUEST['fullname']);$FullName = ltrim($FullName);$FullNameMail = mysqli_real_escape_string($con, $_REQUEST['fullname']);
$Telephone = mysqli_real_escape_string($con, $_REQUEST['telephone']);
$Email = mysqli_real_escape_string($con, $_REQUEST['email']);
$Provider = mysqli_real_escape_string($con, $_REQUEST['provider']);
$PageSource = mysqli_real_escape_string($con, $_REQUEST['ps']);


if($Product != 'product1' && $Product != 'product2'){
    header('Status: 400', TRUE, 400);
    echo json_encode(array('message'=>'You must select a product.'));
}elseif(empty($FullName) || strlen($FullName)<3) {
    header('Status: 400', TRUE, 400);
    echo json_encode(array('message'=>'You must enter your full name.'));
}elseif (empty($Telephone) || strlen($Telephone)<9) {
    header('Status: 400', TRUE, 400);
    echo json_encode(array('message'=>'You must enter a valid telephone number.'));
}elseif (!filter_var($Email, FILTER_VALIDATE_EMAIL)) {
    header('Status: 400', TRUE, 400);
    echo json_encode(array('message'=>'You must enter a valid email address.'));
}else{

    // Send Email
    $To = "[email protected]";
    $Message = "bla bla";
    $Headers = "From: [email protected]";  
    mail($To, 'subject bla', $Message, $Headers); 


    echo json_encode(array("product"=>$Product,"fullname"=>$FullName,"telephone"=>$Telephone,"email"=>$IPAddress));
}

?>

Solution

  • just to let you know how it was fixed (thanks to ade for pointing me in the right direction), I amended the headers on the php page to the below:

    header("access-control-allow-credentials:true");
    header("access-control-allow-headers:Content-Type, Content-Length, Accept-Encoding, X-CSRF-Token");
    header("access-control-allow-methods:POST, GET, OPTIONS");
    header("access-control-allow-origin:".$_SERVER['HTTP_ORIGIN']);
    header("access-control-expose-headers:AMP-Access-Control-Allow-Source-Origin");
    header("amp-access-control-allow-source-origin:https://".$_SERVER['HTTP_HOST']);
    header("Content-Type: application/json");