> ## Documentation Index
> Fetch the complete documentation index at: https://docs.aipower.org/llms.txt
> Use this file to discover all available pages before exploring further.

# AI Forms

> Create and embed AI-powered forms in WordPress.

## Overview

AI Forms collect visitor input, uploaded files, and uploaded images, insert the submitted values into a prompt, stream the AI response on the page, and can pass results into another AI Form.

Use them for generators, support reply tools, calculators, lead forms, summaries, guided intakes, and multi-form workflows where the visitor provides structured input.

In WordPress admin, go to **AI Puffer > AI Forms**. Use the **Forms** tab to create, search, edit, preview, and publish forms. Use the **Settings** tab for module-wide limits, custom CSS, and frontend model access.

<Card title="Live AI Forms demos" icon="play" href="https://aipower.org/demo-ai-forms/" cta="Open demos" horizontal>
  Open example forms built with AI Puffer.
</Card>

<Columns cols={2}>
  <Card title="Create a Form" icon="clipboard-list" href="#create-a-form" horizontal>
    Build fields, layouts, labels, prompt, and AI settings.
  </Card>

  <Card title="Knowledge Base" icon="database" href="#knowledge-base" horizontal>
    Use vector data as context for form responses.
  </Card>

  <Card title="Web Search" icon="globe" href="#web-search" horizontal>
    Let supported providers search the web during a response.
  </Card>

  <Card title="Connected Apps" icon="plug" href="#connected-apps" horizontal>
    Send form submissions and outputs to external apps.
  </Card>

  <Card title="Workflow" icon="workflow" href="#workflow" horizontal>
    Chain AI Forms together and pass answers between forms.
  </Card>

  <Card title="Manage Forms" icon="list" href="#manage-forms" horizontal>
    Edit, duplicate, delete, and organize saved forms.
  </Card>

  <Card title="Publish" icon="send" href="#publish" horizontal>
    Embed forms with shortcodes or the WordPress block editor.
  </Card>

  <Card title="Settings" icon="gear" href="#settings" horizontal>
    Configure limits, custom CSS, and frontend model access.
  </Card>

  <Card title="Logs" icon="list" href="#logs" horizontal>
    Review form requests and generated responses.
  </Card>
</Columns>

## Create a Form

1. Open **AI Puffer > AI Forms > Forms**.
2. Click **Create New Form**.
3. Enter the form title.
4. In the left **Layouts** accordion, drag a layout into the center designer.
5. In the left **Form Elements** accordion, drag fields into the layout columns.
6. Click a field in the designer to edit it in **Element Settings**.
7. In the right **AI** container, select the model.
8. Write the form prompt in the **AI** container.
9. Click **Validate Prompt** to check field placeholders.
10. Click **Save**.
11. Click **Preview** to test the form from the admin screen.

<Frame>
  <img src="https://mintcdn.com/aipuffer-a96fe641/hPuKBa-rq9w1pz4R/images/screenshots/ai-forms/aiforms.png?fit=max&auto=format&n=hPuKBa-rq9w1pz4R&q=85&s=a0e029006091eb12f56dfb5a0a89b391" alt="AI Forms" width="2588" height="1120" data-path="images/screenshots/ai-forms/aiforms.png" />
</Frame>

You can also click **Generate with AI** and describe the form you want. AI Puffer drafts the title, fields, layout, and prompt. Review the draft before saving.

<Frame>
  <img src="https://mintcdn.com/aipuffer-a96fe641/hPuKBa-rq9w1pz4R/images/screenshots/ai-forms/ai-form-generator-modal.png?fit=max&auto=format&n=hPuKBa-rq9w1pz4R&q=85&s=8cd40f07ce3403ba6f1b24646ddb0646" alt="AI Form generator modal" width="1462" height="966" data-path="images/screenshots/ai-forms/ai-form-generator-modal.png" />
</Frame>

<Info>
  Set up at least one AI provider before creating a form. If the model list is empty, configure and sync a provider in [AI Providers](/ai-providers).
</Info>

### Form Elements

Form elements collect the values used by the prompt.

<Frame>
  <img src="https://mintcdn.com/aipuffer-a96fe641/CT08RILwLy3ifxY4/images/screenshots/ai-forms/ai-form-form-elements.png?fit=max&auto=format&n=CT08RILwLy3ifxY4&q=85&s=40490a969bb61ed533eeeef55a66a164" alt="AI Form elements panel" width="877" height="662" data-path="images/screenshots/ai-forms/ai-form-form-elements.png" />
</Frame>

| Field             | Use it for                                                                          |
| ----------------- | ----------------------------------------------------------------------------------- |
| **Text Input**    | Short text values.                                                                  |
| **Text Area**     | Longer text values.                                                                 |
| **Dropdown**      | One selected option from a list.                                                    |
| **Checkbox**      | One or more selected options.                                                       |
| **Radio Buttons** | One selected option from a visible list.                                            |
| **File Upload**   | TXT or PDF upload. The extracted text is passed into the prompt.                    |
| **Image Upload**  | JPG, PNG, or WEBP upload. The image is sent to a vision-capable model for analysis. |

