WIP: Contact and Volunteer forms

Torey Heinz committed Apr 16, 2020

commit 4fe6d4ae1d0630ae24f98a3d6deb57db066722d4

Showing 9 changed files with 164 additions and 3 deletions

content/pages/COVID-19.md +2 -0

@@	@@ -60,5 +60,7 @@ Transportation to get to the packing and shipping site.
	Willingness to work wearing masks and gloves before you even enter the site doors, and cooperation in maintaining safe
	social distancing at all times.

+	<VolunteerForm />
+
	> Fighting this pandemic takes all of us. Together, we can be far more effective at fighting infection than we can as
	> individuals

content/pages/confirmations/contact.md +8 -0

@@	@@ -0,0 +1,8 @@
+	---
+	title: 'Contact Form Submission'
+	heading: Thank you for contacting the Anchor Rock Foundation
+	published: true
+	---
+
+	We have received your contact submission, and we look forward to connecting with you. Please feel free
+	to email us at <ContactUs@anchorrockfoundation.org>

content/pages/confirmations/volunteer.md +6 -0

@@	@@ -0,0 +1,6 @@
+	---
+	title: 'Volunteer Form Confirmation'
+	heading: Thank you for being willing to Volunteer!
+	published: true
+	---
+	We have received your volunteer application, we will be reviewing it, and let you know if are approved. Please feel free to email us at <ContactUs@anchorrockfoundation.org>

content/pages/contact.md +4 -2

@@	@@ -1,6 +1,8 @@
	---
	title: Contact
+	heading: Contacting Anchor Rock Foundation
	published: true
-	heading: ''
	---
-	Placeholder for the about contact
+	Please feel free to fill out the form below or email us at <ContactUs@anchorrockfoundation.org>
+
+	<ContactForm />

content/site.config.json +5 -0

@@	@@ -10,6 +10,11 @@
	"text": "COVID-19",
	"link": "/COVID-19",
	"external": false
+	},
+	{
+	"text": "Contact",
+	"link": "/contact",
+	"external": false
	}
	]
	}

src/components/ContactForm.vue +21 -0

@@	@@ -0,0 +1,21 @@
+	<template lang="pug">
+	form(name="ARF Contact" method="POST" data-netlify-recaptcha="true" data-netlify="true" action="/confirmations/contact")
+	div.field
+	label.label Name
+	div.control
+	input.input( type="text" placeholder="Name")
+
+	div.field
+	label.label Email
+	div.control
+	input.input( type="text" placeholder="Email")
+
+	div.field
+	label.label Message
+	div.control
+	textarea.textarea(placeholder="Message")
+
+	div.field
+	div.control
+	button.button Send
+	</template>

src/components/VolunteerForm.vue +67 -0

@@	@@ -0,0 +1,67 @@
+	<template lang="pug">
+	div.section.has-shadow.mb-2
+	h3.title.mb-2 Volunteer Form
+	form(name="ARF Contact" method="POST" data-netlify-recaptcha="true" data-netlify="true" action="/confirmations/volunteer")
+	div.field
+	label.label Name
+	div.control
+	input.input(name="name" type="text" placeholder="Full Name")
+
+	div.field
+	label.label Email
+	div.control
+	input.input(name="email" type="email" placeholder="Email Address")
+
+	div.field
+	label.label Phone
+	div.control
+	input.input(name="phone" type="tel" placeholder="Phone Number")
+
+	div.field
+	label.label Address
+	div.control
+	input.input(name="street" type="text" placeholder="Street Address")
+
+	div.field.is-grouped
+	div.control.is-expanded
+	label.label City
+	input.input(name="city" type="text" placeholder="City")
+	div.control
+	label.label State
+	input.input(name="state" type="text" placeholder="State")
+	div.control
+	label.label Zip
+	input.input(name="zip" type="text" placeholder="Zipcode")
+
+	div.field.mb-1
+	label.label I want to volunteer as a:
+
+	div.field.is-grouped
+	div.control
+	label.checkbox
+	input(name="sewer" type="checkbox")
+	span.ml-1 Sewer
+	div.control
+	label.checkbox
+	input(name="packer" type="checkbox")
+	span.ml-1 Packer
+	div.control
+	label.checkbox
+	input(name="supervisor" type="checkbox")
+	span.ml-1 Supervisor
+	div.control
+	label.checkbox
+	input(name="acknowledgement" type="checkbox")
+	span.ml-1 I acknowledge that I have read and meet the requirements to volunteer
+
+	div.field
+	label.label Message
+	div.control
+	textarea.textarea(placeholder="Message")
+
+	div.field
+	div.control
+	button.button I'm ready to volunteer!
+	</template>
+
+	or the volunteer form: Basic contact info...name, address, phone, email, and an acknowledgement that they meet the criteria specified in that bullet list. We will send them the initial kit of 10 when approved, then when returned, we will increase their kit count.

src/main.js +5 -1

@@	@@ -1,9 +1,13 @@
	import '~/scss/main.scss'

	export default function (Vue, { router, head, isClient }) {
+	Vue.prototype.$site = require("../content/site.config.json")
+
	// Set default layout as a global component
	Vue.component("Layout", () => import("~/layouts/Default.vue"))

	Vue.component("BaseLink", () => import("~/components/BaseLink.vue"))
-	Vue.prototype.$site = require("../content/site.config.json")
+
+	Vue.component("ContactForm", () => import("~/components/ContactForm.vue"))
+	Vue.component("VolunteerForm", () => import("~/components/VolunteerForm.vue"))
	}

src/scss/main.scss +46 -0

@@	@@ -15,3 +15,49 @@
	.navbar-item img {
	width: auto;
	}
+
+
+	.checkbox {
+	display: inline-flex;
+	cursor: pointer;
+	position: relative;
+	}
+
+	.checkbox > span {
+	// color: #34495E;
+	// padding: 0.5rem 0.25rem;
+	}
+
+	.checkbox > input {
+	height: 18px;
+	width: 18px;
+	-webkit-appearance: none;
+	-moz-appearance: none;
+	-o-appearance: none;
+	appearance: none;
+	border: 1px solid #34495E;
+	border-radius: 4px;
+	outline: none;
+	transition-duration: 0.3s;
+	// background-color: #41B883;
+	cursor: pointer;
+	}
+
+	.checkbox > input:checked {
+	border: 1px solid #41B883;
+	// background-color: #34495E;
+	}
+
+	.checkbox > input:checked + span::before {
+	content: '\2713';
+	display: block;
+	text-align: center;
+	// color: #41B883;
+	position: absolute;
+	left: 0.15rem;
+	top: -0.05rem;
+	}
+
+	.checkbox > input:active {
+	// border: 2px solid #34495E;
+	}