30 Claude Prompts That Build Forms

You are a developer who builds accessible job-application forms with file upload. <context> I need a job application form with a resume upload, built as one self-contained HTML file with inline CSS and vanilla JS, previewable instantly as an artifact. </context> <inputs> - Role and company: [JOB TITLE, COMPANY] - Fields: [NAME, EMAIL, PHONE, LINKEDIN, PORTFOLIO] - Screening questions: [E.G. YEARS OF EXPERIENCE, WORK AUTHORIZATION, START DATE] - Resume format allowed: [PDF, DOC] - Accent color: [DESCRIBE] </inputs> <task> Build a job application form with labeled contact fields, links for LinkedIn and portfolio, a resume file input restricted to the allowed types with the selected filename shown, a cover-letter textarea, and the screening questions I listed as dropdowns or radios. Add a required consent checkbox for data processing. On submit, show a confirmation. Validate required fields, email and phone format, file type, and consent, with inline errors. </task> <constraints> - One self-contained responsive HTML file; Google Fonts only. - File input has an accessible label, shows the chosen filename, and rejects wrong types with a clear message; aria-live errors. - Validate before submit; no backend; neutral, inclusive copy. </constraints> <format> Return the full HTML as an artifact, then explain the file-type validation and how to upload the resume to storage on submit. </format>

You are an agency developer who builds client-onboarding intake forms. <context> I run an agency and need a new-client intake form that captures everything to start a project, built as one self-contained HTML file with inline CSS and vanilla JS, previewable instantly as an artifact. </context> <inputs> - Service I provide: [E.G. BRANDING, WEB, MARKETING] - Company info fields: [COMPANY, WEBSITE, INDUSTRY, SIZE] - Project fields: [GOALS, DELIVERABLES, BUDGET, DEADLINE] - Brand asset questions: [EXISTING LOGO, COLORS, EXAMPLES YOU LIKE] - Accent color: [DESCRIBE] </inputs> <task> Build an intake form grouped into logical sections (contact, company, project scope, brand assets) with labeled fields, a budget-range dropdown, a deadline date input, checkboxes for deliverables, and a textarea for links to reference examples. Add an optional file input for brand assets. On submit, show a confirmation summarizing the brief. Validate required fields, email, website URL format, and deadline not in the past, with inline errors. </task> <constraints> - One self-contained responsive HTML file; Google Fonts only. - Use fieldsets with legends per section; every field labeled; aria-live errors; a visible section structure. - Validate before submit; no backend; professional, clear copy. </constraints> <format> Return the full HTML as an artifact, then explain the section grouping and how to turn the submission into a project brief document. </format>

You are a proptech developer who builds tenant application forms. <context> I need a rental application form for a property listing, built as one self-contained HTML file with inline CSS and vanilla JS, previewable instantly as an artifact. </context> <inputs> - Property address: [ADDRESS] - Applicant fields: [NAME, EMAIL, PHONE, CURRENT ADDRESS] - Financial fields: [EMPLOYER, MONTHLY INCOME, EMPLOYMENT LENGTH] - History fields: [PREVIOUS LANDLORD, MOVE-IN DATE, PETS, OCCUPANTS] - Accent color: [DESCRIBE] </inputs> <task> Build a tenant application form grouped into applicant, employment/income, and rental-history sections with labeled fields, a desired move-in date input, a pets yes/no with a conditional details field, a number-of-occupants input, and a required consent checkbox authorizing a background check. On submit, show a confirmation. Validate required fields, email, phone, income as a positive number, and consent, with inline errors. </task> <constraints> - One self-contained responsive HTML file; Google Fonts only. - Conditional pet-details field reveals accessibly; fieldsets with legends; aria-live errors; every field labeled. - Validate before submit; no backend; clear, compliant-sounding copy about the background-check consent. </constraints> <format> Return the full HTML as an artifact, then explain the conditional fields and how to securely handle the application data. </format>

You are a developer who builds application forms for programs, grants, and accelerators. <context> I run a program and need an application form built as one self-contained HTML file with inline CSS and vanilla JS, previewable instantly as an artifact. </context> <inputs> - Program name and type: [NAME, GRANT / ACCELERATOR / SCHOLARSHIP] - Applicant fields: [NAME, EMAIL, ORGANIZATION, LOCATION] - Eligibility questions: [E.G. STAGE, REVENUE, CATEGORY] - Essay questions with word limits: [PROMPTS AND MAX WORDS] - Accent color: [DESCRIBE] </inputs> <task> Build an application form with labeled applicant fields, eligibility questions as dropdowns or radios, and essay textareas each showing a live word counter against its limit that turns red when exceeded. Add a required certification checkbox that the information is accurate. On submit, show a confirmation with a mock application ID. Validate required fields, email, and that each essay is within its word limit, with inline errors. </task> <constraints> - One self-contained responsive HTML file; Google Fonts only. - Word counters and errors use aria-live; every field labeled; eligibility groups in fieldsets. - Enforce word limits before submit; no backend; clear, fair copy. </constraints> <format> Return the full HTML as an artifact, then explain the word-limit enforcement and how to store applications for review. </format>

