Skip to content

Commit d77340e

Browse files
facontidavidefacontidavide
committed
new forms
1 parent 863c72b commit d77340e

File tree

6 files changed

+431
-72
lines changed

6 files changed

+431
-72
lines changed

‎package.json

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -19,6 +19,7 @@
1919
"@docusaurus/core": "^2.4.1",
2020
"@docusaurus/plugin-ideal-image": "^2.4.1",
2121
"@docusaurus/preset-classic": "^2.4.1",
22+
"@emailjs/browser": "^3.11.0",
2223
"@mdx-js/react": "^1.6.22",
2324
"autoprefixer": "^10.4.13",
2425
"bootstrap": "^5.2.3",

‎src/components/ContactFormModal/index.js

Lines changed: 188 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,188 @@
1+
import React, { useState } from "react";
2+
import styles from "./styles.module.css";
3+
import emailjs from "@emailjs/browser";
4+
import useBaseUrl from "@docusaurus/useBaseUrl";
5+
6+
const emailjs_service = "service_groot2";
7+
const emailjs_template = "template_groot2";
8+
const emailjs_serviceKey = "v20XNx8VMAULCQ7H3";
9+
const emailjs_toName = "Groot2 team"
10+
11+
const ContactFormModal = ({ handleClose }) => {
12+
const [loading, setLoading] = useState(false);
13+
const [submitted, setSubmitted] = useState(false);
14+
const [value, setValue] = useState({
15+
name: "",
16+
companyName: "",
17+
email: "",
18+
message: "",
19+
});
20+
const [errors, setErrors] = useState({
21+
name: "",
22+
email: "",
23+
message: "",
24+
});
25+
26+
const handleChange = (e) => {
27+
const { name, value } = e.target;
28+
29+
setErrors((prevErrors) => ({
30+
...prevErrors,
31+
[name]: "",
32+
}));
33+
34+
setValue((prevValues) => ({
35+
...prevValues,
36+
[name]: value,
37+
}));
38+
};
39+
40+
const validateFields = () => {
41+
const newErrors = {};
42+
43+
if (!value.name.trim()) {
44+
newErrors.name = "Name is required";
45+
}
46+
47+
if (!value.email.trim()) {
48+
newErrors.email = "Email is required";
49+
} else if (
50+
!/^[\w-]+(\.[\w-]+)*@([\w-]+\.)+[a-zA-Z]{2,7}$/.test(value.email)
51+
) {
52+
newErrors.email = "Invalid email format";
53+
}
54+
55+
if (!value.message.trim()) {
56+
newErrors.message = "Message is required";
57+
}
58+
59+
setErrors(newErrors);
60+
61+
return Object.keys(newErrors).length === 0;
62+
};
63+
64+
const handleSubmit = (e) => {
65+
e.preventDefault();
66+
67+
if (!validateFields()) {
68+
return;
69+
}
70+
setLoading(true);
71+
72+
const templateParams = {
73+
from_name: value.name,
74+
message: value.message,
75+
company_name: value.companyName,
76+
from_email: value.email,
77+
to_name: emailjs_toName,
78+
};
79+
80+
emailjs
81+
.send(
82+
emailjs_service,
83+
emailjs_template,
84+
templateParams,
85+
emailjs_serviceKey
86+
)
87+
.then(
88+
(response) => {
89+
console.log("SUCCESS!", response.status, response.text);
90+
setSubmitted(true);
91+
setLoading(false);
92+
},
93+
(err) => {
94+
console.log("FAILED...", err);
95+
}
96+
)
97+
.finally(() => {
98+
setLoading(false);
99+
});
100+
};
101+
102+
const imageUrl = useBaseUrl("img/done.png");
103+
return (
104+
<div className={styles.modal}>
105+
<div style={{ position: "relative" }} className={styles.modalContent}>
106+
<div className={styles.closeBtn}>
107+
<img
108+
onClick={handleClose}
109+
style={{ cursor: "pointer" }}
110+
src={useBaseUrl("img/cross.png")}
111+
alt="icon"
112+
/>
113+
</div>
114+
<div className={styles.scroll}>
115+
<div className={styles.formContainer}>
116+
{submitted ? (
117+
<div
118+
style={{
119+
textAlign: "center",
120+
paddingTop: "20px",
121+
paddingBottom: "20px",
122+
}}
123+
>
124+
<img width={"20%"} src={imageUrl} alt="icon" />
125+
126+
<h2>Thank you for contact us!</h2>
127+
<p>Our team member will contact you soon.</p>
128+
</div>
129+
) : (
130+
<form onSubmit={handleSubmit} id="contact-form">
131+
<h2>Contact Us</h2>
132+
<p>Tell us more about your needs</p>
133+
<div>
134+
<label>Name <span className={styles.required}>*</span></label>
135+
<input
136+
type="text"
137+
name="name"
138+
value={value.name}
139+
onChange={handleChange}
140+
/>
141+
<span className={styles.error}>{errors.name}</span>
142+
</div>
143+
<div>
144+
<label>Company Name <span className={styles.optional}>(optional)</span> </label>
145+
<input
146+
type="text"
147+
name="companyName"
148+
value={value.companyName}
149+
onChange={handleChange}
150+
/>
151+
</div>
152+
<div>
153+
<label>Email <span className={styles.required}>*</span></label>
154+
<input
155+
type="text"
156+
name="email"
157+
value={value.email}
158+
onChange={handleChange}
159+
/>
160+
<span className={styles.error}>{errors.email}</span>
161+
</div>
162+
<div>
163+
<label>Message <span className={styles.required}>*</span></label>
164+
<textarea
165+
name="message"
166+
cols={3}
167+
rows={6}
168+
value={value.message}
169+
onChange={handleChange}
170+
></textarea>
171+
<span className={styles.error}>{errors.message}</span>
172+
</div>
173+
<div>
174+
<button type="submit" disabled={loading}>
175+
{" "}
176+
{loading ? " Loading..." : "Send"}{" "}
177+
</button>
178+
</div>
179+
</form>
180+
)}
181+
</div>
182+
</div>
183+
</div>
184+
</div>
185+
);
186+
};
187+
188+
export default ContactFormModal;

