Welcome, Guest Login

Support Center

Form Input

Last Updated: May 22, 2018 11:31AM EDT
FORM INPUT


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

 

 
Select the type for each form field
 
 
 

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.
Each piece of information for the descriptor is separated by line.
 
Example of Radio Button preceded by text with formatted fonts

More Settings
Other settings:You can customize the
Submit button or use the default one
 
 
Using CSS to Format Form

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
Using Variables
- Use EachScape variable in JavaScript

Help us improve! Rate this article:

Yes I found this article helpful

Ask a Question   

support@eachscape.com
http://assets2.desk.com/
false
eachscape
Loading
seconds ago
a minute ago
minutes ago
an hour ago
hours ago
a day ago
days ago
about
false
Invalid characters found
/customer/en/portal/articles/autocomplete