Tutorial App
2 Different Blocks are available to capture content from users: TEXT Input and FORM Input blocks.
We created a Tutorial App: INPUT, to best illustrate how they respectively work.
TEXT and FORM Input Blocks store the information entered by the user in variable(s)
Form Input Simple
(example from Tutorial App)
RENDERING: Form Simple
(from Tutorial App)
Form Simple setting in the Studio
Form Fields Types
The Type of field define the display.
The Descriptor complete the information required for each type.
- Text: Displays a text with a specific number of lines.
- User Name: Same as text but keyboard autocomplete is disabled.
- Password: Hide the input.
- List: Write a comma separated list of options. Each option may distinguish between the value set in the variable, and the display name used in the UI by placing a colon(:) between the two, with the value first, followed by the display name.
- Checkbox: Same implementation as for List above but will display checkboxes.
- Radio Buttons: Same implementation as for List but will display Radio Buttons.
- Email: Will add email validations
Descriptor
This field is used to supply extra information to certain Types of field.
More SettingsSubmit button or use the default one
Rendering of Form Using CSS
(from Tutorial App)
Setting of CSS in the Studio
CSS used in the Form Input Tutorial app:
.input_container{
position: relative;
margin-top: 0px;
}
.input_container#input_container_v_birthDateMonth{
width: 45%;
display:inline-block;
}
.input_container#input_container_v_birthDateDay{
margin-left: 5%;
width: 45%;
display:inline-block;
}
input#v_zipcode{
width: 45%;
vertical-align:middle;
}
input#v_phone{
width: 45%;
}
div.container_submit{
margin-top: 20px;
text-align: center;
}
#input_container_v_birthDateDay div.prompt{
float: left;
width: 40%;
}
#input_container_v_birthDateDay select{
float: right;
width: 50%;
}
#input_container_v_birthDateMonth div.prompt{
float: left;
width: 60%;
vertical-align: middle;
line-height: 1.5em;
}
#input_container_v_birthDateMonth select{
float: right;
width: 60%;
}
#input_container_v_optIn{
display: inline-block;
display : flex;
align-items : center;
}
#input_container_v_optIn div.prompt{
float: left;
width: 50%;
}
#input_container_v_optIn select{
margin-left: 20px;
float: right;
width: 50%;
}
#v_zipcode {
position: absolute;
top: -10px;
right: 0px;
align-items: center;
}
#v_phone {
position: absolute;
top: -10px;
right: 0px;
}
.input_container#input_container_v_first{
margin-top: 20px;
}
.radioDiv input{ transform: scale(2); margin-right: 20px; margin-left: 40px; }
.textField{ border 0px;}
.prompt , .textField{ font-family: "HelveticaNeue-CondensedBold", "Helvetica Neue";}
Learn More
- LOGIN Tutorial app uses a form to capture username / password