‎src/components/ContactFormModal/styles.module.css

Lines changed: 127 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,127 @@
1+
.modal {
2+
display: block;
3+
position: fixed;
4+
z-index: 99999;
5+
inset: 0;
6+
width: 100%;
7+
background-color: rgb(0, 0, 0);
8+
background-color: rgba(0, 0, 0, 0.4);
9+
display: flex;
10+
overflow: auto;
11+
justify-content: center;
12+
align-items: center;
13+
}
14+
15+
.modalContent {
16+
background-color: hsl(0, 0%, 100%);
17+
width: 30%;
18+
padding: 30px;
19+
border-radius: 10px;
20+
}
21+
22+
.close {
23+
color: #aaa;
24+
float: right;
25+
font-size: 28px;
26+
font-weight: bold;
27+
}
28+
29+
.close:hover,
30+
.close:focus {
31+
color: black;
32+
text-decoration: none;
33+
cursor: pointer;
34+
}
35+
36+
.scroll::-webkit-scrollbar {
37+
width: 4px !important;
38+
height: 4px !important;
39+
}
40+
41+
.scroll::-webkit-scrollbar-thumb {
42+
background-color: #999;
43+
border-radius: 6px;
44+
}
45+
46+
.scroll::-webkit-scrollbar-track {
47+
background-color: #f1f1f1;
48+
}
49+
50+
.formContainer {
51+
display: flex;
52+
justify-content: center;
53+
align-items: center;
54+
width: 100%;
55+
height: 100%;
56+
}
57+
58+
.closeBtn {
59+
position: absolute;
60+
right: 10px;
61+
top: 10px;
62+
}
63+
64+
.error{
65+
color: red;
66+
}
67+
68+
form {
69+
width: 100%;
70+
}
71+
72+
form div {
73+
display: flex;
74+
flex-direction: column;
75+
justify-content: space-between;
76+
width: 100%;
77+
padding: 10px;
78+
}
79+
80+
form div input {
81+
width: 100%;
82+
padding: 8px 5px;
83+
border-radius: 6px;
84+
border: none;
85+
border: 1px solid lightgray;
86+
outline: none;
87+
}
88+
89+
form div textarea {
90+
width: 100%;
91+
padding: 10px;
92+
border-radius: 6px;
93+
border: none;
94+
border: 1px solid lightgray;
95+
}
96+
97+
form div label {
98+
font-weight: 600;
99+
}
100+
101+
form div button {
102+
cursor: pointer;
103+
padding: 10px 8px;
104+
background-color: #0dbb5b;
105+
color: white;
106+
border: none;
107+
font-weight: 600;
108+
font-size: 16px;
109+
border-radius: 6px;
110+
}
111+
112+
form div button:hover {
113+
background-color: #359962;
114+
}
115+
.optional{
116+
color: gray;
117+
font-size: 10px;
118+
}
119+
.required{
120+
color: red;
121+
}
122+
123+
@media only screen and (max-width: 768px) {
124+
.modalContent {
125+
width: 90%;
126+
}
127+
}

0 commit comments

Comments
 (0)