# Accessing your Invoices in Weavely.ai
Source: https://help.weavely.ai/accounts/invoices

Learn where to access your Weavely.ai pro subscription invoices.

When you upgrade your Weavely subscription, you won't automatically receive invoices by email from us. However, you can easily access invoices for all your payments inside our platform.

Inside the dashboard navigate to **Settings → Team Settings** and click the "*Billing & Invoices*" button. You'll be redirected to a Stripe portal which contains all your details.

<Frame>
  <img alt="Invoices" />
</Frame>


# Forms API
Source: https://help.weavely.ai/developers/forms

Generate and manage AI-powered forms using Weavely’s Forms API. Create, retrieve, and customize form data easily.

## Generate form

> POST api.weavely.ai/v1/forms/generate

### Request

*No authentication header is required for this endpoint.*

#### Body

<ParamField type="string">
  A friendly name for the form (optional).
</ParamField>

<ParamField type="string">
  A natural-language description of the form to generate\
  e.g. `"A simple contact form in Flemish"`.
</ParamField>

<ParamField type="array[object]">
  Optional array of the following objects:

  ```json theme={null}
  {
  mimeType: file.mimeType,  // e.g., "image/png", "application/pdf"
  data: file.data // file encoded as base64
  }
  ```
</ParamField>

### Response

<ResponseField name="url" type="string">
  The URL that opens the generated form in the Weavely editor.
</ResponseField>

## Get form fields

> GET api.weavely.ai/v1/forms/\[formId]/fields

### Request

#### Headers

<ParamField type="string">
  `Bearer <token>`\
  Your personal token.
</ParamField>

#### Path Parameters

<ParamField type="string">
  The unique identifier of the form.
</ParamField>

### Response

<ResponseField name="formId" type="string">
  The form's unique identifier.
</ResponseField>

<ResponseField name="version" type="string|null">
  The timestamp of the published version, or `null` if the form has no published version.
</ResponseField>

<ResponseField name="fields" type="array">
  The list of fields in the form.
</ResponseField>

Each field object includes:

<ResponseField name="id" type="string">
  The field's unique identifier.
</ResponseField>

<ResponseField name="label" type="string">
  The field's display label.
</ResponseField>

<ResponseField name="type" type="string">
  The type of the field (e.g., `text`, `datetime`, etc.).
</ResponseField>

## Get form specification

> GET api.weavely.ai/forms/:id/client

Retrieves the complete specification of a published form.

### Request

*No authentication required for this endpoint.*

#### Path Parameters

<ParamField type="string">
  The unique identifier (UUID) of the form.
</ParamField>

### Response

<ResponseField name="id" type="string">
  The form's unique identifier.
</ResponseField>

<ResponseField name="name" type="string">
  The form's display name.
</ResponseField>

<ResponseField name="plan" type="string">
  The Weavely plan tier (e.g., "pro", "free").
</ResponseField>

<ResponseField name="settings" type="object">
  Form configuration including access, general, notifications, and security settings.
</ResponseField>

<ResponseField name="formJSON" type="object">
  Complete form structure with all pages and elements.

  See **Form Structure Reference** below for complete specifications.
</ResponseField>

<ResponseField name="themeJSON" type="object">
  Complete theme configuration.

  See **Theme Configuration Reference** below for all available options.
</ResponseField>

<ResponseField name="variables" type="array">
  Auto-generated variables for each input field in the form.

  Each variable includes `id` (pattern: `field:{elementId}`), `type`, `label`, and `dataType`.
</ResponseField>

<ResponseField name="logicRules" type="array">
  Conditional logic rules configured for the form.

  See **Logic Rules Reference** below for structure.
</ResponseField>

<ResponseField name="eventTriggers" type="array">
  Event-based triggers configured for the form.

  See **Event Triggers Reference** below for structure.
</ResponseField>

<ResponseField name="calculatedValues" type="array">
  Calculated field values configured for the form.
</ResponseField>

<ResponseField name="pageAttributes" type="object">
  Page metadata for SEO and social sharing (icon, title, description, openGraphImage).
</ResponseField>

<ResponseField name="i18n" type="object">
  Internationalization settings including language code and UI translations.
</ResponseField>

<Note>
  This endpoint returns the complete published form specification. The form must be published for this endpoint to return data — unpublished forms will return a 400 Bad Request error.
</Note>

## Create form

> POST api.weavely.ai/v1/forms

Creates a new form from a complete form specification.

### Request

#### Headers

<ParamField type="string">
  `Bearer <token>`\
  Your personal token.
</ParamField>

<ParamField type="string">
  `application/json`
</ParamField>

#### Body

The request body is a complete form specification with the following structure:

<ParamField type="string">
  Display name for the form shown in the Weavely dashboard.
</ParamField>

<ParamField type="string">
  The UUID of the team to associate this form with.
</ParamField>

<ParamField type="boolean">
  Set to `true` to publish the form immediately. Without this, the form is created as a draft and won't be accessible at its public URL.
</ParamField>

<ParamField type="object">
  The form structure containing all pages and elements.

  ```json theme={null}
  {
    "pages": [
      {
        "id": "string",
        "name": "string",
        "type": "form-page" | "ending-page" | "score-outcome-page" | "match-outcome-page",
        "elements": [...]
      }
    ]
  }
  ```

  See **Form Structure Reference** below for page types, element types, and configurations.
</ParamField>

<ParamField type="object">
  The form's visual theme configuration.

  ```json theme={null}
  {
    "name": "string",
    "font": {...},
    "logo": {...},
    "colors": {...},
    "layout": {...},
    "visual": {...}
  }
  ```

  See **Theme Configuration Reference** below for all available options.
</ParamField>

<ParamField type="object">
  Optional form settings.

  ```json theme={null}
  {
    "type": "quiz" | "score" | "match" | "payment",
    "quiz": {
      "instantFeedback": boolean
    },
    "score": {
      "outcomes": [...]
    },
    "match": {
      "outcomes": [...]
    },
    "access": {
      "stopSubmissions": boolean
    },
    "general": {
      "showProgressBar": boolean,
      "autoSaveProgress": boolean,
      "showValidationErrors": boolean
    },
    "notifications": {
      "submissionEmail": {...},
      "confirmationEmail": {...}
    },
    "i18n": {
      "language": "string"
    }
  }
  ```

  Omit `type` for universal form behaviour. See **Quiz Mode Reference**, **Score Mode Reference**, **Match Mode Reference**, and **Payment Mode Reference** below for mode-specific settings. See **Internationalisation Reference** for supported language codes.
</ParamField>

<ParamField type="array">
  Optional conditional logic rules.

  Each rule defines conditions and actions to execute based on field values.

  See **Logic Rules Reference** below for complete documentation.
</ParamField>

<ParamField type="array">
  Optional event-based triggers.

  Triggers execute actions in response to form events (e.g., form submission, page load).

  See **Event Triggers Reference** below for available triggers and actions.
</ParamField>

<ParamField type="array">
  Optional calculated field values.

  (Currently undocumented - reserved for future use)
</ParamField>

<ParamField type="object">
  Optional page-specific attributes.

  (Currently undocumented - reserved for future use)
</ParamField>

### Response

<ResponseField name="id" type="string">
  The unique identifier (UUID) of the created form.
</ResponseField>

<ResponseField name="url" type="string">
  Direct link to the published form. **Only present when `publish` is set to `true`** in the request body.

  Format: `https://forms.weavely.ai/{formId}`
</ResponseField>

<ResponseField name="editor" type="string">
  Direct link to edit the form.

  Format: `https://forms.weavely.ai/editor/{formId}`
</ResponseField>

### Example

**Request:**

```bash theme={null}
curl -X POST https://api.weavely.ai/v1/forms \
  -H "Content-Type: application/json" \
  -H "Authorization: Bearer wvy_your_token_here" \
  -d '{
    "name": "Contact Form",
    "teamId": "your-team-uuid",
    "publish": true,
    "formJSON": {
      "pages": [{
        "id": "page-1",
        "name": "Contact",
        "type": "form-page",
        "elements": [
          {
            "id": "name",
            "type": "input-text",
            "label": "Your Name",
            "settings": { "required": true },
            "placeholder": "Enter your name..."
          }
        ]
      }]
    },
    "themeJSON": {
      "name": "Nova",
      "colors": {
        "primary": "#6c5ce7",
        "background": "#FFFFFF"
      }
    }
  }'
```

**Response:**

```json theme={null}
{
  "id": "8e2d178f-4e9c-4fe3-9619-e44412bf7ba1",
  "editor": "https://forms.weavely.ai/editor/8e2d178f-4e9c-4fe3-9619-e44412bf7ba1",
  "url": "https://forms.weavely.ai/8e2d178f-4e9c-4fe3-9619-e44412bf7ba1"
}
```

***

## Update form

> POST api.weavely.ai/v1/forms/:id

Updates an existing form. This is a partial update endpoint — only the fields provided in the request body will be updated. All omitted fields remain unchanged.

### Request

#### Headers

<ParamField type="string">
  `Bearer <token>`\
  Your personal token.
</ParamField>

<ParamField type="string">
  `application/json`
</ParamField>

#### Path Parameters

<ParamField type="string">
  The unique identifier (UUID) of the form to update.
</ParamField>

#### Body

All body parameters are optional. Only include the fields you want to update. Omitted fields will remain unchanged.

<ParamField type="string">
  Update the form's name.
</ParamField>

<ParamField type="object">
  Update the form structure containing pages and elements.

  ```json theme={null}
  {
    "pages": [
      {
        "id": "string",
        "name": "string",
        "type": "form-page" | "ending-page" | "score-outcome-page" | "match-outcome-page",
        "elements": [...]
      }
    ]
  }
  ```

  See **Form Structure Reference** below for page types, element types, and configurations.
</ParamField>

<ParamField type="object">
  Update the form's visual theme configuration.

  ```json theme={null}
  {
    "name": "string",
    "font": {...},
    "logo": {...},
    "colors": {...},
    "layout": {...},
    "visual": {...}
  }
  ```

  See **Theme Configuration Reference** below for all available options.
</ParamField>

<ParamField type="object">
  Update form settings.

  ```json theme={null}
  {
    "type": "quiz" | "score" | "match" | "payment",
    "quiz": {
      "instantFeedback": boolean
    },
    "score": {
      "outcomes": [...]
    },
    "match": {
      "outcomes": [...]
    },
    "access": {
      "stopSubmissions": boolean
    },
    "general": {
      "showProgressBar": boolean,
      "autoSaveProgress": boolean,
      "showValidationErrors": boolean
    },
    "notifications": {
      "submissionEmail": {...},
      "confirmationEmail": {...}
    },
    "i18n": {
      "language": "string"
    }
  }
  ```

  Omit `type` for universal form behaviour. See **Quiz Mode Reference**, **Score Mode Reference**, **Match Mode Reference**, and **Payment Mode Reference** below for mode-specific settings. See **Internationalisation Reference** for supported language codes.
</ParamField>

<ParamField type="array">
  Update conditional logic rules.

  Each rule defines conditions and actions to execute based on field values.

  See **Logic Rules Reference** below for complete documentation.
</ParamField>

<ParamField type="array">
  Update event-based triggers.

  Triggers execute actions in response to form events (e.g., form submission, page load).

  See **Event Triggers Reference** below for available triggers and actions.
</ParamField>

<ParamField type="array">
  Update calculated field values.

  (Currently undocumented - reserved for future use)
</ParamField>

### Response

<ResponseField name="id" type="string">
  The unique identifier (UUID) of the updated form.
</ResponseField>

### Examples

**Update only the form name:**

```bash theme={null}
curl -X POST https://api.weavely.ai/v1/forms/e2fdec38-130c-4e2c-b0c7-4f238206c9ce \
  -H "Content-Type: application/json" \
  -H "Authorization: Bearer wvy_your_token_here" \
  -d '{
    "name": "Updated Contact Form"
  }'
```

**Response:**

```json theme={null}
{
  "id": "e2fdec38-130c-4e2c-b0c7-4f238206c9ce"
}
```

***

<Note>
  This endpoint performs a **partial update**. Only the top-level fields you include in the request body will be modified. All other fields remain unchanged. This allows you to update specific parts of a form without needing to send the entire form structure.
</Note>

<Warning>
  When updating nested objects like `themeJSON` or `settings`, the entire object at that level is replaced. For example, if you update `themeJSON.colors`, make sure to include all color properties you want to keep, as the entire `colors` object will be replaced.
</Warning>

## Form Structure Reference

### Page Structure

A form consists of one or more pages. Each page has the following structure:

```json theme={null}
{
  "id": "string (UUID)",
  "name": "string",
  "type": "form-page" | "ending-page" | "score-outcome-page" | "match-outcome-page",
  "elements": [...]
}
```

#### Page Types

| Type                 | Description                                                                                                                                                     |
| -------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `form-page`          | A standard page in the form flow. Can contain any element type. Pages are shown in the order they appear in the `pages` array.                                  |
| `ending-page`        | Shown after the form is submitted. Not part of the fillable flow. Used by universal forms and quizzes.                                                          |
| `score-outcome-page` | Shown after submission of a **score form**, based on the respondent's total score. Used instead of ending pages — see **Score Mode Reference** below.           |
| `match-outcome-page` | Shown after submission of a **match form**, based on the respondent's best-matching outcome. Used instead of ending pages — see **Match Mode Reference** below. |

#### Ending Pages

**Every universal form and quiz must have at least one ending page.** Score and match forms use outcome pages instead (one per outcome).

Ending pages and outcome pages can only contain **display elements**:

* `heading`
* `paragraph`
* `image`
* `lottie`
* `embed-html`
* `embed-audio`
* `embed-video`

A form can have **multiple ending pages**. By default, the first ending page is shown after submission. Use the `setEnding` logic rule action to conditionally direct respondents to a different ending page — for example, based on a quiz score or a specific answer (see **Logic Rules Reference** below).

<Warning>
  The API does not validate the presence of an ending page — forms can be created and even published without one. It is the responsibility of the API consumer to always include at least one ending page (or, for score and match forms, one outcome page per outcome) in `formJSON.pages`. The Weavely editor enforces this for forms built in the UI.
</Warning>

### Element Types

Weavely forms support 27 element types organized into categories:

**Input Elements:**

* `input-text` - Single-line text input
* `input-number` - Numeric input
* `input-email` - Email address input with validation
* `input-phone-number` - Phone number input
* `input-url` - URL input with validation
* `input-time` - Time picker
* `input-date` - Date picker
* `text-area` - Multi-line text input
* `input-file` - File upload

**Choice Elements:**

* `checkbox-buttons` - Multiple selection checkboxes
* `radio-buttons` - Single selection radio buttons
* `dropdown` - Dropdown select menu
* `image-choice` - Image-based selection
* `checkbox` - Single checkbox (yes/no)
* `matrix` - Grid of choices (rows × columns)
* `ranking` - Drag-and-drop ranking

**Rating Elements:**

* `star-rating` - Star-based rating (customizable number of stars)
* `scale-rating` - Numeric scale rating
* `range-slider` - Slider with min/max values

**Display Elements:**

* `heading` - Heading text
* `paragraph` - Paragraph text
* `image` - Image display
* `lottie` - Lottie animation player
* `embed-html` - Custom HTML embed
* `embed-audio` - Audio player
* `embed-video` - Video embed

**Special Elements:**

* `signature` - Digital signature capture

***

### Element Specifications

<Accordion title="input-text">
  **Single-line text input**

  ```json theme={null}
  {
    "type": "input-text",
    "label": "string",
    "settings": {
      "required": boolean
    },
    "description": "string",
    "placeholder": "string"
  }
  ```
</Accordion>

<Accordion title="input-number">
  **Numeric input only**

  ```json theme={null}
  {
    "type": "input-number",
    "label": "string",
    "settings": {
      "required": boolean
    },
    "description": "string",
    "placeholder": "string"
  }
  ```
</Accordion>

<Accordion title="input-email">
  **Email input with validation**

  ```json theme={null}
  {
    "type": "input-email",
    "label": "string",
    "settings": {
      "required": boolean
    },
    "description": "string",
    "placeholder": "string"
  }
  ```
</Accordion>

<Accordion title="input-phone-number">
  **Phone number input**

  ```json theme={null}
  {
    "type": "input-phone-number",
    "label": "string",
    "settings": {
      "required": boolean
    },
    "description": "string",
    "placeholder": "string"
  }
  ```
</Accordion>

<Accordion title="input-url">
  **URL input with validation**

  ```json theme={null}
  {
    "type": "input-url",
    "label": "string",
    "settings": {
      "required": boolean
    },
    "description": "string",
    "placeholder": "string"
  }
  ```
</Accordion>

<Accordion title="input-time">
  **Time picker input**

  ```json theme={null}
  {
    "type": "input-time",
    "label": "string",
    "settings": {
      "required": boolean
    },
    "description": "string",
    "placeholder": "string"
  }
  ```
</Accordion>

<Accordion title="input-date">
  **Date picker input**

  ```json theme={null}
  {
    "type": "input-date",
    "label": "string",
    "settings": {
      "required": boolean
    },
    "description": "string",
    "placeholder": "string"
  }
  ```
</Accordion>

<Accordion title="text-area">
  **Multi-line text input**

  ```json theme={null}
  {
    "type": "text-area",
    "label": "string",
    "settings": {
      "required": boolean
    },
    "description": "string",
    "placeholder": "string"
  }
  ```
</Accordion>

<Accordion title="input-file">
  **File upload input**

  ```json theme={null}
  {
    "type": "input-file",
    "label": "string",
    "settings": {
      "required": boolean,
      "maxFiles": number,
      "maxFileSize": number,
      "allowedFileType": "string"
    },
    "description": "string",
    "placeholder": "string"
  }
  ```
</Accordion>

<Accordion title="checkbox-buttons">
  **Multiple selection checkboxes**

  ```json theme={null}
  {
    "type": "checkbox-buttons",
    "label": "string",
    "settings": {
      "required": boolean,
      "randomize": boolean,
      "allowOtherOption": boolean,
      "otherOptionLabel": "string",
      "options": [
        {
          "label": "string",
          "value": "string"
        }
      ]
    },
    "description": "string",
    "placeholder": "string"
  }
  ```
</Accordion>

<Accordion title="radio-buttons">
  **Single selection radio group**

  ```json theme={null}
  {
    "type": "radio-buttons",
    "label": "string",
    "settings": {
      "required": boolean,
      "randomize": boolean,
      "allowOtherOption": boolean,
      "otherOptionLabel": "string",
      "options": [
        {
          "label": "string",
          "value": "string"
        }
      ]
    },
    "description": "string",
    "placeholder": "string"
  }
  ```
</Accordion>

<Accordion title="dropdown">
  **Dropdown select menu**

  ```json theme={null}
  {
    "type": "dropdown",
    "label": "string",
    "settings": {
      "required": boolean,
      "randomize": boolean,
      "options": [
        {
          "label": "string",
          "value": "string"
        }
      ]
    },
    "description": "string"
  }
  ```
</Accordion>

<Accordion title="image-choice">
  **Image-based selection**

  ```json theme={null}
  {
    "type": "image-choice",
    "label": "string",
    "settings": {
      "required": boolean,
      "multiple": boolean,
      "randomize": boolean,
      "imageWidth": number,
      "imageHeight": number,
      "imageFit": "string",
      "options": [
        {
          "label": "string",
          "value": "string",
          "data": { "url": "string" } | null
        }
      ]
    },
    "description": "string",
    "placeholder": "string"
  }
  ```
</Accordion>

<Accordion title="checkbox">
  **Single checkbox (yes/no)**

  ```json theme={null}
  {
    "type": "checkbox",
    "label": "string",
    "settings": {
      "required": boolean,
      "default": boolean
    },
    "description": "string",
    "placeholder": "string"
  }
  ```
</Accordion>

<Accordion title="matrix">
  **Grid of choices (rows × columns)**

  ```json theme={null}
  {
    "type": "matrix",
    "label": "string",
    "fields": [
      {
        "id": "string (UUID)",
        "type": "matrix-field",
        "label": "string",
        "settings": {
          "required": boolean,
          "multiple": boolean,
          "options": [
            {
              "label": "string",
              "value": "string"
            }
          ]
        },
        "description": "string",
        "placeholder": "string"
      }
    ],
    "settings": {
      "required": boolean,
      "multiple": boolean,
      "options": [
        {
          "label": "string",
          "value": "string"
        }
      ]
    },
    "description": "string"
  }
  ```
</Accordion>

<Accordion title="ranking">
  **Drag-and-drop ranking**

  ```json theme={null}
  {
    "type": "ranking",
    "label": "string",
    "settings": {
      "required": boolean,
      "options": [
        {
          "label": "string",
          "value": "string"
        }
      ]
    },
    "description": "string",
    "placeholder": "string"
  }
  ```
</Accordion>

<Accordion title="star-rating">
  **Star-based rating**

  ```json theme={null}
  {
    "type": "star-rating",
    "label": "string",
    "settings": {
      "required": boolean,
      "stars": number,
      "icon": "string"
    },
    "description": "string",
    "placeholder": "string"
  }
  ```
</Accordion>

<Accordion title="scale-rating">
  **Numeric scale rating**

  ```json theme={null}
  {
    "type": "scale-rating",
    "label": "string",
    "settings": {
      "required": boolean,
      "scales": number
    },
    "description": "string",
    "placeholder": "string"
  }
  ```
</Accordion>

<Accordion title="range-slider">
  **Slider with min/max values**

  ```json theme={null}
  {
    "type": "range-slider",
    "label": "string",
    "settings": {
      "min": number,
      "max": number,
      "step": number
    },
    "description": "string",
    "placeholder": "string"
  }
  ```
</Accordion>

<Accordion title="heading">
  **Heading text**

  ```json theme={null}
  {
    "type": "heading",
    "label": "string"
  }
  ```
</Accordion>

<Accordion title="paragraph">
  **Paragraph text. Supports HTML markup and variable piping via `{{variable_id}}` syntax.**

  ```json theme={null}
  {
    "type": "paragraph",
    "label": "string"
  }
  ```
</Accordion>

<Accordion title="image">
  **Image display**

  ```json theme={null}
  {
    "type": "image",
    "settings": {
      "src": "string (URL)"
    }
  }
  ```
</Accordion>

<Accordion title="lottie">
  **Lottie animation player**

  ```json theme={null}
  {
    "type": "lottie",
    "settings": {
      "src": "string (URL to Lottie JSON file)",
      "loop": boolean
    }
  }
  ```
</Accordion>

<Accordion title="embed-html">
  **Custom HTML embed**

  ```json theme={null}
  {
    "type": "embed-html",
    "settings": {
      "codeSnippet": "string"
    }
  }
  ```
</Accordion>

<Accordion title="embed-audio">
  **Audio player**

  ```json theme={null}
  {
    "type": "embed-audio",
    "settings": {
      "url": "string"
    }
  }
  ```
</Accordion>

<Accordion title="embed-video">
  **Video embed**

  ```json theme={null}
  {
    "type": "embed-video",
    "settings": {
      "url": "string"
    }
  }
  ```
</Accordion>

<Accordion title="signature">
  **Digital signature capture**

  ```json theme={null}
  {
    "type": "signature",
    "label": "string",
    "settings": {
      "fileFormat": "string"
    },
    "description": "string",
    "placeholder": "string"
  }
  ```
</Accordion>

***

## Theme Configuration Reference

The `themeJSON` object controls all visual styling for the form. It contains the following sections: `name`, `font`, `logo`, `colors`, `layout`, `visual`, and `components`.

### Theme Presets

Weavely includes 7 preset themes. Set via the `name` field — the preset provides default values for colors, fonts, and components. Any explicit values you set will override the preset defaults.

* `Nova`
* `Retro`
* `Dawn`
* `Dusk`
* `Frost`
* `Ember`
* `Glass`

### Font

Controls typography for body text and headings independently.

```json theme={null}
"font": {
  "text": {
    "size": "16px",
    "family": "Plus Jakarta Sans"
  },
  "headings": {
    "size": "32px",
    "family": "Plus Jakarta Sans"
  }
}
```

You can also set the font family globally using a shorthand:

```json theme={null}
"font": {
  "family": "Poppins"
}
```

### Logo

Optional logo image displayed on the form.

```json theme={null}
"logo": {
  "src": "string (URL)" | null,
  "variables": {
    "width": "40px",
    "justifySelf": "center"
  }
}
```

Set `src` to an image URL, or `null` for no logo.

### Colors

Full color palette for the form. All values are hex codes.

```json theme={null}
"colors": {
  "primary": "#6c5ce7",
  "background": "#FFFFFF",
  "text": "#000000",
  "question": "#000000",
  "answer": "#000000",
  "secondary": "#222222",
  "surface": "#F7F8FA",
  "border": "#dedfe0",
  "error": "#FF0000"
}
```

| Color        | Controls                        |
| ------------ | ------------------------------- |
| `primary`    | Buttons, accents, active states |
| `background` | Page/form background            |
| `text`       | General body text               |
| `question`   | Field labels / question text    |
| `answer`     | User input text                 |
| `secondary`  | Secondary UI elements           |
| `surface`    | Input field backgrounds         |
| `border`     | Input borders, dividers         |
| `error`      | Validation error messages       |

You can provide only a subset of colors (e.g. just `primary` and `background`) and the theme preset will fill in the rest.

### Layout

Controls where the visual (image or color) appears relative to the form.

```json theme={null}
"layout": {
  "type": "right"
}
```

| Type      | Description                                                 |
| --------- | ----------------------------------------------------------- |
| `under`   | Visual is placed behind the form as a full-page background  |
| `left`    | Visual is displayed as a left side panel, form on the right |
| `right`   | Visual is displayed as a right side panel, form on the left |
| `clean`   | No visual — form only                                       |
| `over`    | Visual overlays the form area                               |
| `through` | Visual bleeds through the form                              |

### Visual

The background visual — either an image or a solid color. Works together with `layout` to determine how the visual is positioned.

**Image visual:**

```json theme={null}
"visual": {
  "type": "image",
  "value": "string (image URL)",
  "variables": {
    "size": "cover",
    "repeat": "no-repeat",
    "position": "center"
  }
}
```

**Color visual:**

```json theme={null}
"visual": {
  "type": "color",
  "value": "#5a3131",
  "variables": {
    "size": "cover",
    "repeat": "no-repeat",
    "position": "center"
  }
}
```

The `variables` object uses CSS-like properties and defaults to `size: "cover"`, `repeat: "no-repeat"`, `position: "center"` for both types.

**Common combinations:**

* Side image: `layout.type: "right"` (or `"left"`) + `visual.type: "image"` — displays a photo alongside the form
* Background color: `layout.type: "under"` + `visual.type: "color"` — fills the page behind the form with a solid color
* Background image: `layout.type: "under"` + `visual.type: "image"` — fills the page behind the form with an image
* No visual: `layout.type: "clean"` — form only, no visual element

### Components

Controls form layout, input style, button style, and question weight.

```json theme={null}
"components": {
  "form": {
    "variables": {
      "gap": "30px",
      "maxWidth": "700px",
      "textAlign": "left"
    }
  },
  "input": {
    "preset": "default"
  },
  "button": {
    "preset": "default",
    "hoverAnimation": {
      "preset": "grow"
    }
  },
  "question": {
    "variables": {
      "fontWeight": "500"
    }
  }
}
```

**Input presets:**

* `default` — Rounded input styling
* `square` — Square input styling

**Button presets:**

* `default` — Rounded button styling
* `square` — Square button styling

**Hover animation presets:**

* `default` — Default hover animation
* `grow` — Grow effect on hover

### Complete themeJSON Example

```json theme={null}
{
  "name": "Nova",
  "font": {
    "text": { "size": "16px", "family": "Plus Jakarta Sans" },
    "headings": { "size": "32px", "family": "Plus Jakarta Sans" }
  },
  "logo": {
    "src": null,
    "variables": { "width": "40px", "justifySelf": "center" }
  },
  "colors": {
    "primary": "#6c5ce7",
    "background": "#FFFFFF",
    "text": "#000000",
    "question": "#000000",
    "answer": "#000000",
    "secondary": "#222222",
    "surface": "#F7F8FA",
    "border": "#dedfe0",
    "error": "#FF0000"
  },
  "layout": { "type": "right" },
  "visual": {
    "type": "image",
    "value": "https://example.com/your-image.jpg",
    "variables": { "size": "cover", "repeat": "no-repeat", "position": "center" }
  },
  "components": {
    "form": { "variables": { "gap": "30px", "maxWidth": "700px", "textAlign": "left" } },
    "input": { "preset": "default" },
    "button": { "preset": "default", "hoverAnimation": { "preset": "grow" } },
    "question": { "variables": { "fontWeight": "500" } }
  }
}
```

***

## Quiz Mode Reference

Quiz mode turns a form into a scored assessment.

### Enabling Quiz Mode

Set `settings.type` to `"quiz"` and optionally configure quiz-specific settings:

```json theme={null}
{
  "settings": {
    "type": "quiz",
    "quiz": {
      "instantFeedback": true
    }
  }
}
```

| Setting                | Type     | Description                                                                              |
| ---------------------- | -------- | ---------------------------------------------------------------------------------------- |
| `type`                 | `"quiz"` | Activates quiz mode. Omit for universal form behaviour                                   |
| `quiz.instantFeedback` | boolean  | When `true`, shows correct/incorrect feedback after each question rather than at the end |

### Quiz-Compatible Element Types

Only the following element types support quiz scoring:

* `radio-buttons`
* `checkbox-buttons`
* `input-text`
* `dropdown`

### The `quiz` Property

Add a `quiz` object to any compatible element to define its correct answer and score:

```json theme={null}
{
  "id": "string (UUID)",
  "type": "radio-buttons",
  "label": "What is the capital of France?",
  "settings": { ... },
  "quiz": {
    "score": 1,
    "answer": "Paris"
  }
}
```

| Field    | Type             | Description                                                                                                                                                                                                        |
| -------- | ---------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
| `score`  | number           | Points awarded for a correct answer. Can be any positive number — questions can be weighted differently                                                                                                            |
| `answer` | string           | Correct answer for single-select elements (`radio-buttons`, `input-text`, `dropdown`). For `radio-buttons` and `dropdown`, must match the option's `value` exactly. For `input-text`, matching is case-insensitive |
| `answer` | array of strings | All correct answers for `checkbox-buttons` — respondent must select exactly this set of values                                                                                                                     |

### Quiz Variables

When quiz mode is active, four variables are automatically available for use in logic rules and answer piping:

| Variable ID                 | Description                                             |
| --------------------------- | ------------------------------------------------------- |
| `quiz:quiz-score`           | Total points scored by the respondent                   |
| `quiz:max-score`            | Maximum possible score (sum of all `quiz.score` values) |
| `quiz:correct-answers`      | Number of questions answered correctly                  |
| `quiz:total-quiz-questions` | Total number of quiz questions in the form              |

### Score-Based Conditional Endings

Use quiz variables in logic rules to direct respondents to different ending pages based on their score:

```json theme={null}
{
  "id": "string (UUID)",
  "name": "High score ending",
  "logicalOperator": "any",
  "conditions": [
    {
      "id": "string (UUID)",
      "variable": "quiz:quiz-score",
      "operator": "greaterThanOrEqual",
      "value": "5"
    }
  ],
  "actions": [
    {
      "id": "string (UUID)",
      "name": "setEnding",
      "data": {
        "elementId": "string (ending-page UUID)"
      }
    }
  ]
}
```

All standard logic rule actions are available (`hideElement`, `showElement`, `hidePage`, `skipToPage`, `setEnding`).

### Showing Results to Respondents

Pipe quiz variables into paragraph labels using `{{variable_id}}` syntax. Element labels support HTML markup:

```html theme={null}
<div>Thanks for completing the quiz!</div>
<div><br></div>
<div>Score: {{quiz:quiz-score}} / {{quiz:max-score}}</div>
<div>Correct answers: {{quiz:correct-answers}} / {{quiz:total-quiz-questions}}</div>
```

***

## Score Mode Reference

Score mode turns a form into a scored assessment that routes respondents to different outcome pages based on their total score — ideal for lead qualification, assessments, and personality-style tests.

### Enabling Score Mode

Set `settings.type` to `"score"` and define the outcomes:

```json theme={null}
{
  "settings": {
    "type": "score",
    "score": {
      "outcomes": [
        {
          "id": "string (UUID)",
          "name": "Cold Lead",
          "pageId": "string (score-outcome-page UUID)",
          "maxScore": 5
        },
        {
          "id": "string (UUID)",
          "name": "Warm Lead",
          "pageId": "string (score-outcome-page UUID)",
          "maxScore": 10
        },
        {
          "id": "string (UUID)",
          "name": "Hot Lead",
          "pageId": "string (score-outcome-page UUID)"
        }
      ]
    }
  }
}
```

### Outcomes

Outcomes divide the total score into contiguous ranges. After submission, the respondent is shown the outcome page whose range their total score falls into.

