Add Contact Form Without Backend And Send Email | HTML, React JS, Next Js In 2 mins

so this is the message we have sent just now so if I open this one you can see this is the time we have the email we have the subject and this is the message we have provided and here we have got the message you can see that the name email ID and the message you can take as many data as you want so many of you have asked that how we can add contact form in our portfolio website without the backend and that's what I'm going to show you so this is the simple portfolio website I have built I hope you guys like this design if you guys want I will make a dedicated video on this where I will show you that why I have built this and for whom we have built this portfolio website is part of that live class so I'll make a video on this if you guys want me to cover that so do let me know in the comment section so now I want to talk about that how you can send email from your website from your portfolio website so this is a simple one page application I have created I have this name I have this email and I have this message and we have a submit button so if anybody can give their name so you can see I have already tested this so I have the name I have the email I have the message you can type whatever you want you can see I type you can type anything you want enable click on the sub so the moment I will click on the submit and here we have successfully send the message and the best part about this service which we are utilizing to send the email that you can use this service in any framework like you can use in react you can use it in next year's type script or any other framework you will find and you will get all the configuration it's very easy to utilize it so you can see right now we are redirecting to the this this thank you page but when you will use react when you will use next year's you will have an opportunity you will have an option where you can display thank you message so when someone will try to contact you with this contact form you will get an emails and that you will have all the details which he has provided into this contact form so I'll come back to my dashboard so this is the dashboard where I will find all the information about the user who tried to contact me so you can see I have these two forms this one is live and this one is for testing purpose so this is the message we have sent just now so if I open this one you can see this is the time we have the email we have the subject and this is the main message we have provided TTT and if you come back to the email in your Gmail account because when you create your account you have to connect your you have to provide an email ID in which you're going to receive the notification and the emails and all of this data and here we have got the message you can see that the name email ID and the message you can take as many data as you want so let me talk about the service we are using for having this functionality into our into our website forms free I hope I'm pronouncing this correctly it's very easy you can come and you can read more about it you can use their pro version and that you can easily able to attach the email marketing okay you can attach your Discord server so you can come and you can simply read they have bunch of options for you to utilize so make sure to come here and click on this get started it will ask you to create your account so once you will click on that it will ask you to create your account make sure to create your account I already have my account and once you create your account you have to verify your email ID and that you will have when you will verify your email ID you will have more options so make sure to Simply login your account so once you log into your account you will have a similar dashboard right now you can see I have these two forms but in your case you won't have anything so you will have these two options click on this contact form okay in forms so I have already created this form so that's why it's reflecting there but in your case when you will come for the very first time you will have this form button or you may have this button as well depending when you are watching if they update this UI you will find the options here and there so make sure to find it from there so click on this plus icon it will open up this pop-up and you can select whether you want to new project a new form so click on this new form because swim time what happened that we have multiple forms on our website some forms will create for inquiry purpose some form will create for the payment purpose some firm will create for taking the files okay so that's why so you can see this is the name you have to give your form you guys can select your project so this is the project I am working on so you can select whatever project you want and this is the email so right now I have provided this email ID in which I'm going to receive all the email messages so make sure to click and it will create the form so once you will click on this create form it will create the form from you and you will have a simple interface like that right now we have done a lot of transaction a lot of messages I have sended so that's all we'll find it here you can simply close it open it okay so that's how it's going to look so let's come back to the this is the submission part now let's come back to the integration and through the Integrations here you can know everything about this form speed okay so this is the URL which is very important for your form because you have to use this URL to make a post request and the data will reflect in your dashboard or you will get email back so okay so here they have explained here they have explained everything and if you come here here they have provided this code snippet so we can simply copy and paste and you can utilize it if you're using HTML this is for ajx and this is for react and this one is the best part because I have used in most of my react project because in that I can display the custom matches I'm not able to redirect to the user into the thank you page I can display the message once they submit the form like successfully so you can see it's a very simple code we have this variables keep one thing in mind that you whatever variables they have defined the name is must when you define input you can define an ID you can Define type so whatever they have mentioned make sure to go exactly like that and they also have a validator so once you install the npm packages it comes with two things so you will have this form use form you will have validator error so this will trigger whenever someone will try to put the wrong email ID okay so it will automatically validate your email so simply copy this piece of code and add into your into your application and you will have the functionality so that's for react this is for HTML with file upload so if you really want to take files from the user you can do that okay which I have explained into this application I'll make a video on this if you guys really want me to make a video do let me know in the comment section and why I have built that the main funder you have to ask that why I built and for whom I exactly build it it's absolutely it's stunning and we have built this for web 3 developers only so here where I was so let's come back to the application and here we have this form button so tons of things you will have you can click on this library and you will have bunch of pre-built components which you can simply copy and add into your applications so that's a very easy process to add contact form into your applications and I must come tell you to come and check at initial stage you don't need to spend money you don't need to make things complicated okay it's a very simple easy process to add this kind of contact form so hope you guys have learned something new today currently I've started live classes and we have a couple of student in that so very soon I'm going to launch the live classes so you guys can join that as well okay so hope you guys have liked it and if you guys really want me to make a video on this about this portfolio website and how you can optimize your portfolio website so you can get more opportunity for work and for the business so that's the only thing I want to talk about in this video hope you guys have liked it if you still have any confusion and download let me know in the comment section and if you're new to my channel hit like And subscribe

Channel: Daulat Hussain

Views: 9,132

Keywords: add contact form, contact us form html, contact form react firebase, contact form react nodemailer, contact form send email javascript, contact form send email, contact form send email wordpress, how to add contact form in html website, how to add contact details in html, how to add contact number in html, react js contact form, react js website admin, react js website login, send email contact form html, send email contact form php, website contact form send email, Send Email

Id: jA5AiGMy_9g

Length: 7min 13sec (433 seconds)

Published: Sun Apr 30 2023