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 TRUEEXAMPLE: Yes, I agree
-
OFF Value
Value sent with form if marked OFF or FALSE
EXAMPLE: No, I do not agree
0 Comments