In the contact form section there is some resources need.

Resources	Description	Find
FloatingTextarea	Input field component	/src/app/components/FloatingInput.jsx
PhoneInput	Input phone component	https://npmjs.com/package/react-phone-number-input (opens in a new tab)
Node Mailer	Send email messages	https://npmjs.com/package/nodemailer (opens in a new tab)
Handlebars	Logicless templating languages	https://npmjs.com/package/handlebars (opens in a new tab)
Smtp Transport	SMTP client and communicates	https://npmjs.com/package/nodemailer-smtp-transport (opens in a new tab)
Nextjs api	Mail api	/src/app/api/mail/route.js
.env.local	Environment variables	/.env.local

Setup

Step 1

For creating own template, follow this steps. If you are using the default theme, type npm i .It'll install all the recommended packages, and edit the .env.local file accordingly.

But if you are make it with your own then Install recommended libraries.

npm install react-phone-number-input nodemailer handlebars nodemailer-smtp-transport

Example: Location - /src/app/contact/page.js // here is demo for contact-us form.

This is (/src/app/api/mail/route.js) mail configuration file which can be used to create a contact form that is capable of delivering mail.

Mail Config.

Here, highlighted lines [1-9] are mail configurations, fill the variables accordingly your mail-server config.

.env.local

HOST=name.example.com
MAIL_PORT=465

[email protected]
PASS=passowrd

[email protected]

SUBJECT=Contact Form Submission

[email protected]
NEXT_PUBLIC_TWITTER_ID=https://twitter.com/example
NEXT_PUBLIC_INSTA_ID=https://www.instagram.com/example

Step 2

Api Routes

Location - src/app/api/mail/route.js

STATE	ACCEPT
Endpoint	/api/mail
Request-type	POST
Content-Type	application/json
body	`{ fullName, email, phone, projectDetails, emailTemplate }`

There is already a sample email-template.html file in /Garuda/email. You can refer this file and make your own email template from that.

Step 3

We've Contact us page /src/app/contact/page.jsx. in which we have made the contact form with error handling and form validations. you can refer it and change it according to your need.

Tabsnav Credits