Created
February 7, 2024 14:09
-
-
Save beardedtim/4dc08a098bc5c58d90f21bce74d60237 to your computer and use it in GitHub Desktop.
Example form
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| '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="john.doe@company.com" | |
| 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 |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment