Multi-paged Discord Modals System
⚙ How to setup
createcommand.js file to manually create the
/send command if you don't see it in your server yet.
/send command to send the question embed to your specified channel.
Start button is clicked, it triggers a modals.create() API call to send the first form.
When the first form is submitted, the first
modals.submit.interaction Discord endpoint is triggered so that the bot knows what to do next.
The multi-paged chain goes on. You will be able to preview your answers after each submission before the next page comes.
What does this mean? It also mean you can modify your answers if you made a mistake to your answer without having to restart the process all over again!
After submission, it should immediately insert the answers into the database. For simplicity, we're using Google Sheets as database. If you're worried about security issues, you may use other databases like MongoDB and MySQL
Use this template to help you setup Google Sheets database
Once the form is finished, you will be able to preview all the answers one last time before sending it to the admins for review.
🤡 How to add more pages?
functions/events/discord/modals/submitted-third-page.js then change the component label and custom id from
end to the fourth page's custom id and label it
next. Please keep the custom id consistent with the event trigger for the file you're going to create next in step 2.
Duplicate any file from
functions/events/discord/message/button/Send then rename it as send-fourthpage.js. Then, click on the event trigger and rename the custom id to what you've set in step 1.
Repeat the same step for
Now, rename the duplicated file of
submitted-fourth-page.js. Then, modify the edit button's custom id from edit-secondpage to edit-thirdpage. This will allow you to edit the page 3. You can choose to continue the chain or just end it at fourth page as you like it depending on how many questions you may need.
Don't forget to add more colums to your database and modify the
Q fields in code so it doesn't overwrite the existing questions.
🛠 Error Handling!
Q: How to fix invalid form body error?
A: You will most likely need to shorten your label'squestion to below 45 letters because that might just be the case for error.
Q: How to know what error is there?
A: Check the logs located in
🔧 Tools ->
❓ How is this useful for Discord Servers?
This is a super useful feature to add to your bot if you are doing mod applications on a monthly basis. You wont have to use Google Forms anymore.
Everythig can be done within Discord and your custom made bot!
✨ Actual Use Cases
Replacement of Google Forms for Staff Application Form, Mod Application Form, QNAs, quiz and more!
Here's a quick preview of how it works!
📃About the Author