Contact form with name, email, message, and location fields, with the email field selected.

/

Quality

Form audit skill

Check form fields, labels, destinations, and button states across desktop and phone. Separate launch blockers from improvements, then list what needs a live test.

Copy skill

Copied

Copy skill

Copied

# Form Check Inspect forms on a Framer page before launch. Report problems visible in the project, and separate configured settings from behavior that requires a published-site test. ## Scope - Review every form on the selected or named page unless the user specifies one. - If the page has no forms, report that and stop. Do not create a form. - If no page is selected or named, use the current page. If that cannot be identified, ask which page to review. - Identify each form as native Framer, a code component, or a third-party embed. Mark settings controlled elsewhere as unverified. ## Checks 1. Confirm that each submit button is linked to the intended form and has a clear label. Its position outside the form container is not an issue if the link is correctly configured. 2. Check each field’s input type, submission name, required setting, and visible label. Placeholder text alone is not a visible label. For checkbox and radio groups, check group and option labels. 3. Inspect Send To. Report a missing destination as a launch blocker. Check configured email, Google Sheets, or webhook settings. Check email verification only if its status is visible. A configured destination does not prove delivery. 4. Inspect the button’s available loading, success, error, and incomplete states. Report unclear or misleading feedback, but do not require every optional visual state. Describe states as configured, not tested. 5. Check desktop and phone layouts for clipped fields, unreadable labels, overlapping messages, or an unreachable button. ## Output Start with a one-sentence readiness assessment that names the page path and form. Report findings under two headings: ## Launch blockers Number each blocker separately. Under each number, give: - Issue: What is wrong. - Evidence: The exact setting or content inspected. - Fix: One specific action. ## Improvements Use the same numbered Issue / Evidence / Fix format for changes that would improve the form but do not block launch. Then add: - Passed inspection: A brief summary, without listing every field. - Unverified: Settings or behavior the Agent could not inspect. - Manual test: The steps needed on the published site to verify validation, feedback, and delivery. Do not use a Markdown table. Do not explain why a finding belongs in its category when the evidence already makes that clear. Do not call an improvement a launch blocker unless it prevents submission or creates a serious accessibility problem. ## Rules - Do not infer runtime behavior from a configured state or link. - Do not suggest changing required fields without evidence that the requirement is wrong. - Do not invent a fallback email address or destination. - Do not submit a real entry or change the form unless the user asks. - Do not claim the form works end to end until delivery is confirmed.

How to apply skills to your project
  1. Keep new pages consistent with your project’s typography, colors, spacing, and components.

    Skill copied

    # Design system

    Use this skill when you add pages or sections to a site that already has a look. You extend the system the team built. You don’t invent a new one.

    ## Before you start

    - Open the home page and two pages close to the new one.

    1. Copy the skill

    Use the Copy button above the skill to copy this skill’s instructions to your clipboard.

  2. /skills

    Turn these instructions into

    a reusable skill:

    GPT 6 Sol

    2. Add it in agent chat

    Type /skills in your agent chat and paste the skill, or add it in Settings / Skills.

  3. Use

    /design-system

    to build a new

    Careers page. Include a couple job openings and a form.

    GPT 6 Sol

    3. Use it in chat

    Type the skill’s command, such as /design-system, in your agent to use it.

  4. Title

    design-system

    Description

    Use components, styles, spacing, and layouts to create new

    Content

    Design system

    Use dark color scheme. Reuse existing styles and components; never invent new colors or text styles.


    Pages

    • Apply the Base layout template to every new page.

    • Set a meta title and meta description on every new page.

    • Sections fill the screen width (1fr) and contain an inner wrapper with maxWidth="1200px" that holds the content.


    Colors

    Container backgrounds: Color/Black.

    Text:

    • Primary headings: Color/White

    • Secondary/body text: Color/White 60

    Accent: Color/Red is the only accent. Use it very sparingly (one highlight per section at most).

    Borders and dividers: Color/Border Solid or Color/Border Transparent.

    Typography

    Always use these text styles, never inline type styles:

    • Set Text Balance to Yes for text layers.

    • Use sentence case; do not use all caps.

    • Do not use eyebrow text (small text above a heading).

    • In heroes, use Text/Body L for supporting text.

    • For every paragraph, adjust its text-box width to produce 50–75 characters per line, targeting 65. Round the width up to the nearest 5 or 10 pixels. If that width is wider than the parent container, set the text box to Fill. Verify at every breakpoint before finishing.

    • Text/H0: jumbo headings and hero treatments

    • Text/H1: blog post titles and secondary page titles

    • Text/H2, Text/H3, Text/H4, Text/H5, Text/H6: all other headings, in hierarchy order

    • Text/Body L: sub heads

    • Text/Body: main body text

    • Text/Body M: small supporting text

    • Text/Button: button labels only

    4. Edit your skill

    Open Settings / Skills whenever you want to make changes.

Your next idea starts here

GPT 6 Sol

Create personal portfolio

Build startup site

Launch landing page

Start company blog

Framer UI showing Pages, Layers and Assets panels titles
Framer UI showing Pages, Layers and Assets panels titles