| Field      | Type          | Description                                                                                                                                                                              |
| ---------- | ------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `id`       | string (UUID) | Unique identifier for the outcome                                                                                                                                                        |
| `name`     | string        | Outcome name. Exposed via the `score:outcome` variable                                                                                                                                   |
| `pageId`   | string (UUID) | The `id` of the `score-outcome-page` to show for this outcome                                                                                                                            |
| `maxScore` | number        | Inclusive upper bound of the outcome's score range. Each range starts where the previous outcome's range ends. **Must be omitted on the last outcome**, which captures all higher scores |

The example above produces the ranges: up to 5 → Cold Lead, 6 to 10 → Warm Lead, 11 or more → Hot Lead.

### Outcome Pages

Score forms use pages of type `score-outcome-page` **instead of** `ending-page`. Define one page per outcome and reference it via the outcome's `pageId`. Like ending pages, score outcome pages can only contain display elements (see **Page Structure** above).

### Scoring Answers

Points are assigned **per option** by adding a `score` property to options. The following element types support option scores:

* `radio-buttons`
* `checkbox-buttons`
* `dropdown`

```json theme={null}
{
  "type": "radio-buttons",
  "label": "How often do you typically wash your car?",
  "settings": {
    "required": true,
    "options": [
      { "label": "Once a week", "value": "Once a week", "score": 3 },
      { "label": "Once a month", "value": "Once a month", "score": 2 },
      { "label": "Rarely", "value": "Rarely", "score": 0 }
    ]
  }
}
```

### Score Variables

When score mode is active, two variables are automatically available:

| Variable ID     | Description                            |
| --------------- | -------------------------------------- |
| `score:total`   | The respondent's total score (number)  |
| `score:outcome` | The name of the matched outcome (text) |

Both can be used in logic rule conditions and piped into element labels using `{{variable_id}}` syntax, e.g. `Your score: {{score:total}}`.

***

## Match Mode Reference

Match mode turns a form into a personality-style quiz that matches respondents to one of several outcomes based on weighted answers — ideal for "Which X are you?" quizzes and product recommenders.

### Enabling Match Mode

Set `settings.type` to `"match"` and define the outcomes:

```json theme={null}
{
  "settings": {
    "type": "match",
    "match": {
      "outcomes": [
        {
          "id": "string (UUID)",
          "name": "Sports Car",
          "pageId": "string (match-outcome-page UUID)"
        },
        {
          "id": "string (UUID)",
          "name": "SUV",
          "pageId": "string (match-outcome-page UUID)"
        }
      ]
    }
  }
}
```

### Outcomes

Unlike score mode, match outcomes have no score ranges. Each answer option contributes weighted points to one or more outcomes, and the outcome with the **highest accumulated total** is matched.

| Field    | Type          | Description                                                               |
| -------- | ------------- | ------------------------------------------------------------------------- |
| `id`     | string (UUID) | Unique identifier for the outcome. Referenced by option `weights`         |
| `name`   | string        | Outcome name. Exposed via the `match:outcome` variable                    |
| `pageId` | string (UUID) | The `id` of the `match-outcome-page` to show when this outcome is matched |

### Outcome Pages

Match forms use pages of type `match-outcome-page` **instead of** `ending-page`. Define one page per outcome and reference it via the outcome's `pageId`. Like ending pages, match outcome pages can only contain display elements (see **Page Structure** above).

### Weighting Answers

Add a `weights` object to each option, mapping **outcome IDs to points**. A single option can contribute to multiple outcomes:

```json theme={null}
{
  "type": "radio-buttons",
  "label": "What's your ideal weekend activity?",
  "settings": {
    "required": true,
    "options": [
      {
        "label": "Racing or a track day",
        "value": "Racing or a track day",
        "weights": {
          "{sports-car-outcome-id}": 3
        }
      },
      {
        "label": "Camping or off-roading",
        "value": "Camping or off-roading",
        "weights": {
          "{pickup-truck-outcome-id}": 2,
          "{suv-outcome-id}": 2
        }
      }
    ]
  }
}
```

The following element types support option weights:

* `radio-buttons`
* `checkbox-buttons`
* `dropdown`

When the form is submitted, the weights of all selected options are added up per outcome. The respondent is shown the outcome page of the highest-scoring outcome.

### Match Variables

When match mode is active, one variable is automatically available:

| Variable ID     | Description                            |
| --------------- | -------------------------------------- |
| `match:outcome` | The name of the matched outcome (text) |

It can be used in logic rule conditions and piped into element labels using `{{variable_id}}` syntax, e.g. `You are: {{match:outcome}}`.

***

## Payment Mode Reference

Payment mode turns a form into a payment collection form.

### Enabling Payment Mode

Set `settings.type` to `"payment"`:

```json theme={null}
{
  "settings": {
    "type": "payment"
  }
}
```

| Setting | Type        | Description                                               |
| ------- | ----------- | --------------------------------------------------------- |
| `type`  | `"payment"` | Activates payment mode. Omit for universal form behaviour |

<Note>
  Payment forms require additional setup in the Weavely dashboard (Stripe integration, pricing, etc.) before they can accept payments. The API call only flags the form as a payment form — it does not configure the payment provider.
</Note>

***

## Logic Rules Reference

Logic rules enable conditional behavior based on field values.

### Structure

```json theme={null}
{
  "id": "string (UUID)",
  "name": "string",
  "logicalOperator": "any" | "all",
  "conditions": [{
    "id": "string (UUID)",
    "variable": "field:{elementId}",
    "operator": "isEmpty" | "isEqual" | "contains" | ...,
    "value": null | string | number
  }],
  "actions": [{
    "id": "string (UUID)",
    "name": "hideElement" | "showElement" | "skipToPage" | ...,
    "data": { "elementId": "string (UUID)" }
  }]
}
```

### Logical Operators

* `any` - OR logic: trigger actions if ANY condition is true
* `all` - AND logic: trigger actions if ALL conditions are true

### Condition Operators

**Universal (all field types):**

* `isEmpty` - Check if field is empty/null
* `isNotEmpty` - Check if field has a value
* `isEqual` - Check if field equals a specific value
* `isNotEqual` - Check if field does not equal a specific value

**String operators (text fields):**

* `contains` - Check if field contains a substring
* `doesNotContain` - Check if field does not contain a substring
* `startsWith` - Check if field starts with a string
* `endsWith` - Check if field ends with a string

**Numeric operators (number fields and quiz variables):**

* `lessThan` - Check if field is less than a value
* `lessThanOrEqual` - Check if field is less than or equal to a value
* `greaterThan` - Check if field is greater than a value
* `greaterThanOrEqual` - Check if field is greater than or equal to a value

### Available Actions

* `hideElement` - Hide a specific element
* `showElement` - Show a specific element
* `hidePage` - Hide a specific page
* `skipToPage` - Navigate to a specific page
* `setEnding` - Set which ending page to display

***

## Event Triggers Reference

Event triggers execute actions in response to form events.

### Structure

```json theme={null}
{
  "id": "string (UUID)",
  "name": "string",
  "trigger": {
    "name": "formSubmitted" | "formLoaded" | "formPageShown"
  },
  "actions": [{
    "id": "string (UUID)",
    "name": "openUrl" | "restartForm",
    "data": { "url": "string" }
  }]
}
```

### Available Triggers

* `formSubmitted` - Triggered when form is successfully submitted
* `formLoaded` - Triggered when form initially loads
* `formPageShown` - Triggered when a form page is displayed

### Available Actions

* `openUrl` - Redirect to a URL
  * Requires `data.url` field
* `restartForm` - Restart the form from the beginning
  * No additional data required

***

## Internationalisation Reference

Set the form's language via `settings.i18n.language`. The server automatically injects the correct system message translations (button labels, placeholders, error messages) for the chosen language.

```json theme={null}
{
  "settings": {
    "i18n": {
      "language": "fr"
    }
  }
}
```

### Supported Languages

| Language              | Code      |
| --------------------- | --------- |
| Arabic                | `ar`      |
| Catalan               | `ca`      |
| Chinese (Simplified)  | `zh-Hans` |
| Chinese (Traditional) | `zh-Hant` |
| Croatian              | `hr`      |
| Czech                 | `cs`      |
| Danish                | `da`      |
| Dutch                 | `nl`      |
| English               | `en`      |
| Estonian              | `et`      |
| Finnish               | `fi`      |
| French                | `fr`      |
| German (Formal)       | `de`      |
| German (Informal)     | `di`      |
| Greek                 | `el`      |
| Hebrew                | `he`      |
| Hindi                 | `hi`      |
| Hungarian             | `hu`      |
| Indonesian            | `id`      |
| Italian               | `it`      |
| Japanese              | `ja`      |
| Korean                | `ko`      |
| Norwegian             | `no`      |
| Polish                | `pl`      |
| Portuguese            | `pt`      |
| Russian               | `ru`      |
| Spanish               | `es`      |
| Swedish               | `sv`      |
| Turkish               | `tr`      |
| Ukrainian             | `uk`      |
| Vietnamese            | `vi`      |

Note: German uses custom codes — `de` for formal ("Sie") and `di` for informal ("du").


# Identity API
Source: https://help.weavely.ai/developers/identity

Retrieve user profiles and team data using Weavely’s Identity API. Access identity details, list teams, and manage form access securely.

## Get profile

> GET api.weavely.ai/v1/profile

### Request

#### Headers

<ParamField type="string">
  `Bearer <token>`\
  Your personal token.
</ParamField>

### Response

<ResponseField name="id" type="string">
  The user's unique identifier.
</ResponseField>

<ResponseField name="name" type="string">
  The user's full name.
</ResponseField>

<ResponseField name="email" type="string">
  The user's email address.
</ResponseField>

## List teams

> GET api.weavely.ai/v1/teams

### Request

#### Headers

<ParamField type="string">
  `Bearer <token>`\
  Your personal token.
</ParamField>

### Response

<ResponseField name="totalItems" type="integer">
  The total number of teams available.
</ResponseField>

<ResponseField name="items" type="array">
  An array of team objects.
</ResponseField>

<ResponseField name="items[].id" type="string">
  The team's unique identifier.
</ResponseField>

<ResponseField name="items[].name" type="string">
  The team's name.
</ResponseField>

## List forms in a team

> GET api.weavely.ai/v1/teams/:teamId/forms

### Request

#### Headers

<ParamField type="string">
  `Bearer <token>`\
  Your personal token.
</ParamField>

#### Path Parameters

<ParamField type="string">
  The unique identifier of the team.
</ParamField>

#### Query Parameters

<ParamField type="boolean">
  If `true`, only returns forms that have a published version.
</ParamField>

### Response

<ResponseField name="totalItems" type="integer">
  The total number of forms available.
</ResponseField>

<ResponseField name="items" type="array">
  An array of form objects.
</ResponseField>

<ResponseField name="items[].id" type="string">
  The form's unique identifier.
</ResponseField>

<ResponseField name="items[].name" type="string">
  The form's name.
</ResponseField>


# Submissions API
Source: https://help.weavely.ai/developers/untitled-page

API endpoints that allow you to query form submissions.

## Get form submission

> GET api.weavely.ai/v1/form-submissions/:submissionId

Retrieves a single form submission by its ID, including the values submitted for each field.

### Request

#### Headers

<ParamField type="string">
  `Bearer <token>`\
  Your personal token.
</ParamField>

#### Path Parameters

<ParamField type="string">
  The unique identifier (UUID) of the submission.
</ParamField>

### Response

<ResponseField name="id" type="string">
  The submission's unique identifier (UUID).
</ResponseField>

<ResponseField name="data" type="object">
  The values submitted for each field, keyed by `field:{elementId}`.

  Values are typed according to the field's element type — strings for text/email/dropdown/radio answers, arrays for multi-select fields, URLs for file uploads and signatures, etc.
</ResponseField>

<ResponseField name="dateCreated" type="string">
  The date and time the submission was created, in ISO 8601 format.
</ResponseField>


# Webhooks API
Source: https://help.weavely.ai/developers/webhooks

Instantly deliver new form submissions to your endpoint using Weavely’s Webhooks API. Create, manage, and receive real-time webhook events easily.

## Create webhook

> POST api.weavely.ai/v1/forms/\[formId]/webhooks

### Request

#### Headers

<ParamField type="string">
  `Bearer <token>`\
  Your personal token.
</ParamField>

#### Parameters

<ParamField type="string">
  The ID of the form to attach the webhook to.
</ParamField>

#### Body

<ParamField type="string">
  The destination URL that will receive POST payloads when a form is submitted.
</ParamField>

### Response

<ResponseField name="id" type="string">
  The ID for the newly created webhook.
</ResponseField>

<ResponseField name="url" type="string">
  The URL you provided for receiving webhook events.
</ResponseField>

<ResponseField name="formId" type="string">
  The form ID this webhook is associated with.
</ResponseField>

## Delete webhook

> DELETE api.weavely.ai/v1/\[formId]/webhooks/\[webhookId]

### Request

#### Headers

<ParamField type="string">
  `Bearer <token>`\
  Your personal token.
</ParamField>

#### Parameters

<ParamField type="string">
  The ID of the form where the webhook is registered.
</ParamField>

<ParamField type="string">
  The ID of the webhook to delete.
</ParamField>

### Response

None

## Webhook payload

> Example of the JSON payload delivered to your webhook endpoint when a form is submitted:

```json theme={null}
{
  "formId": "01234567-89ab-cdef-0123-456789abcdef",
  "responseId": "fedcba98-7654-3210-fedc-ba9876543210",
  "dateCreated": "2025-05-23T14:28:00Z",
  "answers": [
    {
      "id": "a1b2c3d4-5678-90ab-cdef-1234567890ab",
      "value": "Sample text answer"
    },
    {
      "id": "0f1e2d3c-4b5a-6978-01fe-dcba98765432",
      "value": "Option A, Option C"
    }
  ]
}
```


# How to Apply Brand Styling to Your Forms with AI
Source: https://help.weavely.ai/features/ai-branding

Learn how to create branded forms with AI in seconds. Weavely automatically extracts your brand colors, fonts, and logo from any URL. 

Weavely makes it easy to create forms that match your brand identity automatically. Simply ask the AI to style your form according to any brand, and it will extract the colors, fonts, and visual elements to create a professional, on-brand form in seconds.

<iframe title="YouTube video player" />

## How to Brand Your Form

1. **Create or open a form** in the Weavely editor
2. **Ask the AI to apply your branding** using natural language

### Example Commands:

* `Brand this form according to mywebsite.com`
* `Style this to match nike.com`
* `Apply the Coca-Cola brand to this form`
* `Make this look like Stripe's website`

## What Gets Styled?

When you apply brand styling, the AI updates:

* **Colors** - Buttons, backgrounds, and accents
* **Fonts** - Headers and body text
* **Logo** - Automatically added to your form
* \*\*Banner visual - \*\*if detected on your website visuals are used for your form's banner

<Warning>
  While we support 44 million brands, some brands may not be in our database yet. Our system updates regularly to include new brands.
</Warning>


# Animations
Source: https://help.weavely.ai/features/animations



Adding animations is a quick way to make your form feel more polished and a bit more fun than your average Google Form. In Weavely, there are two ways to do it: **GIFs** (uploaded as regular images) and **Lottie animations** (uploaded as JSON files). This article covers both.

<iframe title="YouTube video player" />

## GIF vs Lottie: which one should you use?

<Info>
  **GIFs** are the easiest option — upload the file like any image and you're done. Best for memes, screen recordings, or animations you already have. **Lottie animations** are vector-based, scale without losing quality, and tend to look more premium. File sizes are smaller and they're the format used by most modern animation libraries.
</Info>

If you have a specific GIF you want to use, go with that. If you're choosing fresh, Lottie usually looks better.

## How to add a GIF to your form

<Frame>
  <img alt="Gif Weavely Ezgif Com Optimize (1)" />
</Frame>

<Steps>
  <Step title="Add an Image element to your form">
    Insert a new Image element wherever you want the animation to appear.
  </Step>

  <Step title="Upload your GIF">
    Upload the GIF file the same way you'd upload any image.
  </Step>

  <Step title="Adjust the size">
    The default size may be too large. Setting the width to around **300 pixels** works well for most forms.
  </Step>

  <Step title="Align and position it">
    Set the alignment to centered (or wherever you want it), then drag it into place. You can also ask Weavely's AI to move it for you — for example: *"move the image to the top of the form"*.
  </Step>
</Steps>

The GIF will play automatically when someone views your form.

## How to add a Lottie animation to your form

Weavely already includes a built-in Lottie animation on the confirmation screen — the checkmark shown after someone submits the form. You can replace this with any other Lottie animation, or add Lottie animations elsewhere in your form the same way you'd add an image.

<Steps>
  <Step title="Find a Lottie animation">
    [LottieFiles.com](https://lottiefiles.com) is the main library, with thousands of free animations. Use the search bar to find something relevant to your form (e.g., "cookie," "celebration," "checkmark"), then filter by **Free** to exclude premium animations. Other sources like IconScout also have Lottie animations available.
  </Step>

  <Step title="Download the JSON file">
    <Warning>
      Lottie files come in several formats, but Weavely needs the **Lottie JSON** specifically. On LottieFiles, open the download options and select **Lottie JSON**.
    </Warning>
  </Step>

  <Step title="Add a Lottie element to your form">
    <Frame>
      <img alt="Screenshot showing how to add a lottie animation to a Weavely AI form." />
    </Frame>

    Insert a new Lottie element wherever you want the animation to appear. Upload the JSON file the same way you'd upload an image.
  </Step>

  <Step title="Adjust the size">
    By default, the animation may be set to **fill** the available space, which can be too large. Set a specific size (around **300 pixels** works for most cases) until it looks right.
  </Step>
</Steps>

## Where to put your animations

A few common placements that work well:

* **Welcome screen**: set the tone before people start filling out your form
* **Between sections**: break up longer multi-step forms
* **Confirmation/thank you screen**: replace the default checkmark with something on-brand
* **Next to specific questions**: add personality or visual context


# Using Answer Piping in Weavely
Source: https://help.weavely.ai/features/answer-piping

Learn how to use answer piping in AI forms and surveys with Weavely. Create dynamic fields for personalized, custom user experiences.

Answer piping, also known as dynamic fields or response piping, lets you reuse answers from earlier questions in your form. This makes your surveys feel more personal and dynamic, and it works seamlessly across both standard forms and quiz mode in Weavely. Here's how to use this feature in your forms.

<iframe title="YouTube video player" />

## What Is Answer Piping?

Answer piping allows you to insert a previous answer into another question or block of text. For example, if your form asks a user for their name, you can reference that name in later questions or confirmation messages like:

> “How are you doing, *\[Name]*?”

<img alt="Screenshot2025 10 24at09 58 26 Web" />

In quiz mode, you can also pipe dynamic quiz scores into your final screen or custom messages.

## How to Set It Up

1. **Add your questions** to the form as usual.
2. In any subsequent question or text block where you want to reuse an answer, type the `@` symbol.
3. A dropdown will appear with all previous questions and (if quiz mode is enabled) quiz score variables.
4. Select the field you want to reference.

<img alt="Answer Piping Helpdesk Gi" />

That’s it! Weavely will automatically update the placeholder with the actual response provided by the user.

## Real-Time Behavior

* If the referenced answer is on the **same screen**, an underscore placeholder (`_`) is shown initially and is updated in real-time as the user types.
* If the referenced answer is on a **previous screen**, users will immediately see the filled-in response.

## Quiz Mode Compatibility

In [**quiz mode**](/features/quizzes), you can also pipe dynamic quiz scores into later messages or questions. After enabling quiz mode in the form settings, additional variables like `@QuizScore` will appear in the dropdown.

## Example

* **Question 1**: “What’s your name?”
* **Question 2**: “How are you doing, `@What’s your name?`?”

If the respondent types “Alex” in Q1, Q2 will display: “How are you doing, Alex?”

## Final Notes

Answer piping works in:

* Questions
* Descriptive text blocks
* [Email notifications](/integrations/email-notifications)


# Closing a Form
Source: https://help.weavely.ai/features/closing-a-form



Gathered all the responses that you needed for your form or survey? Here is how to close your form for new submissions:

<Steps>
  <Step title="Navigate to your form's settings">
    <Frame>
      <img alt="Screenshot showing how to navigate to the settings of a Weavely form." />
    </Frame>

    Open your form from the Weavely dashboard, navigate to the "**Settings"** tab at the top of the editor.
  </Step>

  <Step title="Open the Access settings">
    <Frame>
      <img alt="Screenshot showing how to close a form in Weavely AI forms." />
    </Frame>

    Under the "**Access**" sub menu, you'll find a "**Close form**" toggle. This allows you to control whether the form accepts new responses.
  </Step>
</Steps>

When you close a form for new submissions new respondents will be greeted with a screen such as the one shown below.

<Frame>
  <img alt="Screenshot showing a closed Weavely AI form." />
</Frame>


# How to Create Multi-Language Forms in Weavely
Source: https://help.weavely.ai/features/create-multi-language-forms

Learn how to translate your form into multiple languages with AI. Weavely automatically translates all form content (e.g. questions, descriptions, and options) so respondents can fill in your form in their preferred language.

Create multilingual forms that your respondents can fill in their preferred language. Weavely's AI automatically translates all your form content (e.g. questions, descriptions, and option labels) so you can reach a wider audience without any manual translation.

<iframe title="YouTube video player" />

## What Are Multi-Language Forms?

Multi-language forms let you add additional languages to a single form. When you add a language, Weavely's AI automatically translates all of your form content into that language. Respondents can then switch languages using a language dropdown at the top of the form.

This means you manage one form, collect all responses in one place, and let each respondent fill it in the language they're most comfortable with.

<Info>
  **Note:** This feature is different from the form language setting. The form language setting (available on the free tier) only translates Weavely's built-in system messages like button text and error messages. Multi-language forms translate your actual content: questions, descriptions, option labels, and everything else your respondents see. See [How to Change Your Form Language](/features/form-language) for more on that setting.
</Info>

<Warning>
  **Pricing:** Multi-language forms are available on the Pro plan (€20/month).
</Warning>

## How to Translate Your Form into Multiple Languages

1. Open your form in the Weavely editor
2. Navigate to **Settings** in the top menu
3. Under the **Language** section, you'll see the option to add languages as translations
4. Select a language from the dropdown, a wide range of languages are supported
5. Press **Translate**
6. Weavely's AI will generate translations for every question, description, and option label in your form
7. Review the translations on the screen and edit anything you'd like to adjust
8. Save your translations

You can add multiple languages by repeating this process. Each language gets its own full translation of your form content.

<Frame>
  <img alt="Screenshot showing how to add an additional language in Weavely AI multi-language forms." />
</Frame>

### Using AI to Add Translations

You can also ask Weavely's AI to handle the form translation through the chat interface. For example, *"Translate my form into French and Spanish."* The manual settings option is there if you prefer to do it yourself or want to review each translation in detail.

## How Respondents Switch Languages

Once you've published your multilingual form, respondents will see a language dropdown at the top of the form. They can switch between any of the languages you've added, on any page, at any time.

All form content updates instantly when they switch: questions, descriptions, option labels, radio buttons, and system messages are all displayed in the selected language.

<Frame>
  <img alt="Screenshot showing how respondent changes languages in a multi-language form built in Weavely AI." />
</Frame>

### Automatic Browser Language Matching

You can also enable **match browser language** so your form automatically displays in the respondent's browser language. For example, if a respondent's browser is set to French and you've added a French translation, they'll see the French version when they open the form — no manual switching needed.

## Reviewing and Editing Translations

After AI translation, you can edit any translated text directly. If a translation doesn't quite match the tone or terminology you want, simply update it in the translation editor.

You can also come back to edit translations at any time through **Settings > Language**.

<Frame>
  <img alt="Screenshot showing how to edit AI form translations in Weavely AI." />
</Frame>

## Updating Translations After Form Changes

If you add new questions or make changes to your form after translating, Weavely will flag that an update is required under the language settings. You have two options:

* **Manually translate** the new content in the translation editor
* **Re-run the AI translation** by removing and re-adding the language, which will automatically include the new content

**Tip:** For the smoothest workflow, finalize your form content before adding translations. This way you only need to translate once.

## Where to Find Responses

All responses are collected in one place, regardless of which language the respondent used. There's no need to check separate forms or merge data, you manage one form and one set of results.

## Frequently Asked Questions

### How do I translate a form into another language?

Open your form in Weavely, go to **Settings > Language**, and add a language from the dropdown. Press **Translate** and Weavely's AI will automatically translate all your form content: questions, descriptions, and option labels. You can review and edit translations before saving.

### What content does multi-language translation cover?

AI translation covers all form content: questions, descriptions, option labels in radio buttons and dropdowns, and system messages. Everything your respondents see is translated automatically.

### How do respondents switch languages on the form?

Respondents see a language dropdown at the top of the form. They can switch between languages on any page, at any time, while filling in the form.

### Can the form automatically match the respondent's browser language?

Yes. You can enable the "match browser language" option so respondents automatically see the form in their browser's language when they open the form URL.

### Are responses collected separately for each language?

No. All responses are collected in one place regardless of which language the respondent used. You manage a single form and a single set of results.

### What happens if I add new questions after translating?

Weavely will flag that an update is required. You can either manually translate the new content or re-run the AI translation to include the new questions. Ideally, translate your form once it's finalized.

### Is this feature free?

Multi-language forms are available on the Pro plan (€20/month). The free tier includes the [form language setting](/features/form-language), which translates system messages only.


# How to Share Weavely Forms on a Custom Domain
Source: https://help.weavely.ai/features/custom-domain

Learn how to setup custom domains for your AI-generated forms in Weavely.ai

Weavely allows Pro users to share forms under their own custom domain, making it easy to create a branded and personalized form-sharing experience. Instead of sending out a generic `forms.weavely.ai` link, you can use a domain you own. For example, `feedback.yourcompany.com`.

## Step 1: Set Up Your CNAME Record

You'll first need to configure your DNS provider (e.g. GoDaddy, Namecheap, etc.) to point your subdomain to Weavely.

Create a **CNAME record** with the following settings:

* **Name:** `feedback` (or whatever subdomain you chose)
* **Target:** `proxy.weavely.ai`

This will route traffic from your subdomain to Weavely’s servers.

Once that’s done, you'll need to finalise the setup inside of Weavely.

## Step 2: Add Your Custom Domain in Weavely

To get started, go to **Settings → Team Settings** in your Weavely dashboard. Scroll to the **Custom Domain** section.

Enter the domain or subdomain you'd like to use (e.g. `feedback.mycompany.com`) and press **Add Custom Domain**. Weavely will then check whether your DNS settings are correctly configured.

## Step 3: Share Forms Using Your Custom Domain

Once your custom domain is connected, you can begin using it to share your forms.

Just replace the default domain (`forms.weavely.ai`) with your custom one, keeping the form ID the same.

For example:

* Default: `https://forms.weavely.ai/abc123`
* Custom: `https://feedback.mycompany.com/abc123`

This gives your users a more seamless, branded experience.


# How to Embed a PDF in a Weavely Form
Source: https://help.weavely.ai/features/embed-pdf

Learn how to embed a PDF in your forms with Weavely AI. Perfect for surveys, feedback forms, or custom data collection with embedded content.

You can embed a PDF directly into your Weavely form, allowing users to view documents like product specs, guides, or legal disclaimers without leaving the form experience. This tutorial walks you through embedding a PDF from Google Drive and optimizing how it's displayed in your form.

<iframe title="YouTube video player" />

<Steps>
  <Step title="Upload the PDF to Google Drive" icon="file-doc">
    If you haven't already, upload your PDF to [Google Drive](https://drive.google.com). Open the PDF by double-clicking and select \*\*"Open in new tab" \*\*from the three-dot menu. Within this new tab, click the three-dot menu (it's weird we know) and choose **"Embed item"**.

    <img alt="Animated screenshot showing how to get an embeddable iframe code from a PDF hosted on Google Drive" />

    Copy the HTML `<iframe>` code provided by Google, which we'll use in the next step.

    <Warning>
      Make sure the sharing permissions are set to **“Anyone with the link can view”**. Without this, the embed will not load in your form.
    </Warning>
  </Step>

  <Step title="Embed in Weavely" icon="code">
    In your Weavely form, add an **Embed HTML** element. Open the element's settings pane and copy-paste the `<iframe>` code from the first step. Once published, your PDF will appear directly inside the form, and users can preview it without leaving the page. They can also click the pop-out button in the PDF viewer to open it full screen.

    <img alt="Animated screenshot showing how to embed a PDF into a Weavely AI form" />

    <Tip>
      We suggest you set both the width and height in the `<iframe> `code to 100% to ensure it fills the container.
    </Tip>
  </Step>

  <Step title="Improve the PDF Display" icon="palette">
    If the embedded PDF appears too small or scroll-heavy, you can adjust the layout. Go to the **Theme Editor** in Weavely. Under **Advanced Settings**, increase the **Form Width** to give the PDF more space and add the following **Custom CSS** to adjust the aspect ratio:

    ```css theme={null}
    .embed-html {
        width: 100%;
        height: 100%;
        aspect-ratio: 1 / 1;
        background: var(--surface-color);
        overflow: auto;
    }
    ```

    <img alt="Animated screenshot showing how to change the appearance of an embedded pdf in Weavely AI " />
  </Step>
</Steps>


# Embedding Your Form on a Website
Source: https://help.weavely.ai/features/embeddings

Need your form to be integrated into a website? Here's how!

<iframe title="YouTube video player" />

So you’ve crafted the perfect Weavely form and now you want to drop it into your website.  

Good news: it takes *two* tiny snippets and about 90 seconds of effort,whether you want the form **embedded right in the page** or **popping up on cue**.  You'll find both options under the *Share* tab while editing your form.

<img alt="Screenshot showing where to find the embedding options in Weavely AI" />

## Option 1: Embedded Form

**What is it:** The form lives *inside* the page layout. Like a regular section, card, or sidebar.

**Why you'd use it:** Great for contact pages, product wait-lists, or anywhere you want the form to feel native to the flow of the content.

To embed a form into a website you'll need to complete two steps. First, paste the Weavely.ai *\<script>* into your website's *\<head>* section. Second, add the given \_\<div> \_into your website. The position of this *\<div>* on your website will determine its location.

<img alt="Screenshot showing the embed configuration of a form in Weavely AI" />

## Option 2: Popup Form

**What is it:** The form lives *inside* the page layout. Like a regular section, card, or sidebar.

**Why you'd use it:** Great for contact pages, product wait-lists, or anywhere you want the form to feel native to the flow of the content.

Creating a popup form happens in three steps. First, paste the Weavely.ai *\<script>* into your website's *\<head>* section. Second, customise when and how the popup appears. Second, add the given \_\<div> \_into your website. The position of this *\<div>* on your website will determine the popup's location.

<img alt="Screenshot showing the configuration of a popup form in Weavely AI" />


# Event Triggers: Reload or Redirect a Form After Submission
Source: https://help.weavely.ai/features/event-trigger

Learn how to automatically reload your form or redirect respondents to a custom URL after submission. Perfect for kiosks, landing pages, post-survey workflows.

<iframe title="YouTube video player" />

Weavely makes it easy to define what happens after someone submits your form. Whether you want the form to reset for the next respondent (like in a kiosk setup) or redirect users to a specific URL (such as a thank-you page or your website), you can configure this using **Event Triggers** in the Logic tab.

This guide walks you through both options.

## Reloading the Form After Submission

This is useful for public kiosks, feedback stations, or in-person setups where the form should reset automatically for the next user.

### Steps:

1. Open your form in the editor.
2. Navigate to the **Logic** tab at the top.
3. Scroll down to **Event Triggers** and click **+ Create Event Trigger**.
4. In the first dropdown ("When..."), select `Form is submitted`.
5. In the second dropdown ("Then..."), choose `Restart form`.
6. Click **Create Event Trigger** and **Publish**.

<img alt="Animated screenshot showing how to create an event trigger in Weavely AI" />

Now, when someone submits the form, it will reload to its initial state immediately.

## Redirecting to a URL After Submission

You can also send respondents to another page—perfect for thank-you messages, next steps, or even special offers.

### Steps:

1. Head to the **Logic** tab of your form.
2. Under **Event Triggers**, create a new trigger.
3. Set the trigger condition to `Form is submitted`.
4. Choose the action `Open URL`.
5. Enter the destination URL (e.g. `https://yourdomain.com/thank-you`).
6. Select whether the redirect should happen in the same tab or a new one.
7. Click **Create Event Trigger** and **Publish**.

<img alt="Animated screenshot showing how to create a redirect event in Weavely AI" />

When users complete the form, they'll be redirected automatically to the URL you provided.

## Other Events

Any of the two aforementioned actions can also be triggered whenever:

* The form is loaded
* A specific page in the form is shown


# Field Validation
Source: https://help.weavely.ai/features/field-validation

Learn how to validate text, number, email, phone, URL, date, and time inputs so you never end up with bad data.

Weavely lets you set validation rules on every field where respondents can type freely. This ensures you only collect clean, correctly formatted data. No more garbage responses to clean up later.

This guide covers validation options for each input type and shows you how to use custom patterns (with help from AI) for advanced rules.

<iframe title="YouTube video player" />

## Text inputs (short and long)

<Frame>
  <img alt="Screenshot showing field validation for text fields in Weavely AI." />
