# @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)

```bash
npm install @amalsr/bootstrap-contact-form
```

### Usage

```jsx
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:

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

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

> Optionally import Bootstrap globally:
```tsx
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

```html
<!-- Bootstrap CSS -->
<link
  href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/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/bootstrap-contact-form@1.0.7/dist/index.umd.js"></script>
```

### Add a Container and Render

```html
<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:

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

**Example Payload:**
```json
{
  "firstName": "Amal",
  "lastName": "R",
  "email": "amal@example.com",
  "message": "Hi there!",
  "phone": "9999999999"
}
```

---

## 🛠 Build / Dev

```bash
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