Add contact form

website/content/about.md

@@ -37,4 +37,4 @@ As customers, we hate businesses that nickel-and-dime you with bullshit fees and
 
 ## Have we sold you yet?
 
-[Contact us](mailto:hello@theminimalmixologist.com) to learn how we can make your event more memorable!
+[Contact us](/contact) to learn how we can make your event more memorable!

website/content/contact.md

@@ -1,8 +1,7 @@
 +++
 template = "contact.html"
-draft = true
 +++
 
 # Contact Us
 
-Please don't hesitate to inquire!
+Planning a wedding, party, or corporate event? We'd love to hear from you! Fill out the form below to contact us. Alternatively, email us at [hello@theminimalmixologist.com](mailto:hello@theminimalmixologist.com) or call/text us at [971-277-1270](tel:971-277-1270).

website/content/pricing.md

@@ -22,7 +22,7 @@ If you need some cocktail flair in your life, this is where you'll be. Any cockt
 
 ### The Ones That Don't Give You a Hangover <span class="right">$6+</span>
 
-Non-alcoholic cocktail options are available for anyone not drinking for any reason (or that friend who needs to reign it in a bit). Pricing on these drinks varies, so please [get in touch](mailto:hello@theminimalmixologist.com) for more information.
+Non-alcoholic cocktail options are available for anyone not drinking for any reason (or that friend who needs to reign it in a bit). Pricing on these drinks varies, so please [get in touch](/contact) for more information.
 
 ### Beer, Wine, and Other Stuff <span class="right">20% markup</span>
 
@@ -32,4 +32,4 @@ We will happily supply non-cocktail beverages at a 20% markup over retail price.
 
 ## Convinced Yet?
 
-Check out the [fine print](/pricing/fine-print) or [book us now](mailto:hello@theminimalmixologist.com) for your next event.
+Check out the [fine print](/pricing/fine-print) or [book us now](/contact) for your next event.

website/content/pricing/fine-print.md

@@ -16,4 +16,4 @@ Minor modifications to The Classics will be considered on a case by case basis.
 
 ## Let's do this!
 
-If you have any more questions, please don't hesitate to [reach out](mailto:hello@theminimalmixologist.com), even if you are not quite ready to book.
+If you have any more questions, please don't hesitate to [reach out](/contact), even if you are not quite ready to book.

website/sass/base.scss

@@ -156,24 +156,6 @@ main {
 	height: 40px;
 }
 
-textarea {
-	display: block;
-	width: 100%;
-	resize: vertical;
-	min-height: 150px;
-	background-color: $text-color-primary;
-	font-family: $font-serif;
-	font-size: pixels-to-rem(18);
-	box-sizing: border-box;
-	padding: 0.5em;
-	border: 0;
-	border-radius: $border-radius-default;
-
-	&:focus {
-		outline: 4px solid $fg-color-primary;
-	}
-}
-
 a:has(> button) {
 	display: inline-block;
 }
@@ -235,14 +217,49 @@ figure {
 	}
 }
 
