Form Wiring

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

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

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:

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:

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:

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
• Source: mrhinkle/VibeCoding-a-Website
• License: MIT

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