From 484dc18eb39f2f057527a02bbe41d12473591e45 Mon Sep 17 00:00:00 2001
From: Tristan Smith <tristan.smith@pm.me>
Date: Sat, 21 Sep 2024 13:57:54 -0400
Subject: [PATCH] updated contact form after enabling cgi-bin

---
 about.html          |  9 +++++
 contact.html        | 20 +++++-----
 contactold.html     | 94 +++++++++++++++++++++++++++++++++++++++++++++
 index.html          |  3 +-
 news.html           |  9 +++++
 privacy.html        |  2 +-
 scripts/contact.cgi | 86 +++++++++++++++++++++++++++++++++++++++++
 7 files changed, 212 insertions(+), 11 deletions(-)
 create mode 100644 contactold.html
 create mode 100644 scripts/contact.cgi

diff --git a/about.html b/about.html
index 08f60dd..98bfcc9 100644
--- a/about.html
+++ b/about.html
@@ -56,6 +56,15 @@
                     creativity, and the warmth she wishes to share with the world.</p>
             </div>
         </section>
+
+        <section class="contact">
+            <div class="container">
+                <h2>Contact Us</h2>
+                <p>Have questions or special requests? Reach out to us!</p>
+                <p>Email: <a href="mailto:bethany@willowmecreations.com">bethany@willowmecreations.com</a><br>
+                TikTok: <a href="https://www.tiktok.com/@bethanyrhodes6" target="_blank"><i class="fab fa-tiktok"></i>bethanyrhodes6</a></p>
+            </div>
+        </section>
     </main>
 
     <footer class="footer">
diff --git a/contact.html b/contact.html
index 25172e1..be76eec 100644
--- a/contact.html
+++ b/contact.html
@@ -41,8 +41,8 @@
                     
                 <h2>Send me a message!</h2>
                 <p>Have questions or special requests? Reach out to me!</p>
-                <p>Don't wanna use the form below? M        y email is just underneath it!</p> 
-                <form id="contactForm">
+                <p>Don't wanna use the form below? My email is just underneath it!</p> 
+                <form id="contactForm" action="/cgi-bin/contact.cgi" method="POST" onsubmit="disableSubmitButton()">
                     <div class="form-group">
                         <label for="name">Name</label>
                         <input type="text" id="name" name="name" required>
@@ -50,7 +50,7 @@
                     <div class="form-group">
                         <label for="email">Email</label>
                         <input type="email" id="email" name="email" required>
-                    </div>  
+                    </div>
                     <div class="form-group">
                         <label for="subject">Subject</label>
                         <input type="text" id="subject" name="subject" required>
@@ -59,11 +59,12 @@
                         <label for="message">Message</label>
                         <textarea id="message" name="message" required></textarea>
                     </div>
-                    <button type="submit" class="btn">Send Message</button>
+                    <button type="submit" id="submitButton" class="btn">Send Message</button>
                 </form>
+                    
 
                 <h2>Contact Information</h2>
-                <p>Email: <a href="mailto:willowmecreations@yahoo.com">willowmecreations@yahoo.com</a><br>
+                <p>Email: <a href="mailto:bethany@willowmecreations.com">bethany@willowmecreations.com</a><br>
                 TikTok: <a href="https://www.tiktok.com/@bethanyrhodes6" target="_blank"><i class="fab fa-tiktok"></i>bethanyrhodes6</a></p>
             </div>
         </section>
@@ -85,10 +86,11 @@
     </footer>
 
     <script src="script.js"></script>
-    <script type="text/javascript"
-        src="https://cdn.jsdelivr.net/npm/@emailjs/browser@4/dist/email.min.js">
-</script>
-    <script src="contact.js"></script>
+    <script>
+        function disableSubmitButton() {
+            document.getElementById("submitButton").disabled = true;
+        }
+    </script>
 </body>
 
 </html>