When you click a field, **Element Settings** replaces the left palette. Edit **Label Text**, **Field Variable Name**, placeholder text, required state, help text, and options.

<Frame>
  <img src="https://mintcdn.com/aipuffer-a96fe641/hPuKBa-rq9w1pz4R/images/screenshots/ai-forms/ai-form-field-settings.png?fit=max&auto=format&n=hPuKBa-rq9w1pz4R&q=85&s=83c30c18c282404c7381aacbe4325287" alt="AI Form field settings" width="1754" height="1460" data-path="images/screenshots/ai-forms/ai-form-field-settings.png" />
</Frame>

<Tip>
  The field variable name is the value you use in the prompt. It can contain letters, numbers, and underscores. It must be unique inside the form.
</Tip>

For **File Upload**, the visitor uploads a TXT or PDF file. AI Puffer extracts the file text during upload and stores that text as the field value.

Add the file field placeholder to the prompt where you want the extracted text to be used.

AI Puffer does not summarize the file before the form runs. If you want a summary, ask for it in the prompt.

<Info>
  File Upload sends extracted text in the prompt. It works with the AI Forms text providers: OpenAI, Google, Anthropic, OpenRouter, Azure, xAI, Ollama, and DeepSeek. It does not use Knowledge Base or vector provider settings.
</Info>

<Warning>
  File Upload is available on Pro plan. It accepts `.txt` and `.pdf` files. Text-based PDFs work best; scanned PDFs may not provide usable text. Large files still count against the selected model's context limit.
</Warning>

For **Image Upload**, the visitor uploads an image and AI Puffer sends it with the form request as image input. Use the prompt to tell the model what to do with the image, such as describe it, extract details, compare it with submitted answers, or generate recommendations from it.

Image Upload works only with providers and models that support image input in AI Forms: OpenAI, Google, Anthropic, OpenRouter, xAI, and Ollama. If the selected model cannot analyze images, the form returns an error instead of silently ignoring the upload.

<Warning>
  Image Upload is available on Pro plan. It accepts JPG, PNG, and WEBP images up to 20 MB. Some providers may apply stricter model or file-type rules, such as xAI image analysis using JPG or PNG.
</Warning>

### Layouts

Layouts control the frontend rows and columns.

<Frame>
  <img src="https://mintcdn.com/aipuffer-a96fe641/hPuKBa-rq9w1pz4R/images/screenshots/ai-forms/ai-form-layouts.png?fit=max&auto=format&n=hPuKBa-rq9w1pz4R&q=85&s=391152f4d2a1e91f4c0709d7ad9bee2d" alt="AI Form layouts panel" width="1754" height="1416" data-path="images/screenshots/ai-forms/ai-form-layouts.png" />
</Frame>

| Layout                | Columns                 |
| --------------------- | ----------------------- |
| **Single Column**     | 1 column                |
| **2 Columns (50/50)** | 2 equal columns         |
| **2 Columns (30/70)** | Narrow left, wide right |
| **2 Columns (70/30)** | Wide left, narrow right |
| **3 Columns**         | 3 equal columns         |

### Multi-Step

Multi-Step shows one layout row at a time. Use it when the form should feel like a guided flow.

In the left **Multi-Step** accordion:

1. Turn on **Enable Multi-Step**.
2. Choose **Display Progress**.
3. Hover a row in the designer.
4. Click the chat bubble icon to configure that row as a step.
5. Add a step title and description if needed.
6. Add a condition if the step should appear only for specific answers.
7. Save the form.

<Frame>
  <img src="https://mintcdn.com/aipuffer-a96fe641/hPuKBa-rq9w1pz4R/images/screenshots/ai-forms/ai-form-multi-step.png?fit=max&auto=format&n=hPuKBa-rq9w1pz4R&q=85&s=8dfe19c3e722d4dc534003dc7cbe923b" alt="AI Form Multi-Step settings" width="1754" height="1432" data-path="images/screenshots/ai-forms/ai-form-multi-step.png" />
</Frame>

<Frame>
  <img src="https://mintcdn.com/aipuffer-a96fe641/hPuKBa-rq9w1pz4R/images/screenshots/ai-forms/ai-form-multi-step2.png?fit=max&auto=format&n=hPuKBa-rq9w1pz4R&q=85&s=b35c726c7f2789755018671a1dff00e7" alt="AI Form Multi-Step settings" width="1300" height="1130" data-path="images/screenshots/ai-forms/ai-form-multi-step2.png" />
</Frame>

| Progress option | What it shows                          |
| --------------- | -------------------------------------- |
| **Full**        | Step title, description, and progress. |
| **Compact**     | Step title and progress.               |
| **Minimal**     | Step title only.                       |
| **None**        | No step header or progress UI.         |

