AMP PHP联系表单不要重定向(Google AMP)

时间:2017-05-08 17:03:03

标签: php forms redirect amp-html

我在AMP中有HTML表单,有POST操作;电子邮件的PHP文件使用Sendgrid API。 I was try headers response for Json redirect但是,不行。

出于这个原因,我应用了JavaScript重定向(是的,我知道,这会产生AMP验证错误,但我需要重定向到感谢页面进行跟踪在线转换)。

PHP文件工作正常,所有电子邮件都是发送的,但没有JavaScript重定向,只有div成功或电子邮件发送错误,只有我看到发送电子邮件的错误,但是,相反,所有电子邮件LOL通过Sendgrid API发送它没有问题。)

因此,我需要使用正确的PHP标头Json响应(不使用JavaScript)重定向HTML联系表单,以便跟踪在线转换并正确验证我的AMP HTML源代码。在其他情况下,我认为在成功提交后从PHP文件中进行正确的重定向是非常有用的(我尝试使用PHP中的标题位置重定向,但是,不起作用...)

形式:

<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帖子:

<?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/');

?>

请问,好吗?

1 个答案:

答案 0 :(得分:1)

我注意到您指定了 Access-Control-Expose-Headers 标头,并且只向其添加了 AMP-Access-Control-Allow-Source-Origin The amp-form docs声明还需要公开 AMP-Redirect-To

试试这个:

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

如果这不起作用,请尝试打开浏览器开发人员工具并在问题中添加任何控制台错误。如果出现任何问题,AMP框架通常会在控制台中编写非常有用的错误消息,这些消息对于诊断问题非常有用。