\ No newline at end of file
diff --git a/contactold.html b/contactold.html
new file mode 100644
index 0000000..8cedb86
--- /dev/null
+++ b/contactold.html
@@ -0,0 +1,94 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+    <title>Contact Us - WillowMeCreations</title>
+    <link rel="stylesheet" type="text/css" href="style.css">
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Montserrat:400,700|Playfair+Display:400,700">
+</head>
+
+<body>
+    <header class="header">
+        <div class="container">
+            <div class="logo">
+                <img src="img/logo-transparent.png" alt="WillowMeCreations logo">
+            </div>
+            <nav class="topnav" id="myTopnav">
+                <a href="index.html">Home</a>
+                <a href="about.html">About</a>
+                <a href="news.html">News</a>
+                <a href="products.html">Products</a>
+                <a href="contact.html" class="active">Contact</a>
+                <a href="javascript:void(0);" class="icon" onclick="toggleMenu()">
+                    <i class="fa fa-bars"></i>
+                </a>
+            </nav>
+        </div>
+    </header>
+
+    <main>
+        <section class="contact">
+            <div class="container">
+                <h1>Hello from WillowMeCreations!</h1>
+                <p>We're thrilled that you're considering reaching out to us. Your inquiries, thoughts, and shared
+                    enthusiasm for the world of yarn mean a lot to us. Whether you're seeking advice on the perfect yarn
+                    for your next project, have a custom order in mind, or just want to share your crafting experiences,
+                    we're here for it all. Feel free to drop us a message using the form below or connect with us
+                    through our social media channels. Let's weave a thread of creativity and conversation together at
+                    WillowMeCreations       where every message is a stitch in our community's vibrant tapestry.</p>
+                    
+                <h2>Send me a message!</h2>
+                <p>Have questions or special requests? Reach out to me!</p>
+                <p>Don't wanna use the form below? M        y email is just underneath it!</p> 
+                <form id="contactForm">
+                    <div class="form-group">
+                        <label for="name">Name</label>
+                        <input type="text" id="name" name="name" required>
+                    </div>
+                    <div class="form-group">
+                        <label for="email">Email</label>
+                        <input type="email" id="email" name="email" required>
+                    </div>  
+                    <div class="form-group">
+                        <label for="subject">Subject</label>
+                        <input type="text" id="subject" name="subject" required>
+                    </div>
+                    <div class="form-group">
+                        <label for="message">Message</label>
+                        <textarea id="message" name="message" required></textarea>
+                    </div>
+                    <button type="submit" class="btn">Send Message</button>
+                </form>
+
+                <h2>Contact Information</h2>
+                <p>Email: <a href="mailto:bethany@willowmecreations.com">bethany@willowmecreations.com</a><br>
+                TikTok: <a href="https://www.tiktok.com/@bethanyrhodes6" target="_blank"><i class="fab fa-tiktok"></i>bethanyrhodes6</a></p>
+            </div>
+        </section>
+    </main>
+
+    <footer class="footer">
+        <div class="container">
+            <div class="footer-info">
+                <h2>WillowMeCreations</h2>
+                <p>&copy; 2024 WillowMeCreations. All rights reserved.</p>
+            </div>
+            <div class="social-media">
+                <h2>Follow Me</h2>
+                <a href="https://instagram.com/" target="_blank"><i class="fab fa-instagram"></i></a>
+                <a href="https://facebook.com/" target="_blank"><i class="fab fa-facebook"></i></a>
+                <a href="https://tiktok.com/bethanyrhodes6" target="_blank"><i class="fab fa-tiktok"></i></a>
+            </div>
+        </div>
+    </footer>
+
+    <script src="script.js"></script>
+    <script type="text/javascript"
+        src="https://cdn.jsdelivr.net/npm/@emailjs/browser@4/dist/email.min.js">
+</script>
+    <script src="contact.js"></script>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/index.html b/index.html
index 148b14b..3f0887b 100644
--- a/index.html
+++ b/index.html
@@ -137,7 +137,8 @@
             <div class="container">
                 <h2>Contact Us</h2>
                 <p>Have questions or special requests? Reach out to us!</p>
-                <a href="mailto:bethany@willowmecreations.com" class="btn">Email Us</a>
+                <p>Email: <a href="mailto:bethany@willowmecreations.com">bethany@willowmecreations.com</a><br>
+                TikTok: <a href="https://www.tiktok.com/@bethanyrhodes6" target="_blank"><i class="fab fa-tiktok"></i>bethanyrhodes6</a></p>
             </div>
         </section>
     </main>
