From d6a0bea838bea0e3e098c956e442c1184b7ab4f6 Mon Sep 17 00:00:00 2001
From: unbl0ck <95893289+unbl0ck@users.noreply.github.com>
Date: Sat, 12 Aug 2023 19:42:12 -0500
Subject: [PATCH] updated contact form

mobile support is not here tho :(
---
 contact.html     | 151 +++++++++++++++++++++++++++++++++++++++++++++++
 form_process.php |  70 ++++++++++++++++++++++
 stylesheet.css   |  12 ++--
 3 files changed, 226 insertions(+), 7 deletions(-)
 create mode 100644 form_process.php
diff --git a/contact.html b/contact.html
index 6df94796..9fffba5b 100644
--- a/contact.html
+++ b/contact.html
@@ -40,6 +40,104 @@
 
             gtag('config', 'G-M9KJ1XPKLF');
         </script>
+        <!--Styling-->
+		<style>
+            /* Google Form */
+		    .form-container {
+                margin: 2vw 6vw;
+                display: flex;
+            }
+            .form-box {
+                background-color: #708CA8;
+                border-radius: 1vw;
+                width: 100vw;
+                margin: 0 1vw;
+            }
+            .form-title {
+                font-family: 'Montserrat', Courier, monospace;
+                font-size: large;
+                font-weight: bold;
+                color: #ffffff;
+            }
+            .form {
+                background-color: white;
+                max-height: 25vw;
+            }
+            @media screen and (max-width: 1200px) {
+                
+            }
+
+            /* Email Form */
+            .contact-container * {
+                box-sizing: border-box;
+                font-family: 'Montserrat', Courier, monospace;
+            }
+            .contact-container {
+                width: 75%;
+            }
+            .contact-form label {
+                display: block;
+                padding: 12px 0 6px 0;
+                letter-spacing: -0.2px;
+                cursor: text;
+                font-size: 16px;
+                font-weight: 700;
+            }
+            .contact-form input, .contact-form textarea {
+                font-size: 16px;
+                display: block;
+                width: 100%;
+                padding: 10px;
+                background-color: #e5e7eb;
+                border: none;
+                border: 4px solid #e5e7eb;
+                outline: none;
+                border-radius: 8px;
+                color: #9da3ae;
+            }
+            .contact-form input:focus, .contact-form textarea:focus {
+                background-color: #ffffff;
+                color: #9da3ae;
+            }
+            .contact-form input:focus:required:invalid {
+                border-color: #708CA8;
+                background-color: #ffffff;
+            }
+            .contact-form button {
+                display: block;
+                margin-top: 12px;
+                width: 100%;
+                padding: 12px 20px;
+                border-radius: 8px;
+                border-color: transparent;
+                background-color: #708CA8;
+                color: #ffffff;
+                font-weight: 700;
+                font-size: 18px;
+                transition: 300ms all;
+            }
+            .contact-form button:hover {
+                background-color: #5d7994;
+            }
+            .contact-alert {
+                padding: 12px;
+                border-radius: 10px;
+                color: #ffffff;
+                font-size: 14px;
+                font-weight: 400;
+                margin-top: 12px;
+                display: none;
+            }
+            .contact-alert.visible {
+                display: block;
+            }
+            .contact-alert.success {
+                background: #69cf9d;
+            }
+            .contact-alert.error {
+                background: #de524c;
+            }
+		</style>
     </head>
     <body>
         <!--Navbar-->
@@ -91,6 +189,58 @@
         <img src="img/header.png" alt="Image couldn't load." class="img-header" style="box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);">
 
         <!--Content-->
+        <center class="form-container">
+            <!--Ad Segment-->
+			<script>
+				var afg={};afg.u=6328;afg.s=5;
+				document.write("<sc"+"ript src='//js.adforgames.com/cd.js'></sc"+"ript>");
+			</script>
+
+            <div class="form-box">
+                <p class="form-title">Game Request</p>
+                <iframe src="https://docs.google.com/forms/d/e/1FAIpQLScuv3_LcWKJ-8SJRzdFT48ml4S29DI9up24Bp5CA8FLJA-mnw/viewform?embedded=true"
+                    class="form"
+                    width="100%"
+                    height="800"
+                    frameborder="0"
+                    marginheight="0"
+                    marginwidth="0">Loading…
+                </iframe>
+            </div>
+            <div class="form-box" id="incomplete">
+                <p class="form-title">Contact Form</p>
+                <iframe src="https://docs.google.com/forms/d/e/1FAIpQLSebf0X_0bCTnUMxfTsbX5lUtl00Aspj_ktVKO3C5qN-tjqBsQ/viewform?embedded=true"
+                    class="form"
+                    width="100%"
+                    height="800"
+                    frameborder="0"
+                    marginheight="0"
+                    marginwidth="0">Loading…
+                </iframe>
+            </div>
+            <div class="contact-container">
+                <form action="form_process.php" method="POST" class="contact-form">
+                  <label for="name">Your Name</label>
+                  <input type="text" id="name" name="fullName" required>
+
+                  <label for="email">Your Email Address</label>
+                  <input type="email" id="email" name="email" required>
+
+                  <label for="message">Your Message</label>
+                  <textarea name="message" id="message" cols="30" rows="10"></textarea>
+
+                  <button type="submit">Send</button>
+                </form>
+              </div>
+              
+            <!--Ad Segment-->
+			<script>
+				var afg={};afg.u=6328;afg.s=5;
+				document.write("<sc"+"ript src='//js.adforgames.com/cd.js'></sc"+"ript>");
+			</script>
+        </center>
+
+        <!--
         <center style="margin-bottom: 2vw; margin-top: 2vw;">
             <iframe src="https://docs.google.com/forms/d/e/1FAIpQLSebf0X_0bCTnUMxfTsbX5lUtl00Aspj_ktVKO3C5qN-tjqBsQ/viewform?embedded=true" 
                     width="100%" 
@@ -100,6 +250,7 @@
                     marginwidth="0">Loading…
             </iframe>
         </center>
+        -->
 
         <!--Footer--->
         <footer class="footer">
diff --git a/form_process.php b/form_process.php
new file mode 100644
index 00000000..3297c81e
--- /dev/null
+++ b/form_process.php
@@ -0,0 +1,70 @@
+<?php
+if (isset($_POST['email'])) {
+
+    $email_to = "project.hub.games@gmail.com";
+    $email_subject = "You've got a new submission";
+
+    function problem($error)
+    {
+        echo "Oh looks like there is some problem with your form data: <br><br>";
+        echo $error . "<br><br>";
+        echo "Please fix those to proceed.<br><br>";
+        die();
+    }
+
+    if (
+        !isset($_POST['fullName']) ||
+        !isset($_POST['email']) ||
+        !isset($_POST['message'])
+    ) {
+        problem('Oh looks like there is some problem with your form data.');
+    }
+
+    $name = $_POST['fullName'];
+    $email = $_POST['email'];
+    $message = $_POST['message'];
+
+    $error_message = "";
+    $email_exp = '/^[A-Za-z0-9._%-]+@[A-Za-z0-9.-]+\.[A-Za-z]{2,4}$/';
+
+    if (!preg_match($email_exp, $email)) {
+        $error_message .= 'Email address does not seem valid.<br>';
+    }
+
+    $string_exp = "/^[A-Za-z .'-]+$/";
+
+    if (!preg_match($string_exp, $name)) {
+        $error_message .= 'Name does not seem valid.<br>';
+    }
+
+    if (strlen($message) < 6) {
+        $error_message .= 'Message should not be less than 6 characters<br>';
+    }
+
+    if (strlen($error_message) > 0) {
+        problem($error_message);
+    }
+
+    $email_message = "Form details following:\n\n";
+
+    function clean_string($string)
+    {
+        $bad = array("content-type", "bcc:", "to:", "cc:", "href");
+        return str_replace($bad, "", $string);
+    }
+
+    $email_message .= "Name: " . clean_string($name) . "\n";
+    $email_message .= "Email: " . clean_string($email) . "\n";
+    $email_message .= "Message: " . clean_string($message) . "\n";
+
+    $headers = 'From: ' . $email . "\r\n" .
+        'Reply-To: ' . $email . "\r\n" .
+        'X-Mailer: PHP/' . phpversion();
+    @mail($email_to, $email_subject, $email_message, $headers);
+?>
+
+    Thank you for your response, we will get back to you shortly. Keep an eye out for our email: project.hub.games@gmail.com
+
+<?php
+}
+?>
\ No newline at end of file
diff --git a/stylesheet.css b/stylesheet.css
index 5a4799c4..d07ef51c 100644
--- a/stylesheet.css
+++ b/stylesheet.css
@@ -129,12 +129,6 @@ body {
     padding: 1vh 10vw;
     padding-bottom: 2vh;
 }
-@media screen and (max-width: 768px) {
-    .footer-about {
-        padding: 1vh 0;
-        font-size: 12px;
-    }
-}
 .footer-link a {
     text-decoration: none;
     padding: 5px 10px;
@@ -152,8 +146,12 @@ body {
 }
 @media screen and (max-width: 768px) {
     .footer {
-        padding: 20px 20px;
+        padding: 20px 10px;
         padding-bottom: 40px;
         font-size: 12px;
     }
+    .footer-about {
+        padding: 1vh 0;
+        font-size: 10px;
+    }
 }
\ No newline at end of file
