Formulário de Contato

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: ```html Formulário de Contato ``` 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: 1. **Crie um Canal no Discord:** Se você ainda não tem um canal dedicado, crie um no seu servidor Discord. 2. **Configure o Webhook:** Vá até "Configurações do Canal" > "Integrações" > "Webhooks" e clique em "Criar Webhook". 3. **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: ```sh mkdir meu-projeto cd meu-projeto git init git remote add origin git@github.com:/.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: ```javascript 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: 1. Faça commit e push do código para o GitHub: ```sh git add . git commit -m "Projeto configurado" git push origin main ``` 2. No Cloudflare Pages, conecte o repositório GitHub, selecione o branch principal e configure a saída de build para `public`. 3. 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_URL` com a URL do webhook do Discord. - `HCAPTCHA_SECRET` com o segredo do hCaptcha. - `HCAPTCHA_SITE_KEY` com 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.

rhuan

Como Receber Mensagens no Discord com Cloudflare Functions

Join Our Newsletter. No Spam, Only the good stuff.