-
Notifications
You must be signed in to change notification settings - Fork 0
/
formspree.io.html
357 lines (305 loc) · 16.3 KB
/
formspree.io.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
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Formspree</title>
<script src="//use.typekit.net/htc4dlo.js"></script>
<script>try{Typekit.load();}catch(e){}</script>
<link rel="stylesheet" href="/static/css/main.css">
<link rel="icon" type="image/png" href="https://formspree.io/favicon.ico">
<meta name="viewport" content="initial-scale=1">
</head>
<body class="" id="">
<noscript>
</noscript>
<nav>
<div class="menu">
<span class="item"><a href="/login" class="login">Gold account login</a></span>
</div>
</nav>
<div class="row">
<div class="row section" id="header">
<div class="container" id="title">
<div class="col-1-1">
<img src="/static/img/logo.png" alt="" class="center animate dropIn">
<h1 class="center"><span class="caps">Formspree</span></h1>
</div>
</div>
<div class="container">
<div class="col-1-2">
<h1 style="font-weight: 900;">Functional HTML forms</h1>
<h3 class="light">Just send your form to our URL and we'll forward it to your email. No PHP, Javascript or sign up required — <em>perfect for static sites!</em></h3>
</div>
<div class="col-1-2">
<p>Example:</p>
<p class="card code" style="font-size: small">
<form <span class="tooltip hint--top" data-hint="Use our URL as form's action">action="<span class="attr">//formspree.io/your@email.com</span>"</span><br /> <span class="tooltip hint--top" data-hint="Forms must POST">method="<span class="attr">POST</span>"</span>><br />
<input type="<span class="attr">text</span>" name="<span class="attr">name</span>"><br />
<input type="<span class="attr">email</span>" <span class="tooltip hint--top" data-hint="Use advanced attributes">name="<span class="attr">_replyto</span>"</span>><br />
<span class="tooltip hint--bottom" data-hint="When user submits, we'll email data to you"><input type="<span class="attr">submit</span>" value="<span class="attr">Send</span>"></span><br />
</form>
</p>
</div>
</div>
</div>
<div class="row section" id="getstarted">
<div class="container narrow block">
<div class="col-1-1">
<h2>Setting it up is easy and free. Here's how:</h2>
<h3 class="light">You don't even have to register.</h3>
</div>
</div>
<div class="container narrow block">
<div class="col-1-1">
<h3>1. Setup the HTML form</h3>
<p>Change your form's <span class="code">action</span>-attribute to this and replace your@email.com with your own email.</p>
<p><input type="text" value="http://formspree.io/your@email.com" /></p>
</div>
</div>
<div class="container narrow block">
<div class="col-1-1">
<h3>2. Submit the form and confirm your email address</h3>
<p>Go to your website and submit the form once. This will send you an email asking to confirm your email address, so that no one can start sending you spam from random websites.</p>
</div>
</div>
<div class="container narrow block">
<div class="col-1-1">
<h3>3. All set, receive emails</h3>
<p>From now on, when someone submits that form, we'll forward you the data as email.</p>
</div>
</div>
</div>
<div class="row section grey">
<div class="container block">
<div class="col-1-1"><h2>Some questions you might have:</h2></div>
</div>
<div class="container block">
<div class="col-1-2">
<div class="card">
<h4>Who are you guys?</h4>
<p>We're a community of developers that work together to create products. You can contribute on <a href="https://github.com/formspree/formspree">GitHub</a>. Formspree is a project that solves a problem many of us have faced: easily adding forms to otherwise static HTML pages.</p>
</div>
</div>
<div class="col-1-2">
<div class="card">
<h4>What about privacy?</h4>
<p>We only store contents of the last 100 form submissions and delete the rest. Emails are sent using SendGrid's API, so on that end their privacy policies apply.</p>
</div>
</div>
</div>
<div class="container block">
<div class="col-1-2">
<div class="card">
<h4>How much does it cost?</h4>
<p>Formspree is free for 1000 submissions per email each month. If you need more, there's a <a href="#plans">Gold Plan</a>.</p>
</div>
</div>
<div class="col-1-2">
<div class="card">
<h4>Can I have X?</h4>
<p>We have various interesting features enabled for our <a href="#plans">Gold Accounts</a> and we are adding more. Please reach out to <a href="mailto:team@formspree.io">team@formspree.io</a> if you need something we don't have.</p>
</div>
</div>
</div>
</div>
<div class="row section grey">
<div class="container narrow block">
<div class="col-1-1">
<h2>Advanced features:</h2>
<h4 class="light">Form inputs can have specially named <span class="code">name</span>-attributes, which alter functionality. They are all prefixed with an underscore.</h4>
</div>
</div>
<div class="container narrow block">
<div class="col-1-1">
<h4><span class="code">_replyto</span> or <span class="code">email</span></h4>
<p>This value is used for the email's Reply-To field. This way you can directly "Reply" to the email to respond to the person who originally submitted the form.</p>
<p><input type="text" value='<input type="text" name="_replyto" placeholder="Your email" />'></p>
</div>
</div>
<div class="container narrow block">
<div class="col-1-1">
<h4><span class="code">_next</span></h4>
<p>By default, after submitting a form the user is shown the Formspree "Thank You" page. You can provide an alternative URL for that page.</p>
<p><input type="text" value='<input type="hidden" name="_next" value="//site.io/thanks.html" />'></p>
</div>
</div>
<div class="container narrow block">
<div class="col-1-1">
<h4><span class="code">_subject</span></h4>
<p>This value is used for the email's subject, so that you can quickly reply to submissions without having to edit the subject line each time.</p>
<p><input type="text" value='<input type="hidden" name="_subject" value="New submission!" />'></p>
</div>
</div>
<div class="container narrow block">
<div class="col-1-1">
<h4><span class="code">_cc</span></h4>
<p>This value is used for the email's CC Field. This lets you send a copy of each submission to another email address.</p>
<p><input type="text" value='<input type="hidden" name="_cc" value="another@email.com" />'></p>
</div>
</div>
<div class="container narrow block">
<div class="col-1-1">
<h4><span class="code">_gotcha</span></h4>
<p>Add this "honeypot" field to avoid spam by fooling scrapers. If a value is provided, the submission will be silently ignored. The input should be hidden with CSS.</p>
<p><input type="text" value='<input type="text" name="_gotcha" style="display:none" />'></p>
</div>
</div>
<div class="container narrow block">
<div class="col-1-1">
<h4>Using AJAX</h4>
<p>You can use Formspree via AJAX. This even works cross-origin. The trick is to set the <span class="code">Accept</span> header to <span class="code">application/json</span>. If you're using jQuery this can be done like so:
<p class="card code">
$.ajax({<br/>
url: "//formspree.io/you@email.com", <br/>
method: "POST",<br />
data: {message: "hello!"},<br />
<span class="tooltip hint--top" data-hint="Required to set the Accept header">dataType: "json"</span><br />
});
</p>
</div>
</div>
<!--
<div class="container narrow block">
<div class="col-1-1">
<h3 class="light">More to come...</h3>
</div>
</div>
-->
</div>
<div class="row section" id="plans">
<div class="container narrow block">
<div class="col-1-1">
<h2>For Formspree power users, we present </strong>Formspree Gold</strong></h1>
<p class="center">Formspree Gold costs</p>
<h1 class="center"><a class="button emphasis" href="/account">$ 9.99</a></h1>
<p class="center">each month</p>
<p>Each Gold account can have unlimited forms and unlimited verified emails, and all them get the <a href="#features">features listed below</a>.</p>
<a style="display: block" class="button center emphasis" href="/account">Upgrade now</a>
</div>
</div>
</div>
<div class="row section grey" id="features">
<div class="container narrow block">
<div class="col-1-1">
<h2>Gold features:</h2>
<h3 class="light">Extra limits and functionality for power users</h3>
</div>
</div>
<div class="container narrow block">
<div class="col-1-1">
<h3>Invisible emails</h3>
<p>Through our dashboard, you will be able to get a random-like string to replace your naked email address in the <span class="code">action</span> attribute of your form. Your email address will remain unknown to spam-bots and also your human visitors.</p>
</div>
</div>
<div class="container narrow block">
<div class="col-1-1">
<h3>Unlimited form submissions</h3>
<p>Getting more than 1000 submissions each month? No problem, upgrading will cover that.</p>
</div>
</div>
<div class="container narrow block">
<div class="col-1-1">
<h3>Access to submissions archive</h3>
<p>If you ever missed a submission email, for any reason, you can just login and read your last 1000 submissions, all listed and timestamped with full data. Also, the submissions can be exported to CSV or JSON!</p>
<p>It even works for submissions made while you were not a Gold user (the last 100, in this case).</p>
</div>
</div>
</div>
<div class="row section">
<div class="container narrow block">
<div class="col-1-2">
<p>Formspree is a tool <a href="https://github.com/formspree/formspree">managed on Github</a>. To contact us send an email to <a href="mailto:team@formspree.io">team@formspree.io</a> or use the form on the right.</p>
</div>
<div class="col-1-2">
<form method="POST" action="////formspree.io/team@formspree.io">
<input type="email" name="_replyto" placeholder="Your email" />
<textarea name="message" rows="5" placeholder="Your message (when sending support requests, please include the URL to your form if that is relevant)"></textarea>
<input type="text" name="_gotcha" style="display:none">
<button type="submit">Send</button>
</form>
</div>
</div>
</div>
</div>
<script src="/static/js/vendor/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/SlickNav/1.0.3/jquery.slicknav.min.js"></script>
<script>
/* top navbar */
var nav = $('body > nav')
nav.addClass('js')
nav.find('.menu').slicknav()
nav.find('h4').clone().prependTo('.slicknav_menu')
/* adding a shadow at the bottom of the menu bar only when not at the top */
var w = $(window)
w.scroll(function () {
var scrollPos = w.scrollTop()
if (scrollPos && !nav.hasClass('scrolled')) {
nav.addClass('scrolled')
}
else if (!scrollPos) {
nav.removeClass('scrolled')
}
})
/* background-color should inherit, but CSS's "inherit" breaks z-index */
var bgcolor = $(document.body).css('background-color')
if (bgcolor.split(',').length == 4 || bgcolor == 'transparent') {
bgcolor = 'white'
}
nav.css('background-color', bgcolor)
/* modal */
$('.modal').each(function () {
var modal = $(this)
modal.addClass('js')
var id = modal.attr('id')
$('[href="#' + id + '"]').click(function (e) {
e.preventDefault()
modal.toggleClass('target')
})
modal.click(function (e) {
if (e.target == modal[0]) {
modal.toggleClass('target')
e.preventDefault()
}
})
modal.find('.x a').click(function (e) {
e.preventDefault()
modal.toggleClass('target')
})
})
</script>
<script src="//cdnjs.cloudflare.com/ajax/libs/toastr.js/2.1.1/toastr.min.js"></script>
<script>
/* turning flask flash messages into js popup notifications */
var messages = []
toastr.options = { positionClass: 'toast-top-center' }
messages.forEach(function (m, i) {
var category = m[0] || 'info'
var text = m[1]
setTimeout(function () { toastr[category](text) }, (1+i)*1500)
})
</script>
<script src="https://checkout.stripe.com/checkout.js"></script>
<script>
var stripebutton = $('#stripe-upgrade')
if (stripebutton.length) {
var handler = StripeCheckout.configure(stripebutton.data())
stripebutton.on('click', function (e) {
handler.open({
token: function (token) {
stripebutton.closest('form')
.append('<input type="hidden" name="stripeToken" value="'+ token.id +'">')
.append('<input type="hidden" name="stripeEmail" value="'+ token.email +'">')
.submit()
}
})
e.preventDefault()
})
}
/* quick script for showing the resend confirmation form */
$('a.resend').on('click', function () {
$(this).hide()
$('form.resend').show()
})
</script>
</body>
</html>