Fabled - Discord Webhook Forms for Static Sites

Discord Webhook Forms for Static Sites

You can find two versions of the form, and all components, on Codepen here. The version I'm sharing here features hardly any CSS styling. This allows you to fill in your own and for your site’s existing theme to apply to the form fields and such. There's another version on Codepen with... significantly more CSS. Anyways...

We all really do need a contact form on our website. True, we could just toss our email address up there, but that’s a bit of a hassle for visitors who might just want to type in a quick question. I prefer to post a contact form for short inquiries, a guestbook/askbox for public questions, and my email for longer inquiries.

There’s a lot of different options for contact forms. A lot of third-party sites offer solutions for this. Initially, on my other site, I used one of those, but it was just ridiculous, had advertisements, and was messy, not easy to customize. I hunted until I discovered how to send messages from my website to a Discord server of my own creation, where I can easily get alerts about them. Naturally, this works amazingly for me and others like me who constantly have Discord running in the background of their devices.

The Discord webhook forms you see below are based on the work of Goblin-Heart, also known as Sadgrl on neocities. You can find her version of the code here. I didn’t find anything on her site about not doing any heavy modifications and resharing it, so I’ve done that. If I’m in error and Goblin-Heart disapproves, she is welcome to contact me and I’ll be respectful of her wishes immediately.

My version features a litmus test (of a rudimentary sort) to ensure both that all portions of the form are filled out, and that the email address that the user types in actually matches the proper format. While this is far from an actual CAPTCHA, it will likely cut down on the possibility of some person or bot just typing gibberish in your form. I understand that CAPTCHAs are extremely useful and a lot of people do worry about shoving a webhook out there like this, but honestly? My other site has had 80K visits (according to neocities itself, though many were probably not genuine visitors) since last November, and hasn’t had any Discord spam. If I learn to set up a CAPTCHA (unlikely), I'll share it!

It also, rather than using an alert popup message, will simply erase the form upon receipt of the message. It then displays a message (customizable) thanking the visitor in place of the form. It also includes an element just below the form which will become visible if the form contents do not match the stipulations mentioned before (ie, all fields and email syntax). This part just hisses at the visitor and lets them know what they ought to do next.

The Discord message itself is also formatted slightly differently, with the date removed (given that timestamps are native to Discord) and the addition of a title to each (“NEW SITE MESSAGE”). There’s some bolding of the text in order to make things more legible within the app, too. You can play with this if you look into Discord’s markdown system a bit.

Creating Discord Webhooks

You don’t need Discord Nitro to make these, and no, don’t ask me what a webhook even is. At least, don’t ask me to explain it in my own words. I assume it’s simply a term for something that connects the app to the web. I don’t particularly care at this juncture. Sorry. If you feel like explaining it to me, feel free, but please don’t be rude - we all start somewhere. I’m learning more day by day.

Either way, Discord webhooks are easy to create. Wondering how to create a webhook? I suggest reading Discord’s tutorial - you don’t have to read much, just how to make one, and snag the URL. That (initially, at least) seems to cover it for getting this to work.

I recommend creating a new server to make the webhook, all your own, just for your site. Perhaps add other collaborators, if there are any, or otherwise, keep it to yourself. All of the messages sent by the web form will appear in the server in a channel you create. You’ll want it private for that reason, unless you want other people (in the server) seeing them.

So, create a channel (presumably just) for the web form (It doesn’t matter what you call it), and create a webhook for that channel. The URL of the webhook can then be copied and inserted into the Javascript snippets that I’ll provide later in this article.

CSS

As noted above, there isn’t CSS for this, really, except for a bit that assures the form itself functions properly and nothing overlaps, no elements crash into each other and explode, etc… you may, of course, customize much further. The below list includes everything specific to the form.

  /* I'm including as little CSS here as possible since this version of the form is meant to be as stripped-down as possible and easily insertable into existing themes.  */

  /* below styles form elements, ie, the buttons and fields */
  textarea,
  input,
  button {
    margin: 0.1rem;
    color: #000;
  }
  
  input::placeholder,
  textarea::placeholder {
    color: #000;
  }
  /* below styles the polite thanks that the visitor receives when the message is sent */
  #sent {
    font-size: 1.6rem;
    display: none;
  }
  
  /* below styles messages asking the visitor to properly fill out all fields */
  #hiss {
    color: #8b0000;
    font-size: 0.9rem;
    display: none;
  }

HTML

