Copied to clipboard

Create a website form using Discord

This tutorial explains how to create a comment box on any static webhost. Usually comment boxes require some back-end server, but for this tutorial we're going to send each message directly to a Discord channel.

There is no way to display the comments received directly on the website.

  1. Create a new Discord server, or identify an existing one.
  2. Create a channel that you would like submissions to appear in (this channel can be set as private).
  3. Add the form HTML code to your site:
  4. <textarea rows="4" cols="50" id="question" placeholder="Type your comment here and click 'send'!"></textarea>
    <button id="send">Send</button>
    1. (Optional) Change the rows="4" and cols="50" to change the size of the text box. You can also replace the placeholder text and the send button text.
  5. Before the closing </body> tag, paste in this Javascript code.
    1. You will need to edit this code in a bit.
  6. Return to your Discord server, and click on the Settings gear on the channel you'd like the submissions to go to.
  7. On the left sidebar, select Integrations.
  8. Beside Webhooks, click on Create Webhook
  9. Set a Name for your webhook. This will be the name that appears as the username of the submission.
  10. Select Copy Webhook URL.
  11. Return to the Javascript code you pasted in. Replace the text WEBHOOK_URL_HERE with your webhook URL.

If you want to include multiple fields on your Discord form, you can use the code found in this CodePen.