manuarora700 / sendgrid-contact-form

✉️ A working contact form integrated with SendGrid for your Nextjs project. Blog live on freeCodeCamp.

Contact form with SendGrid, Next.js and Tailwindcss

A working contact form for your Next.js application - Integrated with SendGrid's API for sending emails. Read the complete blog at freeCodeCamp

Tech Stack

• 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

Application Flow

• The end-user fills in the mandotary 4 fields and clicks on submit.
• On submit, handleSubmit function gets triggered.
• handleSubmit validates 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/sendgrid where the logic of sending emails live.
• In 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.
• If email is successfully delivered, a 200 response is sent to the client, else a 400 response is sent to the client.
• Responses are handled at frontend and appropriate messages are displayed.

Environment Variables

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.

Live Demo and Source Code

Live Demo Source Code

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.

License

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 :)).

Support

sendgrid-contact-form's Issues

Great Project, but got Banned when Signing up & Activating for SendGrid's Contact Form

Any help would be appreciated in getting my account activated, since apparently Making a Form is not acceptable according to SendGrid:

"Hello,

Thank you for your continued patience.

Twilio SendGrid leverages many different verification techniques to reach a decision. Unfortunately, after careful review, we have determined that our platform is not a good fit at this time and your account will not be activated.

For more information on how we reached this decision, please review the following documents:
Acceptable Use Policy
Email Policy

We appreciate your interest and wish you the best moving forward,"

Also, Seen A lot of people getting banned for the same reason:

(RoR Devs)
My Account Has Been Suspended / Banned

Do you plan to use route handlers that are introduced in Nextjs 13.4 instead of API routes with pages directory?

Security concern about public endpoint

With your solution, everybody can request directly your endpoint and send emails for free.
https://github.com/manuarora700/sendgrid-contact-form/blob/main/pages/api/sendgrid.js