Example form

from.tsx

'use client'

import { PortableText } from '@portabletext/react'
import { useState } from 'react'

import contactFormAction from '@/actions/contactForm'
import SubmitButton from '@/components/submitButton'

const Contact = ({ title, description }) => {
  const [submitted, setSubmitted] = useState(false)

  return (
    <div id="contact" className="pt-24 pb-24 w-full flex flex-col items-center">
      <h3 className="sm:text-5xl text-3xl mb-4 p-2 max-w-5xl font-bold text-center">
        {title}
      </h3>
      <div className="portableText text-center text-lg max-w-7xl font-extralight">
        <PortableText value={description} />
      </div>
      <form
        action={(data) => {
          setSubmitted(true)
          contactFormAction(data)
        }}
        className="w-full max-w-5xl"
        onKeyDown={() => setSubmitted(false)}
      >
        <div className="mb-6">
          <label
            htmlFor="email"
            className="block mb-2 text-sm font-medium text-black"
          >
            Email address
          </label>
          <input
            type="email"
            id="email"
            name="email"
            className="bg-gray-200 border border-primaryLight text-black text-sm rounded-lg focus:ring-primary focus:border-blue-500 block w-full p-2.5"
            placeholder="[email protected]"
            required
          />
        </div>
        <div className="mb-6 flex justify-between">
          <div className="grow pr-2">
            <label
              htmlFor="name"
              className="block mb-2 text-sm font-medium text-black"
            >
              Your Name
            </label>
            <input
              type="text"
              id="name"
              name="name"
              className="bg-gray-200 border border-primaryLight text-black text-sm rounded-lg focus:ring-primary focus:border-blue-500 block w-full p-2.5"
              placeholder="John Doe"
              required
            />
          </div>
          <div className="grow pl-2">
            <label
              htmlFor="phone"
              className="block mb-2 text-sm font-medium text-black"
            >
              Your Phone <small>Format: 123-456-7890</small>
            </label>
            <input
              type="tel"
              id="phone"
              name="phone"
              pattern="[0-9]{3}-[0-9]{3}-[0-9]{4}"
              className="bg-gray-200 border border-primaryLight text-black text-sm rounded-lg focus:ring-primary focus:border-blue-500 block w-full p-2.5"
              placeholder="931-252-1234"
              required
            />
          </div>
        </div>
        <div className="mb-6">
          <label
            htmlFor="message"
            className="block mb-2 text-sm font-medium text-black"
          >
            Your message
          </label>
          <textarea
            id="message"
            name="message"
            rows={10}
            className="bg-gray-200 border border-primaryLight text-black text-sm rounded-lg focus:ring-primary focus:border-blue-500 block w-full p-2.5"
            placeholder="Write your thoughts here..."
          ></textarea>
        </div>
        <SubmitButton disabled={submitted}>Contact Us</SubmitButton>
      </form>
    </div>
  )
}

export default Contact