Creating a contact form with React and Discord.
Today Discord is a tool that allows us to be part of an endless number of communities and provides us with tools that we can take full advantage of.
The WebHook of Discord, allows us to send information to our Discord channels from an external development. In this example, we are going to create a contact form for our website, the form we will do with ReactJS, which will be in charge of sending the contact information to a channel on our Discord server.
1.- CONFIGURING DISCORD “SERVER AND CHANNEL”
I will obviate that we already have an account in Discord, based on this we proceed to create our server and our channel where we will receive the messages sent from our contact form.
NAMING SERVER DISCORD “ACME”
CREATING A PRIVATE TEXT CHANNEL, “CONTACT”
2.- WEBHOOK
It is time to create our Webhook, which will be in charge of receiving and sending the information to our “contact” channel of our future clients.
Within our contact channel in Discord, we click on the edit option.
It will open a screen with the information about our channel.
So far so good, it’s time to create our webhook, for we go to the option of integrations.
We click on create webhook, we will assign it a name, we can put an avatar on it is optional, now we save the changes, later we will return by the URL of our webhook.
3.- CREATING OUR REACT APP
We create a new React project with the name of our website.
“npx create-react-app acme”
Once the creation process is finished, we will execute the following command.
“cd acme”
ready, now let’s start our project with the following command.
“yarn start or npm start”
Up to this point, we have our website project working.
4.- CREATING OUR CONTACT FORM.
We clean our project of the things that we will not need, our project should be left with the following structure and the browser should be shown as the following image.
Now inside the “src” folder of our project, we create a new folder called “pages”
Inside that folder we will create a file called “Contact.js”, this is where we will create our contact form.
Now we will import our page into our app.js file to start seeing the results of our form.
We will see our project in this way.
Cool!; Time to write the code for our form.
Note: The project will use Tailwind and styled-components and the first thing is to install them.
We will install tailwind and styles-component, this for handling our styles, if you still don’t know how to install tailwind, I will leave the reference on how to install it. [install taildwind] (https://tailwindcss.com/docs/guides/create-react-app)
Now our file contact.js should be as follows, here we add the HTML structure and the Description, phone, and contact name fields.
In the same way, we will add the necessary states for the operation of our form, data for validation, and for handling styles.
and our form should look like the following.
Ready! With that we are ready to send our information from the form to Discord, now we will add our End-Point to where we will begin to send the captured data of our future client, for this in our send function we add the following code.
This code is what will allow us to communicate with our Discord channel in addition to making the necessary validations. So far so good, however, we need the essentials for communication with our Webhook and it is the URL of our webhook, if we remember in a previous point we mentioned that We would return through the URL because in effect it is that URL that we need, let’s go through it.
Within our discord client, we click on copy the URL of our webhook as shown in the following image.
we will see a URL like the following:
This route is the one that we must paste into our code, leaving something like this.
well, now let’s test our form.
The first thing we will try is that when we want to send an empty form, we test by clicking on our button, it will show us an error and it will show it as the button’s own label.
Great! Now let’s fill out the form and see if our Discord receives our information.
Excellent!, Discord is receiving our information, it should be clarified that Discord has the necessary documentation for the management of its API, in this link you can see the documentation of its API.
Now our form will thank your client, next step is to contact him and make a business appointment.
Conclusion.
Today we have much more tools to be able to turn our website into a better information manager, Discord helps us a lot, it is just to put a little creativity and that’s it.
Thanks for reading and I hope it helps you and you put it into practice.
