Back to Amphtml

Here are the results for the search:

examples/forms.amp.html

latest4.4 KB
Original Source

Form with textarea

Press Ctrl+Enter to submit this text

Success! {{textarea-ctrl-submit}}

Search (GET non-xhr same origin)

Search for

Search (GET non-xhr cross origin - current host > httpbin.org)

Search for

Search (GET non-xhr same origin) Using AMP Bind and Amp Action (on="tap:....")

Search for Submit AMP Bind Search

Search (GET xhr same origin)

Search for

Here are the results for the search:

{{#results}}- {{title}} {{/results}}

Search (GET xhr cross origin current host > httpbin.org)

Search for

You searched for: {{term}}

Search (GET xhr same origin) Using AMP Bind and Amp Action (on="tap:....")

Search for Submit AMP Bind Search

You searched for: {{term}}

The submitted amp bind state was: {{additionalFields}}

Subscribe to our weekly Newsletter (POST xhr same origin)

Your nameYour email Please wait, {{name}}.

Success! Thanks for subscribing! Please make sure to check your email to confirm!

Oops! We apologize, something went wrong. Please try again later.

Subscribe to our weekly Newsletter (xhr POST cross origin - current host > amp.localhost:8000)

Your nameYour email Success! Thanks {{name}} for subscribing! Please make sure to check your email {{email}} to confirm!

Oops! {{name}}, We apologies something went wrong. Please try again later.

Subscribe to our weekly Newsletter (xhr + submit events)

This message will hide when the form is submitted Your nameYour email There are some input that needs fixing. Please fix them.

Everything looks good, you can submit now!

Please hold on while we submit your answer!

Success! Thanks {{name}} for subscribing! Please make sure to check your email {{email}} to confirm!

Oops! {{name}}, We apologies something went wrong. Please try again later.

Thanks for the submission! Here's a cupcake!

Oops! Kittens!

NOT ALLOWED (POST non-xhr - submission prevented)

Subscribe

Custom Validations

Show First Validation On Submit

Your name Please enter your first and last name separated by a space (e.g. Jane Miller) Your email

Show All Invalid Messages On Submit

Your name Please enter your first and last name separated by a space (e.g. Jane Miller) Your email

Show All Invalid Messages On Submit (Summary)

  1. Name is a required field. Please fill it out.
  2. Please enter your first and last name separated by a space (e.g. Jane Miller)
  3. We need your email to send you coolness!
  4. That doesn't look like an email. Please fix it.

Your nameYour email

Show As You Go Messages On Submit

Your name Please enter your first and last name separated by a space (e.g. Jane Miller) Your email

Show As You Go Messages (with all messages on submit)

Your name Please enter your first and last name separated by a space (e.g. Jane Miller) Your email

on=change and form.submit examples

Wrong Action - should throw an error

What is your favorite flightless bird?

  • Penguins
  • Ostriches
  • Kiwis
  • Wekas

Thanks for answering the poll! Here are the results! {{#result}} - {{#percentage}}{{/percentage}} {{answer}} {{/result}}

Using button[type=submit]

Your nameYour emailSubscribe with a ButtonSubscribe with a Button 2 Success! Thanks {{name}} for subscribing! Please make sure to check your email {{email}} to confirm!

Oops! {{name}}, We apologies something went wrong. Please try again later.

amp-selector example

Redirect After POST (works only if running on localhost)

Send us a message

Recursive Event-Action-Event-Action Test - Should only submit once

Your nameYour email There are some input that needs fixing. Please fix them.

Everything looks good, you can submit now!

Please hold on while we submit your answer!

Success! Thanks {{name}} for subscribing! Please make sure to check your email {{email}} to confirm!

Oops! {{name}}, We apologies something went wrong. Please try again later.

Asynchronous verification example

NamePhoneAddress line 2 (optional)Zip CodeCityNot sent to verify

Throw an error?

Yes: No:

Here are your results:

{{#results}}- {{title}} {{/results}}

{{#verifyErrors}}

{{message}}

{{/verifyErrors}} {{^verifyErrors}}

Something went wrong. Try again later?

{{/verifyErrors}}

{{#verifyErrors}}

{{message}}

{{/verifyErrors}} {{^verifyErrors}}

Something went wrong. Try again later?

{{/verifyErrors}} You made a mistake

Debounced search

Search for

Here are the results for the search: {{term}}

{{#results}}- {{title}} {{/results}}