How to Create Contact Form Widget for Website and Blogs Using cloudflare and Telegram

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
// Bot API Key
const BOT_TOKEN = "BOT_TOKEN";
// Your Telegram USER ID
const CHATID = "CHATID";

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://github.com/cachecleanerjeet/Contact-form",
      301
    );
  } else {
    const body = await request.json();
    const name = body.name;
    const phone_no = body.phone_no;
    const email = body.email;
    const subject = body.subject;
    const message = body.message;

    if (!name || !phone_no || !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/cachecleanerjeet",
          },
        }
      );
    } else {
      const sendmessage = await fetch(
        `https://api.telegram.org/bot${BOT_TOKEN}/sendMessage`,
        {
          body: JSON.stringify({
            chat_id: CHATID,
            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>Phone No: </b>${phone_no}\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/cachecleanerjeet",
        },
      });
    }
  }
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<!--- 
    error_text: Message to display if there is an error.
    success_text: Message to display if the form is successfully submitted.
    disable_waittime: If true, it will not froze a new form subission (after one is successfull) for half a day.
    form_worker_url: URL to the cloudflare backend.
  -->

<script
  src="https://cdn.jsdelivr.net/gh/tuhinpal/contact-form@master/src/contact-form.min.js"
  id="contactform"
  error_text=""
  success_text=""
  disable_waittime="true"
  form_worker_url="https://YOUR-workers-URL.workers.dev/"
></script>