DEV Community

Discussion on: Discord Webhook Powered Contact Form

Collapse
 
mistval profile image
Randall

Hi, to send plain text, simply send a content property in the webhook body. If you're using the example code, just replace the webhookBody declaration with this:

const webhookBody = {
  content: senderMessage,
};
Enter fullscreen mode Exit fullscreen mode
Collapse
 
maybemoshi profile image
MaybeMoshi • Edited

thanks, works perfectly.
For other people, I stripped it down to just a text box that sends the plain text to the webhook.

<html>
  <head>
    <!-- Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
  </head>
  <body class="container mt-5">
    <form onsubmit="sendContact(event)">
      <div class="mb-3">
        <label for="messageInput" class="form-label">Enter your message</label>
        <textarea class="form-control" id="messageInput" rows="3"></textarea>
      </div>
      <button type="submit" class="btn btn-primary">Submit</button>
    </form>
    <script>
      async function sendContact(ev) {
        ev.preventDefault();

        const senderMessage = document
          .getElementById('messageInput').value;

         const webhookBody = {
          content: senderMessage,
         };


        const webhookUrl = 'PASTE WEBHOOK URL';

        const response = await fetch(webhookUrl, {
          method: 'POST',
          headers: {
            'Content-Type': 'application/json',
          },
          body: JSON.stringify(webhookBody),
        });
      }
    </script>
  </body>
</html>
Enter fullscreen mode Exit fullscreen mode