skills.rest
r-senchuk
r-senchukCOMMUNITY
Explore all skills by this author →
GitHub

photo-upload-form-ux

Implements quote request funnels with photo upload guidance for static Next.js sites.

Updated Mar 29, 2026
Search Tags:#next.js#photo upload#tally#typeform#conversion funnel#quote form#static export
One-click install
npx skills add https://github.com/r-senchuk/agentskills --skill photo-upload-form-ux-r-senchuk
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: photo-upload-form-ux
Source: https://github.com/r-senchuk/agentskills/tree/main/.agents/skills/photo-upload-form-ux
Command: npx skills add https://github.com/r-senchuk/agentskills --skill photo-upload-form-ux-r-senchuk

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve? Building a high-converting quote request funnel on a static Next.js export is tricky because there is no backend to process forms or file uploads, and mobile users often abandon long forms before submitting photos of their renovation project. ## Core Features & Use Cases - Quote Page Structure: Provides a complete /quote page layout with stripped navigation, trust badges, photo guidance, embedded form, WhatsApp fallback, and FAQ sections. - Third-Party Form Embeds: Includes ready-to-use embed patterns for Tally and Typeform with dynamic height configuration, avoiding any backend code. - Photo Upload Guidance: Ships a PhotoUploadGuide component and optimal question ordering that places the photo upload step before contact info to maximize completions. - Use Case: A home renovation business needs a mobile-first quote funnel where customers upload 2-3 photos from their phone, with Italian/English i18n and a thank-you page redirect after submission. ## Quick Start Build the /quote page for my static Next.js site with a Tally form embed, photo upload guidance, WhatsApp fallback, and Italian translations.

Frequently Asked Questions about photo-upload-form-ux

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I embed a Typeform or Tally form in a Next.js static export site?▼

Use an iframe embed for Tally with the dynamicHeight parameter, or load the Typeform embed script in a client component via useEffect. Both approaches work on static exports because all form handling is delegated to the third-party service.

How should I order questions in a quote request form with photo upload?▼

Start with low-effort questions like service type and room selection, then place the photo upload step, followed by optional description, and put contact info last. Asking for photos before contact details acts as a commitment device and reduces phone-number anxiety.

Can I use a native HTML form with file upload on a static Next.js export?▼

No, static exports have no backend or API routes to process submissions. You must delegate form handling to a third-party tool like Typeform, Tally, or Fillout and embed their hosted form instead.

Should the quote page be indexed by search engines?▼

No, the quote funnel page should use robots: 'noindex' in generateMetadata. It is a conversion destination for ad and profile traffic, not a page meant to rank in search results.

What is a WhatsApp fallback CTA and when should I add one?▼

A WhatsApp fallback is a wa.me link offered below the form for users who abandon it. Add it when your audience commonly communicates via WhatsApp, using target="_blank" with rel="noopener noreferrer" for security.

Related Skills

Explore More Software Engineering Skills→
OpenClaudiaOpenClaudia
674

i18n

Implements next-intl internationalization with locale routing, hreflang sitemaps, and bulk translation for Next.js projects.

Official
Advanced
redbananastudiosredbananastudios

local-business-conversion

Wire form submissions, sticky CTAs, and attribution reporting for UK local business websites.

Community
Advanced
musher-devmusher-dev

auditing-trust-engineering

Audit trust signals and design privacy-first consent UX for marketing pages.

Official
Advanced
IDEA-on-ActionIDEA-on-Action

Minu Portal Skill

Generate static landing pages for Next.js 15 App Router sites with SEO metadata.

Official
Intermediate