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. 

 

Click here to Install INPUT Tutorial App in your workspace.

 

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 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