FormSnap - Input Pack 2 - Stacks and Settings

Input Packs are highly customized sets of inputs that further extend the type of data your FormSnap  forms can collect

 


Stacks


 

Common Settings

Settings that are common in almost all FormSnap stacks. Some stacks may or may not have all of the settings below.

  • Name
    This item's name. The item name is used INTERNALLY on the form and templates and should be be alphanumeric ONLY (letters, numbers and underscores allowed). The name must be unique to the form. Duplicate names in the same form will produce adverse effects.
  • Display Label
    When enabled, the label will be displayed with the input item.
  • Label
    The label the user will see on the published form adjacent to the input.
  • Label Icon
    Prepend a Font Awesome (4.7) icon to your label text. Available icons can be found on the Font Awesome web site.
    EXAMPLE: fa fa-user
  • Placeholder
    Text displayed in the popup menu UNTIL the visitor invokes the popup menu to select a country.
  • Subtext
    Short description added below the input item.
  • Tooltip
    Include an animated tooltip to your input item
  • Tip Placement
    Designate where the tooltip should originate from. Tooltips can be placed in four different ways in relation to the reference element.
  • Tab Index
    You can control the tab-through order of fields with tab index. The lower the number, the earlier it will be selected via Tab key. 1 is the first field, assign higher numbers to subsequent fields.

Save Data

  • Save to MySQL
    When enabled, the input's value will be saved to the specified MySQL database ( in Base settings ).
  • Save to Google Sheets
    When enabled, the input's value will be saved to the specified Google Sheet ( in Base settings ).
  • Field Name
    The MySQL field name in your database that corresponds to this input.
    The column header name in your Google Sheet.

Validation

  • Required
    If enabled, this input item is required before form can be submitted.
  • Show Required Asterisk
    Enable to show red asterisk icon next to label.
  • Required Error
    Error message displayed when end user fails to complete form item.

 


 

Calculate

A calculation form input that automatically calculates a value based on multiple form inputs is a dynamic web form where user inputs in several fields trigger real-time calculations to display a result. This is often used for financial calculators, measurements, and other scenarios requiring instant feedback based on user input.

  • Formula
    Math based formula using the values from  other items to calculate the value.  Using the form item placeholders, build a math formula that will get calculated dynamically. Math formulas can get pretty complex, so practice using simple ones until you get proficient.
    EXAMPLE:  ({{item1}} + {{item2}}
  • Prefix
    String that will proceed the resulting value.
  • Suffix
    String that will proceed the resulting value.
  • Round
    Rounds the resulting value.
    • None - Do nothing
    • Round - Rounds  to the nearest integer.
    • Ceil - Rounds up to the next largest integer.
    • Floor - Rounds down to the next smallest integer.
  • Notation
    Formats the resulting number using fixed-point notation. It converts a number to a string, keeping a specified number of decimals.
    EXAMPLE: Fixed(2) will turn 123.456 into 123.46
  • Hidden Input
    Enabling this will make the Calculate input hidden, invisible to end-user.


 

Choice Cards

Choice cards are similar to your basic Checkbox or Radio input items, except that they look so much nicer. Each "choice" can have a title, image, subtitle, description and value. 

  • Choice Limit
    Set the maximum number of choices that can be selected.  In most cases this will be only 1, but sometimes you may need more. 

Each Choice Card Settings

  • Image
    Add an image associate with the choice.
  • Title
    Main title of the choice.
  • Subtitle
    Secondary subtitle of the choice.
  • Description
    A more detailed description of the choice.
  • Value
    This is what will be sent to server for processing. All the other attributes above are for display only and are not sent with form submission.


 

Dropzone

A drag-and-drop dropzone style file input is a user interface element that allows users to upload files by either dragging and dropping them into a designated area (drop zone) or by clicking on the area to open a file selection dialog.

  • Drag Text
    Text displayed inside the dropzone area prior to files being added.
  • Multiple Files
    Enabling will allow end-user to drag and drop multiple files into the droppzone.

 


 

Number Stepper

A simple number input with easy to click(touch) increment and decrement buttons. Great addition for mobile forms.

 


 

Rules (Conditionals)

A component that conditionally hides and shows other inputs based on the values of other form inputs. It dynamically adjusts the visibility of certain inputs depending on user selections or entries. This functionality is useful for creating a more user-friendly form, ensuring that users only see relevant inputs.

  • Item Name
    The name of item we are wanting to hide or show. Use the name, not the {{placeholder}} value
  • Action
    What action to carry out on Item based on condition(s). Show or Hide.
  • Match
    How many conditions must be met before rule is triggered. Any or All.

Condition Settings

  • Target Item
    Name of item we are targeting with conditional rule .
  • Condition
    The condition which needs to be satisfied to hide/show the target item.
    • Equals
    • Does Not Equal
    • Starts With
    • Ends With
    • Includes
    • Does not include
  • Value
    The value of Target Item that would satisfy this condition.

 


 

Tags

A tag-based input that builds a CSV string with unique values is an interactive form component where users can input multiple tags or keywords. These tags are then compiled into a comma-separated values (CSV) string, ensuring that each tag is unique and not repeated.

  • Tag Icon
    Add a Font Awesome (4.7) icon to your tag label text. Available icons can be found on the Font Awesome web site.

 


 

Toggle

A toggle style input, similar to what iOS uses, is a user interface component that allows users to switch between two states, such as on and off, active and inactive, or enabled and disabled. These toggles are often referred to as switch inputs or toggle switches.

  • ON Value
    Value sent with form if marked ON or TRUE
    EXAMPLE: Yes, I agree
  • OFF Value
    Value sent with form if marked OFF or FALSE
    EXAMPLE: No, I do not agree

 

Have more questions? Submit a request

0 Comments

Please sign in to leave a comment.
Powered by Zendesk