Screen: Title/Subtitle/Field

The visual manual on collecting user data

O
Written by Onboarding.Online Support Team
Updated over a week ago

Screen identification in the theme template

The main purpose of the Screen: Title/Subtitle/Field is to allow users to input various types of data, such as name, email, age, etc., using the keyboard. When using numeric input types, this screen aids in user segmentation, allowing for a personalized app experience. For that reason, the screen is easily identified with the corresponding title in the theme template: 

The default design of the screens with the picker consists of the following features:

  1. The Field parameter allows to collect the users' data.

  2. Segmentation of users is possible in accordance with the app purposes.

  3. Segmentation is possible only with Int input. More details are covered in the corresponding article Segment Users Based on Users Input on Text Field.

  4. The Header parameter is switched off by default; however, this option is embedded in the design.

List of parameters presented in Screen: Title/Subtitle/Field

  • Background

  • Basic Configuration

  • Navigation Bar, or Header

  • Title

  • Subtitle

  • Text Field

  • Footer

📢 Please note that all parameters can be customized and switched off or on depending on your app design.

Here, you may see where these parameters are displayed in the screen precisely.

Screen peculiarities and functions

Depicting the Title and Subtitle parameters

To save some space on the screen, you may also work with the text lines by removing Title or Subtitle parameters or even both. To remove those parameters, the text itself should be deleted in the corresponding parameter field below:

Setting the Advanced Text Customization for Title and Subtitle

  1. Composing the text to be reflected in the screen in the corresponding part of the Title or Subtitle parameter.

  2. Setting the text size by adjusting its font family, size, weight, and line height.

  3. Applying the appropriate text color and the background color where the text is located in the screen.

  4. Using the padding boxes for working with the text alignment while giving the needed text positioning in the screen.

Customizing the Text Field parameter

Selecting Appropriate Input Types

You may choose from various text field types like String, Int, or Double. The type can be chosen from a dropdown menu to align with your onboarding requirements. This selection influences the kind of symbols users can input.

Selecting Appropriate Input Types:

  • The "String" format allows you to enter any text, numbers, special symbols, or emojis.

  • The "Int" format allows you to enter only whole numbers without any fractional parts.

  • The "Double" format allows you to enter numbers with fractional parts, however, without any text or emojis available.

Setting Placeholder Text in Text Fields

  1. Change the placeholder text to guide users on what to type when the field is empty. Placeholder text can include any symbols, emojis, or be left empty for simplicity.

  2. Click on the settings icon to view a list of settings for both placeholder text and user-entered text.

  3. Configure text font, weight, height, color, and alignment. Adjust the position of the text field using padding options for optimal layout.

Adjusting the Footer parameter

The Footer parameter consists of 2 active buttons that are fully customizable:

  • Next

  • Log-in

Here, you can modify the layout with necessary buttons to improve user navigation and ensure design consistency. More details on dealing with the Footer customization are available in the article Customizing the Screen Footer.

To learn more details about the way the Screens work and what functionality they obtain, please study the following article Onboarding Screens Base Elements Customization, or ask our team if there are any additional questions.

Did this answer your question?