Skipped step inputs are cleared before submission.

Multi-Step can be combined with Workflow. The visitor completes the visible steps in the source form first; after the AI response finishes, the next workflow form appears.

### Workflow

Workflow connects one AI Form to another. Use it when a visitor should complete a source form, review the AI response, and continue with a second form that already contains context from the first result.

Workflow is useful for intake funnels, content pipelines, lead routing, support triage, and any process where one AI output becomes the starting point for another AI task.

<Frame>
  <img src="https://mintcdn.com/aipuffer-a96fe641/LaijOaej389YbLnP/images/screenshots/ai-forms/workflow.png?fit=max&auto=format&n=LaijOaej389YbLnP&q=85&s=1ecc810e39f158469829e1f8a8d78b4d" alt="AI Form workflow settings" width="299" height="669" data-path="images/screenshots/ai-forms/workflow.png" />
</Frame>

In the left **Workflow** accordion:

1. Create and save the target AI Form first.
2. Edit the source AI Form.
3. Turn on **Enable Workflow**.
4. Choose the default **Next AI Form**.
5. Use **Send AI output to** to prefill a target text field with the source form's AI response.
6. Click **Add Mapping** under **Map submitted answers** to pass source answers into target text fields.
7. Click **Add Route** under **Conditional routes** if different answers should open different target forms.
8. Optional: turn on **Auto-submit next form** if the next form should run as soon as mapped values are filled.
9. Save the source form.
10. Test the source form with **Preview** or its shortcode.

Workflow runs after the source form finishes streaming its AI response. The target form appears below the source result. By default, the visitor can review the prefilled values and submit the target form when ready. If **Auto-submit next form** is enabled and the target form has all required values, AI Puffer submits the target form automatically.

| Control                   | Use it for                                                             |
| ------------------------- | ---------------------------------------------------------------------- |
| **Enable Workflow**       | Turns workflow behavior on for the source form.                        |
| **Next AI Form**          | Sets the default target form.                                          |
| **Send AI output to**     | Copies the source AI response into one target field.                   |
| **Map submitted answers** | Copies source field answers into target fields.                        |
| **Conditional routes**    | Opens a different target form when a rule matches.                     |
| **Auto-submit next form** | Runs the target form automatically after workflow mappings are filled. |

Workflow mappings can target **Text Input** and **Text Area** fields in the next form. File Upload and Image Upload fields are not prefilled into the target form.

Conditional routes can check the AI response or a submitted field value. Route operators are **equals**, **contains**, and **not empty**. Routes are checked from top to bottom; the first matching route wins. If no route matches, AI Puffer uses the default **Next AI Form**.

<Info>
  Workflow does not auto-submit the next form unless **Auto-submit next form** is turned on. Use auto-submit only when the target form can run from mapped text values. If required values are missing, or the target form needs a required upload or multi-step interaction, the target form waits for the visitor.
</Info>

#### Examples