</Frame>

Short text and long text fields share the same validation options.

**Min / max length**

Set a minimum and maximum character count to control the length of responses. This is useful when you need answers within a specific range — for example, requiring at least 10 characters for a feedback field or capping a field at 100 characters.

**Custom pattern (regex)**

For more specific validation, you can define a custom pattern using regular expressions. This lets you enforce rules like "must start with a specific word" or "must follow a particular format."

<Tip>
  Don't know how to write regular expressions? No problem, just describe what you want in the AI chat and Weavely will generate the pattern for you.
</Tip>

### Example: require text to start with "hello"

<Steps>
  <Step title="Describe your rule to the AI">
    In the Weavely AI chat, type something like: *"All of the inputs in the long text input question should start with hello in order to be valid."*
  </Step>

  <Step title="AI generates the regex pattern">
    Weavely's AI creates a regular expression and automatically fills it into the custom pattern field for that question.
  </Step>

  <Step title="Test it in preview">
    Open the form preview and try submitting a response that doesn't start with "hello" — you'll see a "please enter valid format" error. Now change your input to start with "hello" and submit again. This time it goes through.
  </Step>
</Steps>

***

## Number input

<Frame>
  <img alt="Screenshot showing field validation for numeric values in Weavely AI." />
</Frame>

Number fields validate the **actual value** (not the number of digits).

**Min / max value**

Set a minimum and maximum accepted value. For example, you could require a number between 1 and 100.

**Custom pattern (regex)**

Just like text fields, you can specify a pattern for numeric inputs. This is useful for things like ID numbers or account numbers that must follow a specific format.

### Example: require numbers starting with "91"

<Steps>
  <Step title="Describe your rule to the AI">
    In the AI chat, type something like: *"A response is only valid if it starts with 91 and then anything after that."*
  </Step>

  <Step title="AI generates the pattern">
    The AI creates a regex and sets it in the pattern field for your number input.
  </Step>

  <Step title="Test it in preview">
    In the form preview, enter a number like `10` and submit — you'll get an error. Now enter `911` and submit — it goes through successfully.
  </Step>
</Steps>

***

## Email input

<Frame>
  <img alt="Screenshot showing field validation for email values in Weavely AI." />
</Frame>

Email fields come with **built-in validation** — the input must contain an `@` symbol to be accepted. No configuration needed.

**Custom pattern (regex)**

You can add a pattern to further restrict which emails are accepted. For example, if you only want to allow Gmail addresses, describe that rule to the AI and it will generate the appropriate pattern.

***

## Phone number input

<Frame>
  <img alt="Screenshot showing field validation for phone values in Weavely AI." />
</Frame>

Phone number fields require a **country code** to be valid. If a respondent enters just their phone number without the country code (e.g. `+1`, `+44`, `+32`), the form will reject it.

**Custom pattern (regex)**

You can further restrict phone inputs by specifying a pattern — for instance, only accepting numbers from a specific country code.

***

## URL input

<Frame>
  <img alt="Screenshot showing field validation for URL values in Weavely AI." />
</Frame>

URL fields require the input to start with `http://` or `https://` followed by the rest of the address. Entering just a domain name like `weavely.ai` without the protocol will be rejected.

**Min / max length and custom pattern**

You can also set length restrictions and custom patterns on URL fields. For example, you could restrict inputs to only `.com` domains.

***

## Date and time inputs

<Frame>
  <img alt="Screenshot showing field validation for date values in Weavely AI." />
</Frame>

**Date input**

Set a minimum and maximum date to define an acceptable date range. This is useful for booking forms, event registrations, or any scenario where responses must fall within a specific window.

**Time input**

Set a minimum and maximum time to restrict which times are valid. For example, you could limit a booking form to only accept times between 9:00 AM and 5:00 PM.

***

## Quick reference

| Field type | Built-in validation          | Configurable options           |
| ---------- | ---------------------------- | ------------------------------ |
| Short text | —                            | Min/max length, custom pattern |
| Long text  | —                            | Min/max length, custom pattern |
| Number     | —                            | Min/max value, custom pattern  |
| Email      | Must contain `@`             | Custom pattern                 |
| Phone      | Requires country code        | Custom pattern                 |
| URL        | Must start with `http(s)://` | Min/max length, custom pattern |
| Date       | —                            | Min/max date                   |
| Time       | —                            | Min/max time                   |

<Info>
  For any field that supports a custom pattern, you can always ask the AI to generate the regular expression for you. Just describe the rule you want in plain English, no regex knowledge required.
</Info>


# How to Change Your Form Language in Weavely
Source: https://help.weavely.ai/features/form-language

Learn how to change your form language in Weavely. When you set a language, all system messages (e.g. button text, placeholders, and error messages) are automatically translated.

Make sure your form speaks your respondents' language. Weavely lets you change your form language so that all system messages (e.g. button text, placeholder text, and error messages) are automatically translated for you.

<iframe title="YouTube video player" />

## What Does the Form Language Setting Do?

When you set your form language, Weavely automatically translates all built-in system messages in your form. This includes:

* **Button text**: Submit, Next Page, Previous Page
* **Placeholder text**: "Type here...", "Select an option"
* **Validation and error messages**: "This field is required", "Please enter a valid email address"
* **Default option labels**: such as "Other"
* **File upload messages**: error and status text for file fields

Your own questions, descriptions, and option labels are **not** affected by this setting, only the system text that Weavely provides by default.

<Info>
  **Note:** This feature is different from multi-language forms. The form language setting translates Weavely's built-in system text. If you need to translate your custom questions and content into multiple languages, see [How to Create Multi-Language Forms](/features/create-multi-language-forms).
</Info>

## How to Change Your Form Language

1. Open your form in the Weavely editor
2. Navigate to **Settings** in the top menu
3. Click on the **Language** subsection
4. Select your desired language from the list
5. Your form's system messages are now automatically translated

Once you select a language, the changes take effect immediately. You'll see the updated button text, placeholders, and default options directly in the form editor.

<Frame>
  <img alt="Screenshot showing how to change form language in Weavely AI." />
</Frame>

### Using AI to Change the Form Language

You can also ask Weavely's AI to set the form language through the chat interface. For example, *"Set my form language to French."* The manual settings option is there if you prefer to do it yourself or want to know where the setting lives.

## Editing Translated System Messages

If you're not happy with a translation or want to use specific wording, you can manually edit any system message directly in the form editor. Simply click on the text you want to change, update it, and the form will reflect your edit.

This gives you full control! Use the automatic translation as a starting point, then fine-tune any text to match your exact needs.

<Frame>
  <img alt="Screenshot showing how to adapt automatic form language translations in Weavely AI" />
</Frame>

## Frequently Asked Questions

### What does changing the form language do?

It automatically translates all of Weavely's built-in system messages: button text (Submit, Next Page, Previous Page), placeholder text, validation and error messages, and default option labels. Your own questions and custom content are not affected.

### Does the form language setting translate my custom questions?

No. The form language setting only translates Weavely's built-in system text. To translate your own questions, descriptions, and option labels into multiple languages, use the multi-language forms feature instead.

### Can I edit the translated system messages?

Yes. After setting your form language, you can manually edit any of the translated system messages directly in the form editor if you want to adjust the wording.

### Can I ask Weavely's AI to change the form language?

Yes. You can ask the AI to set your form language through the chat interface, or you can change it manually in the form language settings.


# Lead Qualification
Source: https://help.weavely.ai/features/lead-qualification

Use Weavely's AI to build a form that scores each respondent and sorts them into bands like cold, warm, and hot leads.

<iframe title="YouTube video player" />

A lead qualification form assigns a **single score** to each respondent based on their answers, then sorts them into bands. For example cold, warm, or hot, and can show a different ending depending on the score.

<Note>
  Want to sort respondents into categories instead of scoring them (e.g. a personality quiz or product-match finder)? See [Build a match quiz](/features/match-quiz).
</Note>

## Steps

<Steps>
  <Step title="Describe the form you need">
    On the landing page or in the product, describe the form and what you're trying to learn. The more specific the prompt, the better the questions.

    ```text theme={null}
    I need a lead qualification form for my sandal business.
    I want to know how likely someone is to buy a sandal.
    ```

    Press **Generate form**.
  </Step>

  <Step title="Review the questions Weavely generated">
    Weavely writes the questions *and* sets up the scoring automatically. For the sandal example, it produced three questions: whether the person is interested in buying new sandals, the occasions they'd wear them, and their budget. Each with answers that score differently depending on how hot or cold the lead is.

    <Frame>
      <img alt="Screenshot of a lead qualification form generated by Weavely AI" />
    </Frame>
  </Step>

  <Step title="Check how the scoring is wired up">
    <Frame>
      <img alt="Screenshot showing how leads can be scored and qualified in Weavely AI" />
    </Frame>

    Open **Settings → Lead qualification**. Here you'll find:

    * The **outcomes** (e.g. cold, warm, hot) and the **score** required to reach each one.
    * The **score for every individual answer**, which Weavely's AI set for you.

    <Tip>
      You can tweak any of this by hand to fine-tune the scoring, correct anything that isn't quite right, or add more outcomes.
    </Tip>
  </Step>

  <Step title="Capture the respondent's email">
    To follow up with leads, add an email field — for example by asking Weavely to *also capture email from respondents*. The email field isn't scored (you can't score an email address), but it gives you a way to contact the lead.
  </Step>

  <Step title="Publish and test">
    Publish the form and copy the URL. Fill it in yourself to see the result. In the sandal example, answering "very interested", "beach", and a budget over €100 returns a **warm lead** with a total score of **7**, shown on the ending screen.
  </Step>

  <Step title="Review responses">
    In **Results**, each submission shows the respondent's email, the answers they gave, and their outcome and total score.

    <Frame>
      <img alt="Screenshot showing lead qualification results in Weavely AI." />
    </Frame>
  </Step>
</Steps>

<Tip>
  If you only want a score and not a different ending per band, you have two options:

  * Delete the outcomes from the outcomes page, or
  * Ask Weavely AI to **harmonize** the endings, so every respondent sees the same ending text regardless of their answers.
</Tip>


# Match Quiz
Source: https://help.weavely.ai/features/match-quiz

Use Weavely's AI to build a quiz that weights each answer and sorts respondents into categories. Ideal for personality quizzes and product-match finders.

<iframe title="YouTube video player" />

A match quiz sorts respondents into **categories** based on their answers. Instead of one score, each answer carries **weights** toward different outcomes, and the outcome with the most points is the one the respondent sees. It's the format behind personality quizzes and "which product should you buy" finders.

<Note>
  Want a single score per respondent instead (e.g. cold, warm, hot leads)? See [Build a lead qualification form](/features/lead-qualification).
</Note>

## Steps

<Steps>
  <Step title="Describe the quiz you want">
    Describe the quiz and the categories people should be sorted into. The more specific the prompt, the better the questions and outcomes.

    ```text theme={null}
    I want a personality quiz which assigns people to one of the
    four Harry Potter houses based on their traits.
    ```

    Another common use is an e-commerce product finder that recommends a different product depending on the answers. Press **Generate form**.
  </Step>

  <Step title="Review the questions and outcomes">
    Weavely generates the questions *and* the outcomes, in this case, one outcome per Harry Potter house, then wires up the weighting.

    <Frame>
      <img alt="Generated match quiz questions and outcomes in Weavely AI" />
    </Frame>
  </Step>

  <Step title="Check how the weighting is wired up">
    Open **Settings → Match quiz**. Unlike a lead qualification form, there's no single score per answer. Instead, each answer carries a **weight** toward one or more outcomes. For example, "bravery" might be a point for Gryffindor, while "ambition" is a point for Slytherin. A single answer can carry weight toward several outcomes at once, bravery could add a point to both Gryffindor *and* Hufflepuff.

    <Frame>
      <img alt="Match quiz weighting settings in Weavely AI" />
    </Frame>

    <Tip>
      Weavely's AI assigns weights for every question and answer automatically. Adjust or add weights to fine-tune which answers point to which outcome.
    </Tip>
  </Step>

  <Step title="Publish and test">
    Publish the form and fill it in. As a respondent moves through the quiz, they accumulate points toward each outcome, and the highest-scoring outcome is shown at the end.
  </Step>

  <Step title="Review responses">
    <Frame>
      <img alt="Screenshot showing results of a match quiz in Weavely AI" />
    </Frame>

    In **Results**, you'll see each respondent's answers and the outcome they were matched to.
  </Step>
</Steps>


# Password Protection
Source: https://help.weavely.ai/features/password-protection



Need to ensure that only a select group of people can fill in your form or survey? Weavely allows you to password protect your form. Here's how to enable this:

<Steps>
  <Step title="Navigate to your form's settings">
    <Frame>
      <img alt="Screenshot showing how to navigate to the settings of a Weavely form." />
    </Frame>

    Open your form from the Weavely dashboard, navigate to the "**Settings"** tab at the top of the editor.
  </Step>

  <Step title="Open the Access settings">
    <Frame>
      <img alt="Screenshot showing how to enable password protection in Weavely AI forms." />
    </Frame>

    Under the "**Access**" sub menu, you'll find a "**Password protect**" toggle. When enabled you'll be able to specify the password which respondents need to enter to continue to your form
  </Step>
</Steps>

When you password protect your form, visitors will be greeted with a screen such as the one shown below.

<Frame>
  <img alt="Screenshot showing a password protected Weavely form." />
</Frame>


# Payments
Source: https://help.weavely.ai/features/payments

Learn how to create a donation, purchase, or subscription form with Weavely AI and Stripe.

