ContactForm Hooks

There is a form builder here: https://react-hook-form.com/form-builder/

ContactForm.tsx

import React from 'react';
import { useForm } from 'react-hook-form';
import './ContactForm.css';

type ContactFormData = {
  contact: string;
  firstName: string;
  lastName: string;
  companyEmail: string;
  receivePromotions: boolean;
};

const ContactForm = () => {
  const { register, handleSubmit, errors } = useForm<ContactFormData>();

  const onSubmit = (data: ContactFormData) => {
    console.log(data);
  };

  return (
    <div className="contact-form-container">
      <h1>Contact Form</h1>
      <form onSubmit={handleSubmit(onSubmit)}>
        <div className="form-group">
          <label htmlFor="contact">Contact:</label>
          <select name="contact" id="contact" ref={register({ required: true })}>
            <option value="">Select Contact</option>
            <option value="sales">Sales</option>
            <option value="support">Support</option>
            <option value="billing">Billing</option>
          </select>
          {errors.contact && <span className="error-message">Contact is required</span>}
        </div>

        <div className="form-group">
          <label htmlFor="firstName">First Name:</label>
          <input type="text" name="firstName" id="firstName" ref={register({ required: true })} />
          {errors.firstName && <span className="error-message">First Name is required</span>}
        </div>

        <div className="form-group">
          <label htmlFor="lastName">Last Name:</label>
          <input type="text" name="lastName" id="lastName" ref={register({ required: true })} />
          {errors.lastName && <span className="error-message">Last Name is required</span>}
        </div>

        <div className="form-group">
          <label htmlFor="companyEmail">Company Email:</label>
          <input type="email" name="companyEmail" id="companyEmail" ref={register({ required: true })} />
          {errors.companyEmail && <span className="error-message">Company Email is required</span>}
        </div>

        <div className="form-group">
          <label htmlFor="receivePromotions">Receive Promotions:</label>
          <select name="receivePromotions" id="receivePromotions" ref={register}>
            <option value="true">Yes</option>
            <option value="false">No</option>
          </select>
        </div>

        <button type="submit">Submit</button>
      </form>
    </div>
  );
};

export default ContactForm;

ContactForm.module.css

.contact-form-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 20px;
  margin: 20px;
  border: 1px solid #ccc;
  border-radius: 5px;

  h1 {
    margin-bottom: 20px;
  }

  form {
    display: flex;
    flex-direction: column;
    align-items: center;

    .form-group {
      display: flex;
      flex-direction: column;
      margin-bottom: 10px;

      label {
        margin-bottom: 5px;
      }

      input,
      select {
        padding: 5px;
        border-radius: 5px;
        border: 1px solid #ccc;
      }
    }

    .error-message {
      color: red;
      font-size: 12px;
      margin-top: 5px;
   

Longer example

There is a form builder here: https://react-hook-form.com/form-builder/

ContactFormLong.tsx

import React from 'react';
import { useForm } from 'react-hook-form';

export default function App() {
  const { register, handleSubmit, formState: { errors } } = useForm();
  const onSubmit = data => console.log(data);
  console.log(errors);
  
  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <input type="text" placeholder="First name" {...register("First name", {required: true, maxLength: 80})} />
      <input type="text" placeholder="Last name" {...register("Last name", {required: true, maxLength: 100})} />
      <input type="text" placeholder="Email" {...register("Email", {required: true, pattern: /^\S+@\S+$/i})} />
      <select {...register("Promotions?")}>
        <option value="Yes">Yes</option>
        <option value=" No"> No</option>
      </select>
      <input type="tel" placeholder="Mobile number" {...register("Mobile number", {required: true, minLength: 6, maxLength: 12})} />
      <select {...register("Title", { required: true })}>
        <option value="Mr">Mr</option>
        <option value="Mrs">Mrs</option>
        <option value="Miss">Miss</option>
        <option value="Dr">Dr</option>
      </select>

      <input {...register("Developer", { required: true })} type="radio" value="Yes" />
      <input {...register("Developer", { required: true })} type="radio" value="No" />
      <input type="datetime" placeholder="Choose Time" {...register("Choose Time", {})} />

      <input type="submit" />
    </form>
  );
}