You are a developer who builds intake questionnaires for coaches and consultants. <context> I take on coaching or consulting clients and need an intake questionnaire built as one self-contained HTML file with inline CSS and vanilla JS, previewable instantly as an artifact. </context> <inputs> - My practice: [E.G. CAREER COACHING, BUSINESS CONSULTING] - Client fields: [NAME, EMAIL, PHONE, TIMEZONE] - Discovery questions: [GOALS, BIGGEST CHALLENGE, WHAT SUCCESS LOOKS LIKE] - Logistics: [PREFERRED SESSION TIMES, BUDGET, HOW THEY FOUND ME] - Accent color and tone: [DESCRIBE] </inputs> <task> Build an intake questionnaire with labeled contact fields including a timezone dropdown, open-text discovery questions with helpful placeholders, a preferred-session-time multi-select or checkboxes, a budget dropdown, and a "how did you hear about me" field. Add a commitment-level rating. On submit, show a warm confirmation with next steps. Validate required contact fields and email, with inline errors. </task> <constraints> - One self-contained responsive HTML file; Google Fonts only. - Every field labeled; checkbox and rating groups in fieldsets; aria-live errors; warm, encouraging placeholders. - Validate before submit; no backend; conversational, empathetic copy. </constraints> <format> Return the full HTML as an artifact, then explain the discovery questions and how to email the completed intake to yourself before a first call. </format>

You are an e-commerce developer who builds order forms that calculate totals live. <context> I need a product order form that updates a running total as the buyer changes quantities, built as one self-contained HTML file with inline CSS and vanilla JS, previewable instantly as an artifact. </context> <inputs> - Store or product line: [NAME] - Products with prices: [3-6 ITEMS WITH NAME AND PRICE] - Options that change price: [SIZE, ADD-ONS] if any - Shipping and tax rules: [FLAT FEE, TAX RATE] - Accent color: [DESCRIBE] </inputs> <task> Build an order form listing each product with a name, price, and quantity stepper, an optional add-ons or size selector that adjusts price, a live order summary showing line items, subtotal, shipping, tax, and grand total that recalculates on every change, plus labeled customer and shipping-address fields. On submit, show an order confirmation with a mock order number. Validate required fields, email, that at least one item has quantity above zero, and address completeness, with inline errors. </task> <constraints> - One self-contained responsive HTML file; Google Fonts only. - Quantity steppers, selectors, and the live total are keyboard-accessible with aria-live updates; every field labeled. - Calculate totals client-side to two decimals; no backend; validate before submit. </constraints> <format> Return the full HTML as an artifact, then explain the totals calculation and how to hand the order off to a payment processor. </format>

You are a hospitality developer who builds table-reservation forms. <context> I need a restaurant reservation form built as one self-contained HTML file with inline CSS and vanilla JS, previewable instantly as an artifact. </context> <inputs> - Restaurant name: [NAME] - Opening hours and days: [WHEN BOOKINGS ARE ALLOWED] - Party-size range: [MIN AND MAX GUESTS] - Seating options: [INDOOR, OUTDOOR, BAR] - Accent color and mood: [DESCRIBE] </inputs> <task> Build a reservation form with labeled fields for name, email, and phone, a date picker that blocks past dates, a time selector limited to opening hours, a party-size stepper within the allowed range, a seating-preference radio group, and a special-requests textarea. On submit, show a confirmation with the reservation details and a mock confirmation code. Validate required fields, email, phone, a future date, and a valid time slot, with inline errors. </task> <constraints> - One self-contained responsive HTML file; Google Fonts only. - Date and time controls prevent invalid selections; every field labeled; aria-live errors; large tap targets. - Validate before submit; no backend; warm, inviting copy. </constraints> <format> Return the full HTML as an artifact, then explain the date/time constraints and how to check availability against a booking system. </format>

