-
Notifications
You must be signed in to change notification settings - Fork 8
/
easy-form.html
218 lines (189 loc) · 7.62 KB
/
easy-form.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
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>EASY Form</title>
<!-- Style Guide CSS -->
<link href="css/form.css" rel="stylesheet">
<link href="css/buttons.css" rel="stylesheet">
<link href="css/flex.css" rel="stylesheet">
<link href="css/font-sizes.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">
<link href="css/modal.css" rel="stylesheet">
<link href="css/hamburger.css" rel="stylesheet">
<link href="css/nav.css" rel="stylesheet">
<link href="css/variables.css" rel="stylesheet">
<!-- Google Fonts -->
<link href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700" rel="stylesheet">
</head>
<body>
<!-- Begin Nav -->
<header>
<div class="flex flex-12 nav center left">
<div class="hidden-desktop left">
<div id="open-close-nav" class="hamburger hamburger--squeeze">
<div class="hamburger-box">
<div class="hamburger-inner"></div>
</div>
</div>
</div>
<div class="flex flex-2 flex-mobile-4 center">
<a href="/">
<span class="beta"><img class="flex center" src="logo.jpg">beta</span>
</a>
</div>
<div class="menu flex flex-8 center">
<a href="/" class="main">Home</a>
<div class="nav-item">
<p class="main">Elements</p>
<div class="dropdown">
<a href="#flex-grid" class="sub">Flex Grid</a>
<a href="#buttons" class="sub">Buttons</a>
<a href="#modal-section" class="sub">Modal</a>
<a href="#form" class="sub">Form</a>
</div>
</div>
<a href="https://github.com/tmoreton/useful.ly" target="_blank" class="main">Documentation</a>
<a href="/easy-form" class="main"><button class="flex center small">EASY Form</button></a>
</div>
</div>
</header>
<!-- End Nav -->
<div class="hero">
<div class="flex hero-content center">
<div style="text-align: center;">
<section>
<h2><strong>EASY Contact Form</strong></h2>
<h6>Free for 500 emails/month • Quick Setup • Great for static sites</h6>
<br>
<h5><strong>1.</strong> Copy iframe code below</h5>
<h5><strong>2.</strong> Paste iframe into your own code</h5>
<h5><strong>3.</strong> Change <strong>[email protected]</strong> to your own</h5>
<h5><strong>4.</strong> Done</h5>
</section>
</div>
</div>
<div class="flex bottom center">
<div style="text-align: center;">
<h6>Test It Out With Your Own Email!</h6>
<h2>ˇ</h2>
</div>
</div>
</div>
<section>
<h6><strong>Test Out Form Below:</strong></h6>
<input id="form-email" type="email" name="formEmail" value="" placeholder="Your Email">
</section>
<section>
<h6>iFrame Example:</h6>
<figure class="highlight">
<pre>
<iframe src="http://www.useful.ly/contact?email=<strong id="example-email">[email protected]</strong>"></iframe>
</pre>
</figure>
<br>
<h6>iFrame Styling:</h6>
<figure class="highlight">
<pre>
style="width: 100%; height: 520px; border: none;"
</pre>
</figure>
</section>
<section style="padding-bottom: 0;">
<iframe scrolling="no" style="width: 100%; height: 450px; border: none;" src="http://www.useful.ly/contact?email="></iframe>
</section>
<section style="text-align: center; padding-top: 0;">
<h1><strong>OR</strong></h1>
<br>
<h3><strong>EASY Form Plus+</strong></h3>
<p>EASY Contact Form is free and always will be for up to 500 emails/month but I am also currently working on a Plus version with more features for customization, added form fields and embeded forms.</p>
<button style="margin-top: 25px;" onclick="openModal()">Plus+</button>
</section>
<footer>
<!-- Begin MailChimp Signup Form -->
<section style="padding-top: 0;">
<div id="mc_embed_signup" class="flex-6 center">
<form action="//ImagineMyApp.us3.list-manage.com/subscribe/post?u=039197b0b22c39f4adf21fc88&id=61db42cdca" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate>
<div class="mc-field-group">
<input type="email" value="" placeholder="Subscribe to updates" name="EMAIL" class="required email" id="mce-EMAIL">
<label for="mce-EMAIL">Email Address <span class="asterisk">*</span></label>
</div>
<div id="mce-responses" class="clear">
<div class="response" id="mce-error-response" style="display:none"></div>
<div class="response" id="mce-success-response" style="display:none"></div>
</div>
<div style="position: absolute; left: -5000px;" aria-hidden="true"><input type="text" name="b_039197b0b22c39f4adf21fc88_61db42cdca" tabindex="-1" value=""></div>
<button type="submit" value="Subscribe" class="small flex center" name="subscribe" id="mc-embedded-subscribe">Subscribe</button>
</form>
</div>
</section>
<!--End mc_embed_signup-->
<div class="flex">
<div class="center">
<p>© 2016 Powered by useful.ly</p>
</div>
</div>
</footer>
<!-- Modal Begin -->
<div id="modal" class="modal flex center">
<div class="modal-background" onclick="closeModal()"></div>
<div class="modal-content">
<p class="modal-close" onclick="closeModal()">x</p>
<h4>EASY Form Plus+</h4>
<br>
<p>I am still working on the features so if you would like to get updated when it is available or request features of your own please leave me your email and feature request below.</p>
<form id="easy-form-request" action="#" method="POST">
<div class="flex">
<div class="flex-12" style="padding: 10px;">
<input required type="email" name="email" value="">
<label>Email <span>*</span></label>
</div>
<div class="flex-12" style="padding: 10px;">
<input type="text" name="feature" value=""></input>
<label>Feature</label>
</div>
<button type="submit" value="Submit" class="center form-submit">Submit</button>
</div>
</form>
</div>
</div>
<!-- Modal End -->
<!-- Style Guide JS -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="js/analytics.js"></script>
<script src="js/script.js"></script>
<script type="text/javascript">
$( "#form-email" ).keyup(function() {
var formEmail = $(this).val();
var url = "http://www.useful.ly/contact?email=" + formEmail
$("#example-email").text(formEmail);
$("iframe").attr("src", url);
});
$("#easy-form-request").submit(function(e) {
e.preventDefault();
var email = $("input[name='email']");
var feature = $("textarea[name='feature']");
var url = 'https://ycwfh8vkck.execute-api.us-east-1.amazonaws.com/prod/test'
var data = {
"email": email.val(),
"feature": feature.val()
}
$.ajax({
type: 'POST',
url: url,
dataType: 'json',
contentType: 'application/json',
data: JSON.stringify(data),
success: function (data) {
location.reload();
},
error: function (data) {
console.log("Error" + data)
}
})
});
</script>
</body>
</html>