Follow

Input > Text Field

Use the Text Field control in the Capriza Designer to create a text field or text area in the Zapp that enables the user to type one or more lines of text. Select Text Field under the Input dropdown.

 

Text_Field_1.png

 

A tooltip will appear that says "Select a text-field". When you hover over a text field item, the tooltip will change to say "Click to include this text field."




 

Click and the control will be added to the mobile page.

 

Styling Options

 

Through the In Line Editor (ILE) you can customize various aspects of the text field.

 

  • Presets: Choose between Standard, No Gutter, and Full Border layouts.

  • Display: Vary the width of the input field.

  • Input Type: Setting a data type for a text input element invokes different keyboards for added convenience and efficiency for the user. Please see Mobile First Features for more information.


Screen_Shot_2017-03-16_at_9.38.59_AM.png

    • Text - Invokes the alpha keyboard.

    • Telephone - Invokes the numeric keyboard.

    • Number - Adds up/down arrows to the input that enable the user to increase/decrease the number by tapping.


Screen_Shot_2017-03-16_at_9.40.25_AM.png

    • Email - Invokes a keyboard with ‘@’ easily accessible.

    • URL - Invokes a keyboard with common domains accessible (such as .com, .org etc.).

    • Barcode - Activates the phone's QR reader to capture an item's barcode.

    • Location - Leverages the phone's location services to automatically enter an address. If this option is chosen, you can choose the specific location info you would like to capture from the following options: 
      • Full address
      • Street
      • City
      • City and State/Province
      • State/Province
      • Zip/Postal Code
      • Country
      • GPS Coordinates

Screen_Shot_2017-03-16_at_9.39.19_AM.png

  • Background Color: Give your text input field a custom background color.




  • Max Length: Sets the maximum character count for the text input element.
  • Placeholder: Specify placeholder text to include in the input field.
  • Icon: Choose an icon, position (left/right), and icon color to include in the control.


 

 

Was this article helpful?
0 out of 0 found this helpful
Have more questions? Submit a request

0 Comments

Please sign in to leave a comment.