<AccordionGroup>
  <Accordion title="Domain idea to blog post">
    Use this workflow when the first form suggests domain names and the second form turns the selected direction into a launch blog post draft.

    Create the target form first:

    1. Create **Blog Post Draft**.
    2. Add a **Text Area** field named `domain_suggestions`.
    3. Add a **Text Area** field named `business_context`.
    4. Add a **Text Input** field named `tone`.
    5. Write a prompt that chooses a strong domain from `{domain_suggestions}` and writes a blog post using `{business_context}` and `{tone}`.
    6. Save the form.

    Then create the source form:

    1. Create **Domain Name Generator**.
    2. Add a **Text Area** field named `idea_description`.
    3. Add a **Dropdown** field named `tone`.
    4. Write a prompt that suggests domain names from `{idea_description}` and `{tone}`.
    5. Open **Workflow**.
    6. Turn on **Enable Workflow**.
    7. Set **Next AI Form** to **Blog Post Draft**.
    8. Set **Send AI output to** to `domain_suggestions`.
    9. Add a mapping from `idea_description` to `business_context`.
    10. Add a mapping from `tone` to `tone`.
    11. Optional: turn on **Auto-submit next form** if you want the blog post draft to start immediately after domain ideas are generated.
    12. Save and test the source form.

    When the visitor submits the source form, the generated domain ideas appear in the target form. The original business description and tone are also prefilled.

    <Frame>
      <img src="https://mintcdn.com/aipuffer-a96fe641/LaijOaej389YbLnP/images/screenshots/ai-forms/workflow2.png?fit=max&auto=format&n=LaijOaej389YbLnP&q=85&s=d2528974429d12bac00336fd30ffb665" alt="AI Form workflow settings" width="301" height="905" data-path="images/screenshots/ai-forms/workflow2.png" />
    </Frame>
  </Accordion>

  <Accordion title="Lead intake router">
    Use this workflow when one intake form should route visitors to different next forms based on their request type.

    Create the target forms first:

    1. Create **Sales Follow-up** with fields named `company_name`, `intake_summary`, and `lead_notes`.
    2. Write a prompt that drafts a sales follow-up from those fields.
    3. Create **Support Reply** with fields named `company_name`, `intake_summary`, and `customer_message`.
    4. Write a prompt that drafts a support reply from those fields.
    5. Save both target forms.

    Then create the source form:

    1. Create **Lead Intake Router**.
    2. Add a **Text Input** field named `company_name`.
    3. Add a **Dropdown** field named `request_type` with values such as `sales`, `support`, and `partnership`.
    4. Add a **Text Area** field named `request_details`.
    5. Write a prompt that summarizes the lead from `{company_name}`, `{request_type}`, and `{request_details}`.
    6. Open **Workflow**.
    7. Turn on **Enable Workflow**.
    8. Set **Next AI Form** to **Sales Follow-up** as the default route.
    9. Add a route where `request_type` **equals** `support`, then set the target to **Support Reply**.
    10. In that route, map AI output to `intake_summary`, `company_name` to `company_name`, and `request_details` to `customer_message`.
    11. Add a route where `request_type` **equals** `sales`, then set the target to **Sales Follow-up**.
    12. In that route, map AI output to `intake_summary`, `company_name` to `company_name`, and `request_details` to `lead_notes`.
    13. Optional: turn on **Auto-submit next form** if each routed target form has everything it needs from the mappings.
    14. Save and test the source form with both request types.

    Sales requests open the sales follow-up form. Support requests open the support reply form. Other request types fall back to the default next form.

    <Frame>
      <img src="https://mintcdn.com/aipuffer-a96fe641/LaijOaej389YbLnP/images/screenshots/ai-forms/wf2.png?fit=max&auto=format&n=LaijOaej389YbLnP&q=85&s=46c5794126ba506370d4eb56592c1c2a" alt="Lead intake workflow routes" width="295" height="587" data-path="images/screenshots/ai-forms/wf2.png" />
    </Frame>

    <Frame>
      <img src="https://mintcdn.com/aipuffer-a96fe641/LaijOaej389YbLnP/images/screenshots/ai-forms/wf3.png?fit=max&auto=format&n=LaijOaej389YbLnP&q=85&s=bf0464e7c1bb82ddf0b1a5f90787c535" alt="Lead intake workflow routes" width="272" height="761" data-path="images/screenshots/ai-forms/wf3.png" />
    </Frame>

    <Frame>
      <img src="https://mintcdn.com/aipuffer-a96fe641/LaijOaej389YbLnP/images/screenshots/ai-forms/wf4.png?fit=max&auto=format&n=LaijOaej389YbLnP&q=85&s=cdd32dfacf8a56248573447f8a3ecd10" alt="Lead intake workflow routes" width="258" height="726" data-path="images/screenshots/ai-forms/wf4.png" />
    </Frame>

    <Frame>
      <img src="https://mintcdn.com/aipuffer-a96fe641/LaijOaej389YbLnP/images/screenshots/ai-forms/wf5.png?fit=max&auto=format&n=LaijOaej389YbLnP&q=85&s=dc4c1d30ae1c6c5ba045787597d9ae74" alt="Lead intake workflow target form" width="259" height="477" data-path="images/screenshots/ai-forms/wf5.png" />
    </Frame>
  </Accordion>
</AccordionGroup>

### Labels

Use the left **Labels** accordion to change frontend button text and field selector labels.

<Frame>
  <img src="https://mintcdn.com/aipuffer-a96fe641/hPuKBa-rq9w1pz4R/images/screenshots/ai-forms/ai-form-labels.png?fit=max&auto=format&n=hPuKBa-rq9w1pz4R&q=85&s=594fe135d11ec78ee3878d3be9b88526" alt="AI Form labels panel" width="1760" height="1590" data-path="images/screenshots/ai-forms/ai-form-labels.png" />
</Frame>

| Label              | Default                                      |
| ------------------ | -------------------------------------------- |
| **Generate**       | Generate                                     |
| **Stop**           | Stop                                         |
| **Download**       | Download                                     |
| **Save**           | Save                                         |
| **Copy**           | Copy                                         |
| **Engine**         | Engine                                       |
| **Model**          | Model                                        |
| **Back**           | Back                                         |
| **Next**           | Next                                         |
| **Step Title**     | Step `{number}`                              |
| **Step Progress**  | Step `{current} of {total}`                  |
| **Validation Msg** | Please complete this step before continuing. |

Multi-step labels are used only when Multi-Step is enabled.

### AI

Each form has its own model selection in the right-side **AI** container.

