React Hooks have completely changed the way we write React apps. Instead of dealing with confusing class components, Hooks let us use state and other features in functional components.
EmailJS is a service that lets us send emails directly from our frontend app without setting up a backend server. It's like having a magic email-sending wand! ✨ With EmailJS, we can send form submissions straight to our inbox hassle-free.
First, if you haven’t already, create a new React project:
npm create-vite@latest formProject
cd formProject
npm install --save @emailjs/browser
This will set up a fresh React project and install the EmailJS library.
Now, let’s create a ContactForm.js component where our form will live.
your_service_id
, your_template_id
, and your_user_id
in the send
function above.We’ll add some CSS to make the form look great on all screen sizes.
ContactForm.css:
Finally, import the form into your App.js and use it:
You now have a fully functional, responsive, and backend-free form in React using EmailJS! You can modify this setup for bookings, sign-ups, and inquiries. So go ahead, build awesome forms, and make the internet a better place! 🌎✨
Connect with a member of Jorvik Web Dev to start a project or find out more info.