How to create a form on Neocities using Discord

Reading time: 1 minute(s)

This tutorial explains how to create a comment box on a static website (like Neocities). It submits directly to a Discord server channel. A free Discord account is required.

  • Create a new (empty) Discord server.
  • Create a channel that you would like submissions to go to.
  • Paste the following HTML on your website (this is the ‘form’):
<textarea rows="4" cols="50" id="question" placeholder="Type your comment here and click 'send'!"></textarea>
<button id="send">Send</button>
  • At the bottom of your page, paste the following Javascript code (this makes the form submit to Discord).
<script>document.getElementById('send').onclick = function() {
			    var request = new XMLHttpRequest();
			    request.open("POST", "WEBHOOK_URL_HERE");
			     request.setRequestHeader('Content-type', 'application/json');
			    var params = {
			      username: "Question"+new Date().getTime(),
			      content: document.getElementById("question").value
			    }
			    request.send(JSON.stringify(params));
			    alert('Question Sent.')
			}
</script>
  • Go back to your Discord server, and click on the Settings gear on the channel you would like submissions to go to.
  • On the left sidebar, click on Integrations.
  • Beside Webhooks, click on Create Webhooks.
  • You can set a name that will appear with submissions, or use the provided one.
  • Click on Copy Webhook URL
  • Return to the Javascript piece you added, but replace the text WEBHOOK_URL_HERE with the URL of your webhook.
  • Voila, you’re done! Save your page and test the form. Now, whenever someone submits something on your form, it will automatically be sent to that channel of the Discord server as if it were a regular message.

2 thoughts on “How to create a form on Neocities using Discord”

  1. Thank you so much! For me I followed the steps and it gives a Question sent alert, but nothing pops up in my channel. And by bottom of page do you mean the end of the body tag?

    Reply

Leave a Comment