<Frame>
  <img src="https://mintcdn.com/aipuffer-a96fe641/hPuKBa-rq9w1pz4R/images/screenshots/ai-forms/ai-form-ai-engine-model.png?fit=max&auto=format&n=hPuKBa-rq9w1pz4R&q=85&s=71c83d62ab3d8d633d4413981b19e828" alt="AI Form engine and model settings" width="2582" height="1404" data-path="images/screenshots/ai-forms/ai-form-ai-engine-model.png" />
</Frame>

Click the settings icon beside the model list to open **Model settings**.

<Frame>
  <img src="https://mintcdn.com/aipuffer-a96fe641/hPuKBa-rq9w1pz4R/images/screenshots/ai-forms/ai-form-ai-parameters.png?fit=max&auto=format&n=hPuKBa-rq9w1pz4R&q=85&s=fd96a19df8de62cd3ceda7840cee2278" alt="AI Form parameters popover" width="1888" height="1226" data-path="images/screenshots/ai-forms/ai-form-ai-parameters.png" />
</Frame>

| Setting               | Use it for                                                                          |
| --------------------- | ----------------------------------------------------------------------------------- |
| **Temperature**       | Response variation. Lower values are more predictable.                              |
| **Max Tokens**        | Maximum response size.                                                              |
| **Top P**             | Sampling control. Leave at the default unless you know why you are changing it.     |
| **Frequency Penalty** | Reduces repeated wording.                                                           |
| **Presence Penalty**  | Encourages the model to introduce new wording or topics.                            |
| **Reasoning Effort**  | Reasoning level for supported models. Keep it set to **None** for faster responses. |

### Prompt

AI Forms use field placeholders inside the prompt. Add a field value by wrapping its variable name in braces.

<Frame>
  <img src="https://mintcdn.com/aipuffer-a96fe641/hPuKBa-rq9w1pz4R/images/screenshots/ai-forms/ai-form-prompt.png?fit=max&auto=format&n=hPuKBa-rq9w1pz4R&q=85&s=9c616004c85302bd8ec2acb2e60ddd50" alt="AI Form prompt editor" width="1888" height="1226" data-path="images/screenshots/ai-forms/ai-form-prompt.png" />
</Frame>

Example:

```text theme={null}
Write a customer support reply.

Customer message:
{customer_message}

Tone:
{tone}

Next step:
{next_step}
```

For dropdown and radio fields, AI Puffer inserts the selected option label. For checkbox fields, it inserts selected option labels separated by commas. If a field is empty, the placeholder is replaced with an empty value.

Use the expand icon inside **Prompt** when you want a larger prompt editor.

AI Forms do not keep chat history. Each submission uses the current form values and the saved form configuration.

### Knowledge Base

Knowledge base lets a form use trained content from **AI Puffer > Knowledge Base > Data** before generating the response.

Use the right-side **Context** container to enable Knowledge Base and configure its retrieval options.

1. Turn on **Knowledge Base**.
2. Click the settings icon beside **Knowledge Base**.
3. Select **Vector provider**.
4. Choose the vector store, index, or collection.
5. For Pinecone, Qdrant, or Chroma, select the same **Embedding** model used when the content was indexed.
6. Set **Limit** and **Score threshold**.
7. Save the form.

<Frame>
  <img src="https://mintcdn.com/aipuffer-a96fe641/hPuKBa-rq9w1pz4R/images/screenshots/ai-forms/ai-form-context-settings.png?fit=max&auto=format&n=hPuKBa-rq9w1pz4R&q=85&s=4a53a27cc67acb473982633b0560d1f7" alt="AI Form context settings" width="1848" height="1366" data-path="images/screenshots/ai-forms/ai-form-context-settings.png" />
</Frame>

| Vector provider | Required setup                                                                                                             |
| --------------- | -------------------------------------------------------------------------------------------------------------------------- |
| **OpenAI**      | Select up to two **Vector stores**.                                                                                        |
| **Pinecone**    | Select **Index** and **Embedding**. Configure the Pinecone connection in **AI Puffer > Settings > Integrations** first.    |
| **Qdrant**      | Select **Collection** and **Embedding**. Configure the Qdrant connection in **AI Puffer > Settings > Integrations** first. |
| **Chroma**      | Select **Collection** and **Embedding**. Configure the Chroma connection in **AI Puffer > Settings > Integrations** first. |

For Chroma, configure the connection and collection in **AI Puffer > Settings > Integrations** and **AI Puffer > Knowledge Base > Stores** first.

<Frame>
  <img src="https://mintcdn.com/aipuffer-a96fe641/suUEnTBeR7lWAmix/images/screenshots/knowledgebase/chroma-api-key.png?fit=max&auto=format&n=suUEnTBeR7lWAmix&q=85&s=a5c3beeeeb3ae21a84bcce951a93fefc" alt="Chroma API key" width="2600" height="1338" data-path="images/screenshots/knowledgebase/chroma-api-key.png" />
</Frame>

