# Table of Contents - [Email Validation | Superform by Delta Clan](#email-validation-superform-by-delta-clan) - [Validate & Error (must read) | Superform by Delta Clan](#validate-error-must-read-superform-by-delta-clan) - [Form | Superform by Delta Clan](#form-superform-by-delta-clan) - [Radio Button Navigation | Superform by Delta Clan](#radio-button-navigation-superform-by-delta-clan) - [Script Installation | Superform by Delta Clan](#script-installation-superform-by-delta-clan) - [Cloneable #1 | Superform by Delta Clan](#cloneable-1-superform-by-delta-clan) - [Next Button | Superform by Delta Clan](#next-button-superform-by-delta-clan) - [Enable Enter/Cmd Enter Navigation | Superform by Delta Clan](#enable-enter-cmd-enter-navigation-superform-by-delta-clan) - [Step Transition Duration | Superform by Delta Clan](#step-transition-duration-superform-by-delta-clan) - [Total Steps Label | Superform by Delta Clan](#total-steps-label-superform-by-delta-clan) - [Words (Min/Max) | Superform by Delta Clan](#words-min-max-superform-by-delta-clan) - [Include Characters | Superform by Delta Clan](#include-characters-superform-by-delta-clan) - [Characters Count (Min/Max) | Superform by Delta Clan](#characters-count-min-max-superform-by-delta-clan) - [Current Step Label | Superform by Delta Clan](#current-step-label-superform-by-delta-clan) - [Progress Steps | Superform by Delta Clan](#progress-steps-superform-by-delta-clan) - [Point Scoring | Superform by Delta Clan](#point-scoring-superform-by-delta-clan) - [Step | Superform by Delta Clan](#step-superform-by-delta-clan) - [Dynamic Endings | Superform by Delta Clan](#dynamic-endings-superform-by-delta-clan) - [Progress Bar | Superform by Delta Clan](#progress-bar-superform-by-delta-clan) - [Submit Button | Superform by Delta Clan](#submit-button-superform-by-delta-clan) - [Step Teleport | Superform by Delta Clan](#step-teleport-superform-by-delta-clan) - [Back Button | Superform by Delta Clan](#back-button-superform-by-delta-clan) - [Checkboxes (Min/Max) | Superform by Delta Clan](#checkboxes-min-max-superform-by-delta-clan) - [Step Container | Superform by Delta Clan](#step-container-superform-by-delta-clan) - [Value Recall | Superform by Delta Clan](#value-recall-superform-by-delta-clan) - [Navigation - Overview | Superform by Delta Clan](#navigation-overview-superform-by-delta-clan) - [Quick Start | Superform by Delta Clan](#quick-start-superform-by-delta-clan) - [Variables | Superform by Delta Clan](#variables-superform-by-delta-clan) - [Form Container | Superform by Delta Clan](#form-container-superform-by-delta-clan) - [Step Index ($s) | Superform by Delta Clan](#step-index-s-superform-by-delta-clan) - [Progress Bar | Superform by Delta Clan](#progress-bar-superform-by-delta-clan) - [Form Data ($f) | Superform by Delta Clan](#form-data-f-superform-by-delta-clan) --- # Email Validation | Superform by Delta Clan Last updated 1 year ago Was this helpful? Attribute: **none** Superform validates for **"name@domain.com"** pattern only an`EMAIL INPUT` tag by just marking the input for validation with: superform-validate="identifier" `eg.`superform-validate=user-email This way you also add a text error message in case the email provided by the user doesn't match the correct pattern with superform-error = "identifier" [](#related-links) Related Links ------------------------------------- โœ… [Validate & Error (must read)](/superform/superform-v0/validation-attributes/validate-and-error-must-read) 1) Just **superform-validate="identifier"** attribute to mark it for validation. 2) Just **superform-error="identifier"** attribute to show corresponding error message. ![](https://deltaclan.gitbook.io/~gitbook/image?url=https%3A%2F%2F1615520621-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252FhC4q4SkuRcLPZQrmF5BR%252Fuploads%252FOu76bXoCVRvzFPHsjew1%252Fimage.png%3Falt%3Dmedia%26token%3D43a3eb82-f694-4803-86e9-8da181ecf48e&width=768&dpr=4&quality=100&sign=bf318f88&sv=2) ![](https://deltaclan.gitbook.io/~gitbook/image?url=https%3A%2F%2F1615520621-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252FhC4q4SkuRcLPZQrmF5BR%252Fuploads%252Fzcidd2Nu5bwQyv86xb4r%252Fimage.png%3Falt%3Dmedia%26token%3D1afed1d2-8cbc-4ff7-8bff-ad5fae3929d4&width=768&dpr=4&quality=100&sign=d30e9038&sv=2) --- # Validate & Error (must read) | Superform by Delta Clan Last updated 1 year ago Was this helpful? [](#validation-information) Validation Information ------------------------------------------------------- Superform will perform validation in a step when it detects any of: * **superform-validate** attribute on an element or group of elements _**and/or**_ * **required** attribute on an element or group of elements. **Attribute:** `superform-validate="identifier"` _eg. superform-validate="name"_ **Marks the specified element for validation by Superform.** The "identifier" value specifies the unique name of the input element to be validated. Superform will perform validation on this element based on the other validating attributes that the user adds. โœ” Can be paired with an error message - see below _Images: INPUT (text) with "NAME" identifier. It will be validated for MINIMUM CHARACTERS = 1_ [](#error-message-information) Error Message Information ------------------------------------------------------------- **Attribute:** `superform-error="identifier"` _eg. superform-error="name"_ Pairs an error message to the corresponding validating field and is shown during step validation. MUST be the same "identifier" as the validating field. example: superform-validate = "name" superform-error = "name" Check which fields can be validated in the next sections. โœ… ![](https://deltaclan.gitbook.io/~gitbook/image?url=https%3A%2F%2F1615520621-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252FhC4q4SkuRcLPZQrmF5BR%252Fuploads%252FaGYzPUCovLaJMjtztZul%252Fimage.png%3Falt%3Dmedia%26token%3D2ba77b2a-dd92-4583-bf15-64b8547e15d2&width=300&dpr=4&quality=100&sign=1f5f46a4&sv=2) ![](https://deltaclan.gitbook.io/~gitbook/image?url=https%3A%2F%2F1615520621-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252FhC4q4SkuRcLPZQrmF5BR%252Fuploads%252FXZAyHkn1LAiLsTv3ZWjo%252Fimage.png%3Falt%3Dmedia%26token%3D46ce7f25-52fd-43a0-90e1-c02da52cf81e&width=300&dpr=4&quality=100&sign=370ca7e1&sv=2) ![](https://deltaclan.gitbook.io/~gitbook/image?url=https%3A%2F%2F1615520621-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252FhC4q4SkuRcLPZQrmF5BR%252Fuploads%252F3PLErXmxWBYIIr9qfKdp%252Fimage.png%3Falt%3Dmedia%26token%3D1cfa9c6d-a7f4-4580-b728-a7f8787b4a20&width=300&dpr=4&quality=100&sign=a7df8989&sv=2) ![](https://deltaclan.gitbook.io/~gitbook/image?url=https%3A%2F%2F1615520621-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252FhC4q4SkuRcLPZQrmF5BR%252Fuploads%252FbPXLT5Pehs9ias7nMtRG%252Fimage.png%3Falt%3Dmedia%26token%3D0f84c940-438e-4636-85df-1eefda246388&width=300&dpr=4&quality=100&sign=bcaddeca&sv=2) --- # Form | Superform by Delta Clan Last updated 1 year ago Was this helpful? [](#information) Information --------------------------------- **Attribute:** `superform-element = form` **Apply to:** `form` tag element. Mounts the Superform library to a specific form in Webflow. Once applied, Superform provides advanced input validation, multistep form support, dynamic outcomes and the rest of it's features! ๐ŸŽผ 'form' attribute is placed inside
tag element in Webflow. ![](https://deltaclan.gitbook.io/~gitbook/image?url=https%3A%2F%2F1615520621-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252FhC4q4SkuRcLPZQrmF5BR%252Fuploads%252F7cSEvVkHl7tph4bN8xo1%252Fchrome_xAN1r4dWCp.png%3Falt%3Dmedia%26token%3D089203cc-f8f9-45dc-b6ec-4fe52c7cb707&width=768&dpr=4&quality=100&sign=86c4d79b&sv=2) --- # Radio Button Navigation | Superform by Delta Clan Last updated 1 year ago Was this helpful? **Attribute:** `superform-radio-skip = true` **Apply to:** `div`, `label` tag elements that contain the radio button. Proceed to the next step (by default) or teleport to a specific step in a multistep form by clicking on the div containing the radio button. Activates validation of step (if there are any validation fields present). Multiple radio buttons can be grouped together in a wrapper (div or link block) to apply same options for multiple radios. ### [](#addons) Addons โฑ๏ธAdd `superform-radio-skip-delay = duration` (in ms) to delay the transition to the next step. Works together with _Step Transition Duration_ ๐Ÿ”ฎAdd `superform-goto=stepNumber` to teleport to step of choice. ๐ŸŽผ Radio buttons from choices 1-4 are grouped together in one containing wrapper & will take the user to the next step. Radio with choice no5 is separated because we need to teleport to step number 9. ![](https://deltaclan.gitbook.io/~gitbook/image?url=https%3A%2F%2F1615520621-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252FhC4q4SkuRcLPZQrmF5BR%252Fuploads%252FPpf5ol1gVGW51DhrMn4B%252Fimage.png%3Falt%3Dmedia%26token%3D93567abe-102f-47ad-ab04-5c3cdc58c8a3&width=768&dpr=4&quality=100&sign=95858fbb&sv=2) ![](https://deltaclan.gitbook.io/~gitbook/image?url=https%3A%2F%2F1615520621-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252FhC4q4SkuRcLPZQrmF5BR%252Fuploads%252F76kPxj92HI5sdYHZXyyG%252Fimage.png%3Falt%3Dmedia%26token%3Df45d4ece-105c-40fc-a0ad-e167c3c4f382&width=768&dpr=4&quality=100&sign=f941f5b0&sv=2) --- # Script Installation | Superform by Delta Clan Last updated 1 year ago Was this helpful? [](#add-superform-in-webflow) Add Superform in Webflow. ------------------------------------------------------------ 1. Copy the latest **BETA** version of Superform script: Copy Superform is in **BETA** stage. Join our Superform discord server for support & issues at the following link: [https://discord.gg/9zs3UrrcP9](https://discord.gg/9zs3UrrcP9) ! 1. Open the page you want to install Superform on in Webflow. 2. Click on the Page Settings icon in the left-hand menu. 3. Paste the Superform script into the Head Code field. 4. Save your changes and publish your site. **That's it!** Superform is now installed on your Webflow site and you can start using it to create next-gen forms. It can be used with **vanilla JavaScript** in custom projects outside of Webflow! **Don't forget to check our Cloneable #1 for reference!** ๐Ÿ‘๏ธ Installation of script goes Inside tag ![](https://deltaclan.gitbook.io/~gitbook/image?url=https%3A%2F%2F1615520621-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252FhC4q4SkuRcLPZQrmF5BR%252Fuploads%252FJzdfe8S0J3XJaGiaphxM%252Fimage.png%3Falt%3Dmedia%26token%3Da144c9c7-ceef-4d90-a49f-8e6f16b79923&width=768&dpr=4&quality=100&sign=c0b2ae6b&sv=2) --- # Cloneable #1 | Superform by Delta Clan Last updated 1 year ago Was this helpful? You can get started quickly and use our cloneable as a reference! ๐Ÿ‘๏ธ [![Logo](https://webflow.com/assets-marketplace/favicon.ico)\[PRODUCT\] Superform - Next-gen Form Library - Webflow\[PRODUCT\] Superform - Next-gen Form Library](https://webflow.com/made-in-webflow/website/superform-v1) ![](https://deltaclan.gitbook.io/~gitbook/image?url=https%3A%2F%2F1615520621-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252FhC4q4SkuRcLPZQrmF5BR%252Fuploads%252F8yOiqxBRBUSutbMOL0Eq%252Fimage.png%3Falt%3Dmedia%26token%3Df338ea6f-6c49-467a-9777-0d19a7be152c&width=768&dpr=4&quality=100&sign=16ad79ca&sv=2) --- # Next Button | Superform by Delta Clan Last updated 1 year ago Was this helpful? [](#information) Information --------------------------------- **Attribute:** `superform-element = next` **Apply to:** `div`, `a (link block)`, `button`, tag elements. To navigate to the next step in a multistep form, simply add the attribute to the element that triggers the next step. Superform will automatically handle the transition to the next step when the element is clicked. [](#caution) **Caution** ----------------------------- 1. There should be only one next button in each step. 2. It should **NOT** be placed in the final step of a multistep form. All validations (if any on the step) are happening on this click. [](#upgrades) Upgrades --------------------------- ๐Ÿ”ฎ Step teleport: add `superform-goto = numberOfStep` to teleport back to another step. ๐ŸŽผ ![](https://deltaclan.gitbook.io/~gitbook/image?url=https%3A%2F%2F1615520621-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252FhC4q4SkuRcLPZQrmF5BR%252Fuploads%252Fyemm6xlWnCpJnUkuPPOU%252Fimage.png%3Falt%3Dmedia%26token%3D212016ab-0f5b-4a94-ac03-bce4e163173d&width=768&dpr=4&quality=100&sign=b788515f&sv=2) --- # Enable Enter/Cmd Enter Navigation | Superform by Delta Clan Last updated 1 year ago Was this helpful? **Attribute:** `superform-enter = true/false` eg. superform-enter = true **Apply to:** `form` tag element. * **Enter** -> Next Step * **CMD/CTRL Enter** -> Submits form Enter navigation by default is set to `**false**`. If there are validation fields inside the step they will be validated alongside their errors automatically. ๐Ÿ”ข _"Enter" navigation in this example is set to_ `_true_` ![](https://deltaclan.gitbook.io/~gitbook/image?url=https%3A%2F%2F1615520621-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252FhC4q4SkuRcLPZQrmF5BR%252Fuploads%252FJEja3szJHVnqJbZyuk30%252Fimage.png%3Falt%3Dmedia%26token%3D58038f25-e712-4781-b694-e5e9232894c4&width=768&dpr=4&quality=100&sign=9a5cb75e&sv=2) --- # Step Transition Duration | Superform by Delta Clan Last updated 1 year ago Was this helpful? **Attribute:** `superform-duration = number` eg. superform-duration = 350 **Apply to:** `form` tag element. This controls the fade duration between steps, for example from Step #1 to Step #2 etc. **Default is 400ms.** [](#caution) Caution ------------------------- Must be placed inside the 'form' tag. [](#related-links) Related Links ------------------------------------- ๐Ÿ”ข [Form](/superform/superform-v0/navigation-attributes/form) _Step Transition Duration in this example is set to 500ms (which equals to 0.5s)_ ![](https://deltaclan.gitbook.io/~gitbook/image?url=https%3A%2F%2F1615520621-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252FhC4q4SkuRcLPZQrmF5BR%252Fuploads%252FJEja3szJHVnqJbZyuk30%252Fimage.png%3Falt%3Dmedia%26token%3D58038f25-e712-4781-b694-e5e9232894c4&width=768&dpr=4&quality=100&sign=9a5cb75e&sv=2) --- # Total Steps Label | Superform by Delta Clan Last updated 1 year ago Was this helpful? [](#information) Information --------------------------------- **Attribute:** `superform-element = total-steps` **Apply to:** `text-block`, `link-block`, `p` tag elements. Shows the total steps of a multistep form. Eg. 4/**10** If you have different endings, only 1 ending will be calculated in total steps: ex: 9 steps + 3 different ending steps = **10 total steps**. Ending step is calculated dynamically on each step, so the rest steps are not included in the TOTAL STEPS. [](#related-links) Related Links ------------------------------------- ๐Ÿ”ข [Current Step Label](/superform/superform-v0/progress-attributes/current-step-label) --- # Words (Min/Max) | Superform by Delta Clan Last updated 1 year ago Was this helpful? [](#information) Information --------------------------------- **Attribute:** `superform-words-min = number` or `superform-words-max = number` **Apply to:** all text-related `input`, `textarea`, tag elements. Validates specified input/textarea for minimum and/or maximm character length. **Eg: "I want this input text to receive at least 25 words"** Apply: superform-words-min = 25 Remember that you need to always apply **superform-validate="identifier"** so your input can enter the validation process. [](#related-links) Related Links ------------------------------------- โœ… [Validate & Error (must read)](/superform/superform-v0/validation-attributes/validate-and-error-must-read) 1) both **superform-validate="textarea"** to mark it for validation and **superform-words-min="25"** to allow only **at least 25** words 2) **superform-error="textarea"** to show the corresponding error message. ![](https://deltaclan.gitbook.io/~gitbook/image?url=https%3A%2F%2F1615520621-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252FhC4q4SkuRcLPZQrmF5BR%252Fuploads%252Fo7nCiUg2Jesw0qVrB4sS%252Fimage.png%3Falt%3Dmedia%26token%3D8024027e-76e3-4ff0-8fe0-103f0175bea5&width=768&dpr=4&quality=100&sign=23e0c3c3&sv=2) ![](https://deltaclan.gitbook.io/~gitbook/image?url=https%3A%2F%2F1615520621-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252FhC4q4SkuRcLPZQrmF5BR%252Fuploads%252F8zX2jGqVw3Esh2AgVB53%252Fimage.png%3Falt%3Dmedia%26token%3D716acbf8-ed17-44fb-8c38-e6652a7b3504&width=768&dpr=4&quality=100&sign=c8ab1ae&sv=2) --- # Include Characters | Superform by Delta Clan Last updated 1 year ago Was this helpful? **Attribute:** `superform-element = include` **Apply to:** all `input` tag elements except type `email`. Create patterns/templates that have to be included in an input. In this example `_superform-include = 1A$%_` it commands the input to include 1 number, 1 capital letter, 2 symbols. **You can type any symbol or number or letter you want**. It's best used for stronger passwords in Signup forms! [](#related-links) Related Links ------------------------------------- โœ… [Validate & Error (must read)](/superform/superform-v0/validation-attributes/validate-and-error-must-read) ![](https://deltaclan.gitbook.io/~gitbook/image?url=https%3A%2F%2F1615520621-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252FhC4q4SkuRcLPZQrmF5BR%252Fuploads%252F3iYMvcr6oZTjOhoIIr6I%252Fchrome_IUIIxBZCIh.png%3Falt%3Dmedia%26token%3D4d3ff24d-ffe7-4a34-ac15-ef094a7dd1bc&width=768&dpr=4&quality=100&sign=34e00df3&sv=2) ![](https://deltaclan.gitbook.io/~gitbook/image?url=https%3A%2F%2F1615520621-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252FhC4q4SkuRcLPZQrmF5BR%252Fuploads%252FYBMPS3GtAVCQcxMGvsDl%252Fchrome_18POAc42jk.png%3Falt%3Dmedia%26token%3Ddad55864-71ee-4298-8297-27038ce50700&width=768&dpr=4&quality=100&sign=2ddea816&sv=2) --- # Characters Count (Min/Max) | Superform by Delta Clan Last updated 1 year ago Was this helpful? [](#information) Information --------------------------------- **Attribute:** `superform-chars-min = number` or `superform-chars-max = number` **Apply to:** all text-related `input`, `textarea`, tag elements. Validates specified input/textarea for minimum and/or maximum character length. **Eg: "I want this input text to receive between 4-10 characters"** Apply: superform-chars-min = 4, superform-chars-max=10 Remember that you need to always apply **superform-validate="identifier"** so your input can enter the validation process. [](#related-links) Related Links ------------------------------------- โœ… [Validate & Error (must read)](/superform/superform-v0/validation-attributes/validate-and-error-must-read) 1) both **superform-validate="name"** to mark it for validation and **superform-chars-min="1"** to allow only **at least 1** character 2) **superform-error="name"** to show corresponding error text message. ![](https://deltaclan.gitbook.io/~gitbook/image?url=https%3A%2F%2F1615520621-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252FhC4q4SkuRcLPZQrmF5BR%252Fuploads%252FnywLsbi8sJFtKZKe67mS%252Fimage.png%3Falt%3Dmedia%26token%3D1e93413d-9c9b-4584-9f15-dfa20c653d5a&width=768&dpr=4&quality=100&sign=57b6511&sv=2) ![](https://deltaclan.gitbook.io/~gitbook/image?url=https%3A%2F%2F1615520621-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252FhC4q4SkuRcLPZQrmF5BR%252Fuploads%252FBBBsbWdqPXLOd4NpICa9%252Fimage.png%3Falt%3Dmedia%26token%3D35dad5ee-e282-4d67-bab7-ffdc20bc1053&width=768&dpr=4&quality=100&sign=d7b8c7b8&sv=2) --- # Current Step Label | Superform by Delta Clan Last updated 1 year ago Was this helpful? [](#information) Information --------------------------------- **Attribute:** `superform-element = current-step` **Apply to:** `text-block`, `link-block`, `p` tag elements. Shows the current step in a multistep form. Eg. **4**/10 [](#related-links) Related Links ------------------------------------- ๐Ÿ”ข [Total Steps Label](/superform/superform-v0/progress-attributes/total-steps-label) --- # Progress Steps | Superform by Delta Clan Last updated 1 year ago Was this helpful? [](#information) Information --------------------------------- **Attribute:** `superform-element = progress-step` **Apply to:** `div`, `a (link block)` tag elements. This will be the step that will serve as a โ€˜templateโ€™ for the rest of the steps. Create one and Superform will automatically create the rest for the rest of the steps. Style with an .is-active class (then remove it as Superform will automatically add it to the active step). [](#undefined) ------------------ [](#related-links) Related Links ------------------------------------- ๐Ÿ”ข [Progress Bar](/superform/superform-v0/progress-attributes/progress-bar) ![](https://deltaclan.gitbook.io/~gitbook/image?url=https%3A%2F%2F1615520621-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252FhC4q4SkuRcLPZQrmF5BR%252Fuploads%252FUyAxdNR6DuGOWgDqo3GM%252Fchrome_NLFBydvfFx.gif%3Falt%3Dmedia%26token%3Daf951cd9-12f6-460b-a674-351457c7ffa9&width=768&dpr=4&quality=100&sign=e260d64a&sv=2) --- # Point Scoring | Superform by Delta Clan Last updated 1 year ago Was this helpful? [](#information) Information --------------------------------- **Attribute:** `superform-points = number-of-points` eg. superform-points=2 **Apply to**: `radio`, `checkbox` tag elements. **Description**: Allows you to score points for answers. It can be used in combination with Dynamic Outcomes to show different ending scenarios in your form, like this example: [https://superform-v1.webflow.io/](https://superform-v1.webflow.io/) [](#related-links) Related links ------------------------------------- ๐ŸŽผ [Dynamic Endings](/superform/superform-v0/navigation-attributes/dynamic-endings) The answer '5' scores 5 points terminating our form progress and taking us to an Dynamic Ending scenario. ![](https://deltaclan.gitbook.io/~gitbook/image?url=https%3A%2F%2F1615520621-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252FhC4q4SkuRcLPZQrmF5BR%252Fuploads%252F6syvEcQoRgFpCF0hQXgC%252Fimage.png%3Falt%3Dmedia%26token%3Dd67ba296-e325-4ec1-a7ee-83bd2a85875b&width=768&dpr=4&quality=100&sign=47c066bc&sv=2) --- # Step | Superform by Delta Clan Last updated 1 year ago Was this helpful? [](#information) Information --------------------------------- **Attribute:** `superform-element = step` **Apply to:** `div` tag element. This attribute should be added to every `div` that represents a step in either a single step or multistep form. This enables Superform to identify and traverse between different steps in the form. You have to make this step even if your superform is a plain form (single-step). ๐ŸŽผ ![](https://deltaclan.gitbook.io/~gitbook/image?url=https%3A%2F%2F1615520621-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252FhC4q4SkuRcLPZQrmF5BR%252Fuploads%252FWIHNf2gDKuno8lNierSa%252Fimage.png%3Falt%3Dmedia%26token%3D455125e6-f3f0-402d-aa6c-4a43b1cee892&width=768&dpr=4&quality=100&sign=f357bb8f&sv=2) --- # Dynamic Endings | Superform by Delta Clan Last updated 1 year ago Was this helpful? [](#information) Information --------------------------------- **Attribute:** `superform-ending = [minimun points, maximum points]` eg. superform-points=\[0,3\] **Apply to**: elements with `superform-element="step"` attribute (_Superform Steps_). **Description**: Create different endings based on the user's answers or progress, like this example: [https://superform-v1.webflow.io/](https://superform-v1.webflow.io/) . Point scoring completion is a powerful feature that allows you to create dynamic endings for your forms. With this feature, you can mark a step with an ending attribute (superform-ending) that defines a range of minimum and maximum points required to reach that particular ending. As the user progresses through the form, they can score points by completing certain actions or answering certain questions (radio buttons or checkboxes). The total number of points scored is calculated dynamically. When the user reaches the final step of the form, the step with the ending attribute that matches their point score will be displayed. **Multiple steps can be marked as superform-ending, and all of them will be counted as ending steps. However, only one ending step will be displayed based on the user's points. This ending step is always counted as the final step, and the other steps are counted normally.** For example, if you have 10 total steps and 3 ending steps, Superform will consider 11 steps in total. The ending step will be dynamically replaced based on the user's point-scoring, so even if you teleport to the ending step from an early step in the form, the specific scenario will be shown based on the points collected. This feature can be used in a variety of ways to create engaging and interactive forms. For example, you can use it to create quizzes, assessments, or surveys that provide personalized feedback based on the user's performance. In the following example, the user selected an option (radio button) which scores 5 points with `superform-points=5` attribute, then he is immediately teleported to a step is marked as Ending with `superform-ending=[5,8].` It is recommended that all Dynamic Endings are placed in the end to avoid mental fatigue, since only 1 ending is always counted as a step. If you don't need minimum & maximum, but a strict number, then you use superform-ending\[number, number\]. Example: strictly 5 points -> `superform-ending=[5,5]` ๐ŸŽผ User selects a radio button with `superform-points=5` (5 points) User is teleported to an Ending Scenario that has `superform-ending=[5,8]` ![](https://deltaclan.gitbook.io/~gitbook/image?url=https%3A%2F%2F1615520621-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252FhC4q4SkuRcLPZQrmF5BR%252Fuploads%252F6syvEcQoRgFpCF0hQXgC%252Fimage.png%3Falt%3Dmedia%26token%3Dd67ba296-e325-4ec1-a7ee-83bd2a85875b&width=768&dpr=4&quality=100&sign=47c066bc&sv=2) ![](https://deltaclan.gitbook.io/~gitbook/image?url=https%3A%2F%2F1615520621-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252FhC4q4SkuRcLPZQrmF5BR%252Fuploads%252FNudlkfBz4puAy8pU026L%252Fimage.png%3Falt%3Dmedia%26token%3D07408e74-bd74-4914-a4fb-dd8e162d3023&width=768&dpr=4&quality=100&sign=a4b3767e&sv=2) --- # Progress Bar | Superform by Delta Clan Last updated 1 year ago Was this helpful? [](#information) Information --------------------------------- **Attribute:** `superform-element = progress-bar` **Apply to:** `div`, `a (link block)` tag elements. In this wrapper you place the Progress Steps. [](#caution) Caution ------------------------- Should always go **inside** a Superform, not outside of the form element. [](#related-links) Related Links ------------------------------------- ๐Ÿ”ข [Progress Steps](/superform/superform-v0/progress-attributes/progress-steps) ![](https://deltaclan.gitbook.io/~gitbook/image?url=https%3A%2F%2F1615520621-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252FhC4q4SkuRcLPZQrmF5BR%252Fuploads%252FbeqTkmS1flMRdRLVcsz1%252Fimage.png%3Falt%3Dmedia%26token%3D4b6f6eed-ef83-4962-97b6-920a7bb8a4ab&width=768&dpr=4&quality=100&sign=bc09db8f&sv=2) --- # Submit Button | Superform by Delta Clan Last updated 1 year ago Was this helpful? [](#information) Information --------------------------------- **Attribute:** `superform-element = submit` **Apply to:** `div`, `a (link block)`, `button`, tag elements. To submit a form, add the attribute to the element that triggers the form submission. If it's a multistep form, the submit button should be placed in the final step. Performs validation normally (if validation/required fields are present in the step). [](#caution) Caution ------------------------- 1. Submit button should always go to final step. 2. If **Alternative Endings** are added in a form, you can place the submit to the corresponding ending you want. ๐ŸŽผ ![](https://deltaclan.gitbook.io/~gitbook/image?url=https%3A%2F%2F1615520621-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252FhC4q4SkuRcLPZQrmF5BR%252Fuploads%252FcMuftQKKQ0Q09uOS3q6C%252Fimage.png%3Falt%3Dmedia%26token%3D0194bd6a-b93c-454e-9214-6a36fc45a979&width=768&dpr=4&quality=100&sign=e8569a04&sv=2) --- # Step Teleport | Superform by Delta Clan Last updated 1 year ago Was this helpful? [](#information) Information --------------------------------- **Attribute:** `superform-goto = number-of-step` eg. superform-goto=5 **Apply to**: `Next`, `Back`, `Radio Skip` buttons that trigger the form navigation action. **Description**: Allows you to go to a specific step in the form. This attribute takes a number that corresponds to the step number you want to go to. **Example**: if you have 10 steps in total, then the counting starts from 1 and ends to 10. **๐ŸŽฒ Dynamic Endings:** Only 1 ending is counted in the total steps length, since the ending step is computed dynamically as the form progress. **Example:** if you have 10 steps & 3 ending steps, the total length of the steps is: 11. ๐Ÿ† **Point-Based Completion:** going to previous step will remove any points collected until this step. ### [](#related-links) Related links ๐ŸŽผ [Next Button](/superform/superform-v0/navigation-attributes/next-button) [Back Button](/superform/superform-v0/navigation-attributes/back-button) [Radio Button Navigation](/superform/superform-v0/navigation-attributes/radio-button-navigation) _Choosing the wrong answer here will take the user to the 9th step._ ![](https://deltaclan.gitbook.io/~gitbook/image?url=https%3A%2F%2F1615520621-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252FhC4q4SkuRcLPZQrmF5BR%252Fuploads%252FzcebGgbiko9LSza3n4M6%252Fimage.png%3Falt%3Dmedia%26token%3D94f022b6-535d-4b7f-b278-b5f58802d80b&width=768&dpr=4&quality=100&sign=d0f95da1&sv=2) --- # Back Button | Superform by Delta Clan Last updated 1 year ago Was this helpful? [](#information) Information --------------------------------- **Attribute:** `superform-element = back` **Apply to:** `div`, `a (link block)`, `button`, tag elements. To navigate to the previous step in a multistep form, simply add the attribute to the element that triggers the previous step. Superform will automatically handle the transition to the previous step when the element is clicked. [](#caution) **Caution** ----------------------------- 1. There should be **only 1 back button** in each step. 2. If there are points scored from answers through your progress - **all points collected until this step are removed when clicking a 'back' button.** 3. It can't be placed in the first step of a multistep form. [](#upgrades) **Upgrades** ------------------------------- ๐Ÿ”ฎ Step teleport: add `superform-goto = numberOfStep` to teleport back to another step. ๐ŸŽผ ![](https://deltaclan.gitbook.io/~gitbook/image?url=https%3A%2F%2F1615520621-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252FhC4q4SkuRcLPZQrmF5BR%252Fuploads%252FCU6iiengO6BLsPAQGI5q%252Fimage.png%3Falt%3Dmedia%26token%3D2f689e8e-5d92-495a-a1d0-611a3e2b3b1f&width=768&dpr=4&quality=100&sign=fbbceb48&sv=2) --- # Checkboxes (Min/Max) | Superform by Delta Clan Last updated 1 year ago Was this helpful? **Attribute:** `superform-checkbox-min = number`, `superform-checkbox-max = number` **Apply to:** `div block` or `link block` that contains the checkboxes. Checks the minimum and/or maximum number of checkboxes inside a specified block. You can have multiple blocks of checkboxes inside a step. **Multiple blocks need different identifiers (names)**, this way Superform can distinguish between each block of checkboxes and also provide the ability for different error messages. [](#related-links) Related Links ------------------------------------- โœ… [Validate & Error (must read)](/superform/superform-v0/validation-attributes/validate-and-error-must-read) This block requires minimum 1 and maximum 3 checkboxes to be checked. Corresponding error for identifier "checkbox" ![](https://deltaclan.gitbook.io/~gitbook/image?url=https%3A%2F%2F1615520621-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252FhC4q4SkuRcLPZQrmF5BR%252Fuploads%252F9RoFdIwV988UqkGs6AUC%252Fimage.png%3Falt%3Dmedia%26token%3Da5651fa1-2d6f-4d41-b2af-ef978840c3b3&width=768&dpr=4&quality=100&sign=4fdb3130&sv=2) ![](https://deltaclan.gitbook.io/~gitbook/image?url=https%3A%2F%2F1615520621-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252FhC4q4SkuRcLPZQrmF5BR%252Fuploads%252FsKAU8gstDARq1GW40rwv%252Fimage.png%3Falt%3Dmedia%26token%3D7aa85c2d-8425-4802-b1f8-30ebe8e0b19f&width=768&dpr=4&quality=100&sign=8885c8ea&sv=2) --- # Step Container | Superform by Delta Clan [](#setup) Setup --------------------- **Attribute:** `sf-step = stepName` **Where:** any `div` element that you want as a _**step**_ _(is required for single-step forms too)._ **Description:** Defines the form's steps and assigns each step a unique name. Allows for navigation between steps. **HTML Example** index.html Copy
**Webflow Example** **Dos and Dont's** * * * Step names are used to control navigation and can be referenced programmatically or via navigation attributes, enhancing form flow and user experience. **Avoid using only numbers in step names or start with a number!** **Do** โœ… * step-1 * step2 * step-intro * last **Don't** โŒ * 4 * 3a * * * Use names semantically so other developers can understand your way of thinking. Last updated 8 months ago Was this helpful? ๐Ÿซ€ VIDEO: Adding names to steps is highly suggested. This way Superform and you can navigate to each step easier. ![](https://deltaclan.gitbook.io/~gitbook/image?url=https%3A%2F%2F450000313-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252FDGLtnaQr6bP3qHCWvX0r%252Fuploads%252FuIo8PgH71ATiEZbxPCsD%252FCleanShot%25202024-07-15%2520at%252014.12.00%25402x.png%3Falt%3Dmedia%26token%3De4dc6059-3a67-4de5-8cfd-fb9cbeacf211&width=768&dpr=4&quality=100&sign=9159e134&sv=2) --- # Value Recall | Superform by Delta Clan Last updated 1 year ago Was this helpful? **Attribute**: `superform-value = identifier` **Apply to**: any input element (e.g. text input, radio button, checkbox) Recall the value of an input field at any place in the form (works for both same & different steps also). This can be useful when you want to reuse the same input value across multiple steps in the form. Input & corresponding text element need to have the same _**superform-value=identifier**_. ๐Ÿ”ข Text input has `superform-value=name` Text element has `superform-value=name`also ![](https://deltaclan.gitbook.io/~gitbook/image?url=https%3A%2F%2F1615520621-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252FhC4q4SkuRcLPZQrmF5BR%252Fuploads%252FIpvEI136Bn5JEIKkeSrx%252Fimage.png%3Falt%3Dmedia%26token%3Dc74f51ae-a754-4537-8eb2-1f88eca7c3b0&width=768&dpr=4&quality=100&sign=12ce8b79&sv=2) ![](https://deltaclan.gitbook.io/~gitbook/image?url=https%3A%2F%2F1615520621-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252FhC4q4SkuRcLPZQrmF5BR%252Fuploads%252FFL1bI66GO1NL4ygjgzXQ%252Fimage.png%3Falt%3Dmedia%26token%3Dbe9292c9-0749-43a3-8247-0f7d502e51e6&width=768&dpr=4&quality=100&sign=ce8583d9&sv=2) --- # Navigation - Overview | Superform by Delta Clan [](#summary) Summary ------------------------- โ†ณ [Direct Navigation](/superform/essentials/navigation-overview#direct-navigation) โ†ณ [Logic-Based Navigation](/superform/essentials/navigation-overview#logic-based-navigation) โ†ณ [Hooks Navigation](/superform/essentials/navigation-overview#hooks-navigation) โ†ณ add-on [Forced Navigation](/superform/essentials/navigation-overview#forced-navigation) **Attention!** Please read carefully the instructions below, as the powerful `sf-goto` can be used in a magnitude of cases with various setups. We are on track to release many examples and videos to showcase every possible combination. new add-on [Forced Navigation](/superform/essentials/navigation-overview#forced-navigation) : ability to place `sf-goto` outside of form steps! * * * [](#methods-overview) Methods Overview ------------------------------------------- Superformโ€™s navigation capabilities are versatile, designed to accommodate a wide range of form setups. Explore the distinct features of each method below. #### [](#direct-navigation) **Direct Navigation** `sf-goto` can be applied to navigation elements, allowing for navigation between form steps, including `next` , `back` , `+1` , `-1` , or specific steps by name (`step-name`) for step teleport. This provides flexible navigation options. You can teleport by +X number or just assigning the step-name as a value. โ†’ How to: [Direct Navigation](/superform/essentials/navigation-overview/direct) #### [](#logic-based-navigation) **Logic-Based Navigation** `sf-goto=logic()` navigation combines the `sf-logic` and `sf-logic-goto` attributes, allowing for dynamic branching based on logic conditions. If a logic condition is met, navigation proceeds to the step specified by `sf-logic-goto`. Otherwise, a fallback step can be defined by `sf-logic-fallback`. โ†’ How to: [Logic / Conditional Navigation](/superform/essentials/navigation-overview#logic-based-navigation) #### [](#hooks-navigation) **Hooks Navigation** `sf-goto=hook(hookName)` can trigger a specific hook registered in the code by specifying hook name. This provides a way to integrate programmatic navigation actions, allowing for customized navigation flows. โ†’ How to: [Hooks Navigation](/superform/essentials/navigation-overview/hook) #### [](#forced-navigation) Forced Navigation new add-on `sf-force-goto` to enable navigation controls outside form steps. Use the attribute in conjunction with `sf-goto`. This combination allows the external elements to navigate through form steps seamlessly. โš ๏ธ Works in conjuction with your normal `sf-goto`. โš ๏ธ Note that keyboard navigation is not supported for elements using `sf-force-goto`. **Step Validation** Before navigating to the specified step, `sf-goto` validates the current step to ensure all required inputs are completed. **Flexible Navigation** The interplay between `sf-goto`, `sf-logic`, and `sf-logic-goto` supports both straightforward and dynamic navigation, ensuring forms can handle everything from simple step transitions to complex branching logic. Last updated 8 months ago Was this helpful? ๐Ÿซ€ --- # Quick Start | Superform by Delta Clan Latest version: **2.1.10 (3 Oct 2024)** Add the following script to the `` section of your Webflow page or HTML file: index.html Copy * * * [](#minimal-setup) Minimal Setup ------------------------------------- Requires: 1. [Basic Form Container](/superform/getting-started/quick-start#basic-form-container) 2. [Steps](/superform/getting-started/quick-start#steps) #### [](#basic-form-container) Basic Form Container To initialize Superform, add the `sf = formName` attribute to your form container element: **HTML Example** index.html Copy
**Webflow Example** โ†’ Read more about the [Form Container](/superform/essentials/form-container) #### [](#steps) Steps Add the `sf-step` attribute to each form step. For multi-step forms, each step should have a unique name. For single-step forms, you still need to name the step to enable Superform's validation and reactivity features. **HTML Example** index.html Copy
**Webflow Example** โ†’ Read more about the [Step Container](/superform/essentials/step-container) **Additional Information** * **Form Initialization**: The `sf` attribute on the form container initializes Superform for that form. * **Step Initialization**: The `sf-step` attribute is used to define each step in the form. If multiple steps are present, Superform automatically transforms the form into a multi-step form with `fade` animation by default. * * * [](#illustration) Illustration ----------------------------------- * * * [](#explore-more) Explore More ----------------------------------- Start tinkering with [navigation elements](/superform/essentials/navigation-overview) and [progress bars](/superform/essentials/progress-bar) by exploring the _Essentials_ category. When you get a hang of it, here are some key pages to get you started with more advanced functionalities: * [Animations](/superform/global-options/animations) * [Validation](/superform/input-validation-and-errors/validation) * [Error Management](/superform/input-validation-and-errors/error-management) * [Variables](/superform/essentials/variables) * [Reactivity](/superform/reactivity/update-text) By following these steps, you can quickly set up Superform and start building dynamic, multi-step forms with ease. * * * [](#still-got-questions) Still Got Questions?[โ€‹](https://vuejs.org/guide/introduction.html#still-got-questions) --------------------------------------------------------------------------------------------------------------------- Check out our [FAQ ๐Ÿšง](/superform/additional-resources/faq) . Last updated 5 months ago Was this helpful? ๐Ÿ An example of a linear 2-steps form. ![](https://deltaclan.gitbook.io/~gitbook/image?url=https%3A%2F%2F450000313-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252FDGLtnaQr6bP3qHCWvX0r%252Fuploads%252FBAXL9aMi8JiruCVMb6Ke%252Fimage.png%3Falt%3Dmedia%26token%3D3fc27a1a-7a3d-4d2f-9a53-1feae9b77078&width=768&dpr=4&quality=100&sign=34319b76&sv=2) --- # Variables | Superform by Delta Clan Variables (_$f, $s, $p, $v_) in Superform are powerful and essential components that allow you to create dynamic and interactive forms. By leveraging variables, you can craft highly responsive and user-friendly experiences. Variables are seamlessly integrated with [Reactivity](/superform/reactivity/update-text) to unlock a multitude of functionalities, from simple input displays to complex conditional logic and real-time calculations. Access a variable by using `$` and `.` โ€” example: `$f.userName` or `$v.scores` * * * [](#why-use-variables) Why use Variables --------------------------------------------- The common cases: 1. **Dynamic Interactions**: * Instantly update form elements based on user input. * Create more engaging and responsive user experiences. 2. **Conditional Logic**: * Implement logic-based navigation and display rules. * Show or hide form elements dynamically. 3. **Real-Time Calculations**: * Perform calculations on-the-fly. * Update totals, scores, or other calculated fields instantly. 4. **Data Management**: * Access and manipulate form data effortlessly. * Use variables to store and manage state across your form. * * * [](#list-of-variables) List of Variables --------------------------------------------- **Pro Tip** Explore using conditional logic with `$f`, `$s`, `$p`, and `$v` to create deeply personalized and responsive form experiences. Leverage operators and expressions to create robust, condition-based updates seamlessly. Last updated 7 months ago Was this helpful? [](/superform/essentials/variables/form-data-usdf) [](/superform/essentials/variables/step-index-usds) [](/superform/essentials/variables/progress-percentage-usdp) [](/superform/essentials/variables/scoring-variables-usdv) ๐Ÿซ€ `$f` **Form Data** Access input values directly. Example: `$f.name` retrieves the value of the input named "name". `$s` **Step Index** Track the current step in multistep forms. Example: Use `$s` to conditionally display elements based on the user's progress. `$p` **Progress Percentage** Display the user's progress as a percentage. Example: `$p` can update text inside a progress bar to reflect form completion. `$v` **Scoring Variable** Handle scoring and ranking in quizzes. Example: `$v.score` to track quiz scores. --- # Form Container | Superform by Delta Clan Last updated 8 months ago Was this helpful? [](#setup) Setup --------------------- **Attribute:** `sf = formName` **Where:** Form container element **Description:** Mounts the Superform library to a specific form in Webflow. Once applied, Superform provides advanced input validation, reactivity, multi-step form support, dynamic outcomes, quiz scoring and its other features. **HTML Example** index.html Copy
**Webflow Example** 1. Multiple instances can be used on a single page. 2. The form name ("myForm" in this case) also serves as a reference for accessing the form via `getForm(myForm)` function programmatically in the SDK. ๐Ÿซ€ ![](https://deltaclan.gitbook.io/~gitbook/image?url=https%3A%2F%2F450000313-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252FDGLtnaQr6bP3qHCWvX0r%252Fuploads%252FrAMubjEyRhxqWSkGC4iy%252FCleanShot%25202024-07-15%2520at%252014.14.00%25402x.png%3Falt%3Dmedia%26token%3D974012d3-09d1-4692-b384-cc5d0750e228&width=768&dpr=4&quality=100&sign=14d627a1&sv=2) VIDEO: Mounting Superform inside a Webflow project. --- # Step Index ($s) | Superform by Delta Clan The special `$s` variable is used to access the step count within the form. This can be useful for tracking user's step journey through a multi-step form and for implementing conditional logic and styling based on the current step. * **Step Tracking**: Monitor the current step number in a multi-step form. * **Conditional Navigation**: Navigate to different steps based on the current step number. * **Step-Based Calculations**: Perform actions based on the step count and integrate [Reactivity](/superform/reactivity/update-text) . **Tip** Steps are stored inside an array, and every item in an array starts at `0`, meaning the first step you interact with is indexed as step `0`. Keep this in mind as you navigate or configure your multi-step forms, that basically the first step you see is `0`. Have any questions? [Contact us here](https://discord.gg/pjy8U7H6yx) . * * * [](#examples) Examples --------------------------- Since Superform is built in vanilla JavaScript, you will see both HTML and Webflow examples, it's practically the same โ€” works with Webflow's Custom Element and elements inside Code Embed. ### [](#id-1.-step-tabs) 1\. Step Tabs **HTML Example** index.html Copy
Step 1
Step 2
Step 3
Step 1 Content
Step 2 Content
Step 3 Content
**Webflow Example** Last updated 8 months ago Was this helpful? ๐Ÿซ€ --- # Progress Bar | Superform by Delta Clan [](#setup) Setup --------------------- **Attribute**: `sf-el = progress-bar` **Where**: any child `div` inside the Basic Form Container. **Description**: Designates a `div` element as the progress bar for a Superform-enabled form. Styled in Webflow for design purposes, its `width` is dynamically adjusted by Superform to represent real-time progress through the form steps. **HTML Example** index.html Copy
styles.css Copy .progress-bar { height: 10px; background-color: #4caf50; transition: width 0.3s ease; } **Webflow Example** **Pro Tips** * **CSS Transitions**: Apply CSS transitions on the `width` property for smooth visual effects. * **Synchronization**: Align progress bar animation timings with form step animations and delays for cohesive visual flow. * **Width calculation**: Superform controls the width to match the form's progress; design your progress bar in Webflow and Superform takes care of the rest. Last updated 8 months ago Was this helpful? ๐Ÿซ€ --- # Form Data ($f) | Superform by Delta Clan [](#summary) Summary ------------------------- โ†ณ [Examples](/superform/essentials/variables/form-data-usdf#examples) โ†ณ [Naming Form Fields Properly](/superform/essentials/variables/form-data-usdf#naming-form-fields-properly) * * * The special `$f` variable represents the form data values within Superform. It allows access to any fieldโ€™s value anywhere in the form, enabling dynamic interaction based on user input. * **Access Form Fields**: Retrieve the value of any form field by referencing it with `$f.fieldName`. * **Dynamic Logic**: Utilize form field values to create dynamic and conditional navigation or actions. * **Real-Time Updates**: Automatically updates as users fill out the form, ensuring real-time data access. * * * [](#examples) Examples --------------------------- Since Superform is built in vanilla JavaScript, you will see both HTML and Webflow examples, it's practically the same โ€” works with Webflow's Custom Element and elements inside Code Embed. ### [](#id-1.-using-with-reactivity-attributes-visibility) 1\. Using with Reactivity attributes (visibility) Toggle visibility based on age input's data. **HTML Example** index.html Copy
Wow, you are over 18 ๐ŸŽ‰
**Webflow Example** ### [](#id-2.-using-with-logic-conditionals) 2\. Using with Logic / Conditionals Navigate to different steps based on user input. **HTML Example** index.html Copy **Webflow Example** * * * [](#naming-form-fields-properly) Naming Form Fields Properly ----------------------------------------------------------------- When naming your form fields in Superform, following best practices ensures smoother development and avoids potential issues. Here are the key guidelines: 1. **Start with a Letter, Underscore (\_):** * Variable names must begin with a letter (a-z, A-Z), an underscore (\_). * Example: `name`, `_userName`. 2. **No Spaces:** * Variable names cannot contain spaces. * Use camelCase or underscore (\_) to separate words. * Example: `firstName`, `emailAddress`, `first_name`. 3. **No Emojis or Symbols:** * Variable names should not include emojis or symbols other than underscores (\_) or dollar signs ($). * Example: Avoid `name๐Ÿ˜„`, `price$`, `quantity%`. #### [](#handling-improperly-named-fields) **Handling Improperly Named Fields** If you still want to use names that don't follow these conventions, such as fields with spaces or emojis, you can access them using bracket notation. * Example: * Field name: `"123 lol ive space ๐Ÿ˜„"` * Access: `$f['123 lol ive space ๐Ÿ˜„']` #### [](#html-example) HTML Example index.html Copy

First Name:

Email:

Special Field:

Following these guidelines will help speed up your development process and ensure consistency across your form fields. Last updated 8 months ago Was this helpful? ๐Ÿซ€ ---