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;