✉️ A working contact form integrated with SendGrid for your Nextjs project. Blog live on freeCodeCamp.
A working contact form for your Next.js application - Integrated with SendGrid's API for sending emails. Read the complete blog at freeCodeCamp
handleSubmit
function gets triggered.handleSubmit
validates the form for input fields and checks if they are not empty.api/sendgrid
where the logic of sending emails live.api/sendgrid
, @sendgrid/mail
modules initializes a send
function, that takes it your application's API keys and send' the email with the required fields.200
response is sent to the client, else a 400
response is sent to the client.Please not that we are using the API keys and the keys are sensitive. Which means that we should always store secret or API keys in environment variables. As we already have .env.local for our local environment, The hosting provider needs to know about the API keys too.
Vercel provides an easy way to store api keys on the hosting panel itself.
To store the API keys securely on your Vercel account.
It took me around an hour to build this application from the ground up - all thanks to Next.js, Tailwindcss and SendGrid for their extremely intuitive workflow and API semantics. Also Tailwind Master Kit for the beautiful Contact Page UI.
This template is completely open source and free to use. Use it for client projects or your own portfolio project. Give me credits at the footer (If you wish, it'll help me a lot :)).