Close popup and clear form on successful submission

Hello @smalloutside

I am not sure how to handle it, The form and lightbox should maintain it’s state ie. the Redirecting… message and prefilled data etc. because it is serving data using ajax and the lightbox was not closed which keeps it’s state as open.

However, it is highly unlikely for user to hit “back” unless there is nothing to click on the confirmation message page.

If there is nothing I will suggest adding big bold button that says take back to landing page… or …continue etc.

If that doesn’t work I will suggest using the form events with mustache templates to display confirmation or error message, so once user done filling form he will close the poppup and don’t need to rediret to another page for confirmation message.

eg:

<form ...> 
  <input...>
  .......
    <div submit-success>
      <template type="amp-mustache">
       form Submitted successfully!
      </template>
    </div>
    <div submit-error>
      <template type="amp-mustache">
        form Submission failed!
      </template>
    </div>
</form>
<code></code>

Thanks @milindmore22 for the pointers.

We were able to solve this by using the information and ideas from a few other places.

For anyone facing the same issue, here is what we have done.

We have added methods to the amp-form events using the “on” attribute. We attached the following methods to the “submit-success” event

• Close the lightbox using the .close method on the lightbox
• Clear the content of the form using the .clear method on the form
• Redirect to a new page using the .navigateTo method on the AMP object

Here is the code that we have implemented.

<form id='contact-form' method="POST" on="submit-success:contact-form-popup.close,simple-contact.clear,AMP.navigateTo(url='/confirmation')">

Hello @smalloutside

Thank you for sharing your solution, this will be helpful for others