GUIDE: Making a fanlisting on Neocities (with a Discord webhook) - ✁ ∙ Web Crafting

Hi! Typically Fanlisting sites are made by using a php script which sends emails, but Neocities does not allow php. Here I'll show you how to make a functional Fanlisting form using JavaScript and Discord.

1. You can code your website normally with css, layout, pages for rules, members, buttons etc. What I explain only matters to the "Join" page with the join form.

2. Make a new Discord server only for yourself. In the settings of your server, pick "Integrations" and then "Create Webhook". You can change the avatar or name of it, it doesn't really matter. Pick the channel it posts to. Copy the Webhook URL for yourself somewhere because you will need it. Here is a guide with images by Discord on how to make a webhook: https://support.discord.com/hc/en-us/articles/228383668-Intro-to-Webhooks

3. Create a new .js file for your website on Neocities. I'll call it index.js

Insert this code into the file:

Code

// Joining system

document.getElementById('send').onclick = function() {
    var request = new XMLHttpRequest();
    request.open("POST", "***YOUR WEBHOOK URL HERE***");
    request.setRequestHeader('Content-type', 'application/json');

    var myEmbed = {
        author: {
            name: document.getElementById("fanname").value
        },
        title: document.getElementById("fanemail").value,
        site: document.getElementById("fansite").value,
        description: document.getElementById("fancountry").value
    }

    var params = {
        username: "Question" + new Date().getTime(),
        embeds: [myEmbed],
        content: document.getElementById("question").value
    }
    request.send(JSON.stringify(params));
    alert('Thanks for joining! Your submission will be reviewed shortly.')
}

Insert the URL of the Webhook you created at the part of the code which says ***YOUR WEBHOOK URL HERE***. Remove the stars! Then you can save.

4. Go edit the part of your website where you wish to include the join form. With this code, you add the form:

Code

<div class="form">
      <p>* Name:</p>   
     <input type="text" id="fanname" name="fanname"><br>
     <p>Your email:</p>
     <input type="text" id="fanemail" name="fanemail"><br>
     <p>Your website:</p>
     <input type="text" id="fansite" name="fansite"><br>
     <p>* Your country:</p>
     <input type="text" id="fancountry" name="fancountry"><br>
     <p>Comments:</p>
     <textarea id="question"></textarea>
<br><br>
<button id="send"> Submit  </button>
</div>
<script src="index.js"></script>

This adds the form and the submit button, and as you can see, it refers to the index.js file we created. If you named your .js something else, switch index.js to whatever you named your file.

According to the rules of Fanlistings on sites like TheFanlistings and The Anime Fanlistings, a member of a Fanlisting must include their name and country, these are compulsory. The stars in the form in front of Name and Your country are for that reason, to mark them as required fields for the visitors. However, the form doesn't actually prevent someone from submitting if they haven't filled these fields.

5. That's it. Save and you can test your form by submitting something. Your webhook should send you a message with the info you put in the form on the Discord server you created, on the channel you set the webhook to post to.

Vaguely similar topics! (3)