Non-Developers: Build Custom Survey/Application Forms with AI

Prerequisites Checklist

Before building the survey form, check the following prerequisites. 1. A computer (Windows or Mac both work) 2. Claude Pro subscription ($20/month) - Sign up at claude.ai 3. Node.js installed - Go to nodejs.org and download the "LTS" version - Run the downloaded file and keep clicking "Next" to complete installation - If you do not know what Node.js is: it is a program needed to build the survey form 4. Free GitHub account - Sign up at github.com 5. Free Supabase account - Sign up at supabase.com 6. Visual Studio Code (code editor) - Free download at code.visualstudio.com Cost comparison: - Our approach: Claude Pro $20/month (can cancel after completion) + Supabase free + Vercel free - Typeform: $25-99/month (even the basic plan limits responses to 100) - SurveyMonkey: $25-75/month (basic plan limits to 10 questions) - Google Forms: Free (but no branding or conditional logic) How to verify Node.js installation: - Open a terminal and enter the command below - If you see a number like "v20.x.x," it is successful If you see "command not found": Reinstall Node.js.

node --version

Survey/Form Planning - Question List and Flow Design

Before writing code, first organize "what questions you will ask." You can ask Claude for help from the planning stage. Step 1: Organize the survey purpose and questions In a notepad or notes app, write down the following: - Purpose of the survey (e.g., club membership recruitment) - Information you want to collect (e.g., name, contact info, application field, motivation) - Whether conditional questions are needed (e.g., different questions based on application field) Step 2: Ask Claude to design the survey structure Send the prompt below to Claude. Modify the parts in parentheses to match your situation. Compared to Google Forms, here are the advantages of building your own form: - Apply your logo and colors (branding) - When "Development" is selected, programming language questions appear; when "Design" is selected, design tool questions appear (conditional logic) - File uploads (portfolios, ID photos, etc.) - View response results as charts in real time You will see something like this if successful: Claude organizes the question list, question types (multiple choice, free text, rating, etc.), and conditional logic If you do not like Claude's suggestions: Ask for adjustments like "Add more questions" or "Increase the application fields to 4."

# Prompt to send to Claude (copy/paste and modify parts in parentheses):

"I want to build a survey form for (club/company/school).
Purpose: (membership recruitment / satisfaction survey / event registration, etc.)

Information to collect:
- Basic info: (name, email, phone number, year/grade, etc.)
- Selection info: (application field, area of interest, etc.)
- Free text: (motivation, self-introduction, etc.)

Conditional questions:
- (e.g., if application field is 'Development,' show programming language question)
- (e.g., if application field is 'Design,' show design tools question)

Branding:
- Main color: (e.g., blue, indigo, red)
- Logo: (will add later if available)

Please organize the survey structure.
Also tell me the type (multiple choice/free text/checkbox/rating/file upload) for each question."

Create Next.js Project and Request Survey Form Code from Claude

Now we build the actual survey form. All the code is written by AI! Step 1: Create the project Open a terminal and run the commands below one line at a time. Step 2: Request the complete survey form code from Claude Based on the survey structure you organized in the planning stage, make a request to Claude. Continue in the same conversation and ask something like the prompt below. Step 3: Save the code Claude generates as files Save the code to the file paths Claude specifies. In Visual Studio Code, create new files at the given paths and paste the code. Step 4: Verify the result - Run npm run dev in the terminal - Open http://localhost:3000 in your browser - If you see the survey form, it is a success! You will see something like this if successful: A branded survey form appears in the browser If you see errors: Send the error message directly to Claude. "I got this error. Please fix it: (error message)" If you do not like the design: Ask for changes like "Change the button color to blue" or "Add more spacing between questions."

# 1. Create the project (run each line in the terminal)

# Navigate to Desktop
cd ~/Desktop

# Create Next.js project
npx create-next-app@latest my-survey --typescript --tailwind --app --src-dir

# Navigate to project folder
cd my-survey

# Install chart library (for result visualization)
npm install recharts

# Start development server
npm run dev
# Check at http://localhost:3000 (stop with Ctrl+C)

# ============================================
# 2. Prompt to send to Claude:
# ============================================

# "Based on the survey structure we organized above,
# build a survey form with Next.js + Tailwind CSS.
#
# Requirements:
# 1. Brand color: (your color, e.g., #4F46E5 indigo)
# 2. Conditional questions: show different questions based on application field
# 3. Validation: check required fields, verify email format
# 4. Progress bar: show how many questions have been answered
# 5. Completion screen: show 'Your response has been submitted' message
# 6. Mobile responsive: looks good on smartphones too
#
# Do not connect a database yet.
# First, just finish the UI.
# Give me the complete code and file path for each file."

Store Response Data with Supabase

Once the survey form UI is complete, connect a database to store responses. Supabase is a free database service. It takes just a few clicks to set up. What is Supabase? It is an online storage that securely holds response data. Similar to Google Sheets but more secure and faster. Step 1: Create a Supabase project - Go to supabase.com and log in - Click "New Project" - Project name: my-survey (any name works) - Password: set something complex (just note it down, you will not use it later) - Region: choose the one closest to your location - Click "Create new project" - Wait 2-3 minutes for it to finish Step 2: Create a table (response storage) - Click "SQL Editor" in the left menu - Copy/paste the code below and click the "Run" button Step 3: Copy the API keys - Click "Settings" > "API" in the left menu - Copy the "Project URL" and "anon public" key Step 4: Ask Claude to connect Supabase Send Claude a request like this: "Connect Supabase to my survey form. - Project URL: (the URL you copied) - Anon Key: (the key you copied) - Table name: survey_responses - Save to the database when submitted - Show 'Your response has been saved' on success - Show an error message on failure - Also tell me the Supabase client library install command" You will see something like this if successful: When you submit the survey, response data appears in the Table Editor on the Supabase dashboard If you see "save failed": - Check that the Supabase URL and API key are correct - Confirm the table name is survey_responses - Show the error message to Claude and ask for help

