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>

Answer 1

您似乎正在尝试 "hack" multi page flow form。

您不能使用 amp-carousel 执行此操作，因为当 AMP 呈现轮播时，它会使用其中的所有 HTML 来创建幻灯片。它不会 link 放在幻灯片上，所以每张幻灯片的 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 元素。

因此，如果您想将整个表单添加到第一张幻灯片，应该可以。如果您真的想要 multi page flow form，请改用 amp-bind。

AMP 轮播滑块中的 AMP 表单

AMP form within an AMP carousel slider

amp-html