> ## Documentation Index
> Fetch the complete documentation index at: https://divyang-chhantbar-fastforms-2.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.

# Quickstart Guide

> Create your first AI-generated form in under 2 minutes

# Get Started with FastForms

This guide will walk you through creating your first AI-generated form, from sign up to collecting responses.

<Steps>
  <Step title="Sign Up or Sign In">
    Navigate to FastForms and sign up using Clerk authentication. You can sign up with:

    * Email and password
    * Google OAuth
    * GitHub OAuth

    <Note>
      All forms you create are tied to your user account. Only you can edit, publish, or delete your forms.
    </Note>
  </Step>

  <Step title="Navigate to Form Generator">
    Once signed in, click **Generate Form** or navigate to `/generate` to access the AI form builder.
  </Step>

  <Step title="Describe Your Form">
    Enter a natural language description of the form you want to create. The AI works best with clear, detailed descriptions.

    <Accordion title="Example Prompts">
      **Contact Form:**

      ```
      Contact form with name, email, and message
      ```

      **Event Registration:**

      ```
      Event registration form with full name, email, phone number, 
      company name, job title, and dietary restrictions dropdown 
      with options: None, Vegetarian, Vegan, Gluten-free
      ```

      **Job Application:**

      ```
      Job application form with applicant name, email, phone, 
      cover letter textarea, years of experience (number), 
      and employment status (select with Full-time, Part-time, Contract options)
      ```

      **Customer Feedback:**

      ```
      Customer feedback survey with name, email, rating (1-5), 
      what did you like (textarea), what could be improved (textarea), 
      and would you recommend us (Yes/No radio buttons)
      ```
    </Accordion>

    <Tip>
      Be specific about field types! Mention "email" for email validation, "textarea" for long text,
      "dropdown" or "select" for options, and "number" for numeric inputs.
    </Tip>
  </Step>

  <Step title="Generate the Form">
    Click **Generate Form** and wait 2-5 seconds while the AI processes your request.

    ```typescript Form Generation Flow theme={null}
    // User submits prompt
    const response = await axios.post('/api/forms/generate', {prompt});

    const {formId, slug, title} = response.data;
    // Redirects to /forms/{formId} for preview
    ```

    The AI uses Groq's LLaMA 3.3 70B model to:

    * Parse your requirements
    * Select appropriate field types
    * Add validation rules
    * Generate unique field IDs
    * Create placeholder text
  </Step>

  <Step title="Preview Your Form">
    You'll be redirected to a preview page showing your generated form.

    <Note>
      The form is in **Preview Mode** - all fields are disabled. This lets you review the structure
      before publishing.
    </Note>

    The preview shows:

    * Form title
    * All generated fields with labels and placeholders
    * Required field indicators (red asterisk)
    * Field types (text input, textarea, select dropdown, radio, checkbox, etc.)

    ```json Example Generated Schema theme={null}
    {
      "title": "Contact Form",
      "fields": [
        {
          "id": "full_name",
          "type": "text",
          "label": "Full Name",
          "required": true,
          "placeholder": "Enter your full name"
        },
        {
          "id": "email_address",
          "type": "email",
          "label": "Email Address",
          "required": true,
          "placeholder": "your@email.com"
        },
        {
          "id": "message",
          "type": "textarea",
          "label": "Message",
          "required": true,
          "placeholder": "Tell us what you need..."
        }
      ]
    }
    ```
  </Step>

  <Step title="Publish Your Form">
    When you're satisfied with the form structure, click **Publish Form** at the bottom.

    ```typescript Publish Action theme={null}
    const response = await axios.patch(`/api/forms/${formId}`);
    // Toggles isPublished to true
    ```

    Once published:

    * A shareable link appears: `https://yourdomain.com/f/{slug}`
    * The form can now accept responses
    * You can copy the link to share via email, social media, or embed on your website

    <Warning>
      Unpublished forms are only visible to you. They cannot accept public responses until published.
    </Warning>
  </Step>

  <Step title="Share Your Form">
    Copy the shareable link and distribute it to your audience:

    * Email the link directly
    * Post on social media
    * Embed in your website
    * Include in newsletters
    * Generate a QR code

    Anyone with the link can submit responses (no login required).
  </Step>

  <Step title="View Responses">
    Navigate to **Dashboard** to see all your forms. Click on any form to view its responses.

    ```typescript Response Dashboard theme={null}
    // GET /api/forms/{formId}/responses
    const response = await axios.get(`/api/forms/${formId}/responses`);

    // Returns array of response objects
    [
      {
        "data": {"full_name": "John Doe", "email": "john@example.com"},
        "createdAt": "2024-03-15T10:30:00Z"
      }
    ]
    ```

    The response page shows:

    * Total number of responses
    * Individual submission data
    * Submission timestamps
    * Export to CSV button
  </Step>
</Steps>

## Complete Example Flow

Here's what happens end-to-end when you create a form:

<CodeGroup>
  ```typescript User Flow theme={null}
  // 1. User describes form
  const prompt = "Contact form with name, email, and message";

  // 2. AI generates schema
  const generateResponse = await axios.post('/api/forms/generate', {prompt});
  // Returns: {formId: "cm3x...", slug: "abc123", title: "Contact Form"}

  // 3. User previews form
  const formPreview = await axios.get(`/api/forms/${formId}`);

  // 4. User publishes form
  const publishResponse = await axios.patch(`/api/forms/${formId}`);
  // Sets isPublished: true

  // 5. Public user submits response
  const submitResponse = await axios.post('/api/forms/submit', {
    formId: formId,
    data: {
      full_name: "Jane Smith",
      email_address: "jane@example.com",
      message: "Hello, I'd like to get in touch!"
    }
  });

  // 6. Form owner views responses
  const responses = await axios.get(`/api/forms/${formId}/responses`);
  ```

  ```json Generated Form Schema theme={null}
  {
    "title": "Contact Form",
    "fields": [
      {
        "id": "full_name",
        "type": "text",
        "label": "Full Name",
        "required": true,
        "placeholder": "Enter your full name"
      },
      {
        "id": "email_address",
        "type": "email",
        "label": "Email Address",
        "required": true,
        "placeholder": "your@email.com"
      },
      {
        "id": "message",
        "type": "textarea",
        "label": "Message",
        "required": true,
        "placeholder": "Tell us what you need..."
      }
    ]
  }
  ```
</CodeGroup>

## Next Steps

<CardGroup cols={2}>
  <Card title="AI Form Generation" icon="wand-magic-sparkles" href="/features/ai-generation">
    Learn how to write effective prompts and use advanced field types
  </Card>

  <Card title="Form Management" icon="folder" href="/features/form-management">
    Publish, unpublish, and delete forms from your dashboard
  </Card>

  <Card title="API Reference" icon="code" href="/api/overview">
    Integrate form generation into your applications
  </Card>

  <Card title="Field Types" icon="list" href="/guides/customization">
    Deep dive into all supported field types and options
  </Card>
</CardGroup>

<Tip>
  **Pro tip**: Keep your form descriptions detailed but concise. The AI works best when you clearly specify field types, options, and requirements upfront.
</Tip>