-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
168 lines (162 loc) · 7.24 KB
/
index.html
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
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Contact Form Example - FormKiQ Core Web Form Handler</title>
<link href="https://unpkg.com/tailwindcss/dist/base.min.css" rel="stylesheet">
<link href="https://unpkg.com/tailwindcss/dist/components.min.css" rel="stylesheet">
<link href="https://unpkg.com/@tailwindcss/custom-forms/dist/custom-forms.min.css" rel="stylesheet">
<link href="https://unpkg.com/tailwindcss/dist/utilities.min.css" rel="stylesheet">
</head>
<body>
<div class="max-h-screen h-screen mx-4 my-4">
<section>
<div class="md:flex md:items-center mx-4 mb-4 relative">
<div class="md:w-1/3 lg:w-1/4">
</div>
<div class="md:w-2/3 lg:w-1/2">
<h1 class="text-2xl tracking-tight leading-10 font-extrabold text-gray-900 sm:leading-none md:text-3xl mb-4">
Contact Form Example
</h1>
<h2 class="text-xl tracking-tight leading-10 font-extrabold text-gray-900 sm:leading-none md:text-2xl mb-8">
(FormKiQ Core Web Form Handler)
</h2>
</div>
</div>
<form name="Contact Form" class="fkq-form">
<div class="md:flex md:items-center mx-4 mb-4 relative">
<div class="md:w-1/3 lg:w-1/4">
<label class="block text-gray-500 font-bold md:text-right mb-1 md:mb-0 pr-4" for="firstName">
First Name
</label>
</div>
<div class="md:w-2/3 lg:w-1/2">
<input
aria-label="First Name"
name="firstName"
type="text"
class="appearance-none rounded-md relative block w-full px-3 py-3 border border-gray-600
placeholder-gray-500 text-gray-900 rounded-t-md
focus:outline-none focus:shadow-outline-blue focus:border-blue-300 focus:z-10 sm:text-xl sm:leading-5"
placeholder="Jan"
/>
</div>
</div>
<div class="md:flex md:items-center mx-4 mb-4 relative">
<div class="md:w-1/3 lg:w-1/4">
<label class="block text-gray-500 font-bold md:text-right mb-1 md:mb-0 pr-4" for="lastName">
Last Name
</label>
</div>
<div class="md:w-2/3 lg:w-1/2">
<input
aria-label="Last Name"
name="lastName"
type="text"
class="appearance-none rounded-md relative block w-full px-3 py-3 border border-gray-600
placeholder-gray-500 text-gray-900 rounded-t-md
focus:outline-none focus:shadow-outline-blue focus:border-blue-300 focus:z-10 sm:text-xl sm:leading-5"
placeholder="Doe"
/>
</div>
</div>
<div class="md:flex md:items-center mx-4 mb-4 relative">
<div class="md:w-1/3 lg:w-1/4">
<label class="block text-gray-500 font-bold md:text-right mb-1 md:mb-0 pr-4" for="email">
Email Address
</label>
</div>
<div class="md:w-2/3 lg:w-1/2">
<input
aria-label="Email Address"
name="email"
type="email"
class="appearance-none rounded-md relative block w-full px-3 py-3 border border-gray-600
placeholder-gray-500 text-gray-900 rounded-t-md
focus:outline-none focus:shadow-outline-blue focus:border-blue-300 focus:z-10 sm:text-xl sm:leading-5"
placeholder="me@mycompany.com"
/>
</div>
</div>
<div class="md:flex md:items-center mx-4 mb-4 relative">
<div class="md:w-1/3 lg:w-1/4">
<label class="block text-gray-500 font-bold md:text-right mb-1 md:mb-0 pr-4" for="comments">
Comments
</label>
</div>
<div class="md:w-2/3 lg:w-1/2">
<textarea
aria-label="Comments"
name="comments"
rows="4"
class="appearance-none rounded-md relative block w-full px-3 py-3 border border-gray-600
placeholder-gray-500 text-gray-900 rounded-t-md
focus:outline-none focus:shadow-outline-blue focus:border-blue-300 focus:z-10 sm:text-xl sm:leading-5"
></textarea>
</div>
</div>
<div class="md:flex md:items-center mx-4 mt-8 mb-4 relative">
<div class="md:w-1/3 lg:w-1/4">
</div>
<div class="md:w-2/3 lg:w-1/2">
<input
type="submit"
class="w-full cursor-pointer bg-green-600 hover:bg-green-500 text-white font-bold py-2 px-3 inline-flex justify-center items-center"
value="Submit Form"
/>
</div>
</div>
<div id="response" class="hidden">
<div class="md:flex md:items-center mx-4 mt-8 mb-4 relative">
<div class="md:w-1/3 lg:w-1/4">
</div>
<div class="md:w-2/3 lg:w-1/2">
<h2 class="text-xl tracking-tight leading-10 font-extrabold text-gray-900 sm:leading-none md:text-2xl mb-8">
Your message has been received. Thank you!
</h2>
</div>
</div>
</div>
</form>
</section>
</div>
<script type="text/javascript" src="./node_modules/formkiq-client-sdk-javascript/dist/web-cjs/formkiq-client-sdk-cjs.js"></script>
<script type="text/javascript">
let formkiqClient;
window.onload = () => {
/*
* In order to auto-wire form or submit manually to the FormKiQ Core API,
* you must create an instance of FormkiqClient
*
* NOTE: you must replace "<ID>" and "<REGION>" with the ID and Region in your
* FormKiQ Core HTTP API URL, which can be found in your CloudFormation Outputs
* (see https://github.com/formkiq/formkiq-core#cloudformation-outputs)
*/
formkiqClient = new FormkiqClient('<ID>.execute-api.<REGION>.amazonaws.com');
}
/*
* You can submit the form manually using this function.
*
* NOTE: if you want to add an onsubmit attribute to your form, be sure to
* append "return false;" after your onsubmit code, to prevent the page submitting.
*/
function submitForm(thisForm) {
// only needed for manual form submitting
formkiqClient.webFormsHandler.submitFormkiqForm(thisForm);
}
function onFormSubmitted(formName) {
// this event is fired when the form has been submitted
console.log(`${formName} has been submitted for processing.`);
}
function onFormCompleted(formName, response) {
// this event is fired when the form processing has been completed
console.log(`${formName} has been received and processed. Response below:`);
console.log(response);
var responseDiv = document.getElementById('response');
if (responseDiv) {
responseDiv.classList.remove('hidden');
window.scrollBy(0, 200);
}
}
</script>
</body>
</html>