@amalsr/bootstrap-contact-form

A Bootstrap-based contact form component with validation.
✅ Works in React, Next.js, and plain HTML using UMD build.
📦 Built with Formik, Yup, and Bootstrap 5.

✨ Features

• 📬 Emits a custom event (contactFormSubmit) with form data on submit
• ✅ Validations using Formik + Yup
• 🧱 Built-in Bootstrap 5 styling
• 🔌 Works as:
  • React/Next.js component
  • Widget on any HTML page

📦 Installation (React/Next.js)

npm install @amalsr/bootstrap-contact-form

Usage

import ContactForm from "@amalsr/bootstrap-contact-form";

export default function Page() {
  return <ContactForm heading="Contact Us" />;
}

In Next.js, wrap in a Client Component if using inside /app directory:

"use client";
import ContactForm from "@amalsr/bootstrap-contact-form";

export default function ContactPage() {
  return <ContactForm heading="Reach Us" />;
}

Optionally import Bootstrap globally:

import 'bootstrap/dist/css/bootstrap.min.css';

🌐 Usage in Plain HTML

You can use the contact form directly in a plain HTML page by loading the UMD bundle from the CDN.

Include Scripts

<!-- Bootstrap CSS -->
<link
  href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
  rel="stylesheet"
/>

<!-- React + ReactDOM -->
<script src="https://unpkg.com/react@18/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>

<!-- Contact Form Widget (UMD build) -->
<script src="https://unpkg.com/@amalsr/[email protected]/dist/index.umd.js"></script>

Add a Container and Render

<div id="contact-form-widget"></div>

<script>
  renderContactForm("#contact-form-widget", {
    heading: "Reach Out to Us",
  });

  window.addEventListener("contactFormSubmit", (e) => {
    console.log("Form Submitted:", e.detail);
    alert("Submitted: " + JSON.stringify(e.detail));
  });
</script>

📤 Emitted Data Format

On submit, the form dispatches a browser event:

window.addEventListener("contactFormSubmit", (e) => {
  console.log(e.detail);
});

Example Payload:

{
  "firstName": "Amal",
  "lastName": "R",
  "email": "[email protected]",
  "message": "Hi there!",
  "phone": "9999999999"
}

🛠 Build / Dev

npm install
npm run build

• dist/index.esm.js – for React / Next.js
• dist/index.umd.js – for plain HTML via CDN

🔒 License

MIT © Amal S R