The HTML for this is rather simple, but can be customized easily - that's the point of keeping it simple. One important aspect, though? This whole thing uses jQuery, so be sure to include the following like just before the </body> tag on any page where you use this...

  <!-- the #inquiry element containing the questions themselves starts next -->
  <div id="inquiry">
  <input type="text" id="name" placeholder="Give your name or an interesting alias..."><br>
  <input type="email" id="email" placeholder="Enter your email address..."><br>
  <textarea id="question" placeholder="Type your comments or inquiries here..."></textarea><br>
  <button id="send">Send</button>
  <!-- below is a hiss of sorts, displayed if the form is not correctly filled out. if the email is not valid, it will be highlighted in red -->
  <div id="hiss">Psst.... you didn't fill out all fields, dearest!</div>
  </div><!-- the form container (#inquiry) element ends here -->
  <!-- below is a message displayed when the form is sent -->
  <div id="sent">Your message has been sent, darling, and if you were rude, you will regret it!</div>

Javascript

This is, essentially, the same as the previous one. I’m basically copying from the earlier part of this page for that reason, just in case you skipped it. The fields containing the words “darling,” “dearest” etc are all messages to the visitor, which can be changed.

The usual rules about the contents of Javascript HTML apply here, though. Please add a \ just before any quotation marks, double or single, when writing for these fields. You can use this weak little converter I made to (attempt) to do this automatically, as well as removing line breaks.

Be absolutely sure that you replace the line indicated with your Discord webhook URL, or the form will be completely useless.

document.getElementById("send").onclick = function () {
  const nameInput = document.getElementById("name");
  const emailInput = document.getElementById("email");
  const questionInput = document.getElementById("question");

  // THIS NEXT PART REMOVES WHITESPACE BEFORE AND AFTER THE USER'S INPUT, BUT DOESN'T MESS WITH IT OTHERWISE. THIS MAKES IT SO THAT USERS CAN'T JUST LEAVE THEM BLANK AND SPAM YOU.

  const name = nameInput.value.trim();
  const email = emailInput.value.trim();
  const question = questionInput.value.trim();

  // WE'RE GOING TO CHECK TO MAKE SURE THAT THE USER FILLS OUT ALL THE FIELDS. IF NOT, THE FORM WILL HISS AT THEM AND JUST SIT THERE.
  if (!name || !email || !question) {
    $("#hiss").css("display", "inherit");
    return;
  }

  // WE'RE GOING TO NOW MAKE SURE THAT THE USER HAS FILLED IN AT LEAST A VALID-LOOKING EMAIL ADDRESS USING THE NORMAL PATTERN ONE TYPICALLY SEES FOR SUCH. IF NOT, THE FORM HISSES AND GLARES.THIS IS CALLED REGEX HEHEHE REJECTS LIKE ME BUT REGECTS SORTA... FEELING REJECTED

  const emailPattern = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
  if (!emailPattern.test(email)) {
    $("#email").css("border", "2px dashed firebrick");
    $("#invalid").css("display", "inherit");
    return;
  }

  // YOU MUST INSERT YOUR DISCORD WEBHOOK URL BELOW OR THIS ENTIRE FORM WILL BE UTTERLY POINTLESS AND NON-FUNCTIONAL.
  const request = new XMLHttpRequest();
  request.open(
    "POST",
    "YOU MUST INSERT YOUR DISCORD WEBHOOK URL HERE OR ALL IS LOST"
  );
  request.setRequestHeader("Content-type", "application/json");

  // HERE, WE PREP WHAT WE RECEIVE FROM THE USER TO BE SENT TO DISCORD.

  // HERE, THE MESSAGE IS FORMATTED FOR DISCORD. NOTE THE MARKDOWN TAGS FOR DISCORD, WHICH ADD BOLD AND ITALIC TEXT FOR EMPHASIS TO THE TITLE "NEW SITE MESSAGE" AND THE FORM FIELD TITLES. THE USERNAME OF ALL MESSAGES WILL DEFAULT TO "SITE INQUIRY" UNLESS CHANGED BELOW.

  const params = {
    username: "Site Inquiry",
    content:
      "***NEW SITE MESSAGE*** " +
      "\n" +
      "**Name:** " +
      name +
      "\n" +
      "**Email:** " +
      email +
      "\n" +
      "**Question:** " +
      question
  };

  request.send(JSON.stringify(params));

  //
  $("#sent").css("display", "inherit");
  // HERE, THE FORM ITSELF IS HIDDEN FOLLOWING SUBMISSION

  $("#inquiry").hide();
};