Major Changes

Replaced Phone No. with Telegram Username. Added Contact Form worker and ReadMe. Updated Email. Moved Contact-form related stuff to /contactform Fixed Background color of button in light mode Enjoy Forkers
LinuxGuy312 · Nov 18, 2023 · 43d835b · 43d835b
1 parent 794a664
commit 43d835b
Show file tree

Hide file tree

Showing 5 changed files with 130 additions and 14 deletions.
diff --git a/README.md b/README.md
@@ -0,0 +1,18 @@
+
+## Deployment of Contact Form on Cloudflare Workers
+
+**Setup The Code Required:**
+
+- Create a Telegram bot from [BotFather](https://t.me/botfather) and copy its API Token
+- Start your newly created bot by sending `/start` in its PM
+- Then goto [Yoshitsu](https://yoshitsubot.t.me) and send `/id` and copy your user id
+- Open [cf-worker.js](/contactform/cf-worker.js) and edit your Bot token and User ID you got from earlier.
+- Copy the edited `cf-worker.js` to your clipboard.
+
+**Deploy Cloudflare worker:**
+- Go to [Cloudflare Workers](https://workers.cloudflare.com) & Create an Account.
+- After that, Create a worker and Edit it to Paste the Javascript Code you Copied earlier.
+- Save and Deploy the worker and copy its URL.
+
+**Add in your website:**
+- Just replace the [form_worker_url](/index.html#L129) in index.html to your cloudflare worker URL and you are good to go!
diff --git a/contactform/cf-worker.js b/contactform/cf-worker.js
@@ -0,0 +1,89 @@
+// Bot API Key
+const BOT_TOKEN = "123456789:abcdefghijklmnopqrstuvwxyz";
+
+// Your Telegram USER ID
+const USERID = "9876543210";
+
+addEventListener("fetch", (event) => {
+  event.respondWith(handleRequest(event.request));
+});
+
+async function handleRequest(request) {
+  if (request.method == "OPTIONS") {
+    return new Response(null, {
+      headers: {
+        "Access-Control-Allow-Origin": "*",
+        "Access-Control-Allow-Methods": "GET,POST,OPTIONS",
+        "Access-Control-Max-Age": "86400",
+      },
+    });
+  } else if (new URL(request.url).pathname == "/" && !request.body) {
+    return Response.redirect(
+      "https://LinuxGuy312.github.io",
+      301
+    );
+  } else {
+    const body = await request.json();
+    const name = body.name;
+    const tg_username = body.tg_username;
+    const email = body.email;
+    const subject = body.subject;
+    const message = body.message;
+
+    if (!name || !tg_username || !email || !subject || !message) {
+      return new Response(
+        JSON.stringify({
+          status: false,
+          msg: "All fields are required",
+        }),
+        {
+          status: 200,
+          headers: {
+            "Content-Type": "application/json",
+            "Cache-Control": "no-cache, no-store, must-revalidate",
+            "Access-Control-Allow-Origin": "*",
+            "Made-By": "https://github.com/LinuxGuy312",
+          },
+        }
+      );
+    } else {
+      const sendmessage = await fetch(
+        `https://api.telegram.org/bot${BOT_TOKEN}/sendMessage`,
+        {
+          body: JSON.stringify({
+            chat_id: USERID,
+            text: `<b>New Contact Request Recieved</b>\n\n<b>IP: </b><code>${request.headers.get(
+              "cf-connecting-ip"
+            )}</code>\n<b>Name: </b><code>${name}</code>\n<b>Telegram Username: </b>@${tg_username.replace('@', '')}\n<b>Email: </b>${email}\n<b>Subject: </b><code>${subject}</code>\n<b>Message: </b><code>${message}</code>`,
+            parse_mode: "HTML",
+          }),
+          method: "POST",
+          headers: {
+            "content-type": "application/json",
+          },
+        }
+      );
+      const results = await sendmessage.json();
+      if (results.ok == true) {
+        var status = {
+          status: true,
+          msg: "Message sent successfully",
+        };
+      } else {
+        var status = {
+          status: false,
+          msg: "Error while sending the message",
+        };
+      }
+      return new Response(JSON.stringify(status), {
+        status: 200,
+        headers: {
+          "Content-Type": "application/json",
+          "Cache-Control": "no-cache, no-store, must-revalidate",
+          "Access-Control-Allow-Origin": "*",
+          "Made-By": "https://github.com/LinuxGuy312",
+        },
+      });
+    }
+  }
+}
diff --git a/src/cf.css → contactform/cf.css b/src/cf.css → contactform/cf.css
@@ -226,7 +226,7 @@
 }
 
 .light .contact-form-cf .color {
-  background-image: linear-gradient(90deg, #7F00FF60, #E100FFdd 51%,  #7F00FF) var(--x, 0)/ 200%;
+  background: linear-gradient(90deg, #7F00FF60, #E100FFdd 51%,  #7F00FF60) var(--x, 0)/ 200%;
   color: #fff !important;
   backdrop-filter: blur(5px);
   margin: none;
@@ -239,7 +239,7 @@
 }
 
 .light .contact-form-cf .form-button {
-  background-image: linear-gradient(90deg, #7F00FF, #E100FF 51%,  #7F00FF) var(--x, 0)/ 200%;
+  background: linear-gradient(90deg, #7F00FF, #E100FF 51%,  #7F00FF) var(--x, 0)/200%;
   color: white;
 }
 

diff --git a/src/contact-form.js → contactform/contact-form.js b/src/contact-form.js → contactform/contact-form.js
@@ -26,7 +26,7 @@ const cfform = `
 <div>
 	<input class="element" onchange="cfonChange('cfname')" id="cfname" type="text" name="name" placeholder="Name" autocomplete="off">
 	<input class="element" onchange="cfonChange('cfemail')" id="cfemail" type="email" name="email" placeholder="Email" autocomplete="off">
-	<input class="element" onchange="cfonChange('cfphone')" id="cfphone" type="tel" name="phoneno" placeholder="Phone No." autocomplete="off" maxlength="14">
+	<input class="element" onchange="cfonChange('cftgusername')" id="cftgusername" type="text" name="tgusername" placeholder="Telegram Username" autocomplete="off">
 	<input class="element" onchange="cfonChange('cfsubject')" id="cfsubject" type="text" name="subject" placeholder="Subject" autocomplete="off">
 	<textarea class="element" onchange="cfonChange('cfmessage')" id="cfmessage" name="message" placeholder="Your message"></textarea>
 	<button id="cfbutton" onclick="cfSubmitMessage()" class="form-button color">Send</button>
@@ -36,7 +36,7 @@ const cfform = `
 window.onload = () => {
   var cfstylesheet = document.createElement("link");
   cfstylesheet.rel = "stylesheet";
-  cfstylesheet.href = `/src/cf.css`;
+  cfstylesheet.href = `/contactform/cf.css`;
   document.getElementsByTagName("head")[0].appendChild(cfstylesheet);
 
   cfstylesheet.onload = function () {
@@ -68,7 +68,7 @@ async function cfSubmitMessage() {
   var cfvalue = {
     name: GEBID("cfname").value,
     email: GEBID("cfemail").value.toLowerCase(),
-    phone_no: GEBID("cfphone").value,
+    tg_username: GEBID("cftgusername").value,
     subject: GEBID("cfsubject").value,
     message: GEBID("cfmessage").value,
   };
@@ -79,8 +79,8 @@ async function cfSubmitMessage() {
     GEBID("cfname").classList.add("error");
   } else if (!emailRegex.test(cfvalue.email)) {
     GEBID("cfemail").classList.add("error");
-  } else if (cfvalue.phone_no === "") {
-    GEBID("cfphone").classList.add("error");
+  } else if (cfvalue.tg_username === "") {
+    GEBID("cftgusername").classList.add("error");
   } else if (cfvalue.subject === "") {
     GEBID("cfsubject").classList.add("error");
   } else if (cfvalue.message === "") {

diff --git a/index.html b/index.html
@@ -2,17 +2,17 @@
 <html lang="en">
 <head>
      <title>Eren (@WH0907)</title>
+     <link rel="stylesheet" href="src/style.css">
+     <link rel="icon" href="https://vectorified.com/images/attack-on-titan-icon-31.png" type="image/x-icon">
+     <link rel='stylesheet' href="https://fonts.googleapis.com/css2?family=Cutive+Mono&family=Poppins:wght@100;200;300;400;500;600;700&display=swap">
+     <script src="https://kit.fontawesome.com/a81368914c.js"></script>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <meta name="description" content="Eren's Portfolio | One of the first web development projects by Eren.">
      <meta itemprop="name" content="Eren's Portfolio">
      <meta itemprop="description" content="Eren's Portfolio | One of the first web development projects by Eren.">
      <meta itemprop="image" content="https://i.pinimg.com/originals/39/7f/ea/397fea9f7b5fcad281f32649902b9fa6.jpg">
      <meta http-equiv="X-UA-Compatible" content="ie=edge">
-     <script src="https://kit.fontawesome.com/a81368914c.js"></script>
-     <link rel="stylesheet" href="src/style.css">
-     <link rel="icon" href="https://vectorified.com/images/attack-on-titan-icon-31.png" type="image/x-icon">
-     <link rel='stylesheet' href="https://fonts.googleapis.com/css2?family=Cutive+Mono&family=Poppins:wght@100;200;300;400;500;600;700&display=swap">
      <meta content="Eren's Portfolio" property="og:site_name">
      <meta property="og:type" content="website">
      <meta content="https://linuxguy312.github.io/" property="og:url">
@@ -50,14 +50,15 @@ <h1 data-value="LinuxGuy312" id="loader-text">Click me</h1>
                     <a class="active" href="https://github.com/LinuxGuy312" target="_blank">Github</a>
                     <a class="active" href="https://WH0907.t.me" target="_blank" >Telegram</a>
                     <a class="active" href="https://instagram.com/w_h_24.11" target="_blank">Insta</a>
+                    <a class="active" href="https://yoshitsubot.t.me?start=web" target="_blank">My Bot</a>
                </div>
                <div class="header" onclick="toggle()">
                     <label for="check" class="checkbtn" id="chkbtn">
                          <div class="hamburger-menu">
                               <div class="center"></div>
                          </div>
                     </label>
-                    <a href="mailto:[email protected]" class="mail">
+                    <a href="mailto:[email protected]" class="mail">
                          <i class="far fa-envelope"></i>
                     </a>
                     <div class="main">
@@ -75,8 +76,9 @@ <h3 class="sub-name">@WH0907</h3>
                     <div class="left">
                          <div class="about-container">
                               <h3 class="title">About</h3>
-                              <p class="text">~ Telegram Bot Dev ~</p>
+                              <p class="text">~ Telegram Bot Dev ~ <a class='text' style="text-decoration: none" href="https://YoshitsuBot.t.me?start=web">@YoshitsuBot</a></p>
                               <p class="text">• Python | Telethon | Pyrogram •</p>
+                              <p class="text"></p>
                          </div>
                          <div class="icons-container">
                               <a href="https://github.com/LinuxGuy312" class="icon">
@@ -123,6 +125,13 @@ <h3 class="title">About</h3>
           }
      </script>
      <script src="src/app.js"></script>
-     <script src="/src/contact-form.js" id="contactform" error_text="" success_text="" disable_waittime="true" form_worker_url="https://contactform.cfform.workers.dev/"></script>
+     <script
+          form_worker_url="https://linuxguy312.contactform-d0b.workers.dev/"
+          src="/contactform/contact-form.js"
+          error_text=""
+          success_text=""
+          disable_waittime="true"
+          id="contactform">
+     </script>
 </body>
 </html>