Snappy Intelligent Forms and Attributes

This page is a full demo of all the features built into SIFA



What IS SIFA

Why Make SIFA I wanted to take all the experiance I have gained in web development and bring it all together into a single example. SIFA uses JavaScript classes to build out a parent form with child elements. These elements are not just out of the box HTML elements. Over the years i have sean different systems use custom inputs for different use cases so why not make them all available. It allowed me to use all my knowledge and experience in front-end development and bring that into a single cohesive framework.

SIFA (Snappy Intelligent Forms and Attributes) is a powerful JavaScript library that can speed up form creation and functionality for modern web applications.

Core Capabilities: SIFA generates dynamic form elements ranging from standard inputs to fully customized components, dramatically expanding your forms' visual possibilities. The library seamlessly integrates rule-based logic into every form interaction, creating intelligent, responsive user experiences.

Smart Form Logic: When this library is used with the sifa_form class, each question answered triggers conditional rules that can instantly modify question visibility, adjust available options, or populate form variables with business-critical data based on real-time conditions. This creates adaptive forms that respond intelligently to user input.

Modern Web Integration: Beyond traditional forms, SIFA extends its functionality to modern web block elements, providing a comprehensive solution for fast web design.

Key Benefits:

  • Snappy Performance: Lightning-fast form generation and response
  • Intelligent Adaptation: Rules-driven conditional logic
  • Visual Flexibility: Standard to fully customized form elements
  • Business Integration: Automated data population based on form conditions
  • Modern Architecture: Compatible with contemporary web development practices


SIFA transforms static forms into dynamic, intelligent interfaces that adapt to users and business requirements in real-time.

Developer Features

Developer-Friendly Architecture: Built on a JSON-driven foundation, SIFA empowers developers with complete flexibility. Create custom admin interfaces to build and manage JSON structures, or utilize the included SIFA admin tools—the choice is yours. This approach ensures the library adapts to your development workflow rather than constraining it.

Seamless Branding Integration: SIFA's CSS framework utilizes a theme-based system for colors and key visual attributes, enabling effortless brand alignment. Forms automatically inherit your destination site's visual identity, ensuring consistent user experiences across all touchpoints.


Everything you will see in this page is a demonstration of SIFA's capabilities.



Custom Inputs

SIFA has been developed with some non-standard input elements to enhance the tools abilities.



Standard Inputs

SIFA is built with the standard HTML input elements.



Web Elements

Profile cards [ele_profileCards]

Boxed Theme
Polaroid Theme
Lines Theme

Price Cards [ele_priceCards]

Feature Block [ele_featureBlock]

Subject Score [ele_subjectScore]

Identify skills and your level of proficiency / Display team member contributions / Display nutrition breakdown

Custom Bar Colors
Additional Data


Form Logic

The true value of SIFA lies in its rule-based architecture, which enables dynamic form generation that responds intelligently to user input in real-time. This capability represents the foundational vision behind the SIFA project: developing a form engine that provides immediate, contextual feedback during data entry rather than relying on post-submission validation.

A key differentiator in SIFA's rule system is its dual-mode approach to complexity management. For straightforward use cases, administrators can leverage intuitive dropdown-based configurations, ensuring accessibility for users without technical expertise. When advanced logic is required, the platform seamlessly scales to support sophisticated formula-driven rulesets, providing the flexibility to handle complex business requirements without compromising ease of use for simpler implementations.

This approach ensures that SIFA can accommodate organizations across the technical spectrum while maintaining the core objective of enhancing user experience through intelligent, responsive form interactions.


Dropdown Rules

The simplified dropdown rule configuration utilizes a four-parameter structure for each rule: a target question, an operation, a comparison value, and a conditional action. This creates a straightforward logical framework where, when the specified condition evaluates to true, the system automatically executes the designated action.

EXAMPLE: Question1 (target) is equal to (operation) "Yes" (true value) then show Question2 (action)


Formula Rules

For more complex scenarios, SIFA supports formula-based rules that allow for intricate logical expressions. These formulas can incorporate multiple conditions, logical operators (AND, OR), and nested evaluations to create sophisticated decision-making processes. This flexibility enables the construction of advanced rulesets that can adapt to a wide range of business logic requirements.

EXAMPLE: sifa_isFieldAnswered('pizzasize') && SIFA.answers.pizzasize == 'lrg'
This example is equivalent to If Question1 has an answer and Question1 (target) is equal to (operation) "Large" (true value)

In this example it uses a built-in SIFA function called sifa_isFieldAnswered('field_ref') which checks if the field has an answer. This is useful for dropdowns and radio buttons where there may be no answer selected.


Data Rules

The next progression of the rule engine is to incorporate a data-driven approach, allowing conditions based on data tables.



Domino's Pizza Based Demo

Domino's Pizza has updated their build your own pizza form.
This demo is based on the older version of the form but still shows how SIFA can be used to create a similar experience.




Demo Logic Explanation

The first rule is to hide or show the Crust Type field section

  • Rule 1: If Pizza Size has an answer then show Crust Type

The next 3 rules are to filter the Crust Type options based on the Pizza Size selected.
  • Rule 2a: If pizza size is small then show crust type [Hand-tossed, Thin, Gluten]
  • Rule 2b: If pizza size is medium then show crust type [Hand-tossed, Parmesan, Pan, Thin, New York]
  • Rule 2c: If pizza size is large then show crust type [Hand-tossed, Thin, New York]