Skip to content

Commit 31761a7

Browse files
author
Richard Sarkis
authored
Merge pull request #1 from RocPy/add-contact-form
Add contact form
2 parents 039a298 + 5bc58c3 commit 31761a7

File tree

3 files changed

+195
-1
lines changed

3 files changed

+195
-1
lines changed

‎docs/contact.md‎

Lines changed: 126 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,126 @@
1+
# Contact Us
2+
3+
<script>
4+
const form = document.getElementById("contactForm");
5+
const submitBtn = document.getElementById("submitBtn");
6+
const messageStatus = document.getElementById("messageStatus");
7+
8+
form.addEventListener("submit", async function (event) {
9+
event.preventDefault();
10+
11+
// Clear old messages & set button state
12+
messageStatus.style.display = "none";
13+
messageStatus.classList.remove("success", "error");
14+
messageStatus.textContent = "";
15+
submitBtn.disabled = true;
16+
submitBtn.innerText = "Sending...";
17+
18+
const formData = new FormData(form);
19+
20+
try {
21+
const response = await fetch("https://api.web3forms.com/submit", {
22+
method: "POST",
23+
body: formData,
24+
});
25+
const json = await response.json();
26+
27+
if (json.success) {
28+
// Show success block
29+
messageStatus.textContent = "✓ Message sent successfully!";
30+
messageStatus.classList.add("success");
31+
messageStatus.style.display = "block";
32+
33+
// Optionally reset the form
34+
form.reset();
35+
} else {
36+
// Show error block
37+
messageStatus.textContent =
38+
"✗ An error occurred: " + (json.message || "Please try again later.");
39+
messageStatus.classList.add("error");
40+
messageStatus.style.display = "block";
41+
}
42+
} catch (error) {
43+
// Network or unexpected error
44+
messageStatus.textContent = "✗ Could not send message. " + error.message;
45+
messageStatus.classList.add("error");
46+
messageStatus.style.display = "block";
47+
} finally {
48+
submitBtn.disabled = false;
49+
submitBtn.innerText = "Send Message";
50+
}
51+
});
52+
</script>
53+
54+
<form
55+
action="https://api.web3forms.com/submit"
56+
method="POST"
57+
class="contact-form"
58+
id="contactForm"
59+
>
60+
<!-- 1) Your Access Key from Web3Forms -->
61+
<input type="hidden" name="access_key" value="9c04327a-dea1-4938-8b84-37de91941a7b" />
62+
63+
<!-- Uncomment below to test emails without sending them -->
64+
<!-- <input type="hidden" name="access_key" value="YOUR_ACCESS_KEY_HERE"> -->
65+
66+
<!-- 2) Optional honeypot field for spam control -->
67+
<input type="hidden" name="honeypot" value="" />
68+
69+
<!-- Optional: But Recommended: To Prevent SPAM Submission. Make sure its hidden by default -->
70+
<input type="checkbox" name="botcheck" id="" style="display: none;">
71+
72+
<!-- 3) Remove the redirect if you want a single-page (AJAX) submission -->
73+
<!-- <input type="hidden" name="redirect" value="https://example.com/thank-you" /> -->
74+
75+
<!-- 4) Form "from" name -->
76+
<input type="hidden" name="RocPy Contact Noticfication" value="Mission Control">
77+
78+
<div class="input-group">
79+
<label for="name">Name</label>
80+
<input
81+
type="text"
82+
name="name"
83+
id="name"
84+
placeholder="Your Name"
85+
required
86+
/>
87+
</div>
88+
89+
<div class="input-group">
90+
<label for="email">Email</label>
91+
<input
92+
type="email"
93+
name="email"
94+
id="email"
95+
placeholder="Your Email"
96+
required
97+
/>
98+
</div>
99+
100+
<div class="input-group">
101+
<label for="subject">Subject</label>
102+
<input
103+
type="text"
104+
name="subject"
105+
id="subject"
106+
placeholder="Subject"
107+
required
108+
/>
109+
</div>
110+
111+
<div class="input-group">
112+
<label for="message">Message</label>
113+
<textarea
114+
name="message"
115+
id="message"
116+
rows="5"
117+
placeholder="Your message"
118+
required
119+
></textarea>
120+
</div>
121+
122+
<button type="submit" id="submitBtn">Send Message</button>
123+
</form>
124+
125+
<!-- Hidden by default; shown on success or error -->
126+
<div id="messageStatus" class="message-status" style="display: none;"></div>

‎docs/css/extra.css‎

Lines changed: 68 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -77,3 +77,71 @@
7777
.D_boxhead p {
7878
color: black;
7979
}
80+
81+
82+
/* Contact form styling */
83+
.contact-form {
84+
max-width: 600px;
85+
margin: 2em auto;
86+
display: flex;
87+
flex-direction: column;
88+
gap: 1em;
89+
font-family: sans-serif;
90+
}
91+
92+
.input-group {
93+
display: flex;
94+
flex-direction: column;
95+
}
96+
97+
.input-group label {
98+
font-weight: bold;
99+
margin-bottom: 0.25em;
100+
}
101+
102+
.input-group input[type="text"],
103+
.input-group input[type="email"],
104+
.input-group textarea {
105+
border: 1px solid #ccc;
106+
border-radius: 4px;
107+
padding: 0.5em;
108+
font-size: 1em;
109+
}
110+
111+
button[type="submit"] {
112+
background-color: #007bff;
113+
color: #fff;
114+
border: none;
115+
border-radius: 4px;
116+
padding: 0.75em 1.5em;
117+
cursor: pointer;
118+
font-size: 1em;
119+
}
120+
121+
button[type="submit"]:hover {
122+
background-color: #0056b3;
123+
}
124+
125+
/* Styling for the success/error block */
126+
.message-status {
127+
margin: 1em auto;
128+
max-width: 600px;
129+
border-left: 4px solid;
130+
padding: 1em;
131+
border-radius: 4px;
132+
}
133+
134+
/* Success styling */
135+
.message-status.success {
136+
background-color: #e7f5eb; /* a light greenish background */
137+
border-color: #37b34a; /* a green border */
138+
color: #27632a; /* darker green text */
139+
}
140+
141+
/* Error styling */
142+
.message-status.error {
143+
background-color: #fdecea; /* a light red background */
144+
border-color: #f44336; /* a red border */
145+
color: #811c1c; /* darker red text */
146+
}
147+

‎mkdocs.yml‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -34,7 +34,7 @@ extra:
3434
- icon: fontawesome/brands/github
3535
link: https://github.com/RocPy
3636
- icon: fontawesome/solid/envelope
37-
link: mailto:[email protected]
37+
link: /contact/
3838
- icon: fontawesome/brands/youtube
3939
link: https://www.youtube.com/@rocpy4
4040
markdown_extensions:

0 commit comments

Comments
 (0)