# Form Wiring

> A Claude skill from mrhinkle/VibeCoding-a-Website.

- **Type:** Skill
- **Install:** `agentstack add skill-mrhinkle-vibecoding-a-website-form-wiring`
- **Verified:** Yes — security-reviewed for prompt injection and unsafe behavior
- **Seller:** [mrhinkle](https://agentstack.voostack.com/s/mrhinkle)
- **Installs:** 0
- **Category:** [Agent Skills](https://agentstack.voostack.com/c/agent-skills)
- **Latest version:** 0.1.0
- **License:** MIT
- **Upstream author:** [mrhinkle](https://github.com/mrhinkle)
- **Source:** https://github.com/mrhinkle/VibeCoding-a-Website/tree/main/.claude/skills/form-wiring

## Install

```sh
agentstack add skill-mrhinkle-vibecoding-a-website-form-wiring
```

Requires the [AgentStack CLI](https://agentstack.voostack.com/docs/cli). Works with Claude Code, Cursor, and any MCP-compatible agent.

## About

# SKILL 4: Form Wiring

Connect your generated website to Resend for email delivery and Beehiiv for newsletter signup.

## Overview

This skill transforms form placeholders in your site-generator output into fully functional forms that:
- Send contact inquiries via Resend
- Capture newsletter signups in Beehiiv
- Validate input client-side
- Handle errors gracefully
- Show success confirmations
- Protect against spam

## What This Skill Does

### 1. Detects Forms
- Scans generated website files
- Identifies contact forms, newsletter fields, inquiry forms
- Finds Beehiiv embed placeholders

### 2. Creates Serverless Functions
- Generates `api/contact.ts` or `api/contact.js`
- Implements Resend email delivery
- Handles multiple form types (contact, inquiry, etc.)
- Includes error handling and validation

### 3. Enhances Client-Side Forms
- Adds form validation (required, email, phone)
- Implements toast notifications (success/error)
- Adds honeypot field for spam protection
- Wires form submit to serverless function
- Adds loading states to buttons

### 4. Configures Services
- Resend API integration
- Beehiiv embed setup (zero-code iframe)
- Vercel environment variables
- Domain verification for Resend

## Skill Workflow

### Input
1. Website folder (generated by site-generator)
2. User's Resend API key (provided by user)
3. User's Beehiiv publication ID (if using newsletter)

### Processing
1. Scan for form markup in HTML/JSX files
2. Create `api/contact.ts` serverless function
3. Add form submission handler in main JS
4. Inject toast notification UI
5. Generate environment variable setup instructions
6. Create Beehiiv embed code

### Output
1. Updated website with wired forms
2. `api/contact.ts` serverless function
3. Updated form HTML with event listeners
4. `.env.example` file with required variables
5. Setup instructions for Vercel
6. Beehiiv embed code (copy-paste ready)

## Form Types Supported

### Contact Form
**Purpose**: General inquiries from visitors

**Fields**:
- Name (required, text)
- Email (required, email)
- Subject (required, text)
- Message (required, textarea)
- Honeypot field (hidden)

**Delivery**: Via Resend to business owner email

**Response**: Welcome email + internal notification

### Sponsor/Partnership Inquiry
**Purpose**: B2B partnership requests

**Fields**:
- Company Name (required, text)
- Contact Name (required, text)
- Email (required, email)
- Phone (optional, tel)
- Inquiry Type (required, select)
- Budget (optional, text)
- Timeline (optional, select)
- Message (required, textarea)

**Delivery**: Via Resend to partnerships email

**Response**: Thank you email + internal notification

### Newsletter Signup
**Purpose**: Email list growth

**Method**: Beehiiv iframe embed (zero-code)

**What Happens**:
- No form wiring needed
- Pure HTML iframe embed
- Beehiiv handles email capture
- User can build campaigns in Beehiiv dashboard

## Server-Side Function: api/contact.ts

### Structure
```typescript
import { Resend } from 'resend';

const resend = new Resend(process.env.RESEND_API_KEY);

export default async function handler(req, res) {
  if (req.method !== 'POST') {
    return res.status(405).json({ error: 'Method not allowed' });
  }

  try {
    // Validate form data
    // Check honeypot field
    // Send via Resend
    // Return success
  } catch (error) {
    // Return error response
  }
}
```

### Features
- POST-only endpoint
- Input validation (required fields, email format)
- Honeypot spam detection
- Rate limiting ready (configurable)
- Error logging to console
- Success response with message
- Error response with user-friendly message

### Environment Variables
- `RESEND_API_KEY`: Resend secret key
- `RESEND_FROM_EMAIL`: "noreply@yoursite.com"
- `RESEND_TO_EMAIL`: "contact@business.com"

## Client-Side Form Handling

### Form Submission
1. User fills form and clicks submit
2. JavaScript prevents default form behavior
3. Form data is validated client-side
4. Loading state appears on button
5. Form data is sent to `/api/contact` via fetch
6. Response is checked for success/error
7. Toast notification appears
8. Form is cleared (if successful)

### Validation
- **Required fields**: Empty check
- **Email**: Regex pattern match
- **Phone**: Optional, basic format check
- **Honeypot**: Must be empty (hidden field)

### Toast Notifications
**Success Toast**:
```
✓ Message sent! We'll get back to you soon.
```
Appears for 5 seconds, auto-dismisses.

**Error Toast**:
```
✗ Something went wrong. Please try again.
```
Shows specific error message, persistent.

## Beehiiv Newsletter Integration

### Zero-Configuration Setup
1. Create Beehiiv publication (if not already created)
2. Get publication ID from Beehiiv dashboard
3. Skill generates embed code
4. Copy embed code to footer or dedicated section
5. Done! No serverless function needed

### Embed Code Format
```html

```

### Features
- Fully managed by Beehiiv
- Custom styling via Beehiiv dashboard
- Audience tracking and analytics
- Double opt-in available
- GDPR compliant

### Location Options
- Footer section (recommended)
- Dedicated subscribe page
- Homepage sidebar
- Blog post sidebar
- Modal popup (advanced)

## Environment Variable Setup

### .env.example File
```
# Resend Email Service
VITE_RESEND_FROM_EMAIL=noreply@yourdomain.com
VITE_RESEND_TO_EMAIL=contact@yourdomain.com
RESEND_API_KEY=re_xxxxxxxxxxxxx

# Beehiiv Newsletter
VITE_BEEHIIV_PUBLICATION_ID=xxxxxxxxxxxxx
```

### Vercel Configuration
1. Go to Vercel project settings
2. Navigate to Environment Variables
3. Add each variable from .env.example
4. Restart deployment
5. Forms are now live

## Spam Protection

### Honeypot Field
A hidden form field that only bots can see and fill:

```html

```

If this field contains any value, the submission is rejected as spam.

### Rate Limiting (Optional)
Skill includes commented code for rate limiting:
- 5 submissions per IP per hour
- Prevents abuse
- Customizable thresholds

To enable, uncomment rate limiting code in `api/contact.ts`.

## Email Templates

### Confirmation Email to User
```
Hi [Name],

Thanks for reaching out! We've received your message and will get back to you as soon as possible.

Best regards,
[Business Name]
```

### Notification Email to Business
```
New Contact Form Submission

Name: [Name]
Email: [Email]
Subject: [Subject]
Message: [Message]

Reply to: [Email]
```

## Setup Checklist

After site-generator creates your website:

- [ ] User creates Resend account (resend.com)
- [ ] User creates API key in Resend
- [ ] User verifies domain in Resend
- [ ] User provides API key to this skill
- [ ] Skill creates api/contact.ts function
- [ ] Skill updates form HTML and JS
- [ ] User adds .env variables to Vercel
- [ ] User deploys updated site
- [ ] User tests contact form
- [ ] User receives test email
- [ ] (Optional) User creates Beehiiv publication
- [ ] (Optional) User provides Beehiiv pub ID to skill
- [ ] (Optional) User adds newsletter embed to site

## Testing Forms

### Before Deployment
1. Fill out contact form locally
2. Check browser console for errors
3. Verify form validation works
4. Test honeypot field (leave empty)
5. Test error states (if rate limiting enabled)

### After Deployment
1. Fill out contact form on live site
2. Check for success toast notification
3. Verify email arrives in inbox
4. Test from different devices (mobile, desktop)
5. Test from different networks
6. Check spam folder for emails

## Troubleshooting

### Form Doesn't Submit
- Check browser console for errors
- Verify Resend API key is correct in Vercel env vars
- Check that form names match function expectations
- Ensure Resend domain is verified

### Email Not Received
- Check email spam folder
- Verify email address in Resend dashboard
- Check Resend logs in dashboard
- Verify sender domain is authenticated

### Toast Not Showing
- Check that form handling JS is loaded
- Verify toast CSS is present
- Check browser console for errors
- Ensure form submit handler is wired correctly

### Newsletter Embed Not Showing
- Verify Beehiiv publication ID is correct
- Check iframe sandbox permissions
- Ensure Beehiiv publication is active
- Try different embed placement

## Security Considerations

### What's Protected
- API key only stored on Vercel (never exposed to browser)
- Form data validated on both client and server
- Honeypot field prevents automated spam
- Rate limiting prevents abuse (optional)
- HTTPS ensures data encryption

### What User Should Do
- Never commit .env files with real API keys
- Use Vercel's environment variable system
- Enable domain verification in Resend
- Monitor Resend logs for unusual activity
- Regularly rotate API keys

## Advanced Customization

### Custom Form Fields
To add fields beyond the defaults:
1. Add field to HTML form with name attribute
2. Add validation in client JS if needed
3. Add field to form data object
4. Update email template in function
5. Test submission

### Custom Email Template
Modify email content in `api/contact.ts`:
```typescript
await resend.emails.send({
  from: process.env.RESEND_FROM_EMAIL,
  to: process.env.RESEND_TO_EMAIL,
  subject: `New message from ${name}`,
  html: `New submission...` // Edit HTML here
});
```

### Custom Toast Styling
Modify toast CSS in form handling JS:
```javascript
toast.style.backgroundColor = '#your-color';
toast.style.padding = '20px';
// etc.
```

## Next Steps

1. Read the Resend Setup guide in references/
2. Create Resend account and API key
3. Run this skill on your generated website
4. Deploy to Vercel with env variables
5. Test contact form end-to-end
6. (Optional) Add Beehiiv newsletter embed

---

*See references/resend-setup.md for detailed Resend account creation and configuration steps.*

## Source & license

This open-source skill is cataloged on AgentStack and links to its original source — we do not rehost the code.

- **Author:** [mrhinkle](https://github.com/mrhinkle)
- **Source:** [mrhinkle/VibeCoding-a-Website](https://github.com/mrhinkle/VibeCoding-a-Website)
- **License:** MIT

Install and usage instructions live in the source repository linked above.

## Pricing

- **Free** — Free

## Security capabilities

Automated source analysis of v0.1.0 — what this tool can access:

- **Network access:** no
- **Filesystem access:** no
- **Shell / process execution:** no
- **Environment & secrets:** yes
- **Dynamic code execution:** no

*"Yes" means the capability is present in the source — more access means more to trust, not that it is unsafe.*


## Versions

- **0.1.0** — security scan: passed — Imported from the upstream source.

## Links

- Listing page: https://agentstack.voostack.com/l/skill-mrhinkle-vibecoding-a-website-form-wiring
- Seller: https://agentstack.voostack.com/s/mrhinkle
- Browse the marketplace: https://agentstack.voostack.com/browse

---
Listed on AgentStack — the marketplace for AI agent skills and MCP servers. Every listing is security-reviewed. Creators keep 70%.