diff --git a/README.md b/README.md new file mode 100644 index 0000000..59f4fde --- /dev/null +++ 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 new file mode 100644 index 0000000..93ed57b --- /dev/null +++ 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: `New Contact Request Recieved\n\nIP: ${request.headers.get( + "cf-connecting-ip" + )}\nName: ${name}\nTelegram Username: @${tg_username.replace('@', '')}\nEmail: ${email}\nSubject: ${subject}\nMessage: ${message}`, + 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 b/contactform/cf.css similarity index 96% rename from src/cf.css rename to contactform/cf.css index 97151cc..439d99e 100644 --- a/src/cf.css +++ b/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 b/contactform/contact-form.js similarity index 92% rename from src/contact-form.js rename to contactform/contact-form.js index 93fed82..b5540d3 100644 --- a/src/contact-form.js +++ b/contactform/contact-form.js @@ -26,7 +26,7 @@ const cfform = `
- + @@ -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 index 374c1ff..c536613 100644 --- a/index.html +++ b/index.html @@ -2,6 +2,10 @@ Eren (@WH0907) + + + + @@ -9,10 +13,6 @@ - - - - @@ -50,6 +50,7 @@

Click me

Github Telegram Insta + My Bot
- +
@@ -75,8 +76,9 @@

@WH0907

About

-

~ Telegram Bot Dev ~

+

~ Telegram Bot Dev ~ @YoshitsuBot

• Python | Telethon | Pyrogram •

+

@@ -123,6 +125,13 @@

About

} - + \ No newline at end of file