Add non static form to fight spam (dojo#116)

* add non static form to fight spam * error msh
tomdye · Jul 20, 2020 · 7ac062a · 7ac062a
1 parent cb15b31
commit 7ac062a
Show file tree

Hide file tree

Showing 4 changed files with 89 additions and 6 deletions.
diff --git a/.dojorc b/.dojorc
@@ -11,6 +11,10 @@
 					"path": "blog/search",
 					"static": false
 				},
+				{
+					"path": "contact",
+					"static": false
+				},
 				{
 					"path": "rss.xml",
 					"exclude": true

diff --git a/src/widgets/pages/Contact.m.css b/src/widgets/pages/Contact.m.css
@@ -60,6 +60,22 @@
 	color: red;
 }
 
+.gotcha {
+	opacity: 0;
+	position: absolute;
+	top: 0;
+	left: 0;
+	height: 0;
+	width: 0;
+	z-index: -1;
+}
+
+.error {
+	color: red;
+	margin-left: var(--grid-size);
+	margin-top: calc(var(--grid-size) * 2);
+}
+
 .textarea,
 .input {
 	margin-top: var(--grid-size);

diff --git a/src/widgets/pages/Contact.m.css.d.ts b/src/widgets/pages/Contact.m.css.d.ts
@@ -8,6 +8,8 @@ export const field: string;
 export const submit: string;
 export const label: string;
 export const required: string;
+export const gotcha: string;
+export const error: string;
 export const textarea: string;
 export const input: string;
 export const addressHeading: string;

diff --git a/src/widgets/pages/Contact.tsx b/src/widgets/pages/Contact.tsx
@@ -2,10 +2,13 @@ import { create, tsx } from '@dojo/framework/core/vdom';
 import { Hero } from '../Hero';
 import * as css from './Contact.m.css';
 import * as commonCss from '../../Common.m.css';
+import icache from '@dojo/framework/core/middleware/icache';
 
-const factory = create();
+const factory = create({ icache });
+
+export const Contact = factory(function Contact({ middleware: { icache } }) {
+	const submitError = icache.getOrSet('submitError', false);
 
-export const Contact = factory(function Contact() {
 	return (
 		<div classes={css.root}>
 			<head>
@@ -55,11 +58,53 @@ export const Contact = factory(function Contact() {
 			</div>
 			<div classes={[commonCss.contentWrapper, css.content]}>
 				<form
-					accept-charset="UTF-8"
-					action="https://forms.hubspot.com/uploads/form/v2/2059467/2e1a1b5b-27bb-447d-aac4-0b87c1e88fec"
-					enctype="application/x-www-form-urlencoded"
-					method="POST"
 					classes={css.leading}
+					onsubmit={(event: Event) => {
+						event.stopPropagation();
+						event.preventDefault();
+						icache.set('submitError', false);
+
+						const url =
+							'https://api.hsforms.com/submissions/v3/integration/submit/2059467/2e1a1b5b-27bb-447d-aac4-0b87c1e88fec';
+						const form = event.target as HTMLFormElement;
+
+						if (form['_gotcha'].value) {
+							return false;
+						}
+
+						const { elements } = form;
+						const fields: { name: string; value: string }[] = [];
+						for (let i = 0; i < elements.length; i++) {
+							const field = elements[i] as HTMLInputElement;
+							if (field.name && field.name !== '_gotcha') {
+								fields.push({
+									name: field.name,
+									value: field.value
+								});
+							}
+						}
+						fetch(url, {
+							method: 'post',
+							mode: 'cors',
+							headers: {
+								'Content-Type': 'application/json'
+							},
+							body: JSON.stringify({
+								submittedAt: Date.now(),
+								context: {
+									pageUri: 'www.sitepen.com/contact',
+									pageName: 'Sitepen Website Contact Form'
+								},
+								fields
+							})
+						})
+							.then(() => {
+								window.location.href = '/contact-thank-you';
+							})
+							.catch(() => {
+								icache.set('submitError', true);
+							});
+					}}
 				>
 					<div classes={css.row}>
 						<div classes={css.field}>
@@ -96,6 +141,17 @@ export const Contact = factory(function Contact() {
 						</div>
 					</div>
 					<div classes={css.row}>
+						<label tabindex="-1" aria-hidden classes={css.gotcha}>
+							gotcha label
+							<input
+								tabindex="-1"
+								aria-hidden
+								id="_gotcha"
+								name="_gotcha"
+								type="text"
+								autocomplete="off"
+							/>
+						</label>
 						<div classes={css.field}>
 							<label classes={css.label} for="company">
 								Company Name
@@ -172,6 +228,11 @@ export const Contact = factory(function Contact() {
 						</div>
 					</div>
 					<input type="submit" value="Submit" classes={css.submit} />
+					{submitError && (
+						<p classes={css.error}>
+							Something went wrong with your form submission. Please try again
+						</p>
+					)}
 				</form>
 				<div classes={css.trailing}>
 					<h3 classes={css.addressHeading}>Address</h3>