Home Events! Entrance Everyone Wiki Search Login Register

Welcome, Guest. Please login or register. - Thinking of joining the forum??
November 10, 2024 - @984.59 (what is this?)
Forum activity rating: Three Stars Posts: 40/1k.beats ~ Boop! The forum will close in 16.beats! Unread Topics | Unread Replies | My Stuff | Random Topic | Recent Posts    Start New Topic
News: :happy: Open the all windows! Your mind needs storms and air! :happy:

+  MelonLand Forum
|-+  World Wild Web
| |-+  ✁ ∙ Web Crafting
| | |-+  GUIDE: Making a fanlisting on Neocities (with a Discord webhook)


« previous next »
Pages: [1] Print
Author Topic: GUIDE: Making a fanlisting on Neocities (with a Discord webhook)  (Read 1323 times)
Cele
Sr. Member
****

any way the wind blows

⛺︎ My Room

View Profile

First 1000 Members!Joined 2022!
« on: July 25, 2023 @327.19 »

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.
Logged
Salty
Jr. Member ⚓︎
**


Internet Renaissance Woman

⛺︎ My Room
StatusCafe: saltedslug
iMood: saltedslug
PicMix: saltedslug

View Profile WWW

First 1000 Members!G4 Club Member!Joined 2023!
« Reply #1 on: July 25, 2023 @621.05 »

This is a great tutorial; concise and to the point! Thanks for sharing.  :dog:
Logged

mouseboy
Newbie
*


⛺︎ My Room

View Profile WWW

First 1000 Members!Joined 2023!
« Reply #2 on: July 25, 2023 @931.63 »

Thank you for this!! I really love running fanlistings and I use webhooks myself. Hope to see more people in the fanlistings community~! =^_^=
Logged

Bede
Full Member ⚓︎
***


Your friendly neighborhood boygirl!

⛺︎ My Room
SpaceHey: Friend Me!
StatusCafe: azure
Itch.io: My Games

View Profile WWW

First 1000 Members!Joined 2023!
« Reply #3 on: July 25, 2023 @957.94 »

I sent this to my friend and she said that it's great and it seems to be working perfectly except that she doesn't get a message from the webhook when he tries to test it himself. She was wondering if you've ever encountered this problem?

(He also wanted me to say 'sorry for playing a game of telephone with this question', haha)
Logged

CELEBRATE THE REJECTS, EVISCERATE THE PRESETS ⋆。˚

Cele
Sr. Member
****

any way the wind blows

⛺︎ My Room

View Profile

First 1000 Members!Joined 2022!
« Reply #4 on: July 26, 2023 @11.78 »

I sent this to my friend and she said that it's great and it seems to be working perfectly except that she doesn't get a message from the webhook when he tries to test it himself. She was wondering if you've ever encountered this problem?

(He also wanted me to say 'sorry for playing a game of telephone with this question', haha)

No, I have not encountered that, at least that I know of... I could always look at your friend's website to try to spot the problem? If I understood correctly, the problem is that the webhook doesn't send the submitted information on the Discord server?

Also thanks everyone :smile:
Logged
Bede
Full Member ⚓︎
***


Your friendly neighborhood boygirl!

⛺︎ My Room
SpaceHey: Friend Me!
StatusCafe: azure
Itch.io: My Games

View Profile WWW

First 1000 Members!Joined 2023!
« Reply #5 on: July 26, 2023 @15.09 »

Yes, that's right ^.^ I'll PM you
Logged

CELEBRATE THE REJECTS, EVISCERATE THE PRESETS ⋆。˚

bby
Jr. Member ⚓︎
**


take my memories of her with u

⛺︎ My Room
SpaceHey: Friend Me!
StatusCafe: bumblebear
iMood: dahliahawthorne
Matrix: Chat!

View Profile WWW

First 1000 Members!Joined 2023!
« Reply #6 on: July 26, 2023 @133.21 »

This is awesome!~ I've used Discord webhooks in the past on my site for a website form that sad girl online posted, so I'm glad to have more functions for my site's server lol. Very excited to check this out since I love fanlistings but also don't want to migrate to another place just for PHP.  :grin:
Logged

makeup and stickers and ponies and myspace.com melonland.net! :ozwomp:

:sleep::wizard::happy:

:4u: digital pet hoard
:mail: wanna be pen pals?
Pages: [1] Print 
« previous next »
 

Vaguely similar topics! (3)

GUIDE: Melon's Simple X3D World Tutorial

Started by MelooonBoard ♺ ∙ Web Crafting Materials

Replies: 5
Views: 4725
Last post February 17, 2022 @637.75
by demonologi
How to use a forum?! - A guide for those who have forgotten/never knew!

Started by MelooonBoard ⛄︎ ∙ Forum Info & Questions

Replies: 2
Views: 4104
Last post April 22, 2023 @739.62
by Aloe
I am new to making sites and I want some tips to improve.

Started by Icey!Board ☔︎ ∙ I need Help!

Replies: 4
Views: 2150
Last post December 14, 2021 @853.48
by Icey!

Melonking.Net © Always and ever was! SMF 2.0.19 | SMF © 2021, Simple Machines | Terms and Policies Forum Guide | Rules | RSS | WAP2


MelonLand Badges and Other Melon Sites!

MelonLand Project! Visit the MelonLand Forum! Support the Forum
Visit Melonking.Net! Visit the Gif Gallery! Pixel Sea TamaNOTchi