diff --git a/news.html b/news.html
index d983e9e..1ab844b 100644
--- a/news.html
+++ b/news.html
@@ -71,6 +71,15 @@
                     Bethany</span>
             </div>
         </section>
+
+        <section class="contact">
+            <div class="container">
+                <h2>Contact Us</h2>
+                <p>Have questions or special requests? Reach out to us!</p>
+                <p>Email: <a href="mailto:bethany@willowmecreations.com">bethany@willowmecreations.com</a><br>
+                TikTok: <a href="https://www.tiktok.com/@bethanyrhodes6" target="_blank"><i class="fab fa-tiktok"></i>bethanyrhodes6</a></p>
+            </div>
+        </section>
     </main>
 
     <footer class="footer">
diff --git a/privacy.html b/privacy.html
index 7341d17..95e0655 100644
--- a/privacy.html
+++ b/privacy.html
@@ -84,7 +84,7 @@
     </div>
     <div class="footer">
         <div class="contact-info">
-            <p>Email: <a href="mailto:bethany@willowmecreations.com">bethany@willowmecreations.com</a></p>
+            <p>Email: <a href="mailto:bethany@willowmecreations.com">bethany@willowmecreations.com</a><br></p>
         </div>
     
         <div class="social-media">
diff --git a/scripts/contact.cgi b/scripts/contact.cgi
new file mode 100644
index 0000000..4a4a681
--- /dev/null
+++ b/scripts/contact.cgi
@@ -0,0 +1,86 @@
+#!/bin/bash
+
+echo "Content-type: text/html"
+echo ""
+
+# Log the raw POST data for debugging
+read POST_DATA
+echo "POST Data: $POST_DATA" >> /tmp/contact_form.log
+
+# URL decoding function
+urldecode() {
+    local url_encoded="${1//+/ }"
+    printf '%b' "${url_encoded//%/\\x}"
+}
+
+# Parse the form data using IFS
+NAME=""
+EMAIL=""
+SUBJECT=""
+MESSAGE=""
+
+IFS='&' # Split fields by "&"
+for param in $POST_DATA; do
+    IFS='=' read -r key value <<< "$param"
+    key=$(urldecode "$key")
+    value=$(urldecode "$value")
+    
+    case $key in
+        name) NAME="$value" ;;
+        email) EMAIL="$value" ;;
+        subject) SUBJECT="$value" ;;
+        message) MESSAGE="$value" ;;
+    esac
+done
+
+# Log the parsed values for debugging
+echo "Name: $NAME, Email: $EMAIL, Subject: $SUBJECT, Message: $MESSAGE" >> /tmp/contact_form.log
+
+# Create the email with proper headers
+EMAIL_BODY=$(cat <<EOF
+From: $EMAIL
+To: info@willowmecreations.com, bethany@willowmecreations.com
+Subject: $SUBJECT
+
+Name: $NAME
+Email: $EMAIL
+Message: $MESSAGE
+EOF
+)
+
+# Log the email body for debugging
+echo "Email Body: $EMAIL_BODY" >> /tmp/contact_form.log
+
+# Send the email using msmtp
+echo "$EMAIL_BODY" | msmtp info@willowmecreations.com
+
+# Response back to the browser
+cat <<EOF
+<html>
+<head>
+    <meta http-equiv="refresh" content="5;url=/index.html">
+    <style>
+        body {
+            font-family: Arial, sans-serif;
+            text-align: center;
+            background-color: #f4f4f4;
+            padding-top: 50px;
+        }
+        .success-message {
+            background-color: #4CAF50;
+            color: white;
+            padding: 20px;
+            border-radius: 5px;
+            display: inline-block;
+        }
+    </style>
+</head>
+<body>
+    <div class="success-message">
+        <h1>Message Sent Successfully!</h1>
+        <p>Thank you for reaching out. You will be redirected to the homepage shortly.</p>
+        <p>If not, <a href="/index.html">click here</a> to return to the homepage.</p>
+    </div>
+</body>
+</html>
+EOF