# Contact Form on Dashboard

**Issue:** [#118](https://github.com/aimclear/amsoil-dlp/issues/118)
**Date:** 2025-12-12

## Summary

Add a ClickUp contact form to the dealer dashboard, allowing dealers to submit questions and requests directly to the team.

## Design Decisions

| Aspect         | Decision                                                                                    |
| -------------- | ------------------------------------------------------------------------------------------- |
| Placement      | Separate section below the main dashboard card                                              |
| Visual style   | Same as dashboard card (dark bg #182033, rounded corners, dashed inner border)              |
| Title          | "Contact Us"                                                                                |
| Description    | Brief context: "Have a question or need help? Send us a message and we'll get back to you." |
| Script loading | Next.js `Script` component with `strategy="lazyOnload"`                                     |
| Responsive     | Inherits existing dashboard breakpoints, no additional CSS needed                           |

## Implementation

### Files to Modify

1. **`app/dashboard/page.tsx`** - Add contact form section after dashboard card
2. **`app/dashboard/dashboard.module.css`** - Add contact card styles

### Component Structure

```tsx
<section className={styles.section}>
  <div className={styles.contactCard}>
    <div className={styles.contactInnerCard}>
      <h2 className={styles.sectionTitle}>Contact Us</h2>
      <p className={styles.contactDescription}>
        Have a question or need help? Send us a message and we'll get back to you.
      </p>
      <div className={styles.contactForm}>
        <iframe
          className="clickup-embed clickup-dynamic-height"
          src="https://forms.clickup.com/18006137/f/h5g3t-33933/YX9MJRKKCCJ778CL6K"
          width="100%"
          height="100%"
          style={{ background: 'transparent' }}
        />
      </div>
    </div>
  </div>
</section>
<Script
  src="https://app-cdn.clickup.com/assets/js/forms-embed/v1.js"
  strategy="lazyOnload"
/>
```

### New CSS Classes

```css
.contactCard {
  background: #182033;
  border: 1px solid rgba(148, 163, 184, 0.25);
  border-radius: 20px;
  padding: var(--spacing-xl);
  width: 100%;
  max-width: 1200px;
  margin-top: var(--spacing-xl);
}

.contactInnerCard {
  border: 1px dashed rgba(148, 163, 184, 0.4);
  border-radius: 12px;
  padding: 20px;
}

.contactDescription {
  color: var(--color-text-secondary);
  margin-bottom: var(--spacing-lg);
}

.contactForm iframe {
  width: 100%;
  min-height: 500px;
  border: none;
  background: transparent;
}
```

## Notes

- The ClickUp script automatically handles dynamic height adjustment for the iframe
- No new dependencies required
- Form submissions go directly to ClickUp (no backend changes needed)