-- Run in Supabase SQL Editor (copy/paste and click "Run")

CREATE TABLE survey_responses (
  id UUID DEFAULT gen_random_uuid() PRIMARY KEY,
  survey_id TEXT NOT NULL DEFAULT 'default',
  answers JSONB NOT NULL,
  submitted_at TIMESTAMPTZ DEFAULT now()
);

-- Allow anyone to save responses
ALTER TABLE survey_responses ENABLE ROW LEVEL SECURITY;

CREATE POLICY "Anyone can save responses"
  ON survey_responses FOR INSERT
  TO anon
  WITH CHECK (true);

-- Running this code will show a "Success" message.
-- If you see an error, show the error message to Claude.

Build a Response Results Dashboard (Chart Visualization)

Once responses start accumulating, you will want to see the results as charts. Ask Claude to build a results dashboard. What is a dashboard? It is a screen that lets you see response results at a glance with graphs and numbers. Similar to the "Responses" tab in Google Forms, but much more visually appealing and customizable. Ask Claude like this: "Build an admin dashboard page where I can view survey results. Content to display: 1. Total responses, today's responses 2. Proportion by application field (pie chart) 3. Distribution by year/grade (bar chart) 4. Daily response trends (line chart) 5. Average rating (average interest level) Additional requirements: - Use the recharts library - Fetch and display data from Supabase - Accessible at the /admin path - Add simple password protection (so others cannot see it)" Security tip: Always add password protection to the results dashboard! Ask Claude "Make it so you have to enter a password to access the dashboard." You will see something like this if successful: - Visiting http://localhost:3000/admin shows a password input screen - After entering the password, charts and statistics are displayed If charts do not show up: - Check that recharts is installed (run npm install recharts in the terminal) - Confirm at least 1 response exists in Supabase - Show the error to Claude and ask for a fix

Deploy on Vercel and Create a Shareable Link

Once the survey form is complete, publish it on the internet so others can access it. Step 1: Upload code to GitHub - Create a new repository on github.com: my-survey - Run the commands below in the terminal Step 2: Deploy on Vercel - Log in to vercel.com with your GitHub account - Click "Add New..." > "Project" - Select the my-survey repository > "Import" - Set environment variables (important!): - Name: NEXT_PUBLIC_SUPABASE_URL / Value: (your Supabase URL) - Name: NEXT_PUBLIC_SUPABASE_ANON_KEY / Value: (your Supabase API key) - Click "Add" for each - Click "Deploy" Step 3: Deployment complete! - A URL in the format https://my-survey-xxxx.vercel.app is generated - Share this link via social media, messaging apps, email, etc.! To make the preview look nice when sharing: Ask Claude "Add OG tags so the title and description show up when sharing the link on social media." Creating a QR code (for posters/flyers): You can create a QR code with your survey URL using liminfo.com's QR Code Generator (qrcode.liminfo.com). You will see something like this if successful: - The survey form works correctly at the deployed URL - Responses are saved to Supabase when submitted If deployment fails: - Check that the environment variables (NEXT_PUBLIC_SUPABASE_URL, NEXT_PUBLIC_SUPABASE_ANON_KEY) are correct - Check the build log for errors and show them to Claude If deployment works but data is not saving: - Verify the Supabase info is entered in Vercel's environment variables - Confirm the table was created on the Supabase dashboard

# 1. Upload code to GitHub (run in the my-survey folder)

cd ~/Desktop/my-survey

git init
git add .
git commit -m "Survey form initial deployment"
git branch -M main
git remote add origin https://github.com/yourusername/my-survey.git
git push -u origin main

# 2. How to update after modifying the survey (repeat this process later)
git add .
git commit -m "Update survey questions"
git push
# Vercel auto-redeploys (takes 1-2 minutes)

Operations/Expansion Tips

The survey form is deployed! Now add features as needed while managing it. Downloading response data to Excel: - Supabase Dashboard > Table Editor > Select the survey_responses table - Click "Export to CSV" in the upper right - You can open the downloaded CSV file in Excel Preventing duplicate responses: Ask Claude "Show an 'You have already responded' message if the same email is submitted twice" Response deadline feature: Ask Claude "Show a 'Responses are closed' message after March 15, 2025" Creating multiple surveys: - You can create multiple surveys with different URLs in the same project - Ask Claude "Add a new survey at the /survey/event path" Mobile optimization check: - Access the deployed URL on a smartphone to verify - If there are issues, ask Claude "This part does not look right on mobile. Please fix it: (describe the issue)" Cost summary: - Claude Pro: $20/month (can cancel after survey is complete) - Supabase: Free (up to 50,000 responses) - Vercel: Free (up to 100GB traffic per month) - Total cost: Effectively free (Claude is used temporarily) If responses exceed 50,000: Upgrade to the Supabase paid plan ($25/month), or download previous responses as CSV and delete them. If you want to create a completely new survey: Repeat the same process from the beginning. Since you already have accounts, it will go much faster.