Open another form on submission in AMP HTML

Question

I am creating a contact form using AMP HTML.

After receiving the success response on action-xhr submission, I want to open another form for OTP verification. Verification url comes in the success response only.

I know that nested forms are against HTML validation, so another form inside the success template won't be possible at all. Any other technique/method through which I can achieve this, apart from redirection?

Answer 1

You can combine AMP's submit-success event, the show action, and the hidden attribute to reveal a hidden form.

<form 
  method="post"
  action-xhr="/form/echo-json/post"
  target="_blank"
  on="submit-success:form2.show"
>
  <!-- ... -->
</form>

<!-- ... -->

<form id="form2" hidden>
  <p>But wait! There's more!</p>
  <!-- ... -->
</form>

If you want to bind something to the success response, you'll need to add amp-bind and use on="submit-success:AMP.setState({property: event.response.property})"