Como receber mensagens de um formulário HTML diretamente no seu Discord utilizando Cloudflare Pages e Cloudflare Functions.
Vamos dividir o processo em quatro partes principais: criação do formulário HTML, configuração do webhook no Discord, configuração do Worker na Cloudflare e Deploy do projeto.
Criando um Formulário HTML
Primeiro, você precisa de um formulário HTML para coletar os dados do usuário. O formulário básico pode parecer assim:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Formulário de Contato</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<form method="POST" action="/api/submit">
<label for="name">Nome:</label>
<input id="name" name="name" type="text" required>
<label for="email">Email:</label>
<input id="email" name="email" type="email" required>
<label for="subject">Assunto:</label>
<input id="subject" name="subject" type="text" required>
<label for="message">Mensagem:</label>
<textarea id="message" name="message" required></textarea>
<button type="submit">Enviar</button>
</form>
</body>
</html>
Este formulário envia uma requisição POST para o endpoint /api/submit quando o usuário clica em "Enviar".
Configurando o Webhook do Discord
Para receber mensagens no Discord, você precisa configurar um webhook. Siga os passos abaixo:
- Crie um Canal no Discord: Se você ainda não tem um canal dedicado, crie um no seu servidor Discord.
- Configure o Webhook: Vá até "Configurações do Canal" > "Integrações" > "Webhooks" e clique em "Criar Webhook".
- Nomeie o Webhook: Dê um nome ao seu webhook e copie a URL gerada.
Configurando o Cloudflare Pages e Workers
Agora que você tem o formulário e o webhook configurados, é hora de configurar o Cloudflare Worker para processar as requisições e enviar mensagens ao Discord.
1: Criar um Projeto no GitHub
Crie um repositório no GitHub para o seu projeto. No seu terminal, clone o repositório e configure a estrutura do projeto:
mkdir meu-projeto
cd meu-projeto
git init
git remote add origin git@github.com:<seu-usuario>/<seu-repositorio>.git
2: Estrutura do Projeto
Organize seu projeto da seguinte maneira:
meu-projeto
├── functions
│ └── api
│ └── submit.js
└── public
└── index.html
3: Configurar o Worker
No arquivo functions/api/submit.js, adicione o seguinte código para processar o formulário e enviar a mensagem para o Discord:
export async function onRequestPost(ctx) {
try {
return await handleRequest(ctx);
} catch(e) {
return new Response(`${e.message}\n${e.stack}`, { status: 500 });
}
}
async function handleRequest({ request, env }) {
const data = await request.formData();
const name = data.get('name');
const email = data.get('email');
const subject = data.get('subject');
const message = data.get('message');
const captcha = data.get('h-captcha-response');
if (!name || !email || !subject || !message || !captcha) {
return new Response('Verifique se os campos estão preenchidos!', { status: 400 });
}
const captchaVerified = await verifyHcaptcha(
captcha,
request.headers.get('cf-connecting-ip'),
env.HCAPTCHA_SECRET,
env.HCAPTCHA_SITE_KEY
);
if (!captchaVerified) {
return new Response('Captcha inválido!', { status: 400 });
}
await sendDiscordMessage(name, email, subject, message, env.DISCORD_WEBHOOK_URL);
return new Response('OK');
}
async function verifyHcaptcha(response, ip, secret, siteKey) {
const res = await fetch('https://hcaptcha.com/siteverify', {
method: 'POST',
headers: {
'Content-Type': 'application/x-www-form-urlencoded',
},
body: `response=${response}&remoteip=${ip}&secret=${secret}&sitekey=${siteKey}`
});
const json = await res.json();
return json.success;
}
async function sendDiscordMessage(name, email, subject, message, webhookUrl) {
await fetch(webhookUrl, {
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify({
username: 'Formulário de Contato',
embeds: [{
color: 0x0099ff,
title: 'Nova Mensagem',
fields: [
{
name: 'Nome',
value: name,
inline: true,
},
{
name: 'Email',
value: email,
inline: true,
},
{
name: 'Assunto',
value: subject,
},
{
name: 'Mensagem',
value: "```
" + message + "
```",
}
]
}]
}),
});
}
Deploy
Com tudo configurado, vamos implantar o projeto:
-
Faça commit e push do código para o GitHub:
git add . git commit -m "Projeto configurado" git push origin main No Cloudflare Pages, conecte o repositório GitHub, selecione o branch principal e configure a saída de build para
public.-
Para não expor suas chaves e configurações sensíveis, configure as variáveis de ambiente no Cloudflare Pages. Acesse o dashboard do Cloudflare Pages. Selecione o projeto e vá até Settings > Environment Variables. Adicione as seguintes variáveis:
-
DISCORD_WEBHOOK_URLcom a URL do webhook do Discord. -
HCAPTCHA_SECRETcom o segredo do hCaptcha. -
HCAPTCHA_SITE_KEYcom a chave do site do hCaptcha.
-
Após a configuração, seu site estará acessível via um subdomínio *.pages.dev e pronto para uso. Quando um usuário enviar o formulário, uma mensagem será enviada diretamente para o seu canal no Discord.
Parabéns! Você configurou com sucesso um formulário HTML que envia mensagens para o Discord usando Cloudflare Functions.
Top comments (0)