amp-html - AMP 轮播滑块中的 AMP 表单

Question

我正在尝试在多张幻灯片上添加一个表单。用户可以在一张幻灯片上填写一些详细信息，然后转到下一张以填写更多信息。

它在 amp-carousel 中工作。但是，当提交或字段在另一张幻灯片上时，它不起作用。

是否有一个原因？或者有办法解决这个问题？

<amp-carousel height="100vh" layout="fixed-height" type="slides">
      <div>
       <form method="post" action-xhr="send-form.php">
      <div class="blue-box">
         <input type="text" name="name" required  />
         Your telephone number:<br>
         <input type="text" name="phone" required />    
      </div>

    </div>
    <div>
      <div class="red-box">
      Your email address:<br>
           <input type="text" name="email"  required />
      </div> 

    </div>
    <div>
    <div class="blue-box">
        Your message:<br>
           <textarea name="message"></textarea>
      </div>
    </div>
    <div>
      <div class="green-box">
        <input type="submit" value="" style="height:100px; width:100px; background-color:#000;"/>    
      </div>
    </form>
    </div>
  </amp-carousel>

标签： amp-html

Answer 1

看起来您正在尝试“破解”多页流表单。

您无法使用 amp-carousel 执行此操作，因为当 AMP 呈现轮播时，它会使用其中的所有 HTML 来创建幻灯片。它不会链接幻灯片，因此每张幻灯片的 HTML 都是独立的。所以 AMP 在第一张幻灯片中看到的是这段代码：

<form method="post" action-xhr="send-form.php">
      <div class="blue-box">
         <input type="text" name="name" required  />
         Your telephone number:<br>
         <input type="text" name="phone" required />    
      </div>

    </div>

然后 AMP 发现结束</form>标记丢失，因此将其添加到第一张幻灯片中，其余字段位于表单之外，因此您无法提交它，因为该submit字段位于最后一张幻灯片上。

这是第一张幻灯片中的代码如何呈现的屏幕截图：

AMP 会自动关闭该form元素。

因此，如果您想将整个表单添加到第一张幻灯片，它应该可以工作。如果您真的想要一个多页流表单，请amp-bind改用。