amphtml/examples/forms.amp.html at master · grimespie/amphtml · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
<!doctype html>
<html ⚡>
<head>
    <meta charset="utf-8">
    <title>Forms Examples in AMP</title>
    <link rel="canonical" href="amps.html" >
    <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
    <style amp-boilerplate>body{-webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:-amp-start 8s steps(1,end) 0s 1 normal both;animation:-amp-start 8s steps(1,end) 0s 1 normal both}@-webkit-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}</style><noscript><style amp-boilerplate>body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}</style></noscript>
    <script async src="https://cdn.ampproject.org/v0.js"></script>
    <script async custom-element="amp-form" src="https://cdn.ampproject.org/v0/amp-form-0.1.js"></script>
    <script async custom-template="amp-mustache" src="https://cdn.ampproject.org/v0/amp-mustache-0.1.js"></script>
    <style amp-custom>
        input:invalid {
            background-color: #dc4e41;
        }

        form .form-message {
            display: none;
        }

        form:invalid .invalid-message {
            display: block;
            color: #dc4e41;
        }

        form:valid .valid-message {
            display: block;
            color: #4CAF50;
        }

        form.amp-form-submitting .submitting-message {
            display: block;
            color: #919191;
        }

        form.amp-form-submit-success [submit-success] {
            display: block;
            color: #0000ff;
        }

        form.amp-form-submit-error [submit-error] {
            display: block;
            color: #dc4e41;
        }
    </style>
</head>
<body>

<h2>Subscribe to our weekly Newsletter (non-xhr)</h2>

<form method="post" action="/form/html/post" target="_blank">
    <fieldset>
        <label>
            <span>Your name</span>
            <input type="text" name="name" required>
        </label>
        <label>
            <span>Your email</span>
            <input type="email" name="email" required>
        </label>
        <input type="submit" value="Subscribe">
    </fieldset>

    <div class="invalid-message">
        There are some input that needs fixing. Please fix them.
    </div>
    <div class="valid-message">
        Everything looks good, you can submit now!
    </div>
</form>

<h2>Subscribe to our weekly Newsletter (xhr)</h2>

<form method="post"
      action="/form/html/post"
      action-xhr="/form/echo-json/post"
      target="_blank">
    <fieldset>
        <label>
            <span>Your name</span>
            <input type="text" name="name" required>
        </label>
        <label>
            <span>Your email</span>
            <input type="email" name="email" required>
        </label>
        <input type="submit" value="Subscribe">
    </fieldset>

    <div class="form-message invalid-message">
        There are some input that needs fixing. Please fix them.
    </div>
    <div class="form-message valid-message">
        Everything looks good, you can submit now!
    </div>
    <div class="form-message submitting-message">
        Please hold on while we submit your answer!
    </div>
    <div submit-success>
        <template type="amp-mustache">
            Success! Thanks {{name}} for subscribing! Please make sure to check your email {{email}}
        to confirm!
        </template>
    </div>
    <div submit-error>
        <template type="amp-mustache">
            Oops! {{name}}, We apologies something went wrong. Please try again later.
        </template>
    </div>
</form>
</body>
</html>