You are a developer who builds appointment-booking forms for service businesses. <context> I need an appointment booking form for my service business, built as one self-contained HTML file with inline CSS and vanilla JS, previewable instantly as an artifact. </context> <inputs> - Business and services: [NAME, SERVICES WITH DURATION AND PRICE] - Available days and hours: [WORKING HOURS] - Staff or resources to pick: [YES / NO, NAMES] - Fields: [NAME, EMAIL, PHONE, NOTES] - Accent color: [DESCRIBE] </inputs> <task> Build a booking form with a service dropdown that shows each service's duration and price, an optional staff selector, a date picker blocking past dates, a time-slot selector generated from the working hours and service duration, labeled customer fields, and a notes textarea. Show a live booking summary (service, date, time, price). On submit, show a confirmation with a mock booking reference. Validate required fields, email, phone, a future date, and a chosen slot, with inline errors. </task> <constraints> - One self-contained responsive HTML file; Google Fonts only. - Time slots are generated in JS from hours and duration; controls keyboard-accessible; aria-live errors and summary. - Validate before submit; no backend; clear, reassuring copy. </constraints> <format> Return the full HTML as an artifact, then explain the slot-generation logic and how to sync bookings with a real calendar. </format>

You are a developer who builds event ticketing order forms. <context> I am selling event tickets and need an order form built as one self-contained HTML file with inline CSS and vanilla JS, previewable instantly as an artifact. </context> <inputs> - Event name and date: [NAME, DATE] - Ticket types with prices: [E.G. GENERAL, VIP, EARLY BIRD] - Max tickets per type or per order: [LIMITS] - Add-ons: [E.G. PARKING, MERCH] if any - Accent color: [DESCRIBE] </inputs> <task> Build a ticket order form listing each ticket type with price and a quantity stepper respecting the max limits, optional add-ons, a live total that recalculates on change, and labeled buyer fields for name and email plus a per-attendee name capture that appears based on ticket quantity. On submit, show an order confirmation with a mock order number and total. Validate required fields, email, at least one ticket selected, quantity limits, and that each attendee name is filled, with inline errors. </task> <constraints> - One self-contained responsive HTML file; Google Fonts only. - Attendee-name fields render dynamically from the ticket count; steppers and total use aria-live; every field labeled. - Enforce limits and validate before submit; no backend. </constraints> <format> Return the full HTML as an artifact, then explain the dynamic attendee fields and how to pass the order to a payment link. </format>

You are a developer who builds product-configurator forms that produce an instant estimate. <context> I sell a configurable product or service and need a configurator form that shows a live price estimate, built as one self-contained HTML file with inline CSS and vanilla JS, previewable instantly as an artifact. </context> <inputs> - What is being configured: [E.G. CUSTOM FURNITURE, PRINT JOB, PACKAGE] - Options and their price impact: [MATERIAL, SIZE, QUANTITY, EXTRAS] - Base price and pricing rules: [HOW PRICE IS CALCULATED] - Contact fields: [NAME, EMAIL, COMPANY] - Accent color: [DESCRIBE] </inputs> <task> Build a configurator form with grouped option controls (dropdowns, radios, quantity, toggles) that update a live estimated-price panel on every change, a breakdown showing how each choice affects the price, and labeled contact fields. On submit, show a confirmation with the configured spec and estimate, noting it is an estimate pending review. Validate required options and contact fields and email format, with inline errors. </task> <constraints> - One self-contained responsive HTML file; Google Fonts only. - Options grouped in fieldsets; live estimate and breakdown use aria-live; every field labeled. - Encapsulate pricing rules in a clear JS function I can edit; no backend; validate before submit. </constraints> <format> Return the full HTML as an artifact, then explain the pricing function and how to route the configured quote to your sales team. </format>

You are a front-end developer who builds multi-step form wizards with progress tracking. <context> I need a multi-step onboarding wizard built as one self-contained HTML file with inline CSS and vanilla JS, previewable instantly as an artifact. It should feel effortless and validate each step before advancing. </context> <inputs> - What I am onboarding for: [E.G. SAAS ACCOUNT, MARKETPLACE SELLER] - The steps and their fields: [STEP 1 FIELDS, STEP 2 FIELDS, ...] - Number of steps: [3-5] - Accent color and vibe: [DESCRIBE] - Finish action: [WHAT HAPPENS AT THE END] </inputs> <task> Build a wizard with a step progress indicator, one visible step at a time, back and next buttons, and a final review step summarizing all answers before submit. Validate the current step's fields before allowing next, preserve answers when moving back, and show a success state at the end. Each step has labeled fields with appropriate types and inline errors. </task> <constraints> - One self-contained responsive HTML file; Google Fonts only. - The progress indicator uses aria-current; focus moves to each new step's heading; errors use aria-live; keyboard-navigable. - Only advance when the step is valid; state held in a JS object; no backend. </constraints> <format> Return the full HTML as an artifact, then explain the step-state pattern and how to submit the collected data at the end. </format>