<Frame>
  <img src="https://mintcdn.com/aipuffer-a96fe641/suUEnTBeR7lWAmix/images/screenshots/knowledgebase/chroma-create-collection1.png?fit=max&auto=format&n=suUEnTBeR7lWAmix&q=85&s=cb08b0bf72af8e1d9295e237f591bd0a" alt="Chroma Create collection" width="2600" height="1394" data-path="images/screenshots/knowledgebase/chroma-create-collection1.png" />
</Frame>

<Warning>
  For Pinecone, Qdrant, and Chroma, the <Tooltip headline="Embedding model" tip="A model that converts text into vectors so vector databases can search by meaning.">embedding model</Tooltip> must match the model used when the content was added to the index or collection.
</Warning>

**Limit** controls how many matching chunks AI Puffer can include. **Score threshold** controls how strict the match must be. A lower threshold allows more matches; a higher threshold only uses stronger matches.

### Web Search

Web search lets supported providers use current web results while generating the form response.

Use the right-side **Context** container to enable Web Search. The available options depend on the selected model provider.

1. Select an OpenAI, Google, Anthropic, OpenRouter, or xAI model.
2. Turn on **Web Search**.
3. Click the settings icon beside **Web Search**.
4. Configure the provider options.
5. Save the form.

<Frame>
  <img src="https://mintcdn.com/aipuffer-a96fe641/hPuKBa-rq9w1pz4R/images/screenshots/ai-forms/ai-form-web-search-settings.png?fit=max&auto=format&n=hPuKBa-rq9w1pz4R&q=85&s=b5c1cd705672ee4df61ba865a90f7672" alt="AI Form web search settings" width="1848" height="1366" data-path="images/screenshots/ai-forms/ai-form-web-search-settings.png" />
</Frame>

<Tabs>
  <Tab title="OpenAI">
    | Option                  | Use it for                                                |
    | ----------------------- | --------------------------------------------------------- |
    | **Search Context Size** | How much web context OpenAI can use.                      |
    | **User Location**       | Optional approximate country, city, region, and timezone. |
  </Tab>

  <Tab title="Google">
    | Option                          | Use it for                                         |
    | ------------------------------- | -------------------------------------------------- |
    | **Grounding Mode**              | How Google Search grounding is used.               |
    | **Dynamic Retrieval Threshold** | Threshold used when Dynamic Retrieval is selected. |
  </Tab>

  <Tab title="Anthropic">
    | Option              | Use it for                                                |
    | ------------------- | --------------------------------------------------------- |
    | **Max Uses**        | Maximum number of web search calls for one response.      |
    | **User Location**   | Optional approximate country, city, region, and timezone. |
    | **Allowed Domains** | Limit search to specific domains.                         |
    | **Blocked Domains** | Prevent search from using specific domains.               |
    | **Cache TTL**       | Optional cache window for Anthropic web search.           |
  </Tab>

  <Tab title="OpenRouter">
    | Option            | Use it for                         |
    | ----------------- | ---------------------------------- |
    | **Engine**        | Auto, Native, or Exa.              |
    | **Max Results**   | Maximum search results to include. |
    | **Search Prompt** | Optional search intent hint.       |
  </Tab>
</Tabs>

xAI web search uses the shared form setting and does not expose additional xAI-specific web options.

Web search is not shown for Azure, DeepSeek, or Ollama forms.

### Connected Apps

Connected Apps send completed form submissions to external apps through recipes. The `form.submitted` event is emitted after the AI response is complete, so mappings can use both submitted inputs and the generated response. Image Upload fields include image metadata in the event payload, not the base64 image data.

Supported destinations are Slack, HubSpot, Notion, Pipedrive, Zapier, Make, and n8n.

Connected Apps can be used with Workflow. Each submitted form in the chain emits its own `form.submitted` event, so a source form and a target form can trigger separate recipes. When **Auto-submit next form** is enabled, the target form can emit its own event without another visitor click.

1. Go to **AI Puffer > Settings > Apps**.
2. Connect the app account or webhook destination.
3. Create or enable a recipe that uses the **AI Form Submitted** event.
4. Choose the scope: **All AI Forms**, **This AI Form**, or **Selected AI Forms**.
5. Return to **AI Puffer > AI Forms**.
6. Edit the form and check the right-side **Connected Apps** container.
7. Submit the form on the frontend to test the recipe.

Common mapping sources:

| Source                   | Value                             |
| ------------------------ | --------------------------------- |
| `data.form.id`           | Form ID.                          |
| `data.form.name`         | Form title.                       |
| `data.submission.id`     | Submission ID.                    |
| `data.submission.count`  | Submission count for the form.    |
| `data.actor.type`        | `guest` or `user`.                |
| `data.ai.provider`       | Provider used for the submission. |
| `data.ai.model`          | Model used for the submission.    |
| `data.response.text`     | Generated AI response.            |
| `data.inputs`            | Submitted field values.           |
| `data.inputs.{field_id}` | A specific submitted field value. |

## Manage Forms