-.no-border-radius-top {
-	border-top-left-radius: 0;
-	border-top-right-radius: 0;
-}
-.no-border-radius-bottom {
-	border-bottom-left-radius: 0;
-	border-bottom-right-radius: 0;
-}
-.border-bottom {
-	border-bottom: 1px solid $fg-color-primary;
+form {
+	display: flex;
+	flex-direction: column;
+	gap: 20px;
+
+	label {
+		display: block;
+		font-size: pixels-to-rem(18);
+		font-weight: bold;
+		font-family: $font-sans;
+	}
+
+	input {
+		display: block;
+		width: 100%;
+		box-sizing: border-box;
+		background-color: $text-color-primary;
+		font-family: $font-serif;
+		font-size: pixels-to-rem(18);
+		padding: 0.5em;
+		border: 0;
+		border-radius: $border-radius-default;
+
+		&:focus {
+			outline: 4px solid $fg-color-primary;
+		}
+	}
+
+	textarea {
+		display: block;
+		width: 100%;
+		box-sizing: border-box;
+		resize: vertical;
+		min-height: 150px;
+		background-color: $text-color-primary;
+		font-family: $font-serif;
+		font-size: pixels-to-rem(18);
+		padding: 0.5em;
+		border: 0;
+		border-radius: $border-radius-default;
+
+		&:focus {
+			outline: 4px solid $fg-color-primary;
+		}
+	}
 }

website/sass/colors.scss

@@ -11,3 +11,13 @@ $fg-color-primary: #607a6f;
 $accent-color-primary: #f0d354;
 $accent-color-primary-hover: #f0e13f;
 $accent-color-primary-active: #d5c72d;
+
+$input-disabled-background-color: #727272;
+$input-disabled-border-color: #9e9e9e;
+$input-disabled-text-color: #c4c4c4;
+
+$success-color-primary: #365c33;
+$success-color-accent: #30b424;
+
+$error-color-primary: #572a2a;
+$error-color-accent: #e21a1a;

website/sass/contact.scss

@@ -1,2 +1,20 @@
 @import "./colors.scss";
 @import "./utils.scss";
+@import "./vars.scss";
+
+#success-message, #error-message {
+	display: none;
+	border: 4px solid transparent;
+	border-radius: $border-radius-default;
+	padding: pixels-to-rem(10) pixels-to-rem(15);
+	font-size: pixels-to-rem(18);
+}
+
+#success-message {
+	border-color: $success-color-accent;
+}
+
+#error-message {
+	background-color: $error-color-primary;
+	border-color: $error-color-accent;
+}

website/templates/base.html

@@ -53,8 +53,7 @@ <h1>
 						</a>
 					</li>
 					<li>
-						<!-- <a href="/contact"> -->
-						<a href="mailto:hello@theminimalmixologist.com">
+						<a href="/contact" {% if current_path == "/contact/" %}class="active"{% endif %}>
 							Contact
 						</a>
 					</li>

website/templates/contact.html

@@ -9,8 +9,60 @@
 		{{ page.content | safe }}
 	</div>
 
-	<form>
-		<textarea class="no-border-radius-bottom border-bottom" name="message"></textarea>
-		<button class="no-border-radius-top">Send</button>
+	<form id="contact-form">
+		<input type="hidden" name="access_key" value="73c7f79d-d607-435b-8227-683fd1afe2ba">
+
+		<div class="field">
+			<label for="contact-form-email">Your email address</label>
+			<input name="email" type="email" placeholder="email@yourcompany.com" required id="contact-form-email"></input>
+		</div>
+
+		<div class="field">
+			<label for="contact-form-body">Tell us about your event!</label>
+			<textarea name="body" id="contact-form-body"></textarea>
+		</div>
+
+		<button type="submit">Send</button>
 	</form>
+
+	<div id="success-message">
+		Thanks! We will reach out shortly!
+	</div>
+
+	<div id="error-message">
+		We're so sorry, but something went wrong with this form. Feel free to refresh the page and try again. If it still doesn't work, contact us at <a href="mailto:hello@theminimalmixologist.com">hello@theminimalmixologist.com</a> instead. We apologize for the inconvenience.
+	</div>
+
+	<script>
+		/** @type HTMLFormElement */
+		const form = document.getElementById("contact-form")
+		form.addEventListener("submit", async (event) => {
+			event.preventDefault()
+			const button = form.getElementsByTagName("button")[0]
+			button.disabled = true
+			button.innerText = "Sending..."
+			const formData = new FormData(form)
+			const json = JSON.stringify(Object.fromEntries(formData))
+			try {
+				await fetch('https://submit-form.com/qqq1qVXUG', {
+					method: 'POST',
+					headers: {
+						'Content-Type': 'application/json',
+						'Accept': 'application/json',
+					},
+					body: json,
+				})
+			} catch (error) {
+				const errorContainer = document.getElementById("error-message")
+				errorContainer.style.display = "block"
+				return
+			} finally {
+				form.style.display = "none"
+				form.elements.email.value = ""
+				form.elements.body.value = ""
+			}
+			const successContainer = document.getElementById("success-message")
+			successContainer.style.display = "block"
+		})
+	</script>
 {% endblock content %}

website/templates/index.html

@@ -21,7 +21,7 @@ <h2>
 		<div class="spacer-m"></div>
 
 		<!-- <a href="/contact"> -->
-		<a href="mailto:hello@theminimalmixologist.com">
+		<a href="/contact">
 			<button>Book us for your next event</button>
 		</a>
 	</div>