Weavely integrates with [Stripe](https://stripe.com) so you can collect payments directly through your forms. This works for one-time donations, single purchases, and recurring subscriptions.

<Info>
  You'll need a Stripe account to accept payments. If you don't have one yet, you can [create one here](https://dashboard.stripe.com/register).
</Info>

<iframe title="YouTube video player" />

## How it works

When a respondent submits your form, they're redirected to a Stripe checkout page to complete the payment. Once payment succeeds, they're sent back to your form's success page. The money goes directly into your Stripe account, it never passes through Weavely.

## Create a payment form

<Steps>
  <Step title="Generate your form with AI, set it to &#x22;Payment Form&#x22; mode">
    Describe the form you need in the prompt box. For example: *"I need a donation form for my pet adoption center"*.

    Weavely AI will generate all the relevant fields for you, including the payment amount field, contact details, and success/error pages.

    <Frame>
      <img alt="Screenshot showing how to enable payments in Weavely AI forms." />
    </Frame>

    \
    Most importantly, AI will automatically enable the "Payment Form" form mode for you in your form's settings. You can also do this manually. 
  </Step>

  <Step title="Connect your Stripe account">
    Go to your form's **Settings → Payment**  and click **Connect** to link your Stripe account.

    <Frame>
      <img alt="Screenshot showing how to connect your Stripe account in Weavely AI." />
    </Frame>

    You'll be asked to select which Stripe account to connect and grant the necessary permissions. Weavely has been vetted by Stripe — the integration only creates payments on your behalf and sends the money directly to your account.
  </Step>

  <Step title="Configure your payment type">
    After connecting Stripe, choose your payment type:

    <Tabs>
      <Tab title="Donation">
        Select **Donation** as the payment type. This is the right option if you're a non-profit, donations are taxed at a lower rate by Stripe.

        <Frame>
          <img alt="Configuring the payment options of a donation form in Weavely AI." />
        </Frame>
      </Tab>

      <Tab title="Purchase">
        Select **Single purchase** for one-time product or service payments.

        <Frame>
          <img alt="Configuring the payment options of a purchase form in Weavely AI." />
        </Frame>
      </Tab>

      <Tab title="Subscription">
        Select **Subscription** for recurring payments. Stripe will handle the billing cycle automatically.

        <Frame>
          <img alt="Configuring the payment options of a subscription form in Weavely AI." />
        </Frame>
      </Tab>
    </Tabs>

    Give your payment a name and choose the currency, then choose how the amount is determined:

    * **Fixed amount**: Every respondent pays the same amount. You set the amount.
    * **Variable amount**: The amount is pulled from a numerical field in your form (e.g. a "Donation amount" field the respondent fills in).

    <Note>
      For variable amounts, the field must be a **numerical field**. Text fields won't work as a payment amount source.
    </Note>

    Finally, set the billing interval for the subscription

    Click **Save** when you're done.
  </Step>

  <Step title="Publish and share">
    Hit the **Publish** button. You'll get a shareable URL you can send to respondents. You can also embed the form on your website as a standard embed or as a pop-up.
  </Step>
</Steps>

## Viewing your payments

There are two places to check incoming payments:

* **In Weavely**: Go to the **Results** tab of your form. You'll see all submitted data, including whether each payment succeeded or failed, along with the payment amount.
* **In Stripe**: Log in to your [Stripe dashboard](https://dashboard.stripe.com) to see the payments in your account. This is where you'll manage refunds, payouts, and financial reporting.

<Tip>
  You can also send response data to [Google Sheets](/integrations/google-sheets) or other tools using the **Integrations** tab. This is useful for keeping a live record of all donations or purchases.
</Tip>


# How to Download Form Responses as PDF in Weavely
Source: https://help.weavely.ai/features/pdf-responses

Learn how to download your form responses as formatted PDF reports. Weavely generates a PDF for each submission, with questions, answers, signatures, and file uploads. Ready to save, share, or print.

Weavely lets you save the responses collected on your form as PDF files. There are two ways to do it, and the right one depends on whether your PDF needs to look exactly like your form or can be a simple summary.

<iframe title="YouTube video player" />

<CardGroup>
  <Card title="Match your form exactly">
    Export a single response as a PDF that mirrors your form's layout, banner, and branding — ideal for consent waivers, contracts, or anything you'll print or file.
  </Card>

  <Card title="Bulk download">
    Export many responses at once as plain question-and-answer PDFs. Faster, but not styled like your form.
  </Card>
</CardGroup>

<Note>
  Both options work from the **Results** view of your form, where every submission is listed as a row.
</Note>

## Choose your method

<Tabs>
  <Tab title="PDF that looks like your form">
    Use this when each PDF needs to match your form's exact design — for example, a photo consent waiver you want to store, print, or share. The result looks as if you took a snapshot of the completed form, with the same banner, fields, and submitted answers in place.

    <Steps>
      <Step title="Open your form's Results">
        <Frame>
          <img alt="Screenshot showing where to find form results in Weavely AI." />
        </Frame>

        Go to the form whose responses you want to export and open the **Results** view, where each submission appears as its own row.
      </Step>

      <Step title="Find the response you want and click the PDF icon">
        <Frame>
          <img alt="Screenshot showing how to download a form response as a branded PDF in Weavely AI" />
        </Frame>

        Locate the row for the response you'd like to save as a PDF. Select the **PDF icon** at the start of the result row. Weavely generates a PDF of that single response, filled in exactly as the person submitted it.
      </Step>

      <Step title="Save the file">
        <Frame>
          <img alt="Example PDF report exported from a form submission in Weavely AI." />
        </Frame>

        The downloaded PDF keeps your form's banner, fields, and styling, with the respondent's answers in each field.
      </Step>
    </Steps>

    <Warning>
      This export is generated one response at a time because rendering each PDF to match your form is resource-intensive. If you need many responses at once, use the **bulk download** method instead.
    </Warning>
  </Tab>

  <Tab title="Bulk download (many at once)">
    Use this when you want to export several responses quickly and don't need them styled like your form. Each PDF is stripped down to the essentials: the question name and the answer that was provided.

    <Steps>
      <Step title="Open your form's Results">
        <Frame>
          <img alt="Screenshot showing where to find results in Weavely AI." />
        </Frame>

        Open the **Results** view for your form.
      </Step>

      <Step title="Select the responses to export and open the download option">
        <Frame>
          <img alt="Screenshot showing where to bulk download PDF reports in Weavely AI." />
        </Frame>

        Check the responses you want a PDF for. You can select as many as you need. Under **Download**, switch to the **PDF** tab.
      </Step>

      <Step title="Choose how to package the files">
        Decide whether you want the responses combined into **one PDF file** or delivered as **separate PDF files**, then download.
      </Step>
    </Steps>

    <Info>
      Bulk PDFs use a clean, basic layout — just the question and the response data. They are **not** formatted to match your form's original design.
    </Info>
  </Tab>
</Tabs>


# How to Add a Progress Bar to Your Weavely AI Form
Source: https://help.weavely.ai/features/progress-bar

Use Weavely’s AI form builder to add a progress bar to multi-step, multi-page surveys and improve user experience.

Want to show your respondent where they are in your survey or form? Enable progress bars for your Weavely forms by following these steps:

<Steps>
  <Step title="Step 1: Enable &#x22;Show Progress Bar&#x22;" icon="bars-progress">
    Navigate to your form's "***Settings->General***" tab and toggle the "Show Progress Bar" option as shown below.

    <img alt="Screenshot showing how to enable progress bars in Weavely AI" />
  </Step>

  <Step title="Step 2: Customise the Progress Bar's Color (Optional)" icon="palette">
    The progress bar uses your form's "***Primary color***", which you can either change by opening the "Theme" panel on the right or asking our AI.

    <img alt="Screenshot showing a progress bar in a Weavely AI form" />
  </Step>
</Steps>


# How to Build Knowledge Quizzes with AI in Weavely
Source: https://help.weavely.ai/features/quizzes

Create interactive quizzes with AI using Weavely. Auto-score responses, show correct answers, and collect data seamlessly.

Weavely.ai makes it easy to create AI-generated quizzes that score user responses, display correct answers, and show live performance feedback. Here's how to set one up in minutes.

<iframe title="YouTube video player" />

<Steps>
  <Step title="Generate a Quiz with AI" icon="wand-magic-sparkles">
    To get started, head to [Weavely.ai](https://weavely.ai) and enter a prompt describing the quiz you need. For example:

    > "I need a quiz on European geography. Make it single page and just ask 4 questions."

    Weavely will automatically generate a basic quiz using AI, including multiple-choice and open-ended questions. You can customize the questions and look of the quiz from within the Weavely Editor. You can:

    * Add, delete, or modify questions.
    * Change the visual theme of your quiz (colors, fonts, layout).
    * Use drag-and-drop or AI styling to match your brand.

      <img alt="Screenshot2025 10 20at21 31 43 Web" />
  </Step>

  <Step title="Enable Quiz Mode" icon="toggle-large-on">
    Next you'll need to finalize the settings of your quiz. First, go to the **Settings** tab and **enable quiz mode.**

    <img alt="Screenshot2025 10 20at21 34 29 Web" />

    Second, for each question that requires it, you'll need to **assign a score** and specify **which answer is correct**. Without assigning a score, you won't be able to set correct answers.
  </Step>

  <Step title="Collect and View Results" icon="database">
    The results tab will contain all individual responses given by your respondents as well as their  scores and number of correct answers. Furthermore, you can also set up integrations with third-party tools to automatically transfer your data. Read our [Google Sheets integration tutorial](/integrations/google-sheets) as an example.
  </Step>

  <Step title="Publish and Share" icon="share-nodes">
    When you're ready, hit **Publish** and share your quiz as:

    * A standalone form (hosted on Weavely)
    * An embedded quiz on your site
    * A popup form on landing pages

    You can customize the domain and preview settings if needed. We have a dedicated tutorial on sharing which you can read [here](https://help.weavely.ai/get-started/sharing).
  </Step>
</Steps>

## 💡 Tip 1: Dynamically Show Quiz Scores

You can show the respondents their scores (for example on the ending screen) using Weavely's variable system. Concretely, any textual component in Weavely (e.g. a paragraph or a heading) can show variables. By typing "@" you're given a dropdown menu with variables to choose from.

<img alt="Screenshot2025 10 20at21 56 49 Web" />

## 💡 Tip 2: Show Immediate Feedback

Do you want respondents to see if their answers were correct \_after each page? \_In **Settings**, enable **Show correct answers after each page**. This is especially useful for learning assessments or interactive quizzes.

<img alt="Screenshot2025 10 20at22 06 17 Web" />

## Example Use Cases

Typical use cases for our interactive quizzes include the following:

* Education and e-learning assessments
* Internal knowledge checks
* Trivia and gamified marketing content

Don't let that limit your imagination though 😉


# Skip-Page Logic
Source: https://help.weavely.ai/features/skip-logic

Learn how to use conditional logic in Weavely to skip pages, hide or show form elements based on responses, and create dynamic, personalized surveys and forms.

<iframe title="YouTube video player" />

Weavely's powerful logic engine lets you dynamically control the flow of your forms and surveys. Whether you want to **skip pages**, **hide irrelevant questions**, or **only show certain elements based on previous answers**, Weavely makes it easy to build intelligent, responsive forms without writing code.

In this guide, we’ll walk through the basics of using **logic rules** in Weavely to create smarter form flows.

## Accessing the Logic Tab

Start by opening the form or survey you want to enhance. Once you're in the form editor, click on the **Logic** tab. This is where you’ll define all your conditional behavior.

<img alt="Screenshot showing where to find the logic tab in Weavely AI" />

Click **“Create Logic Rule”** to begin. Each logic rule follows an **IF → THEN** structure:

> *If certain conditions are met, then take a specific action.*

## Example: Skip to Page

Let’s say you want to route a respondent to a different page based on how they answered a question.

For example:

* **Question:** How easy did you find it to navigate with the AI?
* **Condition:** If the answer is **“Very difficult”**
* **Action:** Skip directly to **Page 2**

<img alt="Screenshot showing how to create a logic rule in Weavely AI" />

## Hiding Pages

If you don’t want to just skip ahead but want to **completely remove a page from the flow**, use the **“Hide Page”** action instead.

This is useful when a specific set of questions becomes irrelevant based on earlier answers.

## Showing or Hiding Specific Elements

Logic rules aren’t limited to full pages, you can also show or hide **individual questions**.

For example:

* You might want to hide the question **“How intuitive was the interface?”** if a user answered negatively to a previous question.
* Or only show a follow-up question if the user answered **“Very easy.”**

Simply:

* Create a new logic rule.
* Choose **“Show Element”** or **“Hide Element”** as the action.
* Set your condition (e.g., a specific response to a previous question).

<img alt="Screenshot showing how to hide questions in Weavely AI using logic rules " />

## Advanced Logic (Multiple Conditions and Actions)

Each logic rule can have:

* **Multiple conditions** (use “ANY” or “ALL” logic)
* **Multiple actions** (hide multiple questions, skip pages, etc.)

You can name your logic rules for clarity, and create **as many rules as needed** for one form. All active logic rules will work together to create a tailored, responsive experience for your respondents.


# How to Protect Your Forms from Spam with reCAPTCHA
Source: https://help.weavely.ai/features/spam-protection

Learn how to enable Google reCAPTCHA v3 spam protection in Weavely. Stop spam submissions and bot attacks with invisible reCAPTCHA

Protect your forms from spam submissions and automated bot attacks with Google reCAPTCHA v3. Weavely makes it easy to enable invisible spam protection that works in the background without disrupting your users' experience.

<iframe title="YouTube video player" />

## What is reCAPTCHA?

reCAPTCHA is Google's free spam protection service that helps you stop automated bots from submitting fake entries to your forms. Weavely uses reCAPTCHA v3, the latest invisible version that works silently in the background to analyze user behavior and automatically detect spam submissions without interrupting real users.

<img alt="Screenshot showing a Weavely AI form protected by Google's reCAPTCHA V3" />

## Why Use reCAPTCHA for Form Spam Protection?

Form spam can waste your time, clog your inbox, and affect your ability to identify real leads. Bot attacks and automated spam submissions can:

* Fill your inbox with fake entries and malicious links
* Waste time sorting through junk submissions
* Affect your conversion tracking and analytics
* Expose your site to security risks
* Damage your credibility with fake data

Weavely's reCAPTCHA integration provides invisible bot protection that stops spam at the source while maintaining a smooth user experience for legitimate visitors.

## How to Enable reCAPTCHA Spam Protection

<Warning>
  reCAPTCHA is a premium feature available on paid Weavely plans. Free tier users won't be able to enable this functionality. Upgrade to a paid plan to protect your forms from spam submissions.
</Warning>

### Using AI (Fastest Method)

Simply ask Weavely AI to enable reCAPTCHA protection on your form:

**Example Commands:**

* `Enable reCAPTCHA on this form`
* `Add spam protection`
* `Protect this form from bots`

### Manual Setup

1. Open your form in the Weavely editor
2. Click **Settings** in the top menu bar
3. Navigate to **Spam and Security**
4. Toggle on **Enable reCAPTCHA**
5. Publish your form

<img alt="Screenshot showing how to enable spam protection in Weavely AI using reCAPTCHA" />

That's it! Your form is now protected from automated spam submissions.

## How reCAPTCHA v3 Works

Unlike older CAPTCHA versions that require users to solve puzzles or click checkboxes, reCAPTCHA v3 works completely invisibly:

* **Automatic Detection**: Analyzes user behavior in the background without any interaction required
* **Risk Scoring**: Assigns each submission a spam score from 0.0 (bot) to 1.0 (human)
* **Smart Filtering**: Automatically blocks suspicious submissions while allowing legitimate users through
* **No Interruptions**: Real users never see challenges or puzzles, it just works

## Testing Your Spam Protection

After enabling reCAPTCHA, test your form to confirm it's working:

1. **Publish your form** to make it live
2. **Look for the reCAPTCHA badge** in the bottom of your form's last page (shows "protected by reCAPTCHA")
3. **Submit a test entry** with real information
4. **Check your responses** to confirm the submission went through

## Viewing Spam vs Regular Responses

Weavely automatically separates spam submissions from legitimate responses:

1. Navigate to your form's **Responses** page
2. You'll see two sections:
   * **Responses**: Legitimate submissions from real users
   * **Spam**: Entries flagged by reCAPTCHA as suspicious

<img alt="Screenshot showing where to find regular and spam submissions in Weavely AI." />

### Reviewing Spam Submissions

While reCAPTCHA is highly accurate, you can review spam entries to check for false positives:

* Click on the **Spam** tab to view flagged submissions
* Review entries to confirm they're actually spam

Google's reCAPTCHA system is very effective at distinguishing between real users and bots, so false positives are rare.

## Best Practices for Form Spam Protection

While reCAPTCHA provides excellent protection, here are additional tips to maximize your form security:

* **Enable reCAPTCHA on all public-facing forms**, especially contact forms, registration forms, and feedback forms
* **Monitor your spam folder regularly** to catch any false positives
* **Keep forms simple** - the fewer fields, the less attractive to spambots
* **Use required fields** strategically to ensure you get quality submissions
* **Consider email validation** for forms collecting email addresses

## Frequently Asked Questions

### Is reCAPTCHA free?

Yes, Google reCAPTCHA is free to use. However, enabling it in Weavely requires a paid plan subscription.

### Will reCAPTCHA slow down my form?

No. reCAPTCHA v3 is lightweight and runs in the background without affecting form performance or user experience.

### Can users see the reCAPTCHA?

Users will see a small "protected by reCAPTCHA" badge in the corner of your form, but they won't see any challenges or puzzles. The protection works invisibly.

### What happens if reCAPTCHA blocks a real user?

This is extremely rare with reCAPTCHA v3. If a legitimate submission is flagged as spam, you can review it in the Spam section and manually recover it.

### Does reCAPTCHA work on mobile devices?

Yes, reCAPTCHA v3 works seamlessly on all devices including mobile phones and tablets.

### Can I customize the reCAPTCHA appearance?

The reCAPTCHA badge position and appearance are controlled by Google to maintain consistency and trust. However, it's designed to be unobtrusive and blend with your form design.


# How to Style and Theme Forms in Weavely
Source: https://help.weavely.ai/features/theming

Learn how to customize form design using AI-powered styling and create reusable themes for your forms in Weavely.ai

Weavely gives you two ways to customize your form design: styling individual forms or creating reusable themes for your entire account. This guide covers both methods so you can build professional, branded forms efficiently.

<iframe title="YouTube video player" />

## Method 1: Styling Individual Forms

### Using AI to Style Your Form

The fastest way to customize your form design is by asking Weavely's AI to apply styling for you.

**Custom Colors**

Simply describe the colors you want in the chat. For example:

* "Make all the buttons black"
* "Use #FF5733 as the primary color"

The AI will instantly apply your color choices to the form.

**Brand Styling**

You can ask Weavely to automatically style your form based on any brand. Type something like:

* "Make this look like Coca-Cola"

The AI will prompt you for the brand's domain to confirm, then automatically fetch the logo, brand colors, fonts, and even banner images where available.

<img alt="Screenshot showing how Weavely AI automatically brands a contact form." />

### Manual Styling Options

For more control over your form design, use the manual styling panel in the form editor.

<img alt="Screenshot showing the Weavely AI manual theming panel" />

**Pre-made Templates**

Choose from a selection of ready-to-use design templates to quickly apply professional styling to your form.

**Colors**

Customize your color palette by setting:

* **Background** color
* **Primary** color (for buttons and key elements)
* **Secondary** color (for text)

**Typography**

Select fonts that match your brand from the typography settings.

**Layout Options**

Choose how your form appears:

* **No visual** - Form only, no background image
* **Visual on left** - Background image on the left side
* **Visual on right** - Background image on the right side
* **Transparent form** - Form overlays the background

**Background Visuals**

Set your form's background in three ways:

1. **Search Unsplash** - Type a keyword (e.g., "forest") and Weavely will find a matching image
2. **Solid color** - Use a plain color background
3. **Upload custom image** - Use your own branded imagery

### Advanced Styling Features

Click the **Advanced** button to access additional customization options:

<img alt="Screenshot showing the advanced styling panel in Weavely AI." />

**Custom CSS**

Add your own CSS code for complete control over styling.

**Input Fields**

Choose your input field style:

* Rounded inputs
* Underlined inputs
* Square inputs

**Buttons**

Customize button appearance:

* Rounded corners
* Square corners
* Toggle animations on/off

**Form Layout**

Fine-tune your form's appearance:

* Adjust form width
* Control spacing between fields

**Logo Settings**

Add your company logo to the form:

1. Toggle **Show logo** on
2. Upload your logo file
3. Set the logo size

## Method 2: Creating Account-Wide Themes

If you're building multiple forms, you'll want to avoid styling each one individually. Account-wide themes let you create a design once and reuse it across all your forms.

<Frame>
  <img alt="Screenshot showing the Weavely AI themes overview." />
</Frame>

### Accessing Theme Settings

From your dashboard:

1. Click on **Themes** in the navigation
2. Select **Create new theme**

### Creating a Theme

**Import Brand Styling**

Just like with individual forms, you can import branding from any website:

1. Enter the brand's domain (e.g., "coca-cola.com")
2. Click **Import**
3. Weavely fetches the logo, colors, and fonts

**Customize Your Theme**

Adjust the imported styling or create a custom theme from scratch:

* Set primary, secondary, and background colors
* Choose typography
* Configure layout preferences
* Add your logo

<Note>
  **Important:** When editing a theme, you're only setting the visual style, not the form content. There's no way to add specific questions or pages in theme settings.
</Note>

**Save Your Theme**

Give your theme a descriptive name (e.g., "Coca-Cola Theme" or "Company Brand") and save it.

### Setting a Default Theme

<Frame>
  <img alt="Screenshot showing how to set a default theme in Weavely AI" />
</Frame>

Once you've created themes, you can set which one is applied automatically to new forms:

1. Go to **Themes** in your dashboard
2. Find the theme you want to use as default
3. Click **Set as default**

Now every new form you create will automatically use this styling.

### Applying Themes to Forms

When creating or editing a form:

1. Open the styling panel
2. Look for the **Templates** section
3. Select any of your saved themes

The theme will be applied instantly to your form.

<img alt="Screenshot showing how to apply a team theme to a Weavely AI form." />

## Collaboration Notes

<Info>
  All team members have access to account-wide themes. Any theme created by one team member can be used by others in the same workspace.
</Info>

## Best Practices

* **Use themes for consistency** - If you're creating multiple forms for the same brand, set up a theme once and reuse it
* **Test on different devices** - Preview your styled forms on both desktop and mobile to ensure they look good everywhere
* **Keep logos readable** - Make sure your logo size is appropriate for the form layout you've chosen
* **Brand import works best with official domains** - For accurate brand styling, use the company's main website URL


# Universal Form
Source: https://help.weavely.ai/features/universal-form

Weavely's standard form mode — collect responses without scoring, payments, or matching logic. Ideal for contact forms, surveys, and registrations.

A universal form is Weavely's standard form mode. It collects responses without the extra logic of the other modes: no scoring, no payment processing, no right or wrong answers, and no sorting into categories. It's the right starting point for contact forms, surveys, feedback, event registrations, signups, applications, and any general data collection.

<Note>
  Need more than plain data collection? Use a specialised mode instead:

  * [Lead qualification form](/features/lead-qualification) — score respondents and sort them into bands.
  * [Match quiz](/features/match-quiz) — sort respondents into categories.
  * [Knowledge quiz](/features/quizzes) — mark answers right or wrong.
  * [Payment form](/features/payments) — collect payment details.
</Note>

<Info>
  You can start straight from the Weavely landing page by describing what you need, or [create an account](https://weavely.ai) and build inside the product. The steps below assume you're signed in.
</Info>

<iframe title="YouTube video player" />

## Steps

<Steps>
  <Step title="Describe the form you need">
    Describe the form and the information you want to collect. The more specific the prompt, the closer the result.

    ```text theme={null}
    I need a contact form for my design studio with fields for
    name, email, project type, and a message.
    ```

    Press **Generate form**.
  </Step>

  <Step title="Review and customise">
    Weavely generates the fields for you. From here you can add, remove, or reorder fields, mark fields as required, and adjust the wording.

    <Tip>
      Universal forms still support all of Weavely's building blocks — multiple choice, dropdowns, file uploads, date and time pickers, validation, conditional logic, and multi-step layouts. You just won't have the scoring or payment settings of the other modes.
    </Tip>
  </Step>

  <Step title="Publish and share">
    Publish the form, then share it with a link or embed it on your site.
  </Step>

  <Step title="Review responses">
    In **Results**, you'll see every submission with the answers each respondent gave.
  </Step>
</Steps>


# How to Use Form URL Parameters in Weavely
Source: https://help.weavely.ai/features/url-parameters

Track custom data in AI-powered forms using URL query parameters in Weavely. Perfect for user segmentation and dynamic response tagging.

Weavely allows you to dynamically pass external data into your form using **URL query parameters**. This is especially useful when distributing a form to different audiences and wanting to track user segments.

For example, you might send a feedback form to different user types (e.g., *testers*, *power users*) and track their responses accordingly.

<iframe title="YouTube video player" />

<Steps>
  <Step title="Step 1: Open Your Form's Settings" icon="link">
    1. In your Weavely form editor, go to **Settings**.
    2. Scroll down to the **URL Parameters** section.
    3. Add a new parameter, for example, `usertype`.

       <img alt="Screenshot showing how to add a form URL parameter in Weavely AI" />
  </Step>

  <Step title="Step 2: Publish and Append the Parameter" icon="cloud-arrow-up">
    1. Click **Publish** on your form.
    2. Copy the generated form URL.
    3. Append the parameter to the link using the format:

       ```
       ?parameter=value
       ```

       For example, using the URL parameter we created in step 1 we would add it as follows:

       ```
       https://forms.weavely.ai/formId?usertype=test
       ```

    You can now share this modified link in emails, newsletters, or landing pages.
  </Step>
</Steps>

## URL Parameters in Form Responses

Form responses will automatically specify the values you provided for URL parameters. For example, in the image below we got three responses to our form. One where the URL parameter wasn't specified, one where `?usertype=tester`  and one where `?usertype=power-user`.

## URL Parameters in Embedded Forms

In case you're embedding your form on a website, you'll need to add the URL parameters to the embed code. For example, say you have two url parameters: "usertype" and "ref". You would add these to your embedded form as follows:

```
<div data-weavely-form=[YOUR FORM ID] data-weavely-mode="embed" data-weavely-url="usertype=powerusers&ref=newsletter" style="width:100%"></div>
```

## Pro Tip: Add Multiple Parameters

You can add multiple query parameters by repeating the process in **Settings → URL Parameters**. Then append them to your URL using the `&` symbol:

```
https://forms.weavely.ai/formId?usertype=poweruser&ref=newsletter
```

This is ideal for combining segmentation with traffic source tracking, for example.


# Version History
Source: https://help.weavely.ai/features/version-history

Roll back to any previously published version of your form using Weavely's version control.

```html theme={null}
<span className="weavely-jsonld" hidden>
{`{
  "@context": "https://schema.org",
  "@graph": [
    {
      "@type": "WebPage",
      "@id": "https://help.weavely.ai/features/version-history",
      "url": "https://help.weavely.ai/features/version-history",
      "name": "Version History",
      "description": "Weavely keeps a history of every published version of your form, so you can roll back to any earlier version in a couple of clicks without losing the responses you've already collected.",
      "inLanguage": "en",
      "publisher": {
        "@id": "https://www.weavely.ai/#org"
      }
    },
    {
      "@type": "TechArticle",
      "@id": "https://help.weavely.ai/features/version-history#article",
      "headline": "Version History",
      "description": "Weavely keeps a history of every published version of your form, so you can roll back to any earlier version in a couple of clicks without losing the responses you've already collected.",
      "inLanguage": "en",
      "mainEntityOfPage": {
        "@id": "https://help.weavely.ai/features/version-history"
      },
      "author": {
        "@id": "https://www.weavely.ai/#org"
      },
      "publisher": {
        "@id": "https://www.weavely.ai/#org"
      }
    },
    {
      "@type": "VideoObject",
      "@id": "https://help.weavely.ai/features/version-history#video",
      "name": "Restoring previous versions of your form using Weavely AI",
      "description": "In this tutorial we walk you through the version control functionality in Weavely AI. It allows you to restore previously published version of your form.",
      "url": "https://youtu.be/5Ghh65J_tHs",
      "contentUrl": "https://youtu.be/5Ghh65J_tHs",
      "embedUrl": "https://www.youtube.com/embed/5Ghh65J_tHs",
      "duration": "PT3M3S",
      "uploadDate": "2026-05-07T00:00:00+00:00",
      "thumbnailUrl": [
        "https://img.youtube.com/vi/5Ghh65J_tHs/maxresdefault.jpg",
        "https://img.youtube.com/vi/5Ghh65J_tHs/hqdefault.jpg"
      ],
      "publisher": {
        "@id": "https://www.weavely.ai/#org"
      },
      "potentialAction": {
        "@type": "WatchAction",
        "target": "https://youtu.be/5Ghh65J_tHs"
      }
    },
    {
      "@type": "Organization",
      "@id": "https://www.weavely.ai/#org",
      "name": "Weavely",
      "url": "https://www.weavely.ai"
    }
  ]
}`}
</span>
```

<iframe title="YouTube video player" />

Made a change you regret? Weavely keeps a history of every published version of your form, so you can roll back to any earlier version in a couple of clicks. Without losing the responses you've already collected!

<Note>
  Version control only tracks **published** versions. Unpublished edits to the current draft are not saved as restorable versions. If you want a version to be available in your history later, publish it.
</Note>

## How version control works

Every time you publish your form, Weavely saves that exact state as a version you can return to. Older versions move into your archive as you publish new ones. You can switch between any of them at any time, and switch back again if you change your mind.

A typical workflow looks like this:

<Steps>
  <Step title="Publish your form to create a baseline">
    Open your form and click **Publish**. This first published version becomes the baseline you can always return to.
  </Step>

  <Step title="Make your edits and publish again">
    Add pages, change questions, update styling, whatever you need. When you're ready, publish again. Weavely automatically archives the previous published version.
  </Step>

  <Step title="Open Version Control">
    <Frame>
      <img alt="Screenshot showing where to find Weavely AI's version history functionality" />
    </Frame>

    In the editor, open the **Version Control** panel. You'll see your current published version at the top and any earlier versions in the archive below.
  </Step>

  <Step title="Select the version you want to restore">
    <Frame>
      <img alt="Screenshot showing how to restore a previous form version in Weavely AI" />
    </Frame>

    Click the version you'd like to restore. Your form instantly reverts to that state — pages, questions, styling and all.
  </Step>

  <Step title="Switch back if needed">
    Changed your mind? Just open Version Control again and click a different version. You can move freely between any published versions.
  </Step>
</Steps>

## What happens to your form responses

This is the part most people worry about, and the good news is: **your response data is preserved across versions.**

Here's how it behaves:

* If you restore an older version that **doesn't include a field** that exists in your current version, the answers for that field temporarily disappear from your results view.
* If you then switch **back** to the version that does include that field, the answers reappear automatically. They were never deleted, just hidden.
* The same logic applies to entire pages or new questions added in later versions.

In short: switching versions changes what you see in the results, not what's stored in the database.


# Track forms with Google Analytics & Google Tag Manager
Source: https://help.weavely.ai/ga-4-and-gtm

Measure form views, traffic, and submit-button clicks from your Weavely forms in GA4, using your Measurement ID and Google Tag Manager.

<iframe title="YouTube video player" />

This guide shows you how to track two things on your Weavely forms with Google Analytics 4 (GA4):

* **Form views and traffic**: how many people open your form, and where they came from.
* **Form submissions**: when someone actually clicks the submit button. The first takes about a minute and just needs your GA4 Measurement ID. The second uses Google Tag Manager (GTM) to catch the submit click.

<Info>
  Tracking is available on the **free plan**, under **Settings → Tracking** (while editing a form). This guide assumes you already have a basic familiarity with Google Analytics and Google Tag Manager. It focuses on the Weavely-specific steps.
</Info>

## Part 1: Track form views with Google Analytics

This connects your form directly to GA4 so you can see views and traffic sources. No Tag Manager needed.

<Steps>
  <Step title="Copy your GA4 Measurement ID">
    In Google Analytics, go to **Admin → Data streams**, open your web stream, and copy the **Measurement ID** at the top. It always starts with `G-` (for example, `G-XXXXXXXXXX`).

    <Warning>
      The Measurement ID (`G-…`) is **not** the same as the Property ID (a plain number). Only the `G-` ID works here.
    </Warning>
  </Step>

  <Step title="Paste it into Weavely">
    <Frame>
      <img alt="Screenshot showing where to add a Google Analytics measurement ID to track form analytics in Weavely AI." />
    </Frame>

    Open your form, go to **Settings → Tracking**, and paste the ID into the **Google Analytics** field.
  </Step>

  <Step title="Publish your form">
    Hit **Publish**. Tracking only goes live on the published form, not the editor preview.
  </Step>
</Steps>

<Note>
  This tracks **views and traffic only**, not conversions. Submitting the form won't show up as anything special here. To track submissions, continue to Part 2.
</Note>

## Part 2: Track form submissions with Google Tag Manager

Google Analytics can't detect your form's submit button on its own, so this part uses Google Tag Manager to listen for the click and send a `form_submit` event to GA4.

Every Weavely submit button carries the CSS class `submit-form`, and that's the stable hook you'll listen for.

<Steps>
  <Step title="Enable the Click Classes variable">
    <Frame>
      <img alt="Screenshot showing how to enable Click Classes in Google Tag Manager." title="Screenshot 2026 07 06 At 17 36 06" />
    </Frame>

    In GTM, go to **Variables → Configure** and enable **Click Classes**. Without this, your trigger can't see the button's class.
  </Step>

  <Step title="Create the submit-button trigger">
    <Frame>
      <img alt="Screenshot showing how to add a GTM trigger event for Weavely AI forms." />
    </Frame>

    Go to **Triggers → New** and choose trigger type **Click – All Elements**. Set it to fire on **Some Clicks**, with the condition: **Click Classes** → **contains** → `submit-form`

    Name it something like `Submit trigger` and save.

    <Tip>
      Match on the class `submit-form`, not the button's `id`, which is generated per form and isn't reliable.
    </Tip>
  </Step>

  <Step title="Create the GA4 Event tag">
    <Frame>
      <img alt="Screenshot showing how to create a GTM tag for Weavely AI forms." />
    </Frame>

    Go to **Tags → New** and choose tag type **Google Analytics: GA4 Event**. Set:

    * **Measurement ID**: your `G-` ID (the same one from Part 1)
    * **Event Name**: `form_submit`
    * **Triggering**: the `Submit trigger` you just made

    Save the tag.

    <Warning>
      Do **not** add a "Google Tag" / GA4 Configuration tag in GTM. Weavely's Google Analytics field (Part 1) already loads GA4 on the page, and adding it again in GTM would count every pageview twice. GTM should hold **only** the event tag.
    </Warning>
  </Step>

  <Step title="Add your GTM container to Weavely">
    <Frame>
      <img alt="Screenshot showing where to add a Google Analytics measurement ID to track form analytics in Weavely AI." />
    </Frame>

    Copy your **Container ID** from GTM (it looks like `GTM-XXXXXXX`). In Weavely, go to **Settings → Tracking**, paste it into the **Google Tag Manager** field, and **Publish** the form.
  </Step>

  <Step title="Test it in Preview">
    In GTM, click **Preview**, paste your published form's URL, and submit the form with any dummy data. In the Tag Assistant panel you should see your event tag fire **once** when you press submit. For a second check, confirm the `form_submit` event lands in GA4 under **Admin → DebugView**.
  </Step>

  <Step title="Publish the container">
    Back in GTM, click **Submit → Publish** to make the container live. Preview mode alone doesn't publish your changes.
  </Step>
</Steps>

<Note>
  This fires on the button **click**, not on a confirmed successful submission. That means clicks where a required field was empty can still count, so your `form_submit` number may run slightly high. It's a solid proxy for "roughly how many submissions"; just don't treat it as an exact count.
</Note>


# Form Elements
Source: https://help.weavely.ai/get-started/form-lements

A complete guide to all the form elements you can use in Weavely — from text fields and dropdowns to star ratings, file uploads, and more.

Weavely gives you 26 different form elements to work with. You can add any of them by asking the AI (e.g. *"add a file upload field"*) or by browsing the element picker in the form editor.

This page gives you a quick overview of every element, what it's for, and what options you can configure.

<Tip>
  You don't need to memorise these! Just describe what you need to Weavely's AI and it will pick the right element for you.
</Tip>

## Input Elements

These elements collect typed responses from your respondents — names, emails, numbers, dates, and more.

<AccordionGroup>
  <Accordion title="Short Text" icon="font">
    A single-line text field for short answers.

    **Use it for:** Names, job titles, company names, or any brief free-text answer.

    **Options:**

    * Mark as required
    * Add a description or helper text
    * Set placeholder text
    * Set a minimum and/or maximum character length
    * Add a validation pattern (regex) for custom format rules

    <Frame>
      <img alt="Screenshot of the &#x22;Short Text&#x22; form element in Weavely AI." />
    </Frame>
  </Accordion>

  <Accordion title="Long Text" icon="align-left">
    A multi-line text field for longer responses.

    **Use it for:** Comments, feedback, detailed descriptions, or open-ended questions.

    **Options:**

    * Mark as required
    * Add a description or helper text
    * Set placeholder text
    * Set a minimum and/or maximum character length
    * Add a validation pattern (regex) for custom format rules

    <Frame>
      <img alt="Screenshot of the &#x22;Long Text&#x22; form element in Weavely AI." />
    </Frame>
  </Accordion>

  <Accordion title="Number" icon="hashtag">
    A field that only accepts numeric values.

    **Use it for:** Quantities, ages, budgets, headcounts, or any numerical answer.

    **Options:**

    * Mark as required
    * Add a description or helper text
    * Set placeholder text
    * Set a minimum and/or maximum value
    * Add a validation pattern (regex) for custom format rules

    <Frame>
      <img alt="Screenshot of the &#x22;Number&#x22; form element in Weavely AI." />
    </Frame>
  </Accordion>

  <Accordion title="Email" icon="envelope">
    A text field with built-in email validation. Respondents must enter a properly formatted email address.

    **Use it for:** Collecting contact emails, newsletter signups, or account registration.

    **Options:**

    * Mark as required
    * Add a description or helper text
    * Set placeholder text
    * Set a minimum and/or maximum character length
    * Add a validation pattern (regex) for custom format rules

    <Frame>
      <img alt="Screenshot of the &#x22;Email&#x22; form element in Weavely AI." />
    </Frame>
  </Accordion>

  <Accordion title="Phone Number" icon="phone">
    A field for collecting phone numbers.

    **Use it for:** Contact forms, booking forms, or any scenario where you need a phone number.

    **Options:**

    * Mark as required
    * Add a description or helper text
    * Set placeholder text
    * Enable/disable auto-detection of respondent country
    * Set default country code
    * Set a minimum and/or maximum character length
    * Add a validation pattern (regex) for custom format rules

    <Frame>
      <img alt="Screenshot of the &#x22;Phone Number&#x22; form element in Weavely AI." />
    </Frame>
  </Accordion>

  <Accordion title="URL" icon="link">
    A text field with URL validation. Respondents must enter a valid web address (must start with http\:// or https\:// followed by a domain).

    **Use it for:** Collecting website links, portfolio URLs, social media profiles, or LinkedIn pages.

    **Options:**

    * Mark as required
    * Add a description or helper text
    * Set placeholder text
    * Add a validation pattern (regex) for custom format rules

    <Frame>
      <img alt="Screenshot of the &#x22;URL&#x22; form element in Weavely AI." />
    </Frame>
  </Accordion>

  <Accordion title="Date Picker" icon="calendar">
    A calendar-style picker that lets respondents select a date.

    **Use it for:** Booking dates, event registration, deadlines, or dates of birth.

    **Options:**

    * Mark as required
    * Add a description or helper text
    * Set an earliest and/or latest allowed date

    <Frame>
      <img alt="Screenshot of the &#x22;Date Picker&#x22; form element in Weavely AI." />
    </Frame>
  </Accordion>

  <Accordion title="Time" icon="clock">
    A picker for selecting a specific time.

    **Use it for:** Appointment scheduling, preferred contact times, or event start times.

    **Options:**

    * Mark as required
    * Add a description or helper text
    * Set an earliest and/or latest allowed time

    <Frame>
      <img alt="Screenshot of the &#x22;Time&#x22; form element in Weavely AI." />
    </Frame>
  </Accordion>

  <Accordion title="File Upload" icon="upload">
    Lets respondents upload one or more files directly through the form.

    **Use it for:** Resumes, images, documents, portfolios, or any file attachment.

    **Options:**

    * Mark as required
    * Limit the number of files allowed
    * Set a maximum file size
    * Restrict accepted file types (e.g. PDFs only, images only)
    * Add a description or helper text

    <Frame>
      <img alt="Screenshot of the &#x22;File&#x22; form element in Weavely AI." />
    </Frame>
  </Accordion>
</AccordionGroup>

## Choice Elements

These elements let respondents pick from a set of predefined options.

<AccordionGroup>
  <Accordion title="Single Choice" icon="circle-dot">
    A list of options where respondents choose exactly one. Only one option can be selected at a time.

    **Use it for:** Yes/no questions, preference picks, or any question with mutually exclusive answers.

    **Options:**

    * Mark as required
    * Randomize option order
    * Add an "Other" option with a free-text field
    * Customise the "Other" option label

    <Frame>
      <img alt="Screenshot of the &#x22;Single Choice&#x22; form element in Weavely AI." />
    </Frame>
  </Accordion>

  <Accordion title="Multiple Choice" icon="square-check">
    A list of options where respondents can select multiple answers.

    **Use it for:** "Select all that apply" questions, interest lists, or feature preferences.

    **Options:**

    * Mark as required
    * Randomize option order
    * Add an "Other" option with a free-text field
    * Customise the "Other" option label

    <Frame>
      <img alt="Screenshot of the &#x22;Multiple Choice&#x22; form element in Weavely AI." />
    </Frame>
  </Accordion>

  <Accordion title="Dropdown" icon="caret-down">
    A compact dropdown menu for selecting a single option. The options are hidden until the respondent clicks to expand the list.

    **Use it for:** Long lists of options (countries, categories, departments) where radio buttons would take up too much space.

    **Options:**

    * Mark as required
    * Randomize option order

    <Frame>
      <img alt="Screenshot of the &#x22;Dropdown&#x22; form element in Weavely AI." />
    </Frame>
  </Accordion>

  <Accordion title="Image Choice" icon="image">
    A visual selection element where each option is represented by an image. Respondents click on an image to select it.

    **Use it for:** Design preferences, product picks, mood boards, or any visual comparison.

    **Options:**

    * Mark as required
    * Allow single or multiple selection
    * Randomize option order
    * Set image dimensions and fit

    <Frame>
      <img alt="Screenshot of the &#x22;Image Choice&#x22; form element in Weavely AI." />
    </Frame>
  </Accordion>

  <Accordion title="Checkbox" icon="check">
    A standalone checkbox — checked or unchecked.

    **Use it for:** Terms and conditions agreements, opt-ins, consent confirmations, or any yes/no toggle.

    **Options:**

    * Mark as required (respondent must check the box)
    * Set whether it's pre-checked by default

    <Frame>
      <img alt="Screenshot of the &#x22;Checkbox&#x22; form element in Weavely AI." />
    </Frame>
  </Accordion>

  <Accordion title="Matrix" icon="table-cells">
    A grid where rows represent sub-questions and columns represent answer options. Each row is answered independently using the same set of choices.

    **Use it for:** Likert scales, multi-criteria evaluations, satisfaction surveys, or comparing multiple items on the same scale.

    **Options:**

    * Mark as required
    * Allow single or multiple selections per row

    <Frame>
      <img alt="Screenshot of the &#x22;Matrix&#x22; form element in Weavely AI." />
    </Frame>
  </Accordion>
</AccordionGroup>

## Rating Elements

These elements let respondents express a score or level of satisfaction.

<AccordionGroup>
  <Accordion title="Ranking" icon="arrow-down-1-9">
    A drag-and-drop element where respondents reorder items by preference or priority.

    **Use it for:** Prioritisation exercises, feature rankings, or preference ordering.

    **Options:**

    * Mark as required

    <Frame>
      <img alt="Screenshot of the &#x22;Ranking&#x22; form element in Weavely AI." />
    </Frame>
  </Accordion>

  <Accordion title="Star Rating" icon="star">
    A familiar star-based rating. Respondents click to select a number of stars.

    **Use it for:** Product reviews, experience ratings, satisfaction scores, or any quick quality assessment.

    **Options:**

    * Mark as required
    * Set the number of stars (e.g. 5 or 10)
    * Change the icon (use hearts, thumbs up, or other icons instead of stars)

    <Frame>
      <img alt="Screenshot of the &#x22;Star Rating&#x22; form element in Weavely AI." />
    </Frame>
  </Accordion>

  <Accordion title="Scale Rating" icon="signal">
    A numeric scale where respondents pick a number (e.g. 0–10). Often used for NPS (Net Promoter Score) surveys.

    **Use it for:** NPS surveys, satisfaction scores, likelihood scales, or effort scores.

    **Options:**

    * Mark as required
    * Set the number of scale points

    <Frame>
      <img alt="Screenshot of the &#x22;Scale Rating&#x22; form element in Weavely AI." />
    </Frame>
  </Accordion>

  <Accordion title="Range Slider" icon="sliders">
    A draggable slider for selecting a value within a defined range.

    **Use it for:** Budgets, price ranges, temperature preferences, or any continuous numeric value.

    **Options:**

    * Set minimum and maximum values
    * Set the step size (e.g. increments of 10, 100, or 500)

    <Frame>
      <img alt="Screenshot of the &#x22;Range Slider&#x22; form element in Weavely AI." />
    </Frame>
  </Accordion>
</AccordionGroup>

## Display Elements

Display elements don't collect responses — they add structure, context, and media to your form.

<AccordionGroup>
  <Accordion title="Heading" icon="heading">
    A large text heading for creating visual sections within your form.

    **Use it for:** Section titles, page headers, or visual breaks between groups of questions.

    <Frame>
      <img alt="Screenshot of the &#x22;Heading&#x22; form element in Weavely AI." />
    </Frame>
  </Accordion>

  <Accordion title="Paragraph" icon="paragraph">
    A block of text for adding instructions, explanations, or contextual information. Supports rich text formatting and [answer piping](/features/answer-piping) to dynamically insert a respondent's earlier answers.

    **Use it for:** Instructions, welcome messages, disclaimers, or personalised text using answer piping.

    <Frame>
      <img alt="Screenshot of the &#x22;Paragraph&#x22; form element in Weavely AI." />
    </Frame>
  </Accordion>

  <Accordion title="Image" icon="image">
    Displays an image on the form.

    **Use it for:** Reference photos, diagrams, or any visual context.

    **Options:**

    * Set image width and height

    <Frame>
      <img alt="Screenshot of the &#x22;Image&#x22; form element in Weavely AI." />
    </Frame>
  </Accordion>

  <Accordion title="Embed HTML" icon="code">
    Embeds a custom HTML snippet directly into your form.

    **Use it for:** Third-party widgets, custom styling, embedded maps, or anything not covered by the other elements.

    <Frame>
      <img alt="Screenshot of the &#x22;Embed HTML&#x22; form element in Weavely AI." />
    </Frame>
  </Accordion>

  <Accordion title="Audio Embed" icon="headphones">
    An audio player embedded in your form.

    **Use it for:** Podcasts, voice instructions, music samples, or audio feedback prompts.

    <Frame>
      <img alt="Screenshot of the &#x22;Embed Audio&#x22; form element in Weavely AI." />
    </Frame>
  </Accordion>

  <Accordion title="Video Embed" icon="video">
    A video player embedded in your form. Supports YouTube, Vimeo, and other hosted video URLs.

    **Use it for:** Tutorial videos, product demos, welcome messages, or any video content.

    <Frame>
      <img alt="Screenshot of the &#x22;Embed Video&#x22; form element in Weavely AI." />
    </Frame>
  </Accordion>
</AccordionGroup>

## Special Elements

<AccordionGroup>
  <Accordion title="Signature" icon="signature">
    A digital signature pad where respondents draw their signature using a mouse, trackpad, or finger on mobile.

    **Use it for:** Contracts, consent forms, waivers, delivery confirmations, or any document that needs a signature.

    **Options:**

    * Mark as required
    * Set the output file format

    <Frame>
      <img alt="Screenshot of the &#x22;Signature&#x22; form element in Weavely AI." />
    </Frame>
  </Accordion>
</AccordionGroup>

***

## Related

<CardGroup>
  <Card title="Skip-page Logic" icon="split" href="/features/skip-logic">
    Show or hide elements and pages based on how respondents answer.
  </Card>

  <Card title="Answer Piping" icon="at" href="/features/answer-piping">
    Dynamically insert earlier answers into later questions or text.
  </Card>

  <Card title="Field Validation" icon="shield-check" href="/features/field-validation">
    Add custom validation rules to your form fields.
  </Card>

  <Card title="Quizzes" icon="graduation-cap" href="/features/quizzes">
    Turn your form into a scored quiz with correct answers and feedback.
  </Card>
</CardGroup>


# Share Your Form to Collect Responses
Source: https://help.weavely.ai/get-started/sharing

What's a form without responses ? Learn how to share your form and gather responses!

Weavely makes it easy to share your form so you can quickly start gathering responses. Here's how you can get your form out into the world.

## Option 1: Share a Standalone Form (Hosted by Weavely)

Each form you create is automatically hosted as its own standalone webpage on Weavely’s secure servers. Simply share the provided public link to start collecting responses immediately.

<img alt="Screenshot2025 05 28at11 53 51 Pn" />

You can customize your form’s appearance on social media by setting a **Form Name**, **Form Icon**, and a **Social Media Description**. This helps give your form a branded, professional look.

<Info>
  Customizing your form's sharing appearance is a Weavely pro feature.
</Info>

## Option 2: Embed Form into Your Website

Embed your form directly onto your existing website to blend seamlessly with your page content.Alternatively, you can also set your form to appear as a popup based on various triggers. We've dedicated an entire help desk article on this subject.

👉 [Check our detailed embedding and popup guide here](/features/embeddings).


# Smart Insights: analyze survey results with AI
Source: https://help.weavely.ai/get-started/smart-insights-analyze-survey-results-with-ai

Learn how to use Weavely's Smart Insights to automatically analyze survey data, cluster open-ended responses by theme, and find correlations across questions.

<iframe title="YouTube video player" />

Every form collects data, but reading through responses one by one doesn't scale. Smart Insights uses AI to automatically analyze your survey results so you can spot patterns, understand open-ended answers, and find correlations between questions in seconds.

<Info>
  Smart Insights is not a replacement for fine-grained statistical analysis tools like Excel or R. It's designed to give you a fast, digestible overview of what your respondents are saying, grounded in real examples.
</Info>

## Where to find your results

Once your form has collected responses, you have three tabs under the **Results** section:

<Steps>
  <Step title="Responses">
    <Frame>
      <img alt="Screenshot showing a table of form responses in Weavely.ai" />
    </Frame>

    A table showing every submission you've received. You can browse the full list or click into individual responses to see what a specific person answered across all questions.

    <Frame>
      <img alt="Screenshot showing individual form responses in Weavely.ai" />
    </Frame>

    You also get a **per-question view**: select any question to see a breakdown of how people responded, including numerical summaries for rating-type questions.

    <Frame>
      <img alt="Screenshot showing form responses per question in Weavely.ai" />
    </Frame>
  </Step>

  <Step title="Analytics">
    A high-level dashboard showing how your form is performing over time: total views, number of submissions, and trends. Think of this as meta-data about your form rather than analysis of the answers themselves.

    <Frame>
      <img alt="Screenshot showing form analytics in Weavely.ai" />
    </Frame>
  </Step>

  <Step title="Smart Insights">
    This is where AI-powered survey data analysis happens. Smart Insights automatically examines all your responses and surfaces what's worth paying attention to. More on this below.
  </Step>
</Steps>

## How Smart Insights analyzes your data

Smart Insights does two things that are hard to do manually: it **clusters open-ended text responses** into themes and it **finds correlations** across different questions.

### Clustering open-ended responses

<Frame>
  <img alt="Screenshot showing smart insights in Weavely.ai" />
</Frame>

Open-ended questions are notoriously difficult to analyze. When fifty people answer "If you had a magic delete button, which feature would you remove?" in their own words, you need to read every answer to find patterns.

Smart Insights handles this automatically. The AI reads every response, groups them into thematic clusters, and presents the results in two ways:

* **Theme summaries** — Each cluster gets a label (e.g., "Performance and reliability issues") with a plain-language explanation of the category and concrete examples pulled from real responses. You see the pattern *and* the evidence behind it.
* **Bar chart visualization** — The same clustering data, shown as a chart so you can instantly see which themes come up most. For example, you might see that 4 out of 50 respondents would remove the "AI standup summaries" feature — even though they all phrased it differently.

<Tip>
  The AI groups responses by meaning, not by exact wording. So "the app is too slow," "loading takes forever," and "speed needs work" all end up in the same cluster.
</Tip>

### Finding correlations between questions

Beyond analyzing individual questions, Smart Insights looks across your entire survey to find correlations between answers on different questions.

For example, it might surface that users who requested improvements to the mobile app or integrations are also more likely to recommend your product. You'll see a visualization showing the relationship: what one group answered on one question mapped against their answers on another.

This kind of cross-question analysis is exactly the sort of thing that typically requires exporting your data into a spreadsheet and running manual comparisons. Smart Insights does it for you, automatically.

## When to use Smart Insights

Smart Insights is most valuable when your form includes:

* **Open-ended text questions** where respondents write free-form answers that are hard to scan manually
* **Multiple questions** where correlations between answers might reveal something you wouldn't catch by reading responses individually
* **Enough responses** to make patterns meaningful. The more submissions you have, the more useful the clustering and correlation analysis becomes


# How to Invite and Manage Team Members in Weavely
Source: https://help.weavely.ai/get-started/teams

Learn how to collaborate and build forms with team members inside of Weavely.ai

<iframe title="YouTube video player" />

Weavely makes it easy to collaborate with others by allowing you to invite team members to your workspace. Whether you’re working on form creation, reviewing responses, or managing integrations—bringing others into your team helps speed up feedback and coordination.

This guide walks you through how to invite someone to your Weavely team, what the invitation flow looks like for them, and how to manage team access once they’ve joined.

## Accessing Team Settings

<Frame>
  <img alt="Animated screenshot showing how to access team settings in Weavely AI" />
</Frame>

To get started, head to the **Settings** section in your Weavely dashboard. If you’re currently working in the form editor, you can return to the dashboard by clicking the **house icon** in the top-left corner. Once back in the dashboard:

* Click on **Settings** in the left-hand menu.
* Select **Team Settings**.

This is where you’ll manage your team members.

## Inviting Someone to Your Team

To invite someone, simply enter their email address in the **Team Settings** panel and press **Invite**. An invitation will be sent to that address.

The recipient will receive a straightforward email with a link to accept the invite. Once they click it, they’ll be prompted to either **sign in** or **create a new account**. It’s important that they complete this step using the **same email address** the invitation was sent to.

## Switching Between Teams

After joining, the invited user will land in their own default team, which may initially be empty. To access the shared team:

* Click the **team name** in the top-left corner.
* Select the team they were invited to.

Once they switch to the correct team, they’ll be able to view and collaborate on all shared forms.

<Frame>
  <img alt="Animated screenshot showing how to switch teams in Weavely AI" />
</Frame>

## Collaboration Notes

Team members can:

* View and analyze form responses
* Edit form content
* Modify styling and logic
* Configure integrations

However, **real-time editing is not yet supported**. If two team members edit the same form simultaneously, the **last person to save** will overwrite the other’s changes. Be sure to coordinate when working on the same form.

## Managing Team Roles and Access

In the **Team Settings**, you’ll see a list of all current team members. From here, you can:

* **Promote a member to Owner**
* **Remove a member** from the team

This gives you full control over who can access and manage your Weavely workspace.


# The Basics: Generating Forms with AI
Source: https://help.weavely.ai/get-started/the-basics

Learn the basics of building forms using artificial intelligence in Weavely.ai

<iframe title="YouTube video player" />

This article distills the key moves from our “Quick Guide” video into a written walkthrough.  

Follow along once and you’ll be spinning up branded, multi-page forms on autopilot.

<Steps>
  <Step title="Step 1: Prompt to Generate a Form" icon="thought-bubble">
    You generate forms in Weavely by leaving a prompt which specifies what your form is about. Optionally you can also speak to our AI by holding the microphone button in the bottom right corner of the prompt area.

    Besides giving our AI the context it needs in text format you can also upload .pdf, .png or .jpg files with additional information. Here are some examples you can get started with:

    * A document with draft questions
    * A pitch deck of your product
    * A document containing customer information

      <img alt="Screenshot showing the weavely.ai form editor" />
  </Step>

  <Step title="Step 2: Tweak your Form's Content" icon="hammer-brush">
    You can continue tweaking your form by chatting to our AI. More precisely, you can:

    * Change existing questions
    * Add new questions and pages
    * Reorder elements (questions, pages)
    * Add conditional logic rules (e.g. hide/show form elements)

    <img alt="Screenshot showing a conversation between a user and Weavely AI tweaking a form's content and adding conditional logic" title="Tweaking a Form in Weavely AI" />
  </Step>

  <Step title="Step 3: Change your Form's Design" icon="palette">
    You can specify the desired style with a prompt or by uploading a screenshot. In the latter case our AI will match the color styles and font (if detected).

    <img alt="Animated screenshot showing how to style a web form using AI in Weavely" />
  </Step>

  <Step title="Step 4: Setup Integrations" icon="plug">
    <Info>
      Integrations are currently only available outside of AI mode. You won't be able to ask AI to set up an integration for you (yet).
    </Info>

    Data collected by Weavely forms will be safely stored on our servers and accessible from within your form editor (see Step 6). However, you might want to forward your data to a third-party system (e.g. Google Sheets), set up e-mail notifications, or automate a workflow based on responses (e.g. using Zapier or Make). You can do all of this from within the  *Integrations* tab in the form editor.

    <img alt="Screenshot showing where to find the integration tab in Weavely AI Forms" />
  </Step>

  <Step title="Step 5: Publish and Embed" icon="party-horn">
    <Info>
      Publishing is currently only available outside of AI mode. You won't be able to ask AI to publish your form for you.
    </Info>

    Once you're satisfied with the way your form works and looks, you're ready to publish it and collect responses! You can either share your form as a standalone web form using the provided editor or [embed it into your website](/features/embeddings). We also offer a wide range of integrations with [website builders](https://help.weavely.ai/guides/examples-cover).
  </Step>

  <Step title="Step 6: Analyze Results" icon="database">
    <img alt="Screenshot showing form analytics in Weavely AI" />

    Weavely offers you form analytics on four levels:

    1. A general overview of the individual responses received by your form.
    2. A summary, for each form element, of the responses received. Depending on the element's type this will be a different visual (e.g. a pie-chart for multiple-choice questions).
    3. Analytics about your form's performance in general (i.e. amount of views on your form, and total responses received).
    4. Smart insights, which use AI to generate reports tailored to your report and which you can tweak through prompting as well.
  </Step>
</Steps>


# How to Create and Apply a Custom Form Theme
Source: https://help.weavely.ai/get-started/theme-editor

Create a reusable branded theme and apply it automatically to every new form, no redesigning from scratch each time.

The Theme Editor lets you define your brand's colors, fonts, logo, and layout once, then apply that style to every form you create. It's the fastest way to keep all your forms looking consistent without touching each one individually.

<iframe title="YouTube video player" />

## Opening the Theme Editor

From your Weavely dashboard, click the **Themes** menu (under the Forms menu). This is where all your saved themes live and where you can create new ones.

<Frame>
  <img alt="Screenshot showing where to find the theme editor in Weavely AI." />
</Frame>

## Creating a new theme

You have two ways to get started:

<Steps>
  <Step title="Choose your starting point">
    Click **Create theme**. You'll be asked to either:

    * **1. Import your branding**: paste in your website URL and let Weavely pull your logo, colors, and visual style automatically
    * **2. Start from scratch**: build your form design manually

    <Frame>
      <img alt="Screenshot showing how to either import a branding in Weavely AI or create a new theme from scratch." />
    </Frame>

    <Tip>
      The import option works best for well-known brands or sites with clearly defined CSS variables. If your brand isn't recognized, you can always tweak manually after importing.
    </Tip>
  </Step>

  <Step title="Customize colors and typography">
    The editor shows a **live preview** of how your form elements will look — inputs, buttons, labels, and backgrounds. This is a preview only, not an actual form, so you won't be adding or removing fields here.

    Under the **Colors** section, set your:

    * Background color
    * Primary / accent color
    * Text and label colors

    Under **Typography**, choose your font family and adjust sizing to match your brand.

    <Frame>
      <img alt="Screenshot showing how to change colours and typography in a Weavely AI form theme." />
    </Frame>
  </Step>

  <Step title="Adjust layout and logo">
    Scroll down to see layout and logo  options:

    * **Logo** — toggle it on/off, set the size, and choose the alignment (left, center, or right)
    * **Form visual** — enable a header image or color band at the top, side or background of each form
  </Step>

  <Step title="Advanced Styling Style your inputs and buttons">
    Press the *"Advanced"* button to access a panel with more fine-grained options:

    * **Form width and spacing** — control how wide and airy your forms feel
    * **Input shape** — choose between default rounded or square corners
    * **Button shape** — same options: rounded, square, or default
    * **Hover animation** — pick the animation style for button interactions
    * **Custom CSS** — completely customise the look and feel of your form

    <Note>
      Custom CSS is a paid feature.
    </Note>

    <Frame>
      <img alt="Screenshot showing how to access advanced from theme editing options in Weavely AI." />
    </Frame>
  </Step>
</Steps>

## Setting a theme as the default

Once your theme is saved (which happens automatically), you can make it the default so every new form automatically uses it.

1. Go back to the **Themes** tab in your dashboard
2. Find your theme and click **Set as default**

<Frame>
  <img alt="Screenshot showing how to set a theme as default in Weavely AI." />
</Frame>

From that point on, any new form you create will open with your theme already applied — logo, colors, fonts, and all.

<Check>
  Create a test form after setting your default theme to confirm everything looks right before sending it to respondents.
</Check>

## Applying a theme to a specific form

You can also apply (or switch) a theme on an individual form without changing the default:

1. Open the form in the editor
2. Click the **Theme** pill button next to the right sidebar
3. Select the theme you want from *"Templates"*

This is useful when you manage forms for multiple brands or clients on the same workspace.


# Workspaces
Source: https://help.weavely.ai/get-started/workspaces



If you've built more than a handful of forms in Weavely, scrolling through them every time you need one gets old fast. **Workspaces** let you group related forms together, think folders for your forms, so your dashboard stays clean and you can move between projects, clients, or campaigns in a single click.

This guide walks through everything you need to know.

<iframe title="YouTube video player" />

## What is a workspace?

A workspace is a container that holds a set of forms. You can have as many workspaces as you like — for example, one per client, one per campaign, or one per use case (lead gen, events, feedback). Every form lives inside exactly one workspace at a time, and you can move forms between workspaces whenever you want.

You'll find the workspaces menu on the **left side of your Weavely dashboard**.

<Frame>
  <img alt="Screenshot showing where to find workspaces in Weavely AI Forms." />
</Frame>

## Create a new workspace

<Steps>
  <Step title="Open your dashboard">
    Sign in to Weavely. The workspaces menu sits on the left side of the dashboard.
  </Step>

  <Step title="Click '+'">
    The button is at the top of the workspaces menu.
  </Step>

  <Step title="Name your workspace">
    Give it a descriptive name. You can rename it later if needed.
  </Step>

  <Step title="Confirm">
    Click **Create**. The new workspace appears in the left menu and opens automatically.
  </Step>
</Steps>

## Add forms to a workspace

There are two ways to put a form into a workspace.

### Create a new form inside the workspace

When you're inside a workspace and click **Create new form**, the new form automatically lands in that workspace, no extra step needed. This works whether you start from a blank form, a template, or by prompting Weavely's AI.

### Move existing forms with drag and drop

Already have forms scattered around? Reorganizing is quick:

<Steps>
  <Step title="Open the workspace where the form currently lives">
    For example, your default workspace.
  </Step>

  <Step title="Click and hold any form card">
    Grab the card you want to move.
  </Step>

  <Step title="Drop it onto the target workspace">
    Drop it on the workspace name in the left menu. The form moves immediately.
  </Step>
</Steps>

## Rename a workspace

<Frame>
  <img alt="Screenshot showing how to rename or delete a workspace in Weavely AI forms." />
</Frame>

If you made a typo or your project's scope changed, renaming takes two clicks:

<Steps>
  <Step title="Open the workspace">
    Click the workspace name in the left menu.
  </Step>

  <Step title="Open the three-dot menu">
    It sits at the top of the workspace view.
  </Step>

  <Step title="Select 'Rename'">
    Type the new name and confirm.
  </Step>
</Steps>

## Delete a workspace

<Warning>
  **Deleting a workspace also deletes every form inside it.** This action is permanent and cannot be undone. Move any forms you want to keep into another workspace *before* deleting.
</Warning>

To delete a workspace:

<Steps>
  <Step title="Open the workspace you want to remove" />

  <Step title="Open the three-dot menu at the top" />

  <Step title="Select 'Delete'">
    Read the confirmation pop-up carefully, it lists what will be removed.
  </Step>

  <Step title="Confirm">
    Once confirmed, the workspace and all the forms it contains are gone.
  </Step>
</Steps>

## Tips for staying organized

* **One workspace per client or project.** This is the most common setup for agencies and freelancers.
* **Use clear names.** "Acme — onboarding" reads better than "Workspace 3" when you have a dozen of them.
* **Reorganize as you go.** Workspaces aren't permanent. Move forms around whenever your work shifts.
* **Review quarterly.** A quick check of which workspaces are still active keeps your dashboard fast and easy to scan.


# How to Embed Advanced AI Forms into Carrd with Weavely.ai
Source: https://help.weavely.ai/guides/embeds/carrd

Learn how to embed custom AI forms in Carrd with Google Sheets integration, conditional logic, and full styling control.

<iframe title="YouTube video player" />

If you're building a site with **Carrd**, you might’ve noticed that its built-in form options are great for basic needs, but they fall short when it comes to more advanced features like **Google Sheets integrations** or **conditional logic**. This guide shows you how to overcome those limitations by using **Weavely.ai**, a free AI-powered form builder that integrates smoothly with Carrd.

## Why Use Weavely with Carrd?

* **AI-generated forms**: Describe what you need, and Weavely builds the form for you.
* **Powerful integrations**: Google Sheets, Airtable, Slack, email alerts, and more.
* **Conditional logic**: Show or hide questions based on previous answers.
* **Fully customizable themes**: Match your Carrd site's colors, fonts, and layout.
* **Free to use**: All core features are free. Only branding removal requires a paid plan.

## Step 1: Generate Your AI Form in Weavely

Head to [Weavely.ai](https://weavely.ai) and describe your form. For example:

> "I need a witty contact form for my landing page. Make it single page."

You can also upload documents or screenshots to guide the AI. Weavely will generate the form automatically. You can tweak questions, styling, and layout as needed inside the editor. We've dedicated [an entire article](https://help.weavely.ai/get-started/the-basics) on how to get started.

## Step 2: Match the Form to Your Carrd Design

Once your form is ready, click the **“Generate Theme”** button and upload a screenshot of your Carrd site. Weavely will extract fonts and colors to visually align with your site.

Optionally:

* Remove the form header image if it's redundant.
* Adjust borders, radius, or background opacity for seamless embedding.

<img alt="Screenshot showing how to match the style of a Weavely AI form to a Carrd website " />

## Step 3: Embed the Form in Carrd

<Warning>
  Important: Carrd’s embed element is only available on Pro Standard plans.
</Warning>

In Weavely, navigate to the \*\*Share \*\*tab and look at the **Embed** section. You'll need to copy both:

* The **script** tag (loads the Weavely library).
* The **form embed** container (the actual form).

<img alt="Screenshot showing how to embed a Weavely form on a website" />

In Carrd you'll need to paste both pieces of code into an **Embed** element, after which you publish your Carrd site (as you do)

<img alt="Screenshot showing how to embed a form in a Carrd website" />

You’ll now see your live, fully functional Weavely form right on your Carrd page.

## Step 4: Send Responses to Google Sheets (Optional)

1. Open your form in Weavely and go to the **Integrations** tab.
2. Click **Add** next to Google Sheets.
3. Connect your Google account (you only need to do this once).
4. Select the fields you want to export.
5. Hit **Create Integration**.

Weavely will automatically create a Google Sheet with a column for each question, and new responses will appear in real time. Check out [this article](https://help.weavely.ai/integrations/google-sheets) for an in-depth (video) tutorial.

## Step 5: Add Conditional Logic (Optional)

Want certain questions to appear only if previous ones are answered?

1. Head to the **Logic** tab in Weavely.
2. Click **Create Logic Rule**.
3. Define the condition (e.g., "if email is filled in").
4. Set the action (e.g., "show subject field").

These logic rules allow you to tailor your form for better user experience and higher completion rates. Again, check out [this article](https://help.weavely.ai/features/skip-logic) for an in-depth tutorial.

<img alt="Screenshot showing how to add conditional logic to a form in Weavely AI" />

Changes you make are \*\*automatically live \*\*after you hit **Publish** in Weavely. Just refresh your Carrd site, and you'll see the updated behavior immediately.


# How to Add a Contact Form to Figma Sites
Source: https://help.weavely.ai/guides/embeds/figma-sites

So you've built your website using Figma Sites, but you're looking to add a web form to it? You've come to the right place!

<iframe title="YouTube video player" />

Figma Sites lets you design and publish websites directly from Figma. However, Figma doesn’t currently have native support for forms. If you want a working contact form or lead-capture form on your Figma website, you can easily embed forms built externally, such as those created with [Weavely.ai](https://Weavely.ai).

Here's how to seamlessly embed a form into your Figma site using a Weavely form as an example.

<Steps>
  <Step title="Create your Form">
    Figma doesn't have a built-in form builder (yet), so you'll  need to build your form in an external tool in order to add it to your Figma Site. We might be biased here, but we think Weavely is a great tool to build forms 😉 For this tutorial we'll keep things simple. We built this contact form:

    <img alt="Screenshot showing an example contact form in Weavely AI" />

    Which we'll embed in one of Figma's template websites:

    <img alt="Screenshot showing an example Figma Site in which we'll embed a Weavely AI contact form" />
  </Step>

  <Step title="Add an Embed Layer in Figma">
    Select whichever page you want to add your form to, and drag an *"Embed"* layer from the toolbar into the page as shown below.

    <img alt="Animated screenshot showing how to add an embed layer in Figma Sites" />

    You'll want to make sure that the embed renders correctly on the various viewports. In our case we modified the embed's *Layout* settings to:

    * *fill* the width of the parent frame
    * fill the height of the parent frame
    * have a *minimum height* of 700 to make sure that it completely renders the form to be embedded

      <img alt="Animated screenshot showing how to style an embed layer in Figma Sites" />
  </Step>

  <Step title="Set the Embed Source">
    Once you've added the embed layer and set its layout you can add the source data. Or in other words, add the form data to the embed layer. You can do this in two ways.

    First, by setting the embed's *URL* to contain the form's URL (see [this tutorial](/get-started/sharing) to get your Weavely forms' URL).

    <img alt="Screenshot showing how to set the embed source of an element in Figma Sites" />

    The downside of this approach is that by default this will make the form scrollable inside your website. Especially on mobile this negatively impacts user experience.

    A second method is to insert the HTML code below in the embed's *HTML* field.

    ```javascript theme={null}
    <iframe
      src="https://forms.weavely.ai/fa735bfb-e1b8-4404-8126-323bbe3f6f60"
      style="width: 100%; height: 100%; border: none; overflow: hidden;"
      scrolling="no"
      allowfullscreen
      loading="lazy">
    </iframe>
    ```

    This ensures that the form isn't scrollable. You will need to make sure that the minimum height is sufficient for the form to completely render inside the iframe though.

    <img alt="Screenshot showing how to set the embed code of an element in Figma Sites" />
  </Step>
</Steps>


# Add a Popup Form to Your Figma Site
Source: https://help.weavely.ai/guides/embeds/figma-sites-popup

Learn how to embed a functional popup form into your Figma site using Weavely

# Add a Pop-Up Form to Your Figma Site

Figma’s new Sites feature lets you publish websites directly from your designs, but it currently lacks native form functionality. With Weavely, you can bridge that gap and embed functional, styled pop-up forms into any Figma site using just a few lines of code.

This guide walks you through how to integrate a Weavely pop-up form without modifying your site’s layout or structure.

<iframe title="YouTube video player" />

<Steps>
  <Step title="Build Your Form in Weavely" icon="hammer">
    Start by creating a form in [Weavely.ai](https://weavely.ai). You can use AI to generate the questions, theme the form to match your Figma design, and preview how it looks. We have a [dedicated "getting started"](https://help.weavely.ai/get-started/the-basics) guide on that, although to be honest it's pretty self-explanatory.

    Once you're happy with your form go ahead and hit *"Publish".*

    <img alt="Screenshot showing how to publish a form in Weavely AI" />

    Once your form is published you'll need to copy the code in the *"Embed Form"* section of the *Share* tab.

    <img alt="Screenshot showing how to embed a Weavely AI form in a website" />

    <Warning>
      Ignore the code in the Popup form section, as this will only render full-screen popups for now. Unless that's what you're looking for obviously!
    </Warning>
  </Step>

  <Step title="Embed the Code in Figma Sites" icon="gear-code">
    In Figma Sites, go to your *"Site settings"*.

    <img alt="Screenshot showing how to embed a form in a Figma Site " />

    You'll want to paste code in two seperate sections of your site's settings. First, paste the *Weavely embed script* into the *\<head>* part of the settings.

    <img alt="Screenshot showing how to add a form embed code to the head of a Figma Site " />

    Second, you'll need to take form \<div> element from Weavely and wrap it in popup logic. For example, if this is your form link: "forms.weavely.ai/8f8b93dd-94cf-4dff-8a21-cccbef407f44". Then the following will create a popup which appears after a second on the bottom right of your site:

    ```html theme={null}
    <div id="popup">
      <button id="close">&times;</button>
      <div data-weavely-form="8f8b93dd-94cf-4dff-8a21-cccbef407f44" data-weavely-mode="embed" style="height:100%;width:100%"></div>
    </div>

    <script>
      setTimeout(() => {
        document.getElementById('popup').style.display = 'block';
      }, 1000);

      document.getElementById('close').onclick = () => {
        document.getElementById('popup').style.display = 'none';
      };
    </script>

    <style>
      #popup {
        display: none;
        position: fixed;
        bottom: 20px;
        right: 20px;
        width: 400px;
        height: 500px;
        border-radius: 8px;
        overflow: hidden;
        box-shadow: 0 4px 12px rgba(0,0,0,0.15);
        z-index: 1000;
      }
      #close {
        position: absolute;
        top: 10px;
        right: 10px;
        background: none;
        border: none;
        font-size: 24px;
        cursor: pointer;
        color: #666;
      }
      @media (max-width: 768px) {
          #popup {
            width: 90%;
            height: 70%;
            bottom: 50%;
            right: 50%;
            transform: translate(50%, 50%);
          }
          #close {
            font-size: 32px;
            padding: 10px;
          }
        }
    </style>
    ```

    You'll need to paste this code into the *\<body>* section of your site's settings.

    <img alt="Screenshot showing how to add a form embed code to the body of a Figma Site" />
  </Step>
</Steps>

## Design-Friendly Integration

You don’t need to modify your actual Figma site design. The popup sits on top of your published site and opens after a short delay (or any custom trigger you define). It can match your site’s color scheme, font, and layout with styling from Weavely (which also supports custom CSS).

You can also:

* Match the popup form's colors to your Figma theme
* Trigger the popup on scroll, after inactivity, or on button click
* Set mobile-specific full-screen modes

## What Happens with Responses?

All submissions go straight into your Weavely dashboard. From there, you can:

* View form results in real time
* Trigger automations via Zapier or Make
* Setup [webhooks with our API](/developers/webhooks) for custom backends
* Send data to Google Sheets, Airtable, Mailchimp, and more


# AI-Generated Forms for Framer
Source: https://help.weavely.ai/guides/embeds/framer

Want to add interactive, AI-powered forms directly into your Framer website? With the Weavely plugin, you can easily embed custom forms into Framer.

This guide will walk you through using the **Weavely.ai** plugin to add forms to your Framer site, generate new forms using AI, and adjust everything to match your site’s style.

<iframe title="YouTube video player" />

<Steps>
  <Step title="Step 1: The Weavely Plugin in Framer" icon="plug">
    Open your Framer project and search for the **Weavely** plugin in the plugin menu.

    <img alt="Screenshot showing how to find the Weavely AI Forms plugin in Framer" />

    Once opened, the plugin will ask for a **form URL**. This is where you paste the URL of any published Weavely form. When added, the form will render directly on your Framer canvas ... ready to publish!

    <img alt="Screenshot showing the Weavely AI Forms plugin in Framer" />

    Alternatively, you can also embed an example form if you first want to see how it works. Don't worry, you can definitely design better-looking forms than this one 😉

    <img alt="Animated screenshot showing the embedding of an example Weavely AI form in Framer" />
  </Step>

  <Step title="Step 2: Create your Weavely Form" icon="wand-magic-sparkles">
    To create a custom form, head over to [weavely.ai](https://www.weavely.ai) and click the “Start for Free” button.

    Inside the editor:

    * On the left, you’ll see a chat-style interface to generate forms with AI.
    * On the right, you’ll see the form being built in real-time.

      <img alt="Screenshot showing how to generate forms and surveys using AI in weavely" />

    You can:

    * Describe your form in plain language (e.g., “I need a contact form for my web agency. Make it somewhat funny.”). The AI will generate questions, pages, and even a visual theme.
    * Ask the AI to tweak questions, reorder elements or add pages.
    * Ask the AI to add conditional logic rules (e.g. show/hide questions or pages).
    * Ask the AI to change the design of the form.

    Of course you can also access all of this functionality outside of the AI editor by toggling "manual mode" in the top bar.
  </Step>

  <Step title="Step 3: Embed the Form in Framer" icon="upload">
    Return to Framer and paste the published form’s URL into the Weavely plugin. The form will appear on the canvas as a component.

    Simply drag-and-drop the component into your design and publish your Framer site. The form is now live and ready to accept responses!
  </Step>
</Steps>

## 📈 What Happens After Visitors Submit?

Once embedded, Weavely handles all form logic and data collection. You can:

* View **responses and analytics** directly inside Weavely.
* **Integrate** with tools like Google Sheets, Notion, Salesforce, HubSpot or get email notifications.
* Apply **conditional logic**, customize design, or edit questions anytime.

Check out our [Help Center](https://help.weavely.ai/) section for an overview of our features and how to use them.


# How to Add a File-Upload Form to Framer with Weavely
Source: https://help.weavely.ai/guides/embeds/framer-file-upload

Add a file upload element to your form in Framer to effortlessly collect document from website visitors. Available for free!

Want to add a file upload element to a form on your Framer website? With Weavely's AI form builder and the official Framer plugin, it's fast and effortless.

<iframe title="YouTube video player" />

<Steps>
  <Step title="Step 1: Create a Weavely Form" icon="wand-magic-sparkles">
    To create a custom form, head over to [weavely.ai](https://www.weavely.ai) and click the “Start for Free” button.

    Inside the editor:

    * On the left, you’ll see a chat-style interface to generate forms with AI.
    * On the right, you’ll see the form being built in real-time.

      <img alt="Screenshot showing how to generate forms and surveys using AI in weavely" />

    You can:

    * Describe your form in plain language (e.g., “I need a contact form for my web agency. Make it somewhat funny.”). The AI will generate questions, pages, and even a visual theme.
    * Ask the AI to tweak questions, reorder elements or add pages.
    * Ask the AI to add conditional logic rules (e.g. show/hide questions or pages).
    * Ask the AI to change the design of the form.

    Of course you can also access all of this functionality outside of the AI editor by toggling "manual mode" in the top bar.
  </Step>

  <Step title="Step 2 (Optional): Ask AI to Add a File Upload Element" icon="robot">
    This step might be redundant, depending on how you prompted AI in the first step. In case your form doesn't contain a file upload element after Step 1, just go ahead and ask the AI to add it. For example:

    > Add a file upload element so my respondents can upload their portfolio to my website.
  </Step>

  <Step title="Step 3: Publish your Form" icon="globe">
    Once you're satisfied with your form, go ahead and press the big blue *"Publish"* button at the top right of the screen. Don't forget to copy the form's URL, you'll need it in the next step 😉

    <img alt="Animated screenshot showing how to publish a form using Weavely AI" />
  </Step>

  <Step title="Step 4: Embed in Framer" icon="plug">
    Open your Framer project and search for the **Weavely** plugin in the plugin menu.

    <img alt="Screenshot showing how to find the Weavely AI Forms plugin in Framer" />

    Once opened, the plugin will ask for a **form URL**. This is where you paste the URL of any published Weavely form. When added, press "Add to Canvas" and the form will render directly on your Framer canvas ... ready to publish!

    <img alt="Screenshot showing the Weavely AI Forms plugin in Framer" />
  </Step>
</Steps>


# How to Add a Form with Conditional Logic to Your Framer Website
Source: https://help.weavely.ai/guides/embeds/framer-logic

Embed a custom AI-powered form with conditional logic into your Framer site using Weavely. Fully responsive and easy to set up in minutes.

Want to add smarter forms to your Framer site? In this guide, we’ll walk through how to use [Weavely.ai](https://www.weavely.ai), an AI-native form builder, to create a form with conditional logic (e.g. showing and hiding form elements, skipping pages, etc.) and embed it in your Framer project using the official Weavely AI Forms plugin.

<iframe title="YouTube video player" />

<Steps>
  <Step title="Step 1: Create a Weavely Form" icon="wand-magic-sparkles">
    To create a custom form, head over to [weavely.ai](https://www.weavely.ai) and click the “Start for Free” button.

    Inside the editor:

    * On the left, you’ll see a chat-style interface to generate forms with AI.
    * On the right, you’ll see the form being built in real-time.

      <img alt="Screenshot showing how to generate forms and surveys using AI in weavely" />

    You can:

    * Describe your form in plain language (e.g., “I need a contact form for my web agency. Make it somewhat funny.”). The AI will generate questions, pages, and even a visual theme.
    * Ask the AI to tweak questions, reorder elements or add pages.
    * Ask the AI to change the design of the form.

    Of course you can also access all of this functionality outside of the AI editor by toggling "manual mode" in the top bar.
  </Step>

  <Step title="Step 2: Ask AI to Add Conditional Logic" icon="robot">
    Similarly to building your form, you can add conditional logic simply by prompting the AI to do so in the chat. For example:

    > Only make question X visible if the user has typed an answer for question Y.

    Or even

    > Skip page 2 if the user has responded "No" to question X on page 1.

    You can also manually add these conditional logic rules or tweak the ones generated by AI. [Here's a short tutorial on how to do this](/features/skip-logic).
  </Step>

  <Step title="Step 3: Publish your Form" icon="globe">
    Once you're satisfied with your form, go ahead and press the big blue *"Publish"* button at the top right of the screen. Don't forget to copy the form's URL, you'll need it in the next step 😉

    <img alt="Animated screenshot showing how to publish a form using Weavely AI" />
  </Step>

  <Step title="Step 4: Embed in Framer" icon="plug">
    Open your Framer project and search for the **Weavely** plugin in the plugin menu.

    <img alt="Screenshot showing how to find the Weavely AI Forms plugin in Framer" />

    Once opened, the plugin will ask for a **form URL**. This is where you paste the URL of any published Weavely form. When added, press "Add to Canvas" and the form will render directly on your Framer canvas ... ready to publish!

    <img alt="Screenshot showing the Weavely AI Forms plugin in Framer" />
  </Step>
</Steps>


# How to Add a Multi-Step Form to Framer with Weavely
Source: https://help.weavely.ai/guides/embeds/framer-multi-step

Add an AI-powered multi-step form to your Framer site using Weavely. Create pages, collect leads, and embed in seconds.

Want to embed a multi-step form in your Framer website? With Weavely's AI form builder and the official Framer plugin, it's fast and effortless.

<iframe title="YouTube video player" />

<Steps>
  <Step title="Step 1: Create a Weavely Form" icon="wand-magic-sparkles">
    To create a custom form, head over to [weavely.ai](https://www.weavely.ai) and click the “Start for Free” button.

    Inside the editor:

    * On the left, you’ll see a chat-style interface to generate forms with AI.
    * On the right, you’ll see the form being built in real-time.

      <img alt="Screenshot showing how to generate forms and surveys using AI in weavely" />

    You can:

    * Describe your form in plain language (e.g., “I need a contact form for my web agency. Make it somewhat funny.”). The AI will generate questions, pages, and even a visual theme.
    * Ask the AI to tweak questions, reorder elements or add pages.
    * Ask the AI to change the design of the form.

    Of course you can also access all of this functionality outside of the AI editor by toggling "manual mode" in the top bar.
  </Step>

  <Step title="Step 2 (Optional): Ask AI to Create Multiple Steps" icon="robot">
    This step might be redundant, depending on how you prompted AI in the first step. In case your form is single page or in case you want to move some questions around you can continue chatting to our AI to have your form just right. For example:

    > Seperate this form into X distinct pages, make sure that relevant questions are grouped together on the same page.
  </Step>

  <Step title="Step 3: Publish your Form" icon="globe">
    Once you're satisfied with your form, go ahead and press the big blue *"Publish"* button at the top right of the screen. Don't forget to copy the form's URL, you'll need it in the next step 😉

    <img alt="Animated screenshot showing how to publish a form using Weavely AI" />
  </Step>

  <Step title="Step 4: Embed in Framer" icon="plug">
    Open your Framer project and search for the **Weavely** plugin in the plugin menu.

    <img alt="Screenshot showing how to find the Weavely AI Forms plugin in Framer" />

    Once opened, the plugin will ask for a **form URL**. This is where you paste the URL of any published Weavely form. When added, press "Add to Canvas" and the form will render directly on your Framer canvas ... ready to publish!

    <img alt="Screenshot showing the Weavely AI Forms plugin in Framer" />
  </Step>
</Steps>


# How to Add a Contact Form to Your GoDaddy Website
Source: https://help.weavely.ai/guides/embeds/go-daddy

Create a free contact form with AI and embed it on your GoDaddy website in minutes. Works with GoDaddy Website Builder and WordPress, no coding required.

GoDaddy's built-in contact form options are limited, and if you've ever dealt with Contact Form 7 not sending emails on GoDaddy hosting, you know the frustration. With Weavely's [free AI form builder](/), you can skip all of that. Just describe the form you need in plain English, and have it live on your website in minutes.

<iframe title="YouTube video player" />

<Info>
  Weavely is a **free AI form builder** with no limits on forms or responses. It works with GoDaddy Website Builder, GoDaddy WordPress sites, and any platform that supports HTML embed codes.
</Info>

## What you'll need

* A Weavely account (free)
* A GoDaddy website (Website Builder or WordPress)
* About 2 minutes

## Create a contact form with the AI form builder

<Steps>
  <Step title="Open Weavely and describe your form">
    Head to [weavely.ai](https://weavely.ai) and start a new form. In the AI chat, describe what you need. Be as specific as you can, since the output quality depends on your prompt.

    For example:

    > I need a contact form for a coaching website. Make it multi-page and ask smart questions about coaching goals.

    The AI form generator will create a complete, ready-to-use contact form in seconds, with fields for name, email, phone number, and whatever else fits your description.

    <Frame>
      <img alt="Screenshot showing the generation of a contact form in Weavely AI." />
    </Frame>
  </Step>

  <Step title="Review and customise your form">
    Once the AI generates your form, review it and make any changes. You can:

    * Add or remove fields by chatting with the AI
    * Rearrange pages on multi-step forms
    * Adjust branding, colours, and button styles
    * Toggle required fields on or off

    In this example, we'll remove the header visual since the form will live inside our existing website design.

    <Frame>
      <img alt="Screenshot showing a contact form generated by Weavely AI." />
    </Frame>
  </Step>

  <Step title="Publish your form">
    When you're happy with the form, click **Publish** in the top-right corner. This makes your form live and gives you a shareable URL.

    You can share that URL directly, but for embedding on your website we'll grab the embed code in the next section.

    <Frame>
      <img alt="Screenshot2026 03 23at20 01 18" />
    </Frame>
  </Step>
</Steps>

## Embed the form on your GoDaddy website

<Steps>
  <Step title="Copy the embed code from Weavely">
    In the publish/share dialog, click the **Embed form** tab. You'll see two snippets of code.

    Copy both snippets. You'll paste them together into your website editor.

    <Frame>
      <img alt="Screenshot showing where the find the embed code in Weavely AI." />
    </Frame>
  </Step>

  <Step title="Add an HTML section in the GoDaddy editor">
    Open your website in the GoDaddy editor. Navigate to the page where you want your contact form to appear.

    Click **Add a Section**, then search for **HTML**. Add the HTML section to your page.

    <Frame>
      <img alt="Screenshot showing the addition of an HTML element to embed a contact form in GoDaddy." />
    </Frame>
  </Step>

  <Step title="Paste the embed code">
    Click on the HTML section you just added. You'll see a code editor box. Paste **both** Weavely embed snippets into this box, one after the other.

    <Frame>
      <img alt="Screenshot showing where to add the Weavely AI embed code to embed a contact form in GoDaddy." />
    </Frame>
  </Step>

  <Step title="Publish your website">
    Click **Publish** in GoDaddy to push your changes live. Your contact form is now embedded and active on your site.

    Hit **Preview** to test it. Fill in the form and submit to make sure everything works.
  </Step>
</Steps>

<Check>
  Your contact form is now live. Responses are collected automatically inside Weavely.
</Check>

## View and manage form responses

Every submission is stored inside the Weavely platform. Head to your form's dashboard to:

* **View individual responses** as they come in
* **See analytics** like completion rates, drop-off points, and trends
* **Generate smart reports** or download responses as PDFs
* **Export data** to tools you already use

<Frame>
  <img alt="Screenshot showing responses to a contact form in Weavely AI." />
</Frame>

## Set up contact form email notifications

Most website owners want an email alert every time someone fills in their contact form. You can configure this in Weavely under the [notifications settings](/integrations/email-notifications):

<AccordionGroup>
  <Accordion title="Get notified when someone submits your form">
    Go to your form's settings and enable **Submission emails**. Enter the email address where you'd like to receive notifications. You'll get an email with the full form response every time someone submits.
  </Accordion>

  <Accordion title="Send a confirmation email to the respondent">
    Enable **Respondent confirmation emails** to automatically let people know you received their enquiry. This builds trust and sets expectations for a reply. The email includes a summary of the data they entered.
  </Accordion>
</AccordionGroup>

<Tip>
  This solves the common issue of contact forms not sending emails on GoDaddy. Since Weavely handles email delivery independently, you won't run into SMTP configuration problems or Contact Form 7 email issues.
</Tip>

## Connect form responses to Google Sheets, Salesforce, and more

If you want responses to land in an external tool, head to the **Integrations** tab on your form. For example, you can [send form responses to Google Sheets automatically](/integrations/google-sheets). Weavely also connects with:

* **Salesforce**: push leads directly into your CRM
* **HubSpot**: sync contacts and form data
* **Notion**: log responses in your workspace
* **Zapier / Make / n8n**: connect to thousands of other apps

<Frame>
  <img alt="Screenshot showing the integrations list in Weavely AI." />
</Frame>

## Works for any form type, not just contact forms

While contact forms are the most common use case, the AI form builder can generate any type of form for your GoDaddy website. You might use it to create a registration form for an upcoming event, a feedback survey to collect opinions from customers, a booking form for appointments, or an order form for products and services. Some users also build lead generation forms with conditional logic or job application forms with file uploads.

The embed process is exactly the same regardless of what you're building: describe it, publish, paste the embed code.

<Warning>
  GoDaddy's free plan may have limitations on custom HTML sections. If you can't find the HTML option, you may need to upgrade your plan.
</Warning>

## Frequently asked questions

<AccordionGroup>
  <Accordion title="Does GoDaddy have a built-in form builder?">
    GoDaddy Website Builder includes a basic contact section, but it's limited in what you can customise. It doesn't support multi-step forms, conditional logic, or advanced field types. Using an AI form builder like Weavely gives you much more flexibility and you can create any type of form, not just a simple contact page.
  </Accordion>

  <Accordion title="How do I add a fillable form to my GoDaddy website?">
    Add an HTML section to your page in the GoDaddy editor (click "Add a Section" and search for "HTML"), then paste in the embed code from your form builder. Weavely generates the embed code for you automatically, so just copy and paste both snippets. The form will be fully fillable and mobile-responsive once published.
  </Accordion>

  <Accordion title="Why is my GoDaddy contact form not sending emails?">
    This is usually caused by SMTP restrictions on GoDaddy's hosting, especially if you're using WordPress plugins like Contact Form 7. A common workaround is to use a standalone form tool like Weavely, which handles email delivery on its own servers. You can set up both submission notifications and respondent confirmations without touching any server-side email settings.
  </Accordion>

  <Accordion title="Can I embed a contact form on GoDaddy for free?">
    Yes. Weavely is free to use with no limits on forms or responses. You can create a contact form with AI, customise it to match your branding, embed it on your GoDaddy site, and collect unlimited responses, all without paying. The only requirement on the free plan is a small "generated by Weavely AI" badge on the form.
  </Accordion>
</AccordionGroup>


# How to Embed a Custom AI Form into Google Sites
Source: https://help.weavely.ai/guides/embeds/google-sites

Learn how to embed a custom AI-generated form into your Google Sites page using Weavely.

Weavely makes it easy to build beautiful, logic-rich forms using AI—and just as easy to embed them into your Google Sites page. In this tutorial, we’ll walk through how to create a lead generation form and integrate it into a Google Site, with tips to make sure it looks great on both desktop and mobile.

<iframe title="YouTube video player" />

<Steps>
  <Step title="Build Your AI Form in Weavely" icon="hammer">
    To start, head to [Weavely.ai](https://weavely.ai) and generate your form using a natural-language prompt like:

    > “I need a lead generation form for my agency website. It should qualify potential projects.”

    Weavely will create a form with relevant questions automatically: project name, service interest, budget, timing, and more.

    You can:

    * Edit any question manually
    * Add more fields or pages
    * Customize the design (fonts, colors, borders, button style)
    * Use Weavely’s AI styling based on your brand or website design

    <Info>
      *All core features are free, including unlimited responses. The only paid feature is removing the “Powered by Weavely” badge.*
    </Info>
  </Step>

  <Step title="Publish and Copy the Share URL" icon="link">
    Once your form looks the way you want:

    1. Click **Publish**.
    2. Go to the **Share** tab.
    3. Copy the standalone **form URL** (not embed code, just the plain URL).

    You can test it in a new tab to confirm it loads the full form page. But trust us, it does 😉
  </Step>

  <Step title="Embed the Form in Google Sites" icon="display-code">
    1. Open your Google Sites page and navigate to the section where you want to insert the form.
    2. Scroll to the bottom and click the **Embed** option from the sidebar.
    3. Paste your Weavely form’s URL into the **"By URL"** tab.
    4. Choose the **“Whole page”** display option.
    5. Click **Insert**.

       <img alt="Screenshot showing an example Google Site " />

    You’ll now see the live form appear inside your Google Site.
  </Step>
</Steps>

## Optimizing Layout for Desktop & Mobile

Google Sites preserves the aspect ratio of your embedded form, which can cause layout issues. Especially on mobile!

### Common Issues:

* **Scrollbars on desktop** if the form is too tall.
* **Tiny, squished forms on mobile** if the aspect ratio isn’t mobile-optimized.

### Workaround:

* Resize the embed container manually by dragging the edges.
* For **mobile**: Make the embed container **narrower and taller**.
* For **desktop**: Fill horizontal space by placing an **image** next to the form.

For example, this is how we tackled the issue in our example video:

<img alt="Screenshot showing a Weavely AI form embedded in a Google Site" />

It’s a balancing act, but with a bit of tweaking, you can get a good result on both devices.

## Summary

You now have a beautifully styled, fully functional form built with Weavely’s AI, embedded directly in your Google Site with no coding required. While Google Sites has a few layout quirks, with the right tweaks your form will look great and capture leads effectively.

Need more styling flexibility or advanced logic? You can always go back to Weavely to tweak themes, add logic conditions, or connect integrations like Google Sheets, Mailchimp, and more.


# AI-Generated Forms for Webflow
Source: https://help.weavely.ai/guides/embeds/webflow

Want to add interactive, AI-powered forms directly into your Webflow website? With the Weavely plugin, you can easily embed custom forms into Webflow.

This guide will walk you through using Weavely's [Webflow App](https://webflow.com/apps/detail/weavely-ai-forms) to add forms to your Webflow site, generate new forms using AI, and adjust everything to match your site’s style.

<iframe title="YouTube video player" />

<Steps>
  <Step title="Step 1: The Weavely App in Webflow" icon="plug">
    Open your Webflow project and launch the **Weavely** app from the designer.

    <img alt="Screenshot showing how to find the Weavely AI Forms app in Webflow" />

    Select a **div or container** where you want to embed the form. The app will ask for a form URL, which you'll get from Weavely after creating your form.

    <img alt="Screenshot showing the Weavely AI Forms app before injecting a form in Webflow" />

    Alternatively, you can embed an **example form** first to see how it works. Simply click the example form button, and a sample form will be inserted into your selected container. Don't worry, you can definitely design better-looking forms than this one 😉

    <Note>
      The form appears as a placeholder in the Webflow designer. The actual form will only render on your published website.
    </Note>
  </Step>

  <Step title="Step 2: Create your Weavely Form" icon="wand-magic-sparkles">
    To create a custom form, head over to [weavely.ai](https://www.weavely.ai) and click the "Start for Free" button.

    Inside the editor:

    * On the left, you'll see a chat-style interface to generate forms with AI.
    * On the right, you'll see the form being built in real-time.

      <img alt="Screenshot showing the Weavely AI Form editor" />

    You can:

    * Describe your form in plain language (e.g., "I need a contact form for my website. Keep it very basic, three questions."). The AI will generate questions, pages, and even a visual theme.
    * Ask the AI to make it multi-step (e.g., "Actually, I want this to be multi-step. Make sure we have different questions on different pages.")
    * Ask the AI to adjust the design (e.g., "I want the background to be transparent and I want the top visual to be gone.")
    * Ask the AI to add conditional logic rules (e.g., "I only want to show the message field if somebody provided an email address.")

    Of course you can also access all of this functionality outside of the AI editor by toggling "manual mode" in the top bar.

    Once you're happy with your form, click **Publish** and copy the form URL.

    <img alt="Screenshot showing the screen after you publish a form in Weavely AI" />
  </Step>

  <Step title="Step 3: Embed the Form in Webflow" icon="upload">
    Return to Webflow and paste the published form's URL into the Weavely app.

    Click **"Add to Design"** and the form will be embedded in your selected container.

    <Note>
      The form appears as a placeholder in the Webflow designer. The actual form will only render on your published website.
    </Note>

    <img alt="Screenshot of a Weavely AI form embedded in the designer of Webflow" />

    Publish your Webflow site. The form is now live and ready to accept responses!

    <img alt="Screenshot showing a Weavely AI form embedded in a Webflow website" />

    <Tip>
      Need to update your form? Simply edit it in Weavely, click Publish, and refresh your Webflow website. The changes appear automatically—no need to update URLs or republish your Webflow site!
    </Tip>
  </Step>
</Steps>

## 📈 What Happens After Visitors Submit?

Once embedded, Weavely handles all form logic and data collection. You can:

* View **responses and analytics** directly inside Weavely.
* **Integrate** with tools like Google Sheets, Notion, Salesforce, HubSpot or get email notifications.
* Apply **conditional logic**, customize design, or edit questions anytime.


# Weavely.ai - Use Cases & Examples
Source: https://help.weavely.ai/guides/examples-cover

Learn how to apply Weavely.ai to practical use cases through some curated examples

# Finding Your Way Around Our Guides

We've divided our help center in catogeries, here's an overview of what to find where

<CardGroup>
  <Card title="Use Cases" icon="briefcase" href="/guides/use-cases">
    How to use Weavely for various scenarios.
  </Card>

  <Card title="Website Embeds" icon="code" href="/guides/embeds">
    Learn how to use Weavely in your favourite website builder.
  </Card>
</CardGroup>

<CardGroup />


# Auto-Generate Post-Meeting Surveys with n8n and Weavely
Source: https://help.weavely.ai/guides/use-cases/auto-generate-post-meeting-surveys-with-n8n-and-weavely

Learn how to automatically generate tailored post-meeting surveys from your Google Meet notes using an n8n AI agent and the Weavely MCP.

<iframe title="YouTube video player" />

Most meetings end with good intentions and no follow-through. A post-meeting survey is the simplest way to capture feedback while the discussion is still fresh, but nobody sends them manually because the effort is not worth it for every call.

This guide shows you how to build an n8n workflow that does it automatically. When a meeting ends, the workflow reads your Google Meet notes, generates tailored survey questions using an AI agent, builds the form via the Weavely MCP, and sends it to all attendees after a quick Slack approval.

You can also use our free template here: [https://n8n.io/workflows/15095](https://n8n.io/workflows/15095)

## What you need

* Google Workspace Business Standard or higher (required for Gemini meeting notes)
* OpenAI API key
* Weavely account — free at [weavely.ai](https://weavely.ai)
* Slack workspace connected to n8n
* Gmail account connected to n8n

## How the workflow works

<Frame>
  <img alt="Screenshot of a n8n workflow to generate post-meeting surveys using Weavely AI MCP." />
</Frame>

The full flow looks like this:

1. Google Calendar detects when a meeting ends
2. Waits 10 minutes for Gemini to generate and attach notes to the event
3. Re-fetches the event and extracts the Gemini notes doc
4. An AI agent reads the notes and generates 5 to 7 tailored survey questions
5. The Weavely MCP builds and publishes the form
6. A Slack message is sent to the organiser with the form link and Approve / Reject buttons
7. On approval, all attendees receive a branded email with the survey link

## Set up the workflow

Start by importing the template into your n8n instance. You can find the template in the n8n template library (currently pending approval, you'll need to build this manually based on the video).

<Steps>
  <Step title="Configure your calendar and Slack">
    Open the **Configuration** node at the start of the workflow. Update the two values:

    * `calendarId`: your Google Calendar email address (e.g. `you@yourcompany.com`)
    * `slackUserId`: your Slack member ID

    To find your Slack member ID, open Slack, click your name in the top left, select **Profile**, click the three dots, and choose **Copy member ID**.
  </Step>

  <Step title="Connect your credentials">
    Connect the following credentials in each node. n8n will prompt you the first time you open each one:

    * **Google Calendar Trigger** and **Get an event**: connect your Google Calendar account
    * **Get a document**: connect your Google Docs account
    * **OpenAI Chat Model**: add your OpenAI API key
    * **Slack**: connect your Slack workspace
    * **Send a message**: connect your Gmail account

    <Note>
      The Weavely MCP Client does not require authentication. It connects directly to `https://mcp.weavely.ai/mcp` without credentials.
    </Note>
  </Step>

  <Step title="Enable Slack interactivity">
    For the Approve and Reject buttons to work inline in Slack (rather than opening a browser window), you need to enable Interactivity in your Slack app settings.

    1. Go to [api.slack.com/apps](https://api.slack.com/apps) and open your Slack app
    2. Click **Interactivity and Shortcuts** in the left sidebar
    3. Toggle Interactivity on
    4. Set the **Request URL** to your n8n webhook-waiting URL

    Your webhook-waiting URL follows this format:

    ```text theme={null}
    https://your-n8n-instance.com/webhook-waiting/[webhook-id]
    ```

    You can find the exact URL in the **Send message and wait for response** node once the workflow has run at least once.
  </Step>

  <Step title="Activate the workflow">
    Once credentials are connected and Slack interactivity is configured, toggle the workflow to **Active** in n8n.

    The workflow now fires automatically whenever a calendar event matching the word "Meeting" ends. You can change this match term in the Google Calendar Trigger node to match your own naming conventions.
  </Step>
</Steps>

## How a survey gets generated

<Frame>
  <img alt="Screenshot of an AI agent in n8n which generates post-meeting surveys using the Weavely MCP." />
</Frame>

When a meeting ends, the workflow waits 10 minutes to give Google time to generate and attach the Gemini notes doc to the calendar event. It then looks for an attachment titled **"Notes by Gemini"** on the event. If found, it reads the full document.

The AI agent receives the meeting notes alongside a prompt that instructs it to generate 5 to 7 survey questions directly based on the topics discussed. It is not asked to generate generic meeting feedback questions. The questions reflect the actual content of the meeting: decisions made, action items assigned, topics covered.

The agent then uses the Weavely MCP tools to build and publish the form automatically. A copy of the form is created in Weavely's system and a shareable link is returned.

## The Slack approval step

<Frame>
  <img alt="Screenshot showing the approval step of an n8n workflow in Slack." />
</Frame>

Once the form is ready, you receive a Slack DM with the claim link and two buttons: **Approve** and **Reject**.

Before clicking Approve, open the claim link. This brings you into Weavely where you can review the generated survey, make any edits using Weavely's AI editor if needed, and publish the form to your account. If you do not have a Weavely account yet, you will be prompted to create one for free.

Once the form is published, come back to Slack and click **Approve**. The workflow resumes and sends the survey link to all meeting attendees by email.

If the survey does not look right, click **Reject** and the workflow stops without sending anything.

## Viewing responses

After attendees fill in the survey, responses appear automatically in your [Weavely dashboard under the **Results** tab](/get-started/smart-insights-analyze-survey-results-with-ai).

From there you can:

* View responses directly in Weavely
* Export to Google Sheets, Airtable, HubSpot, or any other tool via Weavely's integrations
* Set up automated workflows using Weavely's n8n or Zapier integrations to route responses wherever you need them

## Customising the workflow

The template is designed to be a starting point. Common adjustments:

**Different calendar or meeting tool:** Swap the Google Calendar Trigger for a Calendly trigger, a Zoom webhook, or any other calendar node n8n supports. The rest of the workflow stays the same.

**Different notification channel:** Replace the Slack node with a Microsoft Teams node, a Telegram node, or an email if you prefer approvals by email.

**Different AI model:** The template uses `gpt-4.1-mini` for cost efficiency. Swap the OpenAI Chat Model node for Claude, Gemini, or any other model supported by n8n if you want different output quality or cost characteristics.

**Adjust the survey questions:** Edit the prompt in the AI Agent node to change the number of questions, the question types, or the focus areas. The current prompt targets outcomes, decisions, and action item clarity.

**No Gemini notes:** If your Google Workspace plan does not include Gemini meeting notes, you can still use this workflow. Remove the **Filter Meeting Notes File** and **Get a document** nodes, and pass the meeting title and attendee list directly to the AI Agent instead. The questions will be less tailored but still useful for recurring meetings with predictable content.


# How to Create AI-Powered Lead Generation Forms and Sync Leads into HubSpot Using Weavely.ai
Source: https://help.weavely.ai/guides/use-cases/hubspot-lead-gen

Looking to streamline your lead generation process with AI? Here's how to generate leads with Weavely.ai and HubSpot.

<iframe title="YouTube video player" />

Capturing and managing high-quality leads efficiently can be a challenge. Especially if you're dealing with manual form creation and CRM integrations. In this guide, you'll discover how Weavely.ai lets you effortlessly create powerful, multi-page lead generation forms using AI, and seamlessly integrate those leads directly into your HubSpot CRM.

## Generating Your Lead Generation Form with AI

Start by clearly describing the lead generation form you need. With Weavely.ai, you can either type your description, speak directly to the AI, or even upload supporting documents.

For example:

```
I need a lead generation tool for an AI form builder. I want to know what kind of form builder people are using today—use a dropdown populated with the top players in the field. I'm also interested in what they currently lack as functionality in their current tools. Also, ask any other questions that you think are relevant for a lead generation form. I want it spread across multiple pages.
```

Weavely instantly generates a structured form (see gif below) that includes:

* A dropdown pre-filled with top form builders currently used.
* Questions about missing functionality.
* Additional qualifying questions (e.g., other tools used).
* Essential contact fields like name, email, and company name.

<img alt="Animated screenshot showing an example form generated using Weavely AI" />

## Further Customize Your Form (Optional)

Once the AI-generated form is ready, you can enter the manual editor to further customize it:

* Adjust form questions and page structure.
* Apply your branding (fonts, colors, styles).
* Set up advanced logic to skip or show questions conditionally.

Although powerful, customization is optional. Weavely.ai’s generated forms are ready-to-use immediately.

<img alt="Screenshot showing an example contact form in Weavely AI" />

## Integrate Your Form with HubSpot CRM

Effortlessly sync your form submissions directly into your HubSpot CRM to streamline your lead generation process:

1. Open the **Integrations** tab in Weavely.ai.
2. Select **HubSpot** and sign in (single sign-on available).
3. Choose the HubSpot account you'd like to integrate.
4. Map essential form fields to HubSpot contact properties, such as:
   * **First Name**
   * **Last Name**
   * **Email Address**

You can also map additional fields depending on your HubSpot setup. Check out this dedicated tutorial if you're stuck:

<iframe title="YouTube video player" />

## Publish and Share Your Form

Now you're ready to collect leads:

* Click **Publish** to activate your form.
* Share the standalone form via a direct link.
* Embed the form directly onto your website or as a popup.

<img alt="Screenshot showing how to access the sharing options in Weavely AI" />

<Tip>
  To ensure everything works smoothly:

  * Fill out your form like an actual lead would.
  * Submit the form.
  * Visit HubSpot and refresh your contacts page.

  You’ll instantly see the newly submitted lead created with all the mapped data accurately captured.
</Tip>

## Why Choose Weavely.ai for Lead Generation?

Traditional lead gen workflows can be cumbersome:

* Time-consuming manual form setup.
* Complicated integrations requiring technical skills.
* Manual data entry and synchronization.

With Weavely.ai, you get:

* Rapid, AI-driven form creation tailored exactly to your needs.
* Effortless, automatic HubSpot integration.
* Instant lead capture and management, reducing manual overhead.

This workflow lets you focus on what matters most ... turning leads into customers!


# How to Automatically Send Form Responses to Google Sheets Using n8n and Weavely.ai
Source: https://help.weavely.ai/guides/use-cases/n8n-google-sheets

Build a form with AI, connect it to n8n, and automatically send every response to Google Sheets. No manual data entry, no copy-pasting. Here's how to set it up in minutes.

<iframe title="YouTube video player" />

Collecting form responses in a spreadsheet is one of the most common automation use cases — whether it's event registrations, lead capture, or feedback surveys. But manually copying data from forms into Google Sheets gets old fast. In this guide, you'll learn how to build a form with AI using Weavely.ai, connect it to n8n, and have every submission automatically appear as a new row in Google Sheets.

## Create Your Form with Weavely AI

Instead of manually building a form field by field, you can describe what you need and let Weavely generate it for you. Just type a prompt describing your form and Weavely will create a complete, ready-to-use form in seconds.

For example:

```
Registration form for my birthday party
```

Weavely instantly generates a structured form that includes fields for name, email, number of guests, and dietary restrictions, plus a thank you page.

From there, you can keep iterating through conversation. In this example, we asked Weavely to make the background more fun and birthday-themed, and it updated the visuals accordingly. You can tweak questions, styling, layout, and more, all through natural language prompts.

<Frame>
  <img alt="Screenshot showing a birthday party registration form generated by Weavely AI" />
</Frame>

## Set Up the n8n Workflow

With your form ready, the next step is creating an n8n workflow that listens for new submissions. This uses the Weavely community node, a verified node you can install directly in n8n.

**Prerequisites:** You'll need community nodes enabled in your n8n admin panel. n8n recently made this available for cloud-hosted plans as well (still in beta at time of recording). For more detail on this step, see our [n8n integration guide](/integrations/n8n).

Once community nodes are enabled:

1. Create a new workflow in n8n.
2. Search for **Weavely** in the trigger list and add it to your workflow.
3. Set up your credentials by pasting a **personal token** from Weavely (found under *Settings → Personal Tokens* in the Weavely dashboard).
4. Select your **team** and then pick the specific **form** you want to monitor.

If your form doesn't appear in the dropdown, try closing and reopening the trigger node, it should show up after that.

<Frame>
  <img alt="Screenshot showing the setup of the Weavely trigger node in n8n" />
</Frame>

## Test the Trigger

Before wiring up Google Sheets, it's worth testing that the trigger works. Press **Execute Step** in n8n, then head over to your published form and submit a test response.

Once submitted, n8n will pick up the response and display the output data. This includes each answer's question label, value, and question ID. This confirms the connection is working and shows you exactly what data is available to map to your spreadsheet.

<Frame>
  <img alt="Screenshot showing responses from a Weavely AI form in the n8n trigger" />
</Frame>

## Connect Google Sheets and Map Your Columns

Now for the final piece: sending that form data into a Google Sheet.

1. Prepare a Google Sheet with columns matching your form fields (e.g. Name, Email, Guests, Diet).
2. Add the built-in **Google Sheets** node to your n8n workflow after the Weavely trigger.
3. Select your Google Sheets document and the specific sheet tab.
4. n8n will fetch the column headers. From there, map each column to the corresponding form response value by dragging the fields from the Weavely trigger output.

Once the mapping is done, save your workflow and set it to **Active**. From this point on, every form submission will automatically add a new row in your Google Sheet.

<Frame>
  <img alt="Mapping Weavely AI form responses to Google Sheet columns in n8n" />
</Frame>

<Tip>
  To verify everything works end-to-end:

  * Reload your published form and fill in a fresh test submission.
  * Submit the form.
  * Check your Google Sheet. The new row should appear within seconds.
  * You can also confirm the execution in n8n under the workflow's execution log.
</Tip>

## Taking It Further

The workflow shown here is intentionally basic: form submissions go straight into Google Sheets. But because you're using n8n, you can extend this in many ways. Add AI processing steps between the trigger and the spreadsheet, send notifications to Slack when a new response comes in, or branch the workflow to update multiple destinations at once. The Weavely trigger gives you all the form data you need; what you do with it from there is up to you.

## Why Use Weavely + n8n for Google Sheets?

If you just need form responses in a spreadsheet, Google Forms does the job. But that approach has limits: rigid templates, limited customization, and no automation beyond the spreadsheet itself. Combining Weavely and n8n gives you:

* **AI-powered form creation**: describe what you need and get a complete form in seconds, instead of building it field by field.
* **A real automation layer**: n8n sits between your form and your spreadsheet, so you can add processing, filtering, notifications, or multi-step workflows.
* **Free and unlimited**: Weavely has no limits on forms or responses, and n8n's community edition is open-source.

For simple, one-off forms, Google Forms is fine. But when you want more control over both the form and what happens after someone hits submit, this stack is hard to beat.


# How to Generate PDF Reports from Form Responses with AI
Source: https://help.weavely.ai/guides/use-cases/pdf-reports

Generate dynamic PDF reports from AI‑powered form responses. Turn survey submissions into professional PDF reports automatically with Weavely.

Weavely lets you create powerful AI-generated forms. In this guide, we’ll show you how to take your form submissions, turn them into a beautifully formatted PDF, and automatically email that PDF either to the respondent or to yourself, all for free using [Make](https://www.make.com/).

<iframe title="YouTube video player" />

## 🛠 Tools You’ll Need

* [**Weavely**](https://weavely.ai/) – Our AI-native form builder.
* [**Make**](https://make.com) – A no-code automation platform with a generous free tier.
* **Google Docs & Drive** – To create the PDF template and store documents.
* **Gmail** – Or any email service connected via Make.

<Steps>
  <Step title="Create Your Form in Weavely" icon="wand-magic-sparkles">
    Build your form using Weavely. You can use the AI prompt or build manually.

    > Example: A contact form collecting name, email, phone number, and company.

    Make sure your form includes an email field if you want to email the response to the user. For a quick overview of how Weavely works, check out our ["getting started" tutorial](https://help.weavely.ai/get-started/the-basics).
  </Step>

  <Step title="Create a Google Docs Template" icon="file-doc">
    In Google Docs, create a template for the PDF. Use **double curly braces** to define placeholders for dynamic values, as follows:

    ```
    Date: {{date}}
    Name: {{full_name}}
    Email: {{email}}
    Company: {{company}}
    ```

    For example, here's the template we created for our video tutorial.

    <img alt="Screenshot of an example pdf report which will be populated with form responses from Weavely AI" />
  </Step>

  <Step title="Set Up Your Scenario in Make" icon="gear">
    Create a new scenario in Make. You'll need four modules in this scenario.

    ### Module 1: Watch Weavely Form Submissions

    This module will trigger the automation when a new form response is submitted.

    * Add: `Weavely > Watch Form Submission`
    * Connect your Weavely account (follow the wizard).
    * Select the correct **team** and **form**.

    You can read our [dedicated tutorial](/integrations/make) if you need help setting up the Weavely module in Make.

    <img alt="Screenshot of setting up Weavely AI in make.com" />

    ### Module 2: Create Document from Template

    * Add: `Google Docs > Create Document from Template`
    * Connect your Google account.
    * Choose your template document from Drive.
    * Map the template placeholders to your form values:
      * `{{date}}` → `Submission Date`
      * `{{full_name}}` → `Full Name`
      * `{{email}}` → `Email`
      * `{{company}}` → `Company`
    * Set a document name (e.g., `"Contact Form Submission"`).
    * Choose the folder where the document will be saved.

      <img alt="Screenshot of setting up a word document template in make.com " />

    ### Module 3: Download a File

    To convert the Google doc you created with module 2 into a PDF you'll need the Google Drive "Download a File" module.

    * Add: `Google Drive > Download a File`
    * Use the document ID from the previous module.
    * Enable: `Convert Google Document to format → PDF`.

      <img alt="Screenshot showing how to download a google doc in  make.com" />

    ### Module 4: Send Email with Attachment

    Finally, you'll need to send the report to someone. This could be yourself, or a respondent.

    * Add: `Gmail > Send Email` (or another mail service).
    * To: Use the respondent’s email address (from the Weavely response) or your own.
    * Subject: `"Your Weavely Report"`
    * Body: Optional – you can leave this blank or customize it.
    * Attachment: The PDF file from the previous module.

      <img alt="Screenshot showing how to send an email with make.com" />
  </Step>

  <Step title="Test the Flow" icon="vial">
    1. Run your scenario.
    2. Submit the form.
    3. Check your email inbox – you (or the respondent) should receive a PDF.

    The PDF will contain the form data, and any missing fields will be left blank.
  </Step>
</Steps>

## Summary

With Weavely and Make, you can:

* Generate a form with AI to capture data
* Use that data to populate dynamic templates
* Generate branded PDF reports
* Automatically email those reports to users or teammates

Perfect for reports, confirmations, receipts, onboarding forms, and more!


# How to Turn a PDF into a Fillable Online Form with AI
Source: https://help.weavely.ai/guides/use-cases/pdf-to-form

Need to turn an existing PDF into a fillable online form? Here's how!

<iframe title="YouTube video player" />

If you’ve ever struggled to turn a dense PDF questionnaire or research doc into a clean, shareable online form, this guide is for you. With Weavely’s AI-powered form builder, you can upload a PDF and go from static content to fully interactive form in just a few clicks.

This is more than just automation. It’s a smoother way to collect, analyze, and act on data. Below, we’ll walk through how to extract questions from a PDF, style your form to match your brand, and set up automations that send your responses exactly where they need to go.

## Start with a Real PDF

Let’s say you’ve got a research survey or customer intake form, something already structured in a PDF, but not fillable or easy to distribute. For example, we'll be using the PDF shown below in this guide:

<img alt="Example pdf which will be turned into a fillable form with Weavely AI" />

Weavely is able to automatically convert this pdf into a fillable form. Upon creating a new form, upload the pdf and let our AI do its magic.

<img alt="Animated screenshot showing how to upload a pdf to Weavely AI" />

Optionally, you can also provide a prompt to further tweak the result. For example:

```
Seperate categories in the document across diferent pages in the form. 
```

Weavely will scan the document, extract the questions (including types like multiple choice, rating scales, or open-ended and even file uploads), and generate a fully working form. No manual copy-pasting required!

## Instantly Match Your Brand

You don’t need to know CSS or fiddle with color codes. You can also leverage our AI to automatically adapt your forms to the style you need. You can either provide stylistic instructions via a prompt, or upload an example image.

Weavely will auto-match:

* Your color palette
* Fonts (via Google Fonts)

<img alt="Animated screenshot showing how to automatically brand a form using Weavely AI" />

## Review and Refine Manually (Optional)

We're not at the point where AI can do everything (yet). Sometimes you still want to add that human touch to your form or survey. Once AI has turned your pdf into a fillable form you can continue in our form editor to:

* Add additional questions or pages.
* Fine-tune the look and feel (e.g. roundings, accent colours, fonts, etc.).
* Add answer piping or skip-page logic.
* Create integrations (e.g. with Mailchimp, Google Sheets or others).

<img alt="Animated screenshot showing how to manually edit a form in Weavely AI" />

Everything stays editable, even after publishing!

## Set Up Email Notifications

Want to be notified when someone submits a response, or send them a receipt?

In the **Integrations → Email** tab:

* Add your email (or use "@" to select the form field with your respondent's address)
* Customize the subject and body with answer piping like:

  ```
  Subject: New response from @[name]
  Body: They rated brand trust as @[brand_trust] out of 5.
  ```

## Send Responses to Google Sheets

For better analysis or collaboration, you can connect your form to Google Sheets.

* Go to **Integrations → Google Sheets**
* Connect your Google account
* Map each form question to a column

Every new submission will show up as a new row, automatically.

## Share Your Form

<iframe title="YouTube video player" />

When you're ready:

* Hit **Preview** to test the full experience.
* Go to the \*\*Share \*\*tab to get a link to your form (don't forget to hit the publish button first).
* Optionally, set up the form as a **popup** on your site or a \*\*standalone page \*\*(see tutorial video).

## Why This Flow Works

Turning PDFs into fillable forms used to mean:

* Manually rewriting questions
* Reformatting them for every channel
* Hand-styling the form
* Wasting time on email follow-ups and data exports

With Weavely, you:

* Reuse existing content
* Let AI handle conversion to a fillable form
* Match your look instantly
* Automate everything post-submit

Whether you’re a researcher, a startup, or a policy team, this workflow gets your form live, on-brand, and connected to your stack in minutes.

Want to try it with your own PDF?\
Head to [weavely.ai](https://weavely.ai) and upload your first file.


# How to Save Form Progress and Continue Later
Source: https://help.weavely.ai/help-center/features/autosave

Enable autosave to let users save their form responses and resume filling out your Weavely form anytime.

The autosave feature lets your respondents save their form responses automatically so they can leave and come back to continue filling out your form later. Their answers are stored in their browser's local storage, so they won't lose their progress.

To enable autosave responses, open your form and navigate to the **Settings** section, in the **General** sub-section. Toggle on the "*Autosave progress*" option.

<img alt="Screenshot showing the &#x22;Autosave progress&#x22; toggle in Weavely AI" />

When enabled, respondents can close the form at any time and their responses will be saved. When they return to the same form URL, their progress will be automatically restored so they can pick up where they left off.

**Note:** Responses are saved locally in the respondent's browser. If they clear their browser data or switch to a different device, their saved progress will not be available.

## Frequently Asked Questions

**Is autosave available on the free plan?**

Yes, the autosave responses feature is available to all Weavely users, including those on the free tier.

**Will respondents' answers be saved if they close their browser?**

Yes, their responses are saved in their browser's local storage and will be restored when they return to the form, even after closing their browser.

**Can respondents continue the form on a different device?**

No, autosaved responses are stored locally in their browser. If they switch to a different device or browser, they'll need to start fresh.

**What happens if a respondent clears their browser data?**

Clearing browser cache and cookies will also remove their saved form progress.


# How to Generate PDFs from Form Submissions with Orshot
Source: https://help.weavely.ai/help-center/integrations/collecting-data-and-responses/orshot

Automatically generate custom PDF certificates, tickets, and documents from Weavely form submissions using Orshot integration.

The [Orshot](https://orshot.com/) integration lets you automatically generate PDF documents from form submissions. When someone completes your form, their responses are sent to Orshot to create a personalized PDF based on your template. This works for certificates, tickets, receipts, and any custom document you need.

<iframe title="YouTube video player" />

## Setting Up Orshot in Your Weavely Form

First, you'll need an Orshot account with a PDF template ready. In your Orshot account, go to **API Keys** and copy your API key.

<img alt="Screenshot showing where to find an API key in Orshot" />

In your Weavely form, navigate to the **Integrations** tab and click **Add** next to Orshot.

<img alt="Screenshot showing where to find the Orshot integration in Weavely AI" />

Paste your Orshot API key in the field and click **Connect to Orshot**. Your Orshot templates will automatically load.

<img alt="Animated screenshot showing how to connect Orshot to Weavely AI" />

## Mapping Form Fields to Your PDF Template

Once connected, select which Orshot template you want to use from the dropdown menu.

For each field in your Orshot template, you'll see a mapping field where you can specify what data to include. Click the **@** symbol to select form fields, or type literal text directly.

You can read more about mapping form fields in [this tutorial](/help-center/integrations/data-mapping).

Click **Create Integration** and republish your form. PDFs will now generate automatically for each new submission.

## Viewing Your Generated PDFs

After a form is submitted, the generated PDF appears in your Orshot account. Go to your certificate template and click **Renders** to see all generated PDFs.

<img alt="Screenshot showing where to find renders in Orshot" />

## Frequently Asked Questions

**Do I need an Orshot account to use this integration?**

Yes, you'll need an active Orshot account and API key. You can sign up at orshot.com.

**Can I customize the PDF design?**

Yes, Orshot has pre-made templates and a PDF studio where you can design custom templates with your own branding, colors, and layout.

**Where can I see the generated PDFs?**

Generated PDFs appear in your Orshot account under the template's Renders section. Each form submission creates a new render.

**What types of PDFs can I generate?**

You can generate any type of PDF document including certificates, event tickets, receipts, reports, invoices, or custom documents designed in Orshot's PDF studio.

**Can I use multiple templates for one form?**

Currently, each integration supports one template. To use different templates, you can set up conditional logic in Orshot or create separate forms for each template type.


# How to Map Form Fields to Integrations in Weavely
Source: https://help.weavely.ai/help-center/integrations/data-mapping

Learn how to use Weavely's mapping functionality to connect your AI-generated forms with third-party tools like Notion, HubSpot, and Salesforce

Weavely's mapping functionality allows you to automatically send form submission data to various third-party tools like Notion, HubSpot, Salesforce, and more. This guide will show you how to map form fields to your integration destinations.

<iframe title="YouTube video player" />

## Understanding Field Mapping

When you set up an integration, each column or field in your destination (e.g., a Notion database) will appear as a mappable field in Weavely. You can populate these fields in three ways:

1. **Static text** - Enter literal text that will be the same for every submission
2. **Form field data** - Pull dynamic data from form submissions using the `@` symbol
3. **Combined values** - Mix static text with form field data

## Step 1: Set Up Your Integration

Navigate to the **Integrations** section of your form and select the third-party tool you want to connect (e.g., Notion, HubSpot, Salesforce).

Once connected, select the specific database or destination where you want your form data to be sent. Weavely will then display all available fields from that destination.

## Step 2: Map Your Fields

For each field in your integration, you have several options:

### Option 1: Leave It Empty

If a field is optional in your destination system, you can leave it blank.

### Option 2: Enter Static Text

Type any text directly into the field. For example, you could always set a status field to `"New Lead"` for every submission.

### Option 3: Use Form Field Data

To insert dynamic data from your form:

1. Type the `@` symbol
2. Select the form field you want to use from the dropdown menu
3. The field reference will appear in the mapping

**Example:** For a "Name" field in Notion, you could select `@First Name` to populate it with the first name from each form submission.

<img alt="Screenshot of mapping form fields to integration values in Weavely AI" />

### Option 4: Combine Text and Form Fields

You can mix static text with form field data to create custom formatting.

**Example:** To create a full name field formatted as "First / Last":

* Type `@` and select `First Name`
* Type `/` (or any separator you prefer)
* Type `@` again and select `Last Name`

This will result in entries like "John / Doe" in your destination system.

## Step 3: Save Your Integration & Test it

Once you've mapped all required fields, click \*\*Create Integration. \*\*Submit a test entry through your form to verify that:

* Data appears in your destination system correctly
* Field mappings are working as expected
* Any combined fields display the formatting you want


# ActiveCampaign
Source: https://help.weavely.ai/integrations/active-campaign

Send Weavely form responses straight into ActiveCampaign as contacts

Connect Weavely to ActiveCampaign to automatically send form responses into your ActiveCampaign contacts. Once it's set up, every submission is added as a contact, with your form fields mapped to contact properties.

<iframe title="YouTube video player" />

<Info>
  **Before you start**, you'll need:

  * A published Weavely form
  * An ActiveCampaign account
</Info>

## Step 1: Generate a personal token in Weavely

A personal token links your Weavely account to third-party tools like ActiveCampaign. if you don't know how to create one, head on over to the [dedicated tutorial](/integrations/personal-tokens) and come back afterwards (only takes a couple of seconds to complete).

## Step 2: Add Weavely in ActiveCampaign

<Steps>
  <Step title="Open the app directory">
    <Frame>
      <img alt="Screenshot showing where to find the integrations tab in ActiveCampaign" />
    </Frame>

    In ActiveCampaign, go to **Settings → Integrations** and click on the **app directory** hyperlink. 

    <Warning>
      Don't press "Add an integration", click on the **app directory** hyperlink instead
    </Warning>
  </Step>

  <Step title="Find the Weavely app">
    Search for **Weavely** and select the Weavely app.

    <Frame>
      <img alt="Screenshot showing the Weavely app in ActiveCampaign" />
    </Frame>
  </Step>

  <Step title="Add an account">
    <Frame>
      <img alt="Screenshot showing how to add a Weavely account in ActiveCampaign" />
    </Frame>

    Click **Add an account**. When prompted for a **personal token**, paste the token you copied from Weavely.
  </Step>
</Steps>

## Step 3: Choose your team and form

<Frame>
  <img alt="Screenshot showing how to select a team and a from in ActiveCampaign" />
</Frame>

Once your token is accepted, Weavely and ActiveCampaign are connected. You can now select the team and the form that you want to synchronise with ActiveCampaign.

## Step 4: Map your form fields

Map each field on your form to an ActiveCampaign contact property. map your form's email field to the ActiveCampaign **Email** property. Other fields (like phone number, subject, or message) are optional. If you want to capture more data, create custom contact properties in ActiveCampaign first. They'll then be available to map to your form fields.

<Frame>
  <img alt="Screenshot showing how to map Weavely form fields to ActiveCampaign contact properties." />
</Frame>

When your mapping looks right, click **Finish**. Your integration is live once the status shows **Connected**.

<Note>
  Your responses are always stored in Weavely too. The integration adds ActiveCampaign as a destination, it doesn't replace Weavely's own response storage.
</Note>


# Send Form Responses to Airtable
Source: https://help.weavely.ai/integrations/airtable

Weavely's Airtable integration lets you connect your form to a table and automatically send new responses as rows. 

<iframe title="YouTube video player" />

## Step 1: Open the Integrations Tab

With the editor open, navigate to the *Integrations* tab and select the *Airtable* integration as shown below.

<img alt="Screenshot showing the integrations tab in Weavely AI" />

## Step 2: Link Your Airtable Account

Is this the first time you set up a Airtable integration? Then Weavely will first guide you through the steps to connect your Airtable account to Weavely. Just press *"Connect to Airtable"* to get started.

<img alt="Screenshot showing how to integrate Weavely AI with Airtable" />

## Step 3: Map Form Fields to Table Columns

Once you've connected your Airtable account you'll be able to set up the integration for your form. In a first step you'll need to select the base and the table in which you want to collect submissions. In a second step you can specify how fields of your form correspond to table columns. The gif below showcases both these steps.

<img alt="Animated screenshot showing how to setup the Airtable integration in Weavely AI" />

## **Changing Your Airtable Account or Resetting Your Connection**

If you ever need to reset your connection with Airtable, for instance to switch to a different account or reauthorize access, you can do so from your Weavely dashboard. Go to **Settings → Connected Accounts** and click the red **“Disconnect”** button next to Airtable. You can then reconnect with the correct account.

<Frame>
  <img alt="Screenshot showing how to disconnect Airtable from Weavely AI" />
</Frame>


# Weavely Integrations
Source: https://help.weavely.ai/integrations/aoverview

Discover all the third-party tools with which Weavely.ai integrates.

Weavely Integrates with various third-party tools, here's an overview of the supported integrations:

## Building Forms and Surveys

<Card title="OpenAI" href="/integrations/custom-gpt">
  Build forms and surveys from within your ChatGPT conversation.

  <img />
</Card>

<Card title="Claude" href="/integrations/claude">
  Build forms and surveys from within your Claude conversation.

  <img alt={true} title={true} />
</Card>

<Card title="MCP" href="/integrations/mcp">
  Build forms and surveys from within LLMs using our MCP server.

  <img alt={true} title={true} />
</Card>

## Importing Existing Forms

<Card title="Google Forms" href="/integrations/google-forms">
  Import a Google Form to Weavely

  <img alt={true} title={true} />
</Card>

## Collecting Data and Responses

<Card title="Google Sheets" href="/integrations/google-sheets">
  Automatically collect form responses in Google Sheets

  <img alt={true} title={true} />
</Card>

<Card title="Notion" href="/integrations/notion">
  Automatically collect form responses in Notion

  <img alt={true} title={true} />
</Card>

<Card title="Salesforce" href="/integrations/salesforce">
  Automatically collect form responses in Salesforce

  <img alt={true} title={true} />
</Card>

<Card title="Airtable" href="/integrations/airtable">
  Automatically collect form responses in Airtable

  <img alt={true} title={true} />
</Card>

<Card title="HubSpot" href="/integrations/hubspot">
  Automatically collect form responses in HubSpot

  <img alt={true} title={true} />
</Card>

<Card title="Zoho" href="/integrations/zoho">
  Automatically collect form responses in Zoho

  <img alt={true} title={true} />
</Card>

<Card title="Mailchimp" href="/integrations/mailchimp">
  Automatically collect emails responses in Mailchimp

  <img alt={true} title={true} />
</Card>

## Automation Tools

<Card title="Zapier" href="/integrations/zapier">
  Add Weavely forms in your Zapier workflows

  <img alt={true} title={true} />
</Card>

<Card title="Make" href="/integrations/make">
  Add Weavely forms in your Make scenarios

  <img alt={true} title={true} />
</Card>


# How to Create Forms & Surveys with the Weavely MCP Server in Claude
Source: https://help.weavely.ai/integrations/claude

Use the Weavely MCP server to build, style, and publish forms or surveys directly in Claude — no coding required.

<iframe title="YouTube video player" />

## What Is the Weavely MCP Server?

The **Weavely MCP server** lets Claude (or any AI client that supports the Model Context Protocol) build forms and surveys step by step — adding questions, styling, conditional logic, and more — all from a natural conversation. You get a **live preview URL** to follow along as Claude builds, and a publish link when you're ready to go live.

The Model Context Protocol (MCP) is an open standard that connects AI assistants like Claude to external tools. The Weavely MCP connector gives Claude the ability to create professional forms through conversation — including 25 element types, multi-page layouts, custom themes, and conditional logic — without writing a single line of code.

## How to Connect the Weavely MCP Server to Claude

There are two ways to connect Weavely to Claude Desktop. Choose the method that matches your account type:

### For Paying Claude Users

Navigate to \_Settings > Connectors \_ and press *"Add custom connector"*. In the modal that appears, give the integration a name (e.g. *"Weavely"*) and paste the following URL:

```text theme={null}
https://mcp.weavely.ai/mcp
```

Restart the Claude Desktop app and you're all set!

### For Free Claude Users

Free users need to manually edit the Claude Desktop config file:

1. Create or locate the config file:
   * **Mac:** `~/Library/Application Support/Claude/claude_desktop_config.json`
   * **Windows:** `%APPDATA%\Claude\claude_desktop_config.json`
2. Add the following JSON snippet:

```json theme={null}
{
  "mcpServers": {
    "weavely": {
      "command": "npx",
      "args": [
        "mcp-remote",
        "https://mcp.weavely.ai/mcp"
      ]
    }
  }
}
```

3. Restart the Claude Desktop app.

<Note>
  `npx` must be available in your terminal. On Windows, you may need to prefix the command with `cmd /c`.
</Note>

## How to Build Forms and Surveys with Claude MCP

Simply tell Claude what kind of form or survey you need. Claude will create the form and share a **live preview URL** — open it in your browser and refresh anytime to see the latest changes.

You can iterate naturally:

* **"Create a customer feedback form with a star rating and a comment box"** — Claude creates the form and adds the elements
* **"Add a dropdown asking how they found us"** — Claude adds it to the existing form
* **"Make the rating required and change the comment placeholder"** — Claude updates the elements
* **"Use a dark theme with Inter font"** — Claude styles the form
* **"Only show the comment box when the rating is below 4"** — Claude adds conditional logic

The preview URL updates in real-time — just refresh your browser to see each change as Claude makes it.

Claude has access to **13 tools** covering the full form-building workflow: creating forms, adding and editing questions (25 element types including text fields, choice fields, ratings, matrices, file uploads, and more), multi-page forms, visual theming, conditional logic, and publishing.

## Publishing Your Form

When you're happy with the form, ask Claude to publish it:

> **"Publish my form"**

Claude will return an **editor URL**. Click it to open the Weavely editor where you can:

* **Create a free Weavely account** to claim full ownership of the form
* **Share the form** and start collecting responses
* **Set up integrations** — Make, Zapier, n8n, Google Sheets, HubSpot, Airtable, Notion
* **Configure email notifications** — get notified on each submission or send confirmation emails to respondents
* **Customize the social media preview** — Open Graph image, title, and description
* **Set a custom domain** or get **embed codes** for your website
* **Add images** to image-choice options or as content elements

<Tip>
  The live preview URL you used during building is temporary — it cannot be claimed or published from. Always use the **publish** step to get your permanent form.
</Tip>


# Build forms and surveys in ChatGPT with Weavely
Source: https://help.weavely.ai/integrations/custom-gpt

Build forms and surveys from a prompt with the Weavely ChatGPT app, refine the design and logic in chat, then publish to collect responses inside ChatGPT.

<iframe title="YouTube video player" />

Weavely has a ChatGPT app that lets you build working forms and surveys without leaving ChatGPT. Describe what you need, Weavely generates a live form, and you refine the questions, design, and logic right in the conversation. Simply publish to start collecting responses.

<Note>
  You need a ChatGPT account to use the app. You only create a free Weavely account at the end, when you publish your form and want to collect responses.
</Note>

## Add the Weavely app to ChatGPT

<Steps>
  <Step title="Find Weavely in ChatGPT apps">
    In ChatGPT, open **Apps** and search for **Weavely**, listed as "Weavely Forms & Surveys"

    <Frame>
      <img alt="Screenshot showing where to find Weavely Forms & Surveys in ChatGPT Apps." />
    </Frame>
  </Step>

  <Step title="Connect the app">
    Select **Connect**. ChatGPT asks you to approve a few permissions. You can allow it to reference your chat memories, but that isn't required to build a form — so you can skip it and select **Connect**.
  </Step>

  <Step title="Start a chat with Weavely">
    Select **Start chat**, or open any new chat and choose **Weavely Forms & Surveys** from the **+ More** menu.
  </Step>
</Steps>

## Build your first form

<Steps>
  <Step title="Describe the form you need">
    Tell Weavely what you're collecting and any context that matters. The more detail you give, the better the result. For example:

    > I need a feedback survey for my e-commerce products, which are sandals.

    Weavely explains what it's going to build, then generates a fully functional preview you can try right away. Use the expand icon to open it full screen.

    <Frame>
      <img alt="Screenshot showing a Weavely form preview inside the ChatGPT App." />
    </Frame>
  </Step>

  <Step title="Test the preview">
    The preview is interactive. Fill it in and select **Submit** to see the thank-you screen, then reset it to try different answers and flows.
  </Step>
</Steps>

## Refine it in chat

Everything about the form can be changed by chatting with Weavely — no editor required.

**Change the design.** Ask for the look you want and Weavely updates the theme:

> Can you make the colors more beach-like, given that this is about sandals?

**Add or edit questions.** Ask Weavely to add, remove, or reword questions at any time.

**Add conditional logic.** Show a question only when it's relevant:

> Only show the sizing question if someone gives a star rating above two.

ChatGPT asks permission to change the form's logic, then shows an updated preview. Test it: a rating of 4 reveals the sizing question, while a rating below 2 hides it.

<Tip>
  Treat it like a conversation. Keep refining the design, questions, and logic until the preview is exactly what you want before you publish.
</Tip>

## Publish and share

<Steps>
  <Step title="Publish your form">
    When you're happy with the preview, select **Share form**. Weavely opens the platform for the final step.
  </Step>

  <Step title="Create your account and get the link">
    If you don't have a Weavely account yet, create one for free. Once you're in, copy your form's URL.

    <Frame>
      <img alt="Screenshot showing a form published from ChatGPT App in Weavely." />
    </Frame>
  </Step>

  <Step title="Collect responses">
    Share the link with respondents. As people submit, their answers appear under your form's results in Weavely.
  </Step>
</Steps>

## Do more in Weavely

The ChatGPT app gets you from idea to published form fast, but you can keep working in Weavely whenever you need to:

* **Keep editing** the theme, questions, and logic rules in the Weavely editor.
* **Send responses anywhere** with integrations like Google Sheets, Zapier, Make, and n8n.

## FAQ

<AccordionGroup>
  <Accordion title="Is the Weavely ChatGPT app free?">
    Yes. You can create unlimited forms and collect unlimited responses for free.
  </Accordion>

  <Accordion title="Do I need a Weavely account?">
    Not to build and preview a form. You create a free account only when you publish and want to start collecting responses.
  </Accordion>

  <Accordion title="Can I add conditional logic to my form?">
    Yes. Ask in chat — for example, "only show this question if the rating is above two" — and Weavely updates the form's logic.
  </Accordion>

  <Accordion title="Where do my form responses go?">
    Responses appear in your form's results in Weavely, and you can forward them to tools like Google Sheets, Zapier, Make, or n8n.
  </Accordion>
</AccordionGroup>


# How to Set Up Email Notifications for Form Submissions
Source: https://help.weavely.ai/integrations/email-notifications

Learn how to send automatic email notifications on form submission. Set up confirmation emails for respondents and submission alerts for form owners.

Stay informed about every form submission and keep your respondents engaged with automatic email notifications. Weavely makes it easy to send submission alerts to yourself and confirmation emails to form respondents with just a few clicks.

## What Are Email Notifications?

Weavely offers two types of email notifications for your forms:

**Submission Emails** - Get an email notification sent to you (the form owner) whenever someone submits your form. The email includes a complete copy of all submitted responses, formatted and easy to read.

**Confirmation Emails** - Send an automatic email to the person who submitted your form, providing them with a summary of their responses. This serves as a receipt and confirms their submission was received.

<img alt="Screenshot showing the email notification settings in Weavely AI." />

## Setting Up Submission Emails (For Form Owners)

Submission emails notify you instantly when someone completes your form, allowing you to respond quickly and track form activity in real time.

### How to Enable Submission Emails

1. Open your form in the Weavely editor
2. Navigate to **Settings** in the top menu
3. Select **Notifications** from the left sidebar
4. Toggle on **Submission emails**
5. Your form's submission notifications are now active

Once enabled, you'll receive a nicely formatted email every time someone submits your form. The email includes all submitted data, making it easy to review responses without logging into your dashboard. An example of such an email is shown below.

<img alt="Screenshot of a confirmation email received in Weavely AI." />

### What's Included in Submission Emails?

Each submission email notification contains:

* Complete form responses from all fields
* Submission date and time
* Clean, formatted layout for easy reading
* All form data in a professional email format

## Setting Up Confirmation Emails (For Respondents)

Confirmation emails automatically send respondents a copy of their submission, providing them with a record of what they submitted and confirming their form was received successfully.

### How to Enable Confirmation Emails

1. Open your form in the Weavely editor
2. Go to **Settings** > **Notifications**
3. Toggle on **Confirmation emails**
4. Select which email field from your form should receive the confirmation

The confirmation email will be sent to whichever email address field you select. This means your form must collect an email address for this feature to work. An example of a confirmation email is shown below.

<img alt="Screenshot showing an example confirmation email in Weavely AI." />

### Selecting the Email Field

If your form has multiple email fields, you can choose which one receives the confirmation email:

1. Click on the **Confirmation emails** setting
2. A dropdown will appear showing all email fields in your form
3. Select the appropriate email field
4. Save your changes

For most forms, you'll only have one email field, making this selection automatic.

<img alt="Screenshot showing how to select the recipient of a confirmation email in Weavely AI." />

### What's Included in Confirmation Emails?

Confirmation emails sent to respondents include:

* A summary of all their submitted responses
* Confirmation that their submission was received
* Professional formatting with your form branding
* A complete record they can save for their records

## Why Use Email Notifications?

Email notifications improve your form workflow and user experience:

**For Form Owners:**

* Get instant alerts when forms are submitted
* Review submissions directly from your inbox
* No need to constantly check your dashboard
* Respond quickly to time-sensitive submissions
* Track form activity in real time

**For Respondents:**

* Receive immediate confirmation of submission
* Get a copy of their responses for their records
* Builds trust and improves user experience
* Reduces follow-up questions about whether the form was received
* Provides transparency about what information was submitted

## Frequently Asked Questions

### Do I need an email field in my form for notifications?

You need an email field for **confirmation emails** (sent to respondents), but not for **submission emails** (sent to you as the form owner). Submission emails will go to your Weavely account email address by default.

### Can I customize the email content?

Currently, email notifications use a standardized format that includes all form field responses in a clean, professional layout. The content automatically updates based on your form fields.

### Will respondents see all my form data?

No. Confirmation emails sent to respondents only include the specific responses **they** submitted. They won't see responses from other users or any admin-only information.

### Can I send notifications to multiple email addresses?

Submission emails are sent to the form owner's email address. To share submissions with multiple team members, you can forward the notification emails or invite team members to access your Weavely dashboard directly.

### How quickly are notification emails sent?

Both submission emails and confirmation emails are sent instantly upon form submission. Respondents receive their confirmation within seconds of clicking submit.

### Can I turn off email notifications?

Yes. Simply toggle off either or both notification types in your form's Settings > Notifications panel. You can enable or disable notifications at any time.

### Will these emails go to spam?

Weavely's email notifications are sent through reliable email infrastructure to ensure high deliverability. However, recipients should check their spam folders if they don't see the email within a few minutes and mark it as "not spam" to ensure future emails arrive in their inbox.


# Figma to Web Form, Weavely Plugin
Source: https://help.weavely.ai/integrations/figma-to-web-form

Learn how to generate web forms from Figma designs using the Weavely Figma plugin

# Turn Figma Designs into Web Forms with the Weavely Plugin

<iframe title="YouTube video player" />

The Weavely Figma plugin lets you transform static Figma designs into working, fillable web forms, all in a few clicks. Whether you're prototyping, building UX surveys, or collecting structured feedback from testers, this plugin helps you move from design to live form instantly.

## What the Plugin Does

With the plugin, you can select any Figma frames and turn them into a functioning web form powered by Weavely. It extracts both the **content** (like questions and labels) and the **visual theme** (colors, fonts, layout) from your design, then uses AI to generate a form that looks and feels like your mockup, but is fully interactive and shareable.

## How to Use the Plugin

<Steps>
  <Step title="Open the Plugin">
    <img alt="Screenshot of the Weavely AI plugin on the Figma marketplace" />

    You can open the plugin [here](https://www.figma.com/community/plugin/1255122665773297640/figma-to-web-forms). Or simply search for "Figma to web form" from within Figma.
  </Step>

  <Step title="Select Frames to Convert">
    <img alt="Animated screenshot showing how to select frames in Figma to convert them to a form using Weavely AI plugin" />

    Choose the frames that contain your form content. For example, in a UX survey, you might have multiple frames with radio buttons, input fields, or sliders. Once selected, hit **"Generate Form"** in the plugin panel.

    The plugin uses AI to scan the content and layout of your design and begins building a form automatically.
  </Step>

  <Step title="Preview & Publish Your Form">
    <img alt="Animated screenshot showing how to publish a form from Figma using the Weavely AI plugin" />

    You’ll get a real-time preview of your generated form inside the plugin. It’s interactive, with radio buttons, input fields, and submit actions. Just like a normal web form.

    When you're satisfied, hit **“Publish Form.”** This opens the Weavely editor where you can:

    * Refine questions or add new ones
    * Apply advanced styling or change the layout
    * Add conditional logic
    * Integrate with third-party tools like Slack, HubSpot, Zapier, etc.

    Once you’re happy with your final form, press **“Publish”** again and get a live URL to share or embed.
  </Step>
</Steps>

### Style Transfer from Figma

Basic theming — such as background color, accent colors, and font family — is extracted automatically. So if your Figma design has a deep red background and white buttons, your generated form will reflect that.

For advanced theming (custom layout, typography, brand assets), you can fine-tune everything from within the Weavely editor.

<Warning>
  The plugin will not take into account your custom design or layout from within Figma.
</Warning>

***


# Create a form from a Google Doc
Source: https://help.weavely.ai/integrations/google-doc-add-on

Use the Weavely Google Docs add-on to turn any document into a ready-to-share form, without leaving Google Docs.

<iframe title="YouTube video player" />

The Weavely Google Docs add-on lets you turn the questions in any Google Doc into a working form, right from inside the document. There is no copy-pasting and no manual form building: you open your doc, click a button, and Weavely's AI reads the content and builds the form for you in seconds.

This guide walks through the whole process, from installing the add-on to publishing and sharing your form.

<Note>
  You will need a Google account and a Google Doc that contains the questions or content you want to turn into a form. A free Weavely account is needed to publish, and you can create one during the publish step.
</Note>

## Install and generate

<Steps>
  <Step title="Install the add-on from the Google Workspace Marketplace">
    Open the [Google Workspace Marketplace](https://workspace.google.com/marketplace/app/weavely_ai_forms_for_google_docs/790333446949?flow_type=2) and search for **Weavely** or **AI forms for Google Docs**. Open the listing, click **Install**, sign in with your Google account, and approve the permissions screen.

    Once installed, the add-on is available across your Google Docs.

    <Frame>
      <img alt="Installing the Weavely add-on from the Google Workspace Marketplace" />
    </Frame>

    <Info>
      Weavely asks for permission on a **per-file basis**. It only reads the specific document you open it in, not your entire Google Drive.
    </Info>
  </Step>

  <Step title="Open your doc and the Weavely sidebar">
    Open the Google Doc that contains your questions, then click the **Weavely icon** in the right-hand sidebar to open the add-on panel.

    Almost any document works: a survey brainstorm, a list of quiz questions, a product brief, or rough notes. The more clearly your questions are written, the better the result, but you do not need a specific format.

    <Frame>
      <img alt="Opening the Weavely panel from the Google Docs sidebar" />
    </Frame>
  </Step>

  <Step title="Generate your form">
    Click the **Generate form** button. Weavely reads through your document, pulls the title and any context you have written, and turns each question into the most suitable field type (multiple choice, dropdown, rating scale, short answer, and so on).

    This usually takes a few seconds. When it finishes, you will see your generated form in the panel, ready to review.

    <Frame>
      <img alt="Generating a form from a Google Doc using the Weavely add-on." />
    </Frame>

    <Tip>
      Weavely chooses field types automatically. If you wrote something like "rate this from 1 to 5" in your doc, it will create a rating field. You can change any of these in the next step.
    </Tip>
  </Step>

  <Step title="Refine the form by chatting with the AI">
    Anything you want to change, just describe it in plain language. For example, type "change the recommend score to a 1 to 10 scale instead of 1 to 5" and the field updates instantly.

    You can also add **conditional logic** the same way. Ask something like "only show the follow-up question when someone selects a low score," and Weavely wires it up for you. There is no logic builder to configure.

    <Frame>
      <img alt="Refining a weavely form using AI" />
    </Frame>
  </Step>

  <Step title="Publish and share">
    When you are happy with the form, click **Publish**. You will get a shareable link you can send to anyone.

    If you are not signed in to Weavely yet, you will be prompted to create a free account first. The free plan includes unlimited forms and unlimited responses.
  </Step>
</Steps>


# Importing Google Forms to Weavely
Source: https://help.weavely.ai/integrations/google-forms

Import your Google Forms into Weavely for free and instantly upgrade them with AI-powered customization, smart logic, and beautiful themes.

<iframe title="YouTube video player" />

Weavely makes it effortless to upgrade your existing Google Forms with better design, advanced logic, and powerful integrations. In this guide, we’ll show you how to import a Google Form into Weavely and enhance it with styling, smart logic, and third-party tools.

<Steps>
  <Step title="Step 1: Create a New Weavely Form">
    To import your Google Form, create a new Weavely form. In the AI conversation panel click on "*Import a form*".

    <img alt="Screenshot showing how to import a form into Weavely AI" />
  </Step>

  <Step title="Step 2: Connect Your Google Account">
    Before Weavely can import your Google Form, you'll first need to grant us the right access. Don't worry, it's a simple single sign-on process that you start by pressing *"Connect to Google Forms"* in the *"Import"* modal.

    <Warning>
      Make sure to connect the Google account which you used to create the form you want to import.
    </Warning>
  </Step>

  <Step title="Step 3: Paste your Google Form Edit Link">
    Once connected, you’ll be asked to provide a link to the form you want to import. Make sure you copy the Google Form’s editor URL. This is the one you use when editing the form, not the shareable URL you send to others. The editor URL typically ends with **/edit**. Paste that into the input field and click Import. For example:

    ```html theme={null}
    https://docs.google.com/forms/d/1_s3nDl4TpXRBfWGbaZcZ4iHbgsGX1nvZqltI35aKuBU/edit
    ```
  </Step>
</Steps>

## **Changing Your Google Forms Account or Resetting Your Connection**

If you ever need to reset your connection with Google Forms, for instance to switch to a different account or reauthorize access, you can do so from your Weavely dashboard. Go to **Settings → Connected Accounts** and click the red **“Disconnect”** button next to Google Forms. You can then reconnect with the correct account.

<Frame>
  <img alt="Screenshot showing how to disconnect a Google Forms account in Weavely AI" />
</Frame>


# Send Form Responses to Google Sheets
Source: https://help.weavely.ai/integrations/google-sheets

Weavely's Google Sheets integration lets you connect your form to a spreadsheet and automatically send new responses as rows. 

<iframe title="YouTube video player" />

## Step 1: Open the Integrations Tab

With the editor open, navigate to the *Integrations* tab and select the *Google Sheets* integration as shown below.

<img alt="Screenshot showing where to find the Google Sheets integration in Weavely AI" />

## Step 2: Link Your Google Account

Is this the first time you set up a Google Sheets integration? Then Weavely will first guide you through the steps to connect your Google account to Weavely. Just press *"Connect to Google Sheets"* to get started.

<img alt="Screenshot showing how to configure the Google Sheets integration in Weavely AI" />

The next steps are self explanatory, you've probably used them before if you've ever connected a Google account to something. Make sure to give Weavely the rights it needs by checking the permissions checkbox though:

<img alt="Screenshot showing the permissions asked for by Weavely AI in Google Sheets" />

## Step 3: Select Form Fields

By default Weavely will create a new Google Sheet for you which has a column for every form field in your form. You can also choose to only import a selection of form fields into your Google Sheet using the checkboxes.

<img alt="Screenshot showing how to map form fields to Google Sheets columns in Weavely AI" />

<Warning>
  Changes you make to your form will not automatically update the Google Sheet you created in the previous steps. In case you need to change your form after you've setup the integration we suggest you delete the integration and create a new one.
</Warning>

## **Changing Your Google Sheets Account or Resetting Your Connection**

If you ever need to reset your connection with Google Sheets, for instance to switch to a different account or reauthorize access, you can do so from your Weavely dashboard. Go to **Settings → Connected Accounts** and click the red **“Disconnect”** button next to Google Sheets. You can then reconnect with the correct account.

<Frame>
  <img alt="Screenshot showing how to disconnect a Google Sheets account in Weavely AI" />
</Frame>


# How to Create Forms & Surveys with the Weavely MCP Server in Mistral AI
Source: https://help.weavely.ai/integrations/how-to-create-forms-and-surveys-with-the-weavely-mcp-server-in-mistral-ai

Use the Weavely MCP server to build, style, and publish forms or surveys directly in Mistral AI (Le Chat) — no coding required.

<iframe title="YouTube video player" />

## What Is the Weavely MCP Server?

The **Weavely MCP server** turns Le Chat Mistral into a free AI form builder, letting you create, style, and publish forms and surveys through conversation without leaving your chat. Describe what you need, and Mistral builds it step by step. You get a **live preview URL** to follow along in your browser and a shareable link once you publish.

The Model Context Protocol (MCP) is an open standard that connects AI assistants to external tools. The Weavely MCP connector extends Le Chat Mistral with full form-building capabilities, including 25 element types, multi-page layouts, custom themes, and conditional logic, completely free with no coding required.

## How to Connect the Weavely MCP Server to Mistral

<Frame>
  <img alt="Screenshot showing how to add Weavely MCP to Mistral Le Chat." title="Screenshot 2026 04 16 At 15 19 31" />
</Frame>

1. Open [Le Chat](https://chat.mistral.ai) and navigate to **Intelligence > Connectors**.
2. Click **"Add connector"**, select the "**Custom MCP Connector**" tab and paste the following server URL:

```text theme={null}
https://mcp.weavely.ai/mcp
```

3. Leave the authentication field empty. No authentication is required.
4. The description field is optional. Click **Connect**.

Weavely will appear in your connectors list and is ready to use straight away.

## How to Build Forms and Surveys with Mistral AI

Start a new chat and select the **Weavely connector** from your connector list. Then simply describe the form or survey you need and Mistral handles the rest. This MCP tutorial walks through a B2B lead generation form, but the same steps apply to any form or survey type.

Mistral will ask for your permission before creating anything outside the chat, then build the form and share a **live preview URL**. Open it in your browser and refresh at any point to see the latest version.

You can iterate naturally:

* **"I need a lead generation form for my B2B marketing agency"** - Mistral creates the form and suggests fields like company name, contact person, industry, and email
* **"Add those fields to the form"** - Mistral updates the form with the suggested elements
* **"Change the dropdown to a radio button"** - Mistral swaps the field type
* **"Add conditional logic"** - Mistral applies it to the relevant fields
* **"Can you come up with a nicer colour scheme?"** - Mistral reskins the form; just refresh the preview to see the result

The preview URL stays the same throughout. Refresh it anytime to see changes as Mistral makes them.

<Note>
  The more specific your initial prompt, the more tailored the form. A generic prompt like "a lead gen form" gives you a solid starting point; adding details like industry, audience, or specific fields gives you something closer to finished.
</Note>

## Publishing Your Form

When you're happy with the form, either:

* Ask Mistral in the chat: **"Publish my form"**, or
* Click the **publish button** directly on the preview link

You'll be prompted to create a **free Weavely account** if you don't have one. Once inside the Weavely editor, Weavely's free AI form builder, you can:

* **Share your form** via a unique URL and start collecting responses
* **View and manage responses** in your Weavely dashboard
* **Set up integrations** - Google Sheets, Make, Zapier, n8n, HubSpot, Notion, and more
* **Further customise** the form with AI or manually using the Weavely editor
* **Embed the form** on your website or share it as a pop-up

<Tip>
  The preview URL you use while building is temporary. It cannot be shared or used to collect responses. Always go through the publish step to get your permanent, shareable form URL.
</Tip>


# Send Form Responses to HubSpot
Source: https://help.weavely.ai/integrations/hubspot

Weavely's HubSpot integration lets you automatically create contacts in HubSpot upon form submissions.

<iframe title="YouTube video player" />

## Step 1: Open the Integrations Tab

With the editor open, navigate to the *Integrations* tab and select the *HubSpot* integration as shown below.

<img alt="Screenshot showing where to find the HubSpot integration in Weavely AI" />

## Step 2: Link Your HubSpot Account

Is this the first time you set up a HubSpot integration? Then Weavely will first guide you through the steps to connect your HubSpot account to Weavely. Just press *"Connect to HubSpot"* to get started.

<img alt="Screenshot showing how to link a HubSpot account to Weavely AI" />

## Step 3: Map Form Fields to Contact Properties

Once you've connected your HubSpot account you'll be able to set up the integration for your form. You can specify which fields of your form should be used to create the new contact in HubSpot as shown in the gif below. At the time of writing you can only create new contacts after a form submission. Looking to do something else? Reach out to [florian@weavely.ai](mailto:florian@weavely.ai) to tell us your use case and we'll add it to the roadmap!

<img alt="Animated screenshot showing how to configure the HubSpot integration in Weavely AI" />

## **Changing Your HubSpot Account or Resetting Your Connection**

If you ever need to reset your connection with HubSpot, for instance to switch to a different account or reauthorize access, you can do so from your Weavely dashboard. Go to **Settings → Connected Accounts** and click the red **“Disconnect”** button next to HubSpot. You can then reconnect with the correct account.

<Frame>
  <img alt="Screenshot showing how to disconnect a HubSpot account in Weavely AI" />
</Frame>


# Send Weavely Form Leads to Mailchimp
Source: https://help.weavely.ai/integrations/mailchimp

Grow your email list with every form submission with Weavely AI’s Mailchimp integration.

<iframe title="YouTube video player" />

In this guide, we’ll walk you through how to connect a Weavely form to a Mailchimp list.

<Steps>
  <Step title="Open the Integrations Tab">
    Start by opening the form you want to connect in the Weavely editor. Head over to the **Integrations** tab, where you’ll see **Mailchimp** listed among the available integrations. Click **Add**.

    <img alt="Screenshot showing where to find the Mailchimp integration in Weavely AI" />
  </Step>

  <Step title="Connect Your Mailchimp Account">
    Next, you’ll be prompted to authorize the connection between your Weavely and Mailchimp accounts. Click the **Connect** button, which will redirect you to Mailchimp's login page. After logging in, Mailchimp will ask whether you trust the application, go ahead and approve the authorization by clicking **Allow**. Once complete, you’ll be redirected back into Weavely, and your accounts will now be linked.

    <img alt="Screenshot showing how to connect Mailchimp to Weavely AI" />
  </Step>

  <Step title="Choose the List and Email Field">
    With your Mailchimp account connected, you can now configure the integration by selecting which Mailchimp list should receive the new email addresses. If you only have one list, this step is straightforward. You’ll also be asked to select the appropriate email field from your form. This is particularly useful if your form contains multiple email inputs, as it ensures the correct one is used to create the contact in Mailchimp. Once you've made your selections, press **Create Integration** to finalize the setup.

    <img alt="Screenshot showing how to configure the Mailchimp integration in Weavely AI" />
  </Step>
</Steps>

## **Changing Your Mailchimp Account or Resetting Your Connection**

If you ever need to reset your connection with Mailchimp, for instance to switch to a different account or reauthorize access, you can do so from your Weavely dashboard. Go to **Settings → Connected Accounts** and click the red **“Disconnect”** button next to Mailchimp. You can then reconnect with the correct account.

<Frame>
  <img alt="Screenshot showing how to disconnect Mailchimp from Weavely AI" />
</Frame>


# Connect Your Weavely Form to Make for Workflow Automation
Source: https://help.weavely.ai/integrations/make

Make (formerly Integromat) is an automation platform that lets you connect your Weavely form to hundreds of other apps like Slack, Gmail, Airtable, and more.

<iframe title="YouTube video player" />

Here’s how to connect your Weavely form to Make in just a few minutes.

<Steps>
  <Step title="Generate a Personal Token in Weavely">
    You'll need something called a *"personal token"* to connect you Weavely account to Make. To create this token, navigate to *Settings->Personal Tokens* in the dashboard. Once created you'll be able to copy and paste this token (i.e. a string of text) to Make in step 3.

    <img alt="Animated screenshot showing where to create a personal token in Weavely AI" />
  </Step>

  <Step title="Add the Make Integration to Your Form">
    To begin, open the Weavely form you want to automate and navigate to the **Integrations** tab. From there, select **Make** and click **Add**. This will open Make, where you’ll be prompted to install the Weavely connection. Simply select your organization and follow the steps to complete the setup wizard.

    <img alt="Animated screenshot showing where to find the Make integration in Weavely AI" />
  </Step>

  <Step title="Set Up the Webhook in Make">
    Start by creating a new scenario in Make. Add the **Weavely** module and choose the **Watch Form Submission** trigger. When prompted, create a new connection by pasting your personal token from Step 1. Then, select your Weavely team and specify the form you want to monitor. Once set up, your Make scenario will automatically listen for new form submissions.

    <img alt="Animated screenshot showing how to create the Weavely webhook in Make" />
  </Step>

  <Step title="Add Actions to Your Scenario">
    Now that Make is listening for new form data, you can add any actions you like using one of Make’s many available integrations. For example, you might choose to send a message, create a record, or trigger an automation in a third-party tool when a form is submitted.

    To personalize those actions, you can reference form responses (e.g. the respondent’s name or email) using dynamic values.
  </Step>
</Steps>

And that’s it! You’ve successfully connected Weavely to Make and automated your first workflow 🎉


# Weavely.ai MCP Server
Source: https://help.weavely.ai/integrations/mcp

Use our MCP server to connect Weavely to your favourite AI and LLM tools!

<iframe title="YouTube video player" />

Weavely's MCP Server allows AI clients like **Claude**, **Cursor**, **Windsurf**, or any MCP-compatible agent to **build, style, and publish forms conversationally** — using standard [Model Context Protocol (MCP)](https://modelcontextprotocol.io/) tools.

This guide walks you through what the Weavely MCP is, how it works, and how to configure it for any compatible AI client.

## What is an MCP Server?

MCP (Model Context Protocol) is a standard that allows AI models to **call tools** — like APIs or custom functions — by passing structured arguments.

Instead of hardcoding every integration, you provide a reference to an MCP server that **exposes tools dynamically**. The LLM then learns what tools are available and when to use them, all without manual plumbing.

## What Can You Do with Weavely MCP?

The Weavely MCP server gives your AI client **full control over the form-building process** — from creating an empty form to adding questions, styling it, adding conditional logic, and publishing.

The AI builds the form step by step while you follow along via a **live preview URL** that updates in real-time. When you're happy with the result, ask the AI to publish and you'll get a link to claim ownership.

For example:

> "Create a post-purchase NPS survey for new customers. Use a 0–10 rating scale, add a follow-up text area that only shows when the score is below 7, and style it with a clean dark theme."

The AI will:

1. Create the form and share a live preview link
2. Add a scale rating element and a conditional text area
3. Set up logic to show the text area only for low scores
4. Apply a dark color theme with clean layout
5. Publish when you ask — giving you an editor URL to claim full ownership

## Setup

Add the Weavely MCP server to your AI client's configuration:

```json theme={null}
{
  "mcpServers": {
    "weavely": {
      "url": "https://mcp.weavely.ai/mcp"
    }
  }
}
```

This works with any client that supports **Streamable HTTP** MCP servers, including Claude Desktop, Claude Code, and Cursor.

<Note>
  If your client only supports stdio-based MCP servers, use the `mcp-remote` bridge:

  ```json theme={null}
  {
    "mcpServers": {
      "weavely": {
        "command": "npx",
        "args": [
          "mcp-remote",
          "https://mcp.weavely.ai/mcp"
        ]
      }
    }
  }
  ```

  `npx` must be available in your terminal. On Windows with a local agent, you may need to prefix with `cmd /c`.
</Note>

## Tools

The MCP server exposes **13 tools** that cover the full form-building lifecycle:

### Form management

| Tool               | Description                                                                           |
| ------------------ | ------------------------------------------------------------------------------------- |
| `create_form`      | Create a new form. Returns a `formId` and live preview URL. **Must be called first.** |
| `get_form_summary` | Get the current form structure — pages, elements, theme, settings                     |
| `publish_form`     | Publish the form and get an editor URL to claim ownership                             |

### Elements

| Tool               | Description                                           |
| ------------------ | ----------------------------------------------------- |
| `add_element`      | Add a question or content element to a page           |
| `update_element`   | Update an element's label, description, options, etc. |
| `remove_element`   | Remove an element                                     |
| `reorder_elements` | Move an element to a different position or page       |

### Pages

| Tool            | Description                           |
| --------------- | ------------------------------------- |
| `add_page`      | Add a new page (for multi-step forms) |
| `remove_page`   | Remove a page and its elements        |
| `reorder_pages` | Reorder form pages                    |

### Styling & configuration

| Tool           | Description                                        |
| -------------- | -------------------------------------------------- |
| `set_theme`    | Set colors, fonts, layout, and component styles    |
| `set_settings` | Configure language, progress bar, auto-save, etc.  |
| `set_logic`    | Add conditional show/hide rules and event triggers |

### Supported element types

The `add_element` tool supports **25 element types**:

* **Input fields**: text, number, email, phone, URL, time, date, text area
* **Choice fields**: radio buttons, checkboxes, dropdown, ranking
* **Image choice**: multiple-choice with images (images assigned on platform after publishing)
* **Matrix**: grid questions with rows and columns
* **Rating**: star rating, scale rating, range slider
* **Display**: headings, paragraphs (with HTML support)
* **Media**: embedded HTML, audio, video
* **Special**: file upload, signature, single checkbox

## How It Works

Once the MCP server is connected, the AI sees all 13 tools and uses them automatically based on your requests.

**Example conversation:**

> **You:** Create a customer feedback form with a star rating, a comment box, and an email field. Make it look professional.
>
> **AI:** I'll create that for you. Here's your live preview: `https://forms.weavely.ai/abc-123` — you can open it now and refresh to see updates as I build.
>
> *(AI calls create\_form, then add\_element three times, then set\_theme)*
>
> **You:** Add a dropdown asking how they found us, with options for Google, Social Media, and Friend.
>
> *(AI calls add\_element with radio-buttons and options)*
>
> **You:** Looks great, publish it!
>
> *(AI calls publish\_form)*
>
> **AI:** Your form is published! Open the editor to claim it: `https://forms.weavely.ai/editor/xyz-456?publish=true`

The live preview updates with every change — you just refresh the page to see the latest version.

## After Publishing

Once you publish and claim your form on the Weavely platform, you get access to additional features that aren't available through the MCP:

* **Integrations**: Make, Zapier, n8n, Google Sheets, HubSpot, Airtable, Notion
* **Email notifications**: get notified on submissions or send confirmation emails
* **Social media preview**: customize Open Graph image, title, and description
* **Custom domain**: serve the form on your own domain
* **Embed codes**: embed the form on any website
* **Analytics**: view submissions and response data

For the full developer reference, see our [Forms API documentation](https://help.weavely.ai/developers/forms) and [llms.txt](https://help.weavely.ai/llms.txt).


# Connect Your Weavely Form to n8n for Workflow Automation
Source: https://help.weavely.ai/integrations/n8n

n8n is an open-source automation platform that lets you connect your Weavely form to hundreds of other apps and services. Trigger any n8n workflow automatically when someone submits a form.

Here's how to connect your Weavely form to n8n in just a few minutes using the Weavely community node.

<iframe title="YouTube video player" />

<Steps>
  <Step title="Enable Community Nodes in n8n">
    Weavely connects to n8n through a verified community node. Before you can install it, you'll need to enable community nodes in your n8n instance. Navigate to your **Admin Panel** and make sure **Verified Community Nodes** are enabled.

    <Frame>
      <img alt="Screenshot showing how to enable verified community nodes in the n8n admin panel" />
    </Frame>
  </Step>

  <Step title="Generate a Personal Token in Weavely">
    You'll need a *"personal token"* to connect your Weavely account to n8n. To create one, navigate to *Settings->Personal Tokens* in the Weavely dashboard, give your token a name (e.g. "n8n"), and click create. Once generated, copy the token — you'll paste it into n8n in the next step.

    <img alt="Animated screenshot showing where to create a personal token in Weavely AI" />
  </Step>

  <Step title="Install the Weavely Node and Set Up Your Credentials">
    Create a new workflow in n8n and search for **Weavely** under the available triggers. Install the Weavely community node, then add it to your workflow. When prompted to set up credentials, paste the personal token you copied from Weavely and hit **Save** — n8n will test the connection to confirm everything is working.

    <Frame>
      <img alt="Screenshot showing how to install the Weavely community node and configure credentials in n8n" />
    </Frame>
  </Step>

  <Step title="Select Your Team and Form">
    Once your credentials are saved, select the **team** you want to listen to and then choose the specific **form** you want to trigger the workflow. The form needs to be published in Weavely for it to appear in the dropdown. If you've just published a form, you may need to close and reopen the node settings for it to show up.

    When you press **Execute Step**, n8n will start listening for new submissions. Submit a test response to your form and you'll see the output data in n8n — including the form ID, response ID, creation timestamp, and all your answers with their question labels, values, and question IDs.

    <Frame>
      <img alt="Screenshot showing the configuration of a Weavely form trigger node in n8n" />
    </Frame>
  </Step>
</Steps>

And that's it! From here, you can connect the Weavely trigger to any other nodes in your n8n workflow — whether that's sending data to Google Sheets, Notion, a CRM, Slack, or any of n8n's hundreds of available integrations.


# Send Form Responses to Notion
Source: https://help.weavely.ai/integrations/notion

Weavely's Notion integration lets you connect your form to a Notion database and automatically send new responses as database entries. 

<iframe title="YouTube video player" />

## Step 1: Open the Integrations Tab

With the editor open, navigate to the *Integrations* tab and select the *Notion* integration as shown below.

<img alt="Screenshot showing where to find the Notion integration in Weavely AI" />

## Step 2: Link Your Notion Account

Is this the first time you set up a Notion integration? Then Weavely will first guide you through the steps to connect your Notion account to Weavely. Just press *"Connect to Notion"* to get started.

<img alt="Screenshot showing how to connect Notion to Weavely AI" />

## Step 3: Map Form Fields to Database Properties

Once you've connected your Notion account you'll be able to set up the integration for your form. In a first step you'll need to select which Notion database you want the responses to go to. In a second step you can specify how fields of your form correspond to columns of your Notion database. The gif below showcases both these steps.

<img alt="Animated screenshot showing how to configure the Notion integration in Weavely AI" />

<Info>
  If you can't see your Notion database you might not have given Weavely permissions to the right workspace or pages within your Notion. You can repeat the process in step 2 by disconnecting your Notion account in the Weavely dashboard under *Settings -> Connected Accounts*
</Info>

## **Changing Your Notion Account or Resetting Your Connection**

If you ever need to reset your connection with Notion, for instance to switch to a different account or reauthorize access, you can do so from your Weavely dashboard. Go to **Settings → Connected Accounts** and click the red **“Disconnect”** button next to Notion. You can then reconnect with the correct account.

<Frame>
  <img alt="Screenshot showing how to disconnect Notion from Weavely AI" />
</Frame>


# Personal Tokens
Source: https://help.weavely.ai/integrations/personal-tokens

Need a personal token to connect Weavely to a third-party service (e.g. Zapier). Here's how to get yours today!

Personal tokens allow you to connect your Weavely forms to third-party services such as Zapier. To create a token, navigate to *Settings->Personal Tokens* in the dashboard.

<Frame>
  <img alt="Animated screenshot showing how to create a personal token in Weavely AI" />
</Frame>


# Send Form Responses to Salesforce
Source: https://help.weavely.ai/integrations/salesforce

Weavely's Salesforce integration lets you automatically create objects in Salesforce upon form submissions.

<iframe title="YouTube video player" />

## Step 1: Open the Integrations Tab

With the editor open, navigate to the *Integrations* tab and select the *Salesforce* integration as shown below.

<img alt="Screenshot showing where to find the Salesforce integration in Weavely AI" />

## Step 2: Link Your Salesforce Account

Is this the first time you set up a Salesforce integration? Then Weavely will first guide you through the steps to connect your Salesforce account to Weavely. Just press *"Connect to Salesforce"* to get started.

<img alt="Screenshot showing how to connect Salesforce to Weavely AI" />

## Step 3: Map Form Fields to Object Properties

Once you've connected your Salesforce account you'll be able to set up the integration for your form. In a first step you'll need to select which Salesforce object you want to create upon form submission. In a second step you can specify how fields of your form correspond to properties of your Salesforce object. The gif below showcases both these steps.

<img alt="Animated screenshot showing how to configure the Salesforce integration in Weavely AI" />

## **Changing Your Salesforce Account or Resetting Your Connection**

If you ever need to reset your connection with Salesforce, for instance to switch to a different account or reauthorize access, you can do so from your Weavely dashboard. Go to **Settings → Connected Accounts** and click the red **“Disconnect”** button next to Salesforce. You can then reconnect with the correct account.

<Frame>
  <img alt="Screenshot showing where to disconnect a Salesforce account in Weavely " />
</Frame>


# Connect Your Weavely Form to viaSocket for Workflow Automation
Source: https://help.weavely.ai/integrations/viasocket

viaSocket is an AI automation platform that connects your Weavely form to hundreds of other apps like Slack, Gmail, Airtable, and more.

<iframe title="YouTube video player" />

Here's how to connect Weavely and [viaSocket](https://viasocket.com/) in a few simple steps.

<Steps>
  <Step title="Generate a Personal Token in Weavely">
    You'll need something called a *"personal token"* to connect you Weavely account to viaSocket. To create this token, navigate to *Settings->Personal Tokens* in the dashboard. Once created you'll be able to copy and paste this token (i.e. a string of text) to viaSocket in step 2.

    <img alt="Animated screenshot showing where to create a personal token in Weavely AI" />
  </Step>

  <Step title="Find Weavely Triggers in viaSocket">
    When you create a new flow in viaSocket, search for "Weavely" to find Weavely's triggers. For the moment this is limited to "New form submissions". In other words, your flow will be activated everytime your Weavely form gathers a new submission.

    <img alt="Screenshot of searching for Weavely AI forms in viaSocket" />
  </Step>

  <Step title="Setup the Weavely Connection in viaSocket">
    When you open a Weavely trigger for the first time you'll first be prompted to connect your Weavely account. This is where your personal token from step 1 will come into play. Copy and paste the token into the field marked "API key" by viaSocket.

    <img alt="Screenshot of connecting Weavely to viaSocket" />
  </Step>

  <Step title="Start Building your Flow">
    That's it! You're all set to start using your form submissions in your viaSocket flow. Further configure the trigger by selecting the right team and the right form to power your automation!

    <img alt="Screenshot showing how to configure a Weavely AI forms trigger in viaSocket" />
  </Step>
</Steps>


# Automate Workflows with Zapier
Source: https://help.weavely.ai/integrations/zapier

Connect Weavely to thousands of other tools through Zapier.

<iframe title="YouTube video player" />

We're constantly adding native integrations to third-party tools. However, we can't integrate them all! If there's a tool you want to connect your Weavely form to, chances are it's already available on Zapier. Here's how to use Weavely in combination with Zapier.

<Steps />

<Steps>
  <Step title="Create a Personal Token">
    You'll need something called a *"personal token"* to connect you Weavely account to Zapier. To create this token, navigate to *Settings->Personal Tokens* in the dashboard. Once created you'll be able to copy and paste this token (i.e. a string of text) to Zapier in step 3.

    <img alt="Animated screenshot showing where to find the Zapier integration in Weavely AI" />
  </Step>

  <Step title="Create a Weavely Trigger in Zapier">
    Open the form you want to include in your Zapier workflow in the Weavely dashboard. Navigate to the *Integrations* tab and hit the *"+ Add"* button next to Zapier. This will automatically create a Zapier trigger for you for that form. This trigger will fire everytime a new submission is received for that form.

    <Info>
      Alternatively, you can also start this step from within Zapier. Just search for Weavely when creating the trigger and you'll be able to select which form you want to include in your Zapier automation through a dropdown.
    </Info>

    <img alt="Animated screenshot showing how to create a Weavely AI trigger in Zapier" />
  </Step>

  <Step title="Authenticate Weavely in Zapier">
    In the Zapier trigger you'll need to authenticate Weavely. You do this inside the trigger, using your personal token you created in Step 1. The gif below walks you through the steps required to authenticate.

    <img alt="Animated screenshot showing how to authenticate Weavely AI in Zapier" />
  </Step>

  <Step title="Configure your Zap and Create the Flow">
    If you've followed the steps above your Weavely trigger will come pre-configured with the right form id and team id. If you've started the setup from Zapier you'll be able to select the right team and form through a dropdown.

    <img alt="Screenshot showing how to configure a Weavely AI zap in Zapier" />

    In all subsequent steps of your Zap you will be able to use parts of the submissions received by your Weavely form as *field mappings*. The image below shows the example of reusing answers given by respondents to our form to use in a Slack message.

    <img alt="Screenshot showing how to use Weavely form data in Zapier" />
  </Step>
</Steps>


# Send Form Responses to Zoho
Source: https://help.weavely.ai/integrations/zoho

Weavely's Zoho integration lets you automatically create contacts in Zoho upon form submissions.

<iframe title="YouTube video player" />

<Steps>
  <Step title="Open the Integrations Tab">
    With the editor open, navigate to the *Integrations* tab and select the *Zoho* integration as shown below.

    <img alt="Screenshot showing where to find the integrations tab in Weavely AI" />

    <img alt="Screenshot showing where to find the Zoho integration in Weavely AI" />
  </Step>

  <Step title="Link Your Zoho Account">
    Is this the first time you set up a Zoho integration? Then Weavely will first guide you through the steps to connect your Zoho account to Weavely. Just press *"Connect to Zoho"* to get started.

    <img alt="Screenshot showing how to connect Zoho and Weavely AI" />
  </Step>

  <Step title="Map Form Fields to Contact Properties">
    Once you've connected your Zoho account you'll be able to set up the integration for your form. You can specify which fields of your form should be used to create the new contact in Zoho as shown in the gif below. At the time of writing you can only create new contacts after a form submission. Looking to do something else? Reach out to [florian@weavely.ai](mailto:florian@weavely.ai) to tell us your use case and we'll add it to the roadmap!

    <Warning>
      To create a contact in Zoho you need to at least map a last name.
    </Warning>

    <img alt="Animated screenshot showing how to configure the Zoho integration in Weavely AI" />
  </Step>
</Steps>

## **Changing Your Zoho Account or Resetting Your Connection**

If you ever need to reset your connection with Zoho, for instance to switch to a different account or reauthorize access, you can do so from your Weavely dashboard. Go to **Settings → Connected Accounts** and click the red **“Disconnect”** button next to Zoho. You can then reconnect with the correct account.

<Frame>
  <img alt="Screenshot showing how to disconnect Zoho from Weavely AI" />
</Frame>


# Supported Browsers
Source: https://help.weavely.ai/supported-browsers

Weavely works best on modern browsers. Here's what we officially support.

Weavely is built on modern web technologies. For the best experience, we recommend keeping your browser up to date.

## Supported Browsers

<CardGroup>
  <Card title="Chrome" icon="chrome">
    Version 111 and above
  </Card>

  <Card title="Microsoft Edge" icon="edge">
    Version 111 and above
  </Card>

  <Card title="Firefox" icon="firefox">
    Version 111 and above
  </Card>

  <Card title="Safari" icon="safari">
    Version 16.4 and above
  </Card>
</CardGroup>

<Note>
  Older browser versions may work, but we can't guarantee full compatibility or a smooth experience. If something looks off, updating your browser usually fixes it.
</Note>