The **Forms** tab lists saved forms with their title, model, shortcode, updated date, and actions.

| Action         | What it does                              |
| -------------- | ----------------------------------------- |
| **Edit**       | Opens the form builder.                   |
| **Preview**    | Opens an admin preview.                   |
| **Duplicate**  | Creates a copy of the form.               |
| **Export**     | Downloads one form as JSON.               |
| **Delete**     | Deletes the form.                         |
| **Export All** | Downloads all forms as JSON.              |
| **Import**     | Imports forms from an exported JSON file. |
| **Delete All** | Deletes all AI Forms.                     |

Imported forms are added as new forms. Existing forms are not overwritten.

## Publish

### Shortcode

Each saved form has a <Tooltip headline="Shortcode" tip="A bracketed WordPress tag that renders plugin output inside a page, post, block, or shortcode area.">shortcode</Tooltip> in the form list.

```text theme={null}
[aipkit_ai_form id=123]
```

Replace `123` with the form ID.

Click the shortcode snippet to copy it. Click **Options** beside the snippet to enable display options; the snippet updates as you change those options.

<Frame>
  <img src="https://mintcdn.com/aipuffer-a96fe641/hPuKBa-rq9w1pz4R/images/screenshots/ai-forms/ai-form-shortcode-settings.png?fit=max&auto=format&n=hPuKBa-rq9w1pz4R&q=85&s=5bf1d34b5d0820aa58b57380d0d5ffae" alt="AI Form shortcode settings" width="1698" height="1132" data-path="images/screenshots/ai-forms/ai-form-shortcode-settings.png" />
</Frame>

| Option                   | Shortcode attribute                                  |
| ------------------------ | ---------------------------------------------------- |
| **Show Provider Select** | `show_provider="true"`                               |
| **Show Model Select**    | `show_model="true"`                                  |
| **Copy Button**          | `copy_button="true"`                                 |
| **Save as Post**         | `save_button="true"`                                 |
| **Save as PDF**          | `pdf_download="true"`                                |
| **Theme**                | `theme="light"`, `theme="dark"`, or `theme="custom"` |

Examples:

```text theme={null}
[aipkit_ai_form id=123 theme="dark"]
[aipkit_ai_form id=123 show_provider="true" show_model="true"]
[aipkit_ai_form id=123 save_button="true" copy_button="true"]
[aipkit_ai_form id=123 pdf_download="true"]
```

### Block

Use the AI Form block if you prefer the block editor.

1. Edit the page or post.
2. Add the **AI Form** block.
3. Select the form.
4. Choose the theme and display options.
5. Save the page.

<Frame>
  <img src="https://mintcdn.com/aipuffer-a96fe641/hPuKBa-rq9w1pz4R/images/screenshots/ai-forms/ai-form-block-editor.png?fit=max&auto=format&n=hPuKBa-rq9w1pz4R&q=85&s=fe79b10de6773795e3b83e812d7daf9a" alt="AI Form block in the WordPress block editor" width="3022" height="1308" data-path="images/screenshots/ai-forms/ai-form-block-editor.png" />
</Frame>

The block renders the same form as the shortcode.

Workflow settings are saved with the source form. They work when the source form is rendered by shortcode, the AI Form block, or admin preview.

### Result Actions

Result actions appear after the form generates an output.

| Action           | What it does                                                                                                  |
| ---------------- | ------------------------------------------------------------------------------------------------------------- |
| **Copy**         | Copies the generated response.                                                                                |
| **Save as Post** | Saves the generated response as a draft WordPress post. The user must be logged in and allowed to edit posts. |
| **Save as PDF**  | Downloads the generated response as a PDF when `pdf_download="true"` is enabled.                              |

Save as Post uses the form title as the post title and saves the output as draft content.

## Settings

### Limits

Limits control how much AI Forms usage is allowed for guests and logged-in users.

Go to **AI Puffer > AI Forms > Settings**, then use the **Limits** section.

1. Set **Guest quota**.
2. Choose **Quota mode** for logged-in users.
3. Set **User quota** or **Role-based quotas**.
4. Choose **Reset period**.
5. Edit **Quota reached message**.
6. Configure optional primary and secondary buttons.

<Frame>
  <img src="https://mintcdn.com/aipuffer-a96fe641/hPuKBa-rq9w1pz4R/images/screenshots/ai-forms/ai-forms-limits-settings.png?fit=max&auto=format&n=hPuKBa-rq9w1pz4R&q=85&s=045b1af2063129ea9515be3ee05e7af8" alt="AI Forms limits settings" width="1316" height="1340" data-path="images/screenshots/ai-forms/ai-forms-limits-settings.png" />
</Frame>

| Value           | Meaning                                     |
| --------------- | ------------------------------------------- |
| Empty           | Unlimited.                                  |
| `0`             | Disabled.                                   |
| Positive number | Maximum allowed usage for the reset period. |

