Create contact form and send email using Sendgrid

Server

// routes/website.js
const express = require("express");

const router = express.Router();

// controllers
import { contact } from "../controllers/website";

router.post("/contact", contact);

module.exports = router;

// controllers/website.js
export const contact = async (req, res) => {
  try {
    // console.log(req.body);
    const { name, email, message } = req.body;
    // prepare email
    const emailData = {
      from: process.env.EMAIL_FROM,
      to: process.env.EMAIL_TO,
      subject: "Email received from contact form",
      html: `
      <h3>Contact form message</h3>
      <p><u>Name</u></p>
      <p>${name}</p>
      <p><u>Email</u></p>
      <p>Email: ${email}</p>
      <p><u>Message</u></p>
      <p>${message}</p>
      `,
    };
    // send email
    try {
      const data = await sgMail.send(emailData);
      console.log(data);
      res.json({ ok: true });
    } catch (err) {
      console.log(err);
      res.json({ ok: false });
    }
  } catch (err) {
    console.log(err);
    res.sendStatus(400);
  }
};

Client

// components/forms/ContactForm.js
import { useState } from "react";
import { Form, Input, Button } from "antd";
import { UserOutlined, MailOutlined, MessageOutlined } from "@ant-design/icons";
import toast from "react-hot-toast";
import axios from "axios";
import { useRouter } from "next/router";

const Contact = () => {
  // state
  const [loading, setLoading] = useState(false);
  // hooks
  const router = useRouter();
  const [form] = Form.useForm();

  const onFinish = async (values) => {
    console.log("Success:", values);
    try {
      setLoading(true);
      const { data } = await axios.post(`/contact`, values);
      console.log(data);
      if (data.error) {
        toast.error(data.error);
        setLoading(false);
      } else {
        toast.success("Your message has been sent.");
        form.resetFields();
        setLoading(false);
        // empty the form fileds
        // router.push("/");
      }
    } catch (err) {
      toast.error("Form submit failed. Try again.");
      console.log(err);
      setLoading(false);
    }
  };

  return (
    <Form form={form} onFinish={onFinish}>
      <Form.Item
        name="name"
        rules={[
          {
            required: true,
            message: "Please enter your name!",
          },
        ]}
        hasFeedback
      >
        <Input prefix={<UserOutlined />} placeholder="Your name" />
      </Form.Item>

      <Form.Item
        name="email"
        rules={[
          {
            required: true,
            message: "Please input your E-mail!",
          },
        ]}
        hasFeedback
      >
        <Input prefix={<MailOutlined />} placeholder="Your email" />
      </Form.Item>

      <Form.Item
        name="message"
        rules={[
          {
            required: true,
            message: "Please write your message",
          },
        ]}
        hasFeedback
      >
        <Input.TextArea placeholder="Write your message here.." />
      </Form.Item>

      <Form.Item>
        <Button type="primary" htmlType="submit" loading={loading}>
          Submit
        </Button>
      </Form.Item>
    </Form>
  );
};

export default Contact;

// pages/contact
import { Row, Col } from "antd";
import ContactForm from "../components/forms/ContactForm";

const Contact = () => {
  return (
    <Row>
      <Col span={12} offset={6} style={{ paddingTop: "10%" }}>
        <ContactForm />
      </Col>
    </Row>
  );
};

export default Contact;