diff --git a/.dojorc b/.dojorc index 7bbaa9d2..8bfa38f8 100644 --- 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 index 1452cd9e..2f25eed6 100644 --- 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 index 9abb221b..694028a9 100644 --- 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 index 8920f17a..49164959 100644 --- 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 (
@@ -55,11 +58,53 @@ export const Contact = factory(function Contact() {
{ + 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); + }); + }} >
@@ -96,6 +141,17 @@ export const Contact = factory(function Contact() {
+
+ {submitError && ( +

+ Something went wrong with your form submission. Please try again +

+ )}

Address