A working contact form for your Next.js application - Integrated with SendGrid's API for sending emails. Read the complete blog at freeCodeCamp
- Next.js for creating a contact form landing page
- Tailwindcss for styling the components
- SendGrid for sending emails using their APIs
- Vercel for hosting our application and CI/CD
- The end-user fills in the mandotary 4 fields and clicks on submit.
- On submit,
handleSubmitfunction gets triggered. handleSubmitvalidates the form for input fields and checks if they are not empty.- If the form fields are not empty, an API call is made to
api/sendgridwhere the logic of sending emails live. - In
api/sendgrid,@sendgrid/mailmodules initializes asendfunction, that takes it your application's API keys and send' the email with the required fields. - If email is successfully delivered, a
200response is sent to the client, else a400response is sent to the client. - Responses are handled at frontend and appropriate messages are displayed.
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.
- Goto your projects page
- Goto settings
- Goto Environment variables
- Add the name of the environment variable, in our case it is SENDGRID_API_KEY and add the corresponding API key in the value field.
- Redeploy your application and your project will work in the production environment.
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 :)).