You are an e-commerce developer who builds multi-step checkout flows. <context> I need a multi-step checkout form (cart, shipping, payment, review) built as one self-contained HTML file with inline CSS and vanilla JS, previewable instantly as an artifact. </context> <inputs> - Store name: [NAME] - Cart items with prices: [ITEMS AND PRICES] - Shipping options: [STANDARD, EXPRESS WITH COSTS] - Tax rate: [PERCENT] - Accent color: [DESCRIBE] </inputs> <task> Build a checkout with four steps and a progress bar: (1) cart with editable quantities and a live subtotal, (2) shipping-address fields plus a shipping-method choice that updates the total, (3) payment fields with formatted card-number, expiry, and CVC inputs, and (4) a review step showing the order summary before placing the order. Validate each step, format and check the card fields (Luhn optional), and show an order-confirmed success state. Use inline errors throughout. </task> <constraints> - One self-contained responsive HTML file; Google Fonts only. - Card inputs auto-format and validate length; totals recalc with aria-live; focus managed between steps; every field labeled. - Validate each step before advancing; no backend and no real payment; demo only. </constraints> <format> Return the full HTML as an artifact, then explain the step validation and how to replace the payment step with Stripe Checkout. </format>

You are a developer who builds multi-step quote wizards for insurance, mortgage, or service estimates. <context> I need a multi-step quote wizard that gathers details across steps and shows an estimate, built as one self-contained HTML file with inline CSS and vanilla JS, previewable instantly as an artifact. </context> <inputs> - What I am quoting: [E.G. AUTO INSURANCE, HOME LOAN, MOVING SERVICE] - Steps and questions: [STEP-BY-STEP INPUTS THAT AFFECT PRICE] - How the estimate is calculated: [PRICING LOGIC] - Contact step fields: [NAME, EMAIL, PHONE] - Accent color: [DESCRIBE] </inputs> <task> Build a wizard with a progress bar and steps that collect the pricing inputs, then a contact step, then a results step that displays an estimated quote computed from the answers with a short breakdown. Validate each step before advancing, allow going back without losing data, and gate the final estimate behind the contact step. Use labeled fields and inline errors throughout. </task> <constraints> - One self-contained responsive HTML file; Google Fonts only. - Progress uses aria-current; focus moves to each step; errors use aria-live; keyboard-navigable. - Isolate the estimate formula in one editable JS function; no backend; validate before advancing. </constraints> <format> Return the full HTML as an artifact, then explain the estimate formula and how to send qualified leads with their quote to your CRM. </format>

You are a developer who builds paginated, multi-step job-application forms. <context> I need a multi-step job application (personal info, experience, screening, review) built as one self-contained HTML file with inline CSS and vanilla JS, previewable instantly as an artifact. </context> <inputs> - Role and company: [JOB TITLE, COMPANY] - Step 1 personal fields: [NAME, EMAIL, PHONE, LOCATION] - Step 2 experience fields: [CURRENT ROLE, YEARS, SKILLS, LINKS] - Step 3 screening questions: [WORK AUTH, START DATE, SALARY EXPECTATION] - Accent color: [DESCRIBE] </inputs> <task> Build a four-step application with a progress indicator: personal info, experience (including a resume file input), screening questions, and a review step that summarizes everything with an edit link back to each step. Validate each step before advancing, keep answers when navigating back, require a consent checkbox at review, and show a submission confirmation. Use labeled fields, correct types, file-type checks, and inline errors. </task> <constraints> - One self-contained responsive HTML file; Google Fonts only. - Progress uses aria-current; focus managed per step; file input shows the filename and rejects wrong types; aria-live errors. - Validate each step before advancing; no backend; inclusive, neutral copy. </constraints> <format> Return the full HTML as an artifact, then explain the per-step validation and how to submit the full application to an ATS. </format>

You are a developer who builds branching multi-step surveys and quizzes. <context> I need a multi-step survey where later questions change based on earlier answers, built as one self-contained HTML file with inline CSS and vanilla JS, previewable instantly as an artifact. </context> <inputs> - Survey topic and goal: [WHAT I AM LEARNING] - The questions and answer options: [LIST WITH TYPES] - Branching rules: [IF ANSWER X, SHOW QUESTIONS Y, SKIP Z] - Result or thank-you logic: [WHAT TO SHOW AT THE END] - Accent color: [DESCRIBE] </inputs> <task> Build a multi-step survey with a progress indicator, one question or small group per step, and conditional branching that skips or reveals steps based on prior answers per my rules. Validate that the current step is answered before advancing, allow going back, and end with a results or thank-you screen driven by the responses. Use accessible radio/checkbox groups and inline errors. </task> <constraints> - One self-contained responsive HTML file; Google Fonts only. - Branching logic lives in a clear JS structure I can edit; progress reflects the actual path; focus and aria-live handled. - Validate before advancing; no backend; concise, neutral question copy. </constraints> <format> Return the full HTML as an artifact, then explain the branching structure and how to record the answer path and results. </format>