AMP PHP Contact Form Don't Redirect (Google AMP)

Question

I have HTML form in AMP, with POST action; PHP file for emails use Sendgrid API. I was try headers response for Json redirect, but, don't works.

For this reason i applied JavaScript redirect (yes, i know, this generate error for AMP validation, but i need redirect to thanks page for track online conversions).

PHP file works fine, all emails are send it's, but whithout JavaScript redirect, only with div success or error for email send, only i see error for send email, but, contradictorily, all emails are send it's without problems LOL through Sendgrid API).

So, i need redirect the HTML contact form with correct PHP header Json response (without JavaScript), for track online conversions and validate correctly my AMP HTML source. In other case, i think to it's very useful make a correct redirect from PHP file after success submission (to i try redirect with header location in PHP, but, don't works...)

Form:

<form method="post"
  class="p2"
  action-xhr="//example.com/path/themex/amp-theme/path/file.php"
  target="_top">
  <div class="ampstart-input inline-block relative m0 p0 mb3">
    <input type="text"
      class="block border-none p0 m0"
      name="name"
      placeholder="Nombre"
      required>
    <input type="tel"
      class="block border-none p0 m0"
      name="tel"
      placeholder="Teléfono"
      required>
  </div>
  <select name="store"
      id="store">
      <option value="San Antonio">San Antonio</option>
      <option value="Santiago Centro">Santiago Centro</option>
      <option value="San Bernardo">San Bernardo</option>
      <option value="Puente Alto">Puente Alto</option>
      <option value="Rancagua">Rancagua</option>
      <option value="Chillán">Chillán</option>
      <option value="Talca">Talca</option>
      <option value="Concepción">Concepción</option>
      <option value="Los Ángeles">Los Ángeles</option>
      <option value="Linares">Linares</option>
      <option value="Valdivia">Valdivia</option>
      <option value="Temuco">Temuco</option>
      <option value="Puerto Montt">Puerto Montt</option>
    </select>
    <label for="sucursal"
      class="absolute top-0 right-0 bottom-0 left-0">Selecione una Ciudad</label>
  <input type="submit"
    value="Enviar"
    class="ampstart-btn caps" onclick="redirectThanks()">
                <script>
function redirectThanks() {
    window.location = "https://www.example.com/thanks-page/amp/";
}
</script>
  <div submit-success>
    <template type="amp-mustache">
      Success! Thanks {{name}} for trying the
      <code>amp-form</code> demo! Try to insert the word "error" as a name input in the form to see how
      <code>amp-form</code> handles errors.
    </template>
  </div>
  <div submit-error>
    <template type="amp-mustache">
      Error! Thanks {{name}} for trying the
      <code>amp-form</code> demo with an error response.
    </template>
  </div>
</form>

PHP post:

<?php
/*SendGrid Library*/
require_once ('vendor/autoload.php');

/*Post Data*/
$name = $_POST['name'];
$tel = $_POST['tel'];
$store = $_POST['store'];

/*Content*/
  $from = new SendGrid\Email("Sender", "no-reply@example.com");
$subject = "My Subject {$store}";
$to = new SendGrid\Email("Recipient", "address@example.com");
$content = new SendGrid\Content("text/html", "
 Name: {$name}<br>
 Phone: {$tel}<br>
 Store: {$store}
 ");

/*Send the mail*/
$mail = new SendGrid\Mail($from, $subject, $to, $content);
$apiKey = ('mysendgridapikeyhash');
$sg = new \SendGrid($apiKey);

/*Response*/
$response = $sg->client->mail()->send()->post($mail);

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://www.example.com/");
header("Access-Control-Expose-Headers: AMP-Access-Control-Allow-Source-Origin");
header ('AMP-Redirect-To: https://www.example.com/thanks-page/amp/');

?>

Any idea, please?

score 1 · Answer 1 · answered Jun 05 '17 at 18:35

I notice you specify an Access-Control-Expose-Headers header, and only added AMP-Access-Control-Allow-Source-Origin to it. The amp-form docs state that AMP-Redirect-To also needs to be exposed.

Try this:

header("Access-Control-Expose-Headers: AMP-Access-Control-Allow-Source-Origin, AMP-Redirect-To");

If that doesn't work, try opening the browser developer tools and adding any console errors to your question. If anything is going wrong, the AMP framework usually writes very helpful error messages in the console that are useful for diagnosing problems.

AMP PHP Contact Form Don't Redirect (Google AMP)

1 Answers1