@amalsr/bootstrap-contact-form/src/ContactForm.jsx

A Bootstrap-based contact form widget for React, Next.js, and raw HTML via <script>.

import React, { useState } from "react";
import "bootstrap/dist/css/bootstrap.min.css";
import { useFormik } from "formik";
import * as Yup from "yup";

const ContactForm = ({ heading = "Contact Us" }) => {
  const formik = useFormik({
    initialValues: {
      firstName: "",
      lastName: "",
      email: "",
      message: "",
      phone: "",
    },
    validationSchema: Yup.object({
      firstName: Yup.string().required("Please enter first name."),
      lastName: Yup.string().required("Please enter last name."),
      email: Yup.string().email("Invalid email").required("Email is required"),
      message: Yup.string().required("Message is required"),
    }),
    onSubmit: (values) => {
      const event = new CustomEvent("contactFormSubmit", { detail: values });
      window.dispatchEvent(event);
    },
  });

  return (
    <div className="container mt-4">
      <h3>{heading}</h3>
      <form onSubmit={formik.handleSubmit} noValidate>
        <div className="row mb-3">
          <div className="col-md-6">
            <div className="form-group">
              <label className="form-label">
                First Name <span className="text-danger">*</span>
              </label>
              <input
                className={`form-control ${
                  formik.touched.firstName && formik.errors.firstName
                    ? "is-invalid"
                    : ""
                }`}
                name="firstName"
                placeholder="First Name"
                onChange={formik.handleChange}
                onBlur={formik.handleBlur}
                value={formik.values.firstName}
              />
              {formik.touched.firstName && formik.errors.firstName && (
                <div className="text-danger">{formik.errors.firstName}</div>
              )}
            </div>
          </div>
          <div className="col-md-6">
            <div className="form-group">
              <label className="form-label">
                Last Name <span className="text-danger">*</span>
              </label>
              <input
                className={`form-control ${
                  formik.touched.lastName && formik.errors.lastName
                    ? "is-invalid"
                    : ""
                }`}
                name="lastName"
                placeholder="Last Name"
                onChange={formik.handleChange}
                onBlur={formik.handleBlur}
                value={formik.values.lastName}
              />
              {formik.touched.lastName && formik.errors.lastName && (
                <div className="text-danger">{formik.errors.lastName}</div>
              )}
            </div>
          </div>
        </div>
        <div className="row mb-3">
          <div className="col-md-6">
            <div className="form-group">
              <label className="form-label">
                Email <span className="text-danger">*</span>
              </label>
              <input
                className={`form-control ${
                  formik.touched.email && formik.errors.email
                    ? "is-invalid"
                    : ""
                }`}
                name="email"
                placeholder="Email"
                onChange={formik.handleChange}
                onBlur={formik.handleBlur}
                value={formik.values.email}
              />
              {formik.touched.email && formik.errors.email && (
                <div className="text-danger">{formik.errors.email}</div>
              )}
            </div>
          </div>
          <div className="col-md-6">
            <div className="form-group">
              <label className="form-label">
                Phone <span className="text-danger"></span>
              </label>
              <input
                className={`form-control ${
                  formik.touched.phone && formik.errors.phone
                    ? "is-invalid"
                    : ""
                }`}
                name="phone"
                placeholder="Phone"
                onChange={formik.handleChange}
                onBlur={formik.handleBlur}
                value={formik.values.phone}
              />
              {formik.touched.phone && formik.errors.phone && (
                <div className="text-danger">{formik.errors.phone}</div>
              )}
            </div>
          </div>
        </div>
        <div className="row mb-3">
          <div className="col-md-12">
            <div className="form-group">
              <label className="form-label">
                Message <span className="text-danger">*</span>
              </label>
              <textarea
                name="message"
                className={`form-control ${
                  formik.touched.message && formik.errors.message
                    ? "is-invalid"
                    : ""
                }`}
                placeholder="Your Message"
                onChange={formik.handleChange}
                onBlur={formik.handleBlur}
                value={formik.values.message}
              ></textarea>
              {formik.touched.message && formik.errors.message && (
                <div className="invalid-feedback">{formik.errors.message}</div>
              )}
            </div>
          </div>
        </div>
        <button className="btn btn-primary" type="submit">
          Submit
        </button>
      </form>
    </div>
  );
};

export default ContactForm;