Multi Form 3

ImageFormBackground Image249 nodes · 55 styles

Description

Multi-step form page with numbered step indicator showing connected circles, centered form fields, and navigation buttons.

Detailed Analysis

This multi-step form uses a horizontal numbered step indicator instead of a progress bar. The header has logo and login link. The step indicator shows four connected numbered circles (1-2-3-4) with connecting lines, where step 1 is filled/active (black) and others are outlined (gray). The centered content displays: heading 'Let's start with your name & email', description text, name input field, email input field with mail icon and placeholder. Cancel and Next buttons appear at bottom right (no step counter text as the visual indicator replaces it). A minimal footer shows copyright. This numbered step approach clearly shows total steps and current position in the flow.

Webflow Paste

Copy and paste directly into Webflow Designer

Keywords

multi-step formstep indicatornumbered circlesregistrationform fieldsconnected stepsemail inputname inputnavigation buttonsvisual progress

Raw Data (spacer)

{
  "meta": {
    "droppedLinks": 0,
    "dynBindRemovedCount": 0,
    "unlinkedSymbolCount": 0,
    "paginationRemovedCount": 0,
    "dynListBindRemovedCount": 0
  },
  "type": "@webflow/XscpData",
  "payload": {
    "ix1": [],
    "ix2": {
      "events": [],
      "actionLists": [],
      "interactions": []
    },
    "nodes": [
      {
        "_id": "8f470d4b-2ac6-db63-de77-35cd4d11dab6",
        "tag": "section",
        "data": {
          "tag": "section",
          "attr": {
            "id": ""
          },
          "text": false,
          "xattr": [],
          "search": {
            "exclude": false
          },
          "devlink": {
            "slot": "",
            "runtimeProps": {}
          },
          "visibility": {
            "conditions": []
          },
          "displayName": ""
        },
        "type": "Block",
        "classes": [
          "097dea5d-5573-be98-6231-3dfd837d36ed"
        ],
        "children": [
          "277ed397-73fb-97f9-bc9b-f12f0411705f",
          "8f470d4b-2ac6-db63-de77-35cd4d11dab7"
        ]
      },
      {
        "_id": "277ed397-73fb-97f9-bc9b-f12f0411705f",
        "tag": "div",
        "data": {
          "tag": "div",
          "attr": {
            "id": ""
          },
          "text": false,
          "xattr": [],
          "search": {
            "exclude": false
          },
          "devlink": {
            "slot": "",
            "runtimeProps": {}
          },
          "visibility": {
            "conditions": []
          },
          "displayName": ""
        },
        "type": "Block",
        "classes": [
          "e0277b3b-2c58-f338-7ed1-dc81b299bea1"
        ],
        "children": [
          "277ed397-73fb-97f9-bc9b-f12f04117060"
        ]
      },
      {
        "_id": "277ed397-73fb-97f9-bc9b-f12f04117060",
        "tag": "div",
        "data": {
          "tag": "div",
          "attr": {
            "id": ""
          },
          "text": false,
          "xattr": [],
     
... (truncated)

Detailed Analysis

{ "meta": { "droppedLinks": 0, "dynBindRemovedCount": 0, "unlinkedSymbolCount": 0, "paginationRemovedCount": 0, "dynListBindRemovedCount": 0 }, "type": "@webflow/XscpData", "payload": { "ix1": [], "ix2": { "events": [], "actionLists": [], "interactions": [] }, "nodes": [ { "_id": "8f470d4b-2ac6-db63-de77-35cd4d11dab6", "tag": "section", "data": { "tag": "section", "attr": { "id": "" }, "text": false, "xattr": [], "search": { "exclude": false }, "devlink": { "slot": "", "runtimeProps": {} }, "visibility": { "conditions": [] }, "displayName": "" }, "type": "Block", "classes": [ "097dea5d-5573-be98-6231-3dfd837d36ed" ], "children": [ "277ed397-73fb-97f9-bc9b-f12f0411705f", "8f470d4b-2ac6-db63-de77-35cd4d11dab7" ] }, { "_id": "277ed397-73fb-97f9-bc9b-f12f0411705f", "tag": "div", "data": { "tag": "div", "attr": { "id": "" }, "text": false, "xattr": [], "search": { "exclude": false }, "devlink": { "slot": "", "runtimeProps": {} }, "visibility": { "conditions": [] }, "displayName": "" }, "type": "Block", "classes": [ "e0277b3b-2c58-f338-7ed1-dc81b299bea1" ], "children": [ "277ed397-73fb-97f9-bc9b-f12f04117060" ] }, { "_id": "277ed397-73fb-97f9-bc9b-f12f04117060", "tag": "div", "data": { "tag": "div", "attr": { "id": "" }, "text": false, "xattr": [], ... (truncated)