AMP Form submission redirect or response

Question

Good morning, I have a form on a test AMP page (is AMP validate) and the form works: I receive the email with result (I use a php to handle it). I don't know (I did some try but I think I still missing an example) the syntax for let the AMP page responce correctly (now I get "Subscription failed!" but I do get the email) or redirect after submission. Here my example:

AMP page with form (I receive form result after submission but I don't know how to redirect or get "Subscription successful!" message)

Non AMP page with form (I receive form result and it redirect correctly)

action-xhr file destination code: Code of the php here in txt format (the file that handle the form result)

Any example will be great for me also only about redirect. Thank you

BlueSuiter · Accepted Answer · 2017-04-26T07:27:01.513

You can redirect user after successful submission, however it can only be done if you are submitting values to a secure URL (like https://www.example.com).

HTML With AMP-Form

<!doctype html>
<html amp lang="en">
  <head>
    <meta charset="utf-8">
    <script async src="https://cdn.ampproject.org/v0.js"></script>
    <title>Hello, AMPs</title>
    <link rel="canonical" href="http://example.ampproject.org/article-metadata.html" />
    <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
    <script type="application/ld+json">
      {
        "@context": "http://schema.org",
        "@type": "NewsArticle",
        "headline": "Open-source framework for publishing content",
        "datePublished": "2015-10-07T12:02:41Z",
        "image": [
          "logo.jpg"
        ]
      }
    </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>
    <script async custom-element="amp-form" src="https://cdn.ampproject.org/v0/amp-form-0.1.js"></script>
  </head>
  <body>
    <h1>Hello World!</h1>
      <form target="_top" action-xhr="https://test.php" method="post" name="test">
        <input type="text" name="name" value="ABRA KA DABRA!">
        <input type="submit"/>
    </form>
  </body>
</html>

SUBMISSION REQUEST HANDLER CODE IN PHP

<?php
if(!empty($_POST))
{
    $name = $_POST['name'];

    /*/ this is the email we get from visitors*/
    $domain_url = (isset($_SERVER['HTTPS']) ? "https" : "http") . "://$_SERVER[HTTP_HOST]";
    $redirect_url = 'https://example.com/thank-you';

    /*//-->MUST BE 'https://';*/
    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: ".$domain_url);


    /*/ For Sending Error Use this code /*/
    if(!mail("email@example.com" , "Test submission" , "email: $name <br/> name: $name" , "From: $name\n ")){
        header("HTTP/1.0 412 Precondition Failed", true, 412);

        echo json_encode(array('errmsg'=>'There is some error while sending email!'));
        die();
    }
    else
    {
        /*/--Assuming all validations are good here--*/
        if( empty($redirect_url))
        {
            header("Access-Control-Expose-Headers: AMP-Access-Control-Allow-Source-Origin");
        }
        else
        {
            header("AMP-Redirect-To: ".$redirect_url);
            header("Access-Control-Expose-Headers: AMP-Redirect-To, AMP-Access-Control-Allow-Source-Origin");        }
            echo json_encode(array('successmsg'=>$_POST['name'].'My success message. [It will be displayed shortly(!) if with redirect]'));
        die();
    }
}?>

Hi, thank you.I copy and paste and upload and it does not work. No redirect and no send email. Where I am wrong? here the code exactely I upload it: https://pizzaoventhailand.com/TMP/form_AMP_test.php.txt and here the form: https://pizzaoventhailand.com/TMP/contattaci_test_AMP.html — Massimiliano Rubino, Apr 20 '17 at 03:25
I have updated the PHP code, please use this updated code. Error handling for mail is also added. Also, please remove the `.txt` from file name `form_AMP_test.php.txt` which I think you added intentionally so that I can read the code. — BlueSuiter, Apr 20 '17 at 05:38
Hi, thank you. Not work: no redirect, no email. The form_AMP_test.php.txt is just a copy of form_AMP_test.php that I update both with your new code. I did receive an email from sehr@r29.co did you try the other form? The other is OK but not redirect. — Massimiliano Rubino, Apr 21 '17 at 04:02
**WHAT ABOUT THIS** `
.php mail server

Please wait... Or click here
` — BlueSuiter, Apr 21 '17 at 06:03
Also, your `PHP code` **missing all the headers** mentioned in above code. — BlueSuiter, Apr 21 '17 at 06:06
Hi, that code is in the .php that handle the request from a AMP page and does work. If I use from a non AMP page does redirect, if I use from the https://pizzaoventhailand.com/TMP/contattaci_standby_AMP.htm that is AMP does not redirect but I get the email. I was more thinking about a very easy example to let it work as the code you posted above (html + php) but does not work. And which are all the headers? Thank you — Massimiliano Rubino, Apr 21 '17 at 06:46
Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/142246/discussion-between-bluesuiter-and-massimiliano-rubino). — BlueSuiter, Apr 21 '17 at 07:10
Hi, nothing change in the code and then from one day to another the redirect stop working. The email are still going to the recipient but no redirect. Did change something in the AMP protocol? — Massimiliano Rubino, Dec 05 '17 at 07:26
If I use the submit-success div I receive the error message but the email do go through! — Massimiliano Rubino, Dec 05 '17 at 08:17

score 2 · Answer 2 · answered Jun 15 '17 at 12:20

This post helped me create an AMP redirect response for C# thank you:

public virtual ActionResult AmpRedirect(string redirectUrl, string __amp_source_origin)
{
    if (redirectUrl != string.Empty)
    {   
        HttpContext.Response.AddHeader("AMP-Redirect-To", redirectUrl);
        HttpContext.Response.AddHeader("AMP-Access-Control-Allow-Source-Origin", __amp_source_origin);
        HttpContext.Response.AddHeader("Access-Control-Expose-Headers", "AMP-Redirect-To, AMP-Access-Control-Allow-Source-Origin");
    }

    HttpContext.Response.AddHeader("Content-type", "text/json");
    return Json(new {Content = ""});
}

I am glad, to know this :) – BlueSuiter Jun 22 '17 at 12:01 — BlueSuiter, Jun 22 '17 at 12:01

