
Multi-step form page with numbered step indicator showing connected circles, centered form fields, and navigation buttons.
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.
Copy and paste directly into Webflow Designer
{
"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)