Dưới đây là đoạn code hướng dẫn tạo form contact : 

File src\components\ui\ContactForm.tsx

'use client'

import { Input } from '@headlessui/react';

import { Textarea } from 'flowbite-react';

import { useState } from 'react';

 

const ContactForm = () => {

    const [formData, setFormData] = useState({ name: '', email: '', message: '' });

    const [isSending, setIsSending] = useState(false);

 

    const handleChange = (e: any) => {

        setFormData({ ...formData, [e.target.name]: e.target.value });

    };

 

    const handleSubmit = async (e: any) => {

        e.preventDefault();

        setIsSending(true);

 

        // await new Promise((resolve) => setTimeout(resolve, 2000)); // Giả lập gửi dữ liệu

        try {

            const response = await fetch('/api/contact', {

                method: 'POST',

                headers: { 'Content-Type': 'application/json' },

                body: JSON.stringify(formData),

            })

            const result = await response.json();

            console.log(response);

            if (result.status === 1) {

 

                setFormData({ name: '', email: '', message: '' });

            } else {

                alert('Đã xảy ra lỗi. Vui lòng thử lại. 1111');

            }

        } catch (e: any) {

            console.error(e);

            alert('sảy ra lỗi ' + e.message);

        };

        setIsSending(false);

 

        // setFormData({ name: '', email: '', message: '' });

    };

 

    return (

        <form onSubmit={handleSubmit} className="max-w-md mx-auto p-4 border rounded-lg shadow-md">

            <div className="mb-4">

                <label className="block text-gray-700">Name</label>

                <Input

                    type="text"

                    name="name"

                    value={formData.name}

                    onChange={handleChange}

                    className="w-full px-3 py-2 border rounded-lg"

                    required

                />

            </div>

            <div className="mb-4">

                <label className="block text-gray-700">Email</label>

                <Input

                    type="email"

                    name="email"

                    value={formData.email}

                    onChange={handleChange}

                    className="w-full px-3 py-2 border rounded-lg"

                    required

                />

            </div>

            <div className="mb-4">

                <label className="block text-gray-700">Message</label>

                <Textarea

                    name="message"

                    value={formData.message}

                    onChange={handleChange}

                    className="w-full px-3 py-2 border rounded-lg"

                    required

                ></Textarea>

            </div>

            <button

                type="submit"

                className={`w-full px-3 py-2 text-white rounded-lg ${isSending ? 'bg-gray-500 cursor-not-allowed' : 'bg-blue-500 hover:bg-blue-600'}`}

                disabled={isSending}

            >

                {isSending ? 'Sending...' : 'Send'}

            </button>

        </form>

    );

};

 

export default ContactForm;

File server :src\app\api\contact\route.tsx

import { NextRequest, NextResponse } from "next/server";

export async function POST(request: NextRequest) {
    try {
        const formjson = await request.json();
        // Sử dụng await để chờ dữ liệu JSON từ request body
        console.log(formjson.name);
        // Thực hiện các hành động với dữ liệu nhận được, ví dụ: gửi email, lưu vào database, v.v.
        return NextResponse.json({ status: 1 });
    } catch (error) {
        console.error('Error processing request:', error);
        return NextResponse.json({ status: 0, error: 'Failed to process request' }, { status: 500 });
    }
}

Ở đây file server mình sẽ xử lý các thông tin ví dụ như lưu thông tin vào database