score 1 · Answer 3 · answered Jan 17 '18 at 14:38

Thank you for the guidance here. I'm also unable to get this code to work. I've uploaded the code to my server and tested on-line. Upon clicking submit, the text submitted disappears; there is no success or error message. The email is never received by my inbox.

Here is the exact code that I use, just replacing "mywebsite" with the real name of my site:

HTML

<!doctype html>
<html amp lang="en">
  <head>
    <meta charset="utf-8">
    <script async src="https://cdn.ampproject.org/v0.js"></script>
    <title>FORM TEST</title>
    <link rel="canonical" href="http://mywebsite.com/index.html" />
    <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
    <script type="application/ld+json">
      {
        "@context": "http://schema.org",
        "@type": "NewsArticle",
        "headline": "Open-source framework for publishing content",
        "datePublished": "2015-10-07T12:02:41Z",
        "image": [
          "logo.jpg"
        ]
      }
    </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>
    <script async custom-element="amp-form" src="https://cdn.ampproject.org/v0/amp-form-0.1.js"></script>
  </head>
  <body>
    <h1>FORM TEST!</h1>
      <form target="_top" action-xhr="http://mywebsite.com/MAILER2.php" method="post" name="test">
        <input type="text" name="name" value="Enter your name here...">
        <input type="submit"/>
    </form>
  </body>
</html>

PHP

<?php
if(!empty($_POST))
{
    $name = $_POST['name'];

    /*/ this is the email we get from visitors*/
    $domain_url = (isset($_SERVER['HTTPS']) ? "https" : "http") . "://$_SERVER[HTTP_HOST]";
    $redirect_url = 'http://mywebsite.com/index.html';

    /*//-->MUST BE 'https://';*/
    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: ".$domain_url);


    /*/ For Sending Error Use this code /*/
    if(!mail("admin@mywebsite.com" , "Test submission" , "email: $name <br/> name: $name" , "From: $name\n ")){
        header("HTTP/1.0 412 Precondition Failed", true, 412);

        echo json_encode(array('errmsg'=>'There is some error while sending email!'));
        die();
    }
    else
    {
        /*/--Assuming all validations are good here--*/
        if( empty($redirect_url))
        {
            header("Access-Control-Expose-Headers: AMP-Access-Control-Allow-Source-Origin");
        }
        else
        {
            header("AMP-Redirect-To: ".$redirect_url);
            header("Access-Control-Expose-Headers: AMP-Redirect-To, AMP-Access-Control-Allow-Source-Origin");        }
            echo json_encode(array('successmsg'=>$_POST['name'].'My success message. [It will be displayed shortly(!) if with redirect]'));
        die();
    }
}?>

AMP Form submission redirect or response

3 Answers3

HTML

PHP

Linked