AMP form within an AMP carousel slider

Question

I am trying to add a form over multiple slides. Where the user can fill it some details on one slide then go to the next to fill out more.

It works within the amp-carousel. However when the submit or fields are on another slide it doesn't work.

Is there a reason for this? Or a way around this?

<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

It looks like you are trying to "hack" a multi page flow form.

You can't do this with amp-carousel because when AMP renders a carousel, it uses all HTML in it to create a slide. It doesn't link up the slides, so each slide's HTML is on its own. So what AMP sees in the first slide is this code:

<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>

Then AMP sees that the closing </form> tag is missing, so its adds it to the first slide and the rest of the fields are outside the form hence why you can't submit it since the submit field is on the last slide.

Here is a screenshot how your code in the first slide is rendered:

AMP automatically closes the form element.

So if you want to add the whole form to the first slide, it should work. If you really want a multi page flow form, use amp-bind instead.