daniel543x/artcraft
1
0 Fork 0
mirror of https://github.com/storytold/artcraft.git synced 2026-11-09 19:41:32 +00:00
Code Issues Packages Projects Releases Wiki Activity

contact form

Browse Source
This commit is contained in:
Angelica Chung committed 2022-10-01 11:38:34 -04:00
1 parent edb2e0e200
commit e6a9f47231
4 files changed
+113 -2
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

package.json
+3
View File
@@ -25,5 +25,8 @@
"devDependencies": {
"craco": "^0.0.3",
"lerna": "^4.0.0"
},
"dependencies": {
"@formspree/react": "^2.4.0",
}
}
packages/storyteller-home/src/common/TopNav.tsx
+2 -2
View File
@@ -1,7 +1,7 @@
import { useLocomotiveScroll } from "react-locomotive-scroll";
import React, { useState, useEffect } from "react";
interface Props {}
interface Props { }
function TopNav(props: Props) {
const { scroll } = useLocomotiveScroll();
@@ -106,7 +106,7 @@ function TopNav(props: Props) {
</ul>
<div className="col-md-3 text-end">
<button className="btn btn-primary fs-6">Contact</button>
<a href="#contact" className="btn btn-primary fs-6" data-scroll-to>Contact</a>
</div>
</div>
packages/storyteller-home/src/pages/index/IndexPage.tsx
+76
View File
@@ -32,6 +32,9 @@ import { Swiper, SwiperSlide } from "swiper/react";
import "swiper/css";
import "swiper/css/pagination";
import { Autoplay, Pagination } from "swiper";
import { useForm, ValidationError } from '@formspree/react';
import { ToastContainer, toast } from 'react-toastify';
import 'react-toastify/dist/ReactToastify.css';
function IndexPage() {
// Title Animation
@@ -130,6 +133,22 @@ function IndexPage() {
);
}, []);
const [state, handleSubmit] = useForm("xnqrvjbo");
if (state.succeeded) {
const reset = document.getElementById("reset")
const success = document.getElementById('success_message')
if (reset) reset.click()
setTimeout(function () {
if (success) success.innerHTML = '<h4 >Thank you for your message!</h4>'
}, 500)
setTimeout(function () {
if (success) success.innerHTML = ''
}, 5000)
}
return (
<>
<div id="home" data-scroll-section>
@@ -1091,9 +1110,66 @@ function IndexPage() {
</Swiper>
</div>
</div>
<div id="contact" className="bg-light section-2">
<h3 className="text-center fw-bold display-5 mb-5">Contact Us</h3>
<div id="success_message" className="fw-semibold opacity-75 mb-4 text-center"></div>
<form id="contact_form" onSubmit={handleSubmit} className="col-12 col-md-6 mx-auto">
<fieldset className="">
<input
id="name"
type="text"
name="name"
placeholder='Name *'
required
className="col-12"
/>
<ValidationError
prefix="Name"
field="name"
errors={state.errors}
/>
<input
id="email"
type="email"
name="email"
placeholder='Email *'
required
className="col-12 mt-2"
/>
<ValidationError
prefix="Email"
field="email"
errors={state.errors}
/>
</fieldset>
<fieldset>
<textarea
id="message"
name="message"
placeholder='Say "hi" here!'
required
className="col-12 mt-2"
cols={40}
rows={4}
style={{ resize: 'none' }}
/>
<ValidationError
prefix="Message"
field="message"
errors={state.errors}
/>
</fieldset>
<button type="submit" className="btn btn-primary mt-4 col-12" disabled={state.submitting}>
Submit
</button>
<input type="reset" id="reset" className="d-none" />
</form>
</div>
</div>
</>
);
}
export default IndexPage;
yarn.lock
+32
View File
@@ -1170,6 +1170,14 @@
minimatch "^3.0.4"
strip-json-comments "^3.1.1"
"@formspree/react@^2.4.0":
version "2.4.0"
resolved "https://registry.yarnpkg.com/@formspree/react/-/react-2.4.0.tgz#156249a7832b13c869c0badf86bb920a529ed0a0"
integrity sha512-7zPt9tjX0zEiqJhbz5S35+AFyAz76iIJ5Qu9Mw+25kgO+FfmA1i9APakbJG57UsqEGT/dLX2aQa824A87zUtQw==
dependencies:
"@stripe/react-stripe-js" "^1.7.1"
"@stripe/stripe-js" "^1.35.0"
"@fortawesome/fontawesome-common-types@6.1.1":
version "6.1.1"
resolved "https://registry.yarnpkg.com/@fortawesome/fontawesome-common-types/-/fontawesome-common-types-6.1.1.tgz#7dc996042d21fc1ae850e3173b5c67b0549f9105"
@@ -2466,6 +2474,18 @@
dependencies:
"@sinonjs/commons" "^1.7.0"
"@stripe/react-stripe-js@^1.7.1":
version "1.12.0"
resolved "https://registry.yarnpkg.com/@stripe/react-stripe-js/-/react-stripe-js-1.12.0.tgz#61d772f6271dacd19b1c9a3fb190bb7fcb568947"
integrity sha512-LW/f/slRq8x0y99qFjlZirnIk+q0zQvNNRtidigvHfYSbHji4QdtKDMD/HfYmtriPDRpIxOFilwsJ3ayPCC9Fw==
dependencies:
prop-types "^15.7.2"
"@stripe/stripe-js@^1.35.0":
version "1.38.1"
resolved "https://registry.yarnpkg.com/@stripe/stripe-js/-/stripe-js-1.38.1.tgz#67a27380f021931f6e44abeee2b011b8d7f524de"
integrity sha512-v0hF65jEs7tw33JE70E5puJ2fFhpiS2XYwmayupEdjKWavJivycYcZgZKYXAQhTiMgtDgN9YPzqUr86VzVc3Ew==
"@surma/rollup-plugin-off-main-thread@^2.2.3":
version "2.2.3"
resolved "https://registry.yarnpkg.com/@surma/rollup-plugin-off-main-thread/-/rollup-plugin-off-main-thread-2.2.3.tgz#ee34985952ca21558ab0d952f00298ad2190c053"
@@ -4876,6 +4896,11 @@ clone@^1.0.2:
resolved "https://registry.yarnpkg.com/clone/-/clone-1.0.4.tgz#da309cc263df15994c688ca902179ca3c7cd7c7e"
integrity sha1-2jCcwmPfFZlMaIypAheco8fNfH4=
clsx@^1.1.1:
version "1.2.1"
resolved "https://registry.yarnpkg.com/clsx/-/clsx-1.2.1.tgz#0ddc4a20a549b59c93a4116bb26f5294ca17dc12"
integrity sha512-EcR6r5a8bj6pu3ycsa/E/cKVGuTgZJZdsyUYHOksG/UHIiKfjxzRxYJpyVBwYaQeOvghal9fcc4PidlgzugAQg==
cmd-shim@^4.1.0:
version "4.1.0"
resolved "https://registry.yarnpkg.com/cmd-shim/-/cmd-shim-4.1.0.tgz#b3a904a6743e9fede4148c6f3800bf2a08135bdd"
@@ -11795,6 +11820,13 @@ react-scripts@5.0.0:
optionalDependencies:
fsevents "^2.3.2"
react-toastify@^9.0.8:
version "9.0.8"
resolved "https://registry.yarnpkg.com/react-toastify/-/react-toastify-9.0.8.tgz#3876c89fc6211a29027b3075010b5ec39ebe4f7e"
integrity sha512-EwM+teWt49HSHx+67qI08yLAW1zAsBxCXLCsUfxHYv1W7/R3ZLhrqKalh7j+kjgPna1h5LQMSMwns4tB4ww2yQ==
dependencies:
clsx "^1.1.1"
react@^16.13.1:
version "16.14.0"
resolved "https://registry.yarnpkg.com/react/-/react-16.14.0.tgz#94d776ddd0aaa37da3eda8fc5b6b18a4c9a3114d"