Reset periods are **Never**, **Daily**, **Weekly**, and **Monthly**.

Action buttons can link users to the usage dashboard, credits dashboard, purchases dashboard, buy credits page, or a custom URL.

<Info>
  For credit-based form access, define pricing rules in [Usage](/usage#pricing-rules). To sell prepaid credits, create WooCommerce credit packages in [Usage](/usage#woocommerce-credit-packages).
</Info>

### Custom CSS

Custom CSS applies to forms embedded with `theme="custom"`.

Go to **AI Puffer > AI Forms > Settings**, then use the **Custom CSS** section.

<Frame>
  <img src="https://mintcdn.com/aipuffer-a96fe641/hPuKBa-rq9w1pz4R/images/screenshots/ai-forms/ai-forms-custom-css-settings.png?fit=max&auto=format&n=hPuKBa-rq9w1pz4R&q=85&s=25a4f1418247ae8ccb9bb3f9792e1630" alt="AI Forms custom CSS settings" width="1284" height="728" data-path="images/screenshots/ai-forms/ai-forms-custom-css-settings.png" />
</Frame>

```css theme={null}
.aipkit-ai-form-wrapper.aipkit-theme-custom {
  /* custom form styles */
}
```

### Provider Filtering

Provider filtering controls which models visitors can select when the shortcode or block shows the frontend provider or model selector.

Go to **AI Puffer > AI Forms > Settings**, then use the **Frontend Models** section to select the models visitors can use. If no models are selected, all configured frontend models are allowed.

<Frame>
  <img src="https://mintcdn.com/aipuffer-a96fe641/hPuKBa-rq9w1pz4R/images/screenshots/ai-forms/ai-forms-provider-filtering-settings.png?fit=max&auto=format&n=hPuKBa-rq9w1pz4R&q=85&s=8a54457215fbb274b45ca7a0357920e2" alt="AI Forms provider filtering settings" width="1284" height="1298" data-path="images/screenshots/ai-forms/ai-forms-provider-filtering-settings.png" />
</Frame>

## Logs

Each form submission creates logs for the submitted request and the AI response.

Logs include the form ID, submitted inputs, uploaded image metadata, constructed prompt, provider, model, token usage, vector search scores when knowledge base is used, and the generated response.

AI Forms usage is recorded with:

| Field      | Value         |
| ---------- | ------------- |
| Module     | `ai_forms`    |
| Operation  | `form_submit` |
| Scope type | `ai_form`     |
| Scope ID   | Form ID       |

This lets usage rules target all AI Forms or a specific form.

## Troubleshooting

<AccordionGroup>
  <Accordion title="Form does not render">
    Check the form ID in the shortcode or block. The form must exist and be published. Admin users see shortcode errors; visitors see empty output.
  </Accordion>

  <Accordion title="Model dropdown is empty">
    Configure and sync the provider in [AI Providers](/ai-providers). If the frontend selector is enabled, also check **AI Puffer > AI Forms > Settings > Frontend Models**.
  </Accordion>

  <Accordion title="Prompt value is blank">
    Check the field's **Field Variable Name** in **Element Settings** and make sure the prompt uses the same placeholder, for example `{customer_message}`.
  </Accordion>

  <Accordion title="Required checkbox does not validate">
    Make sure the checkbox field has options and that the visitor selects at least one option before submitting.
  </Accordion>

  <Accordion title="File upload fails">
    Use a TXT or text-based PDF file. If the server rejects uploads, check WordPress upload limits and security plugin rules.
  </Accordion>

  <Accordion title="Image upload fails">
    Use a JPG, PNG, or WEBP image under 20 MB, and make sure the selected provider and model support image input. xAI image analysis accepts JPG and PNG images.
  </Accordion>

  <Accordion title="Save as Post fails">
    The visitor must be logged in and must have permission to create or edit posts.
  </Accordion>

  <Accordion title="PDF button does not appear">
    Enable **Save as PDF** in the shortcode settings, or add `pdf_download="true"` to the shortcode.
  </Accordion>

  <Accordion title="Connected app recipe does not run">
    Check that the recipe is enabled, the app connection is valid, the scope includes this form, and the recipe uses the **AI Form Submitted** event.
  </Accordion>

  <Accordion title="Workflow next form does not appear">
    Check that the source form is saved, **Enable Workflow** is on, the target form still exists, and the source and target are not the same form. Workflow appears only after the source AI response completes.
  </Accordion>

  <Accordion title="Workflow values are not prefilled">
    Check the target field names and the workflow mappings. Mappings can prefill text input and textarea fields in the target form. File upload and image upload fields are not prefilled.
  </Accordion>

  <Accordion title="Workflow next form does not auto-submit">
    Check that **Auto-submit next form** is enabled on the source form and that the target form has all required values after mappings are applied. Required uploads and multi-step target forms wait for the visitor.
  </Accordion>
</AccordionGroup>
