All Collections
Building Blocks
Input
Input Field
Input Field

The Input Field is the right option if you need a written answer from people. This could be things such as name, address or job title.

Heyflow avatar
Written by Heyflow
Updated over a week ago

Adding the input field block

  1. In the blocks tab, navigate to Input and drag the input field block into your heyflow

  2. Adjust the settings such as decorators and masks

  3. Add a system label to make sure you are processing the data in a meaningful way.

  4. Just publish your heyflow and you’re good to go!

Label and Placeholder

In the content column, edit the label as well as placeholder text which gives hints that describe the expected value of an input field. This could be something such as a name, address, job title, or favorite travel destination.

Decorators and Validation

Prefixes and Suffixes

Add symbols and icons before or after an input field to inform people or take your design to the next level.

Mask

Adding a mask restricts the format of what can be inputted, like a credit card number or date. You can also select if only numbers or only letters are available for input.

Validation

Customize your error message, and have values such as emails validated on un-focus (when you click out of the field), or when the user attempts to navigate to the next screen.

Regular Expression

A regular expression (regex) is a pattern that can be used to ensure a certain format (e.g. an email address). You can find more information here.

Hidden input fields

Sometimes, you would like to see information in the response the user shouldn't see in the flow, e.g. a unique identifier for the user or the flow etc. A hidden field lets you include data that cannot be seen or modified by users when a response of a flow is submitted.

Important: Since the whole flow is loaded on initializing, the hidden input field content is automatically added to all responses.

You can hide input fields in the settings of the block under appearance. It will then not be visible to the user.

This block can be filled via the usage of variables, e.g. from the URL, or you can insert a prefilled value under Labels & Variables and Content.

Edit Options

General

  • Sensitive: If activated, the values are not saved in our database (more information here).

  • Autofocus: Sets the mouse focus on the input field so that the user can start typing immediately.

  • Autocomplete: Add predefined options for users to choose from.

  • Required: If activated, your users must make a selection before they can continue clicking in the flow.

Spacing

  • Width: You can use this to adjust the maximum spread of the block and choose between S, M, L and maximum width.

  • Top, Bottom, Left and Right: You can use these options to set the distance to all sides. To do this, either use the slider or specify the exact number of pixels.

Appearance

  • Visibility: Here you can select whether the block is only displayed in the mobile or desktop version or whether it is hidden completely.

  • Background colour: You can select a colour to be used as the background for the block.

  • Floating label: The label initially appears within the field, and when the user interacts with it, the label "floats" above the field and makes room for the user to enter a value.

  • With info: Add additional information below the input field, e.g. to indicate when a field is optional.

Decorators

  • Prefix text: Specify an extra text field before the input.

  • Prefix icon: Specify an extra field with an icon before the input.

  • Suffix text: Specify a text field after the input.

  • Suffix icon: Specify an extra field with an icon after the input.

  • Mask: Transforms the input value using a visual pattern. This can be useful in the case of a date.

  • Max. chars enabled: If activated, you can set the maximum number of characters.

  • Remove whitespace: Removes spaces that have been placed before or after the input value.

Validation

  • Trigger on: Select after which action of the user:in the validation should take place and the result should be displayed.

  • Error message: Specify the error message text that is displayed if an incorrect entry is made.

  • Enforce email pattern: If activated, the input must be a valid email address.

  • Show regular expression: Specify a pattern that is used to check a specific format, e.g. that of an email address.

Labels & Variables

  • System label: Specify a system label for the block.

  • Variable: See Variable.

  • Content: The prefilled value of the field. The user can change the value if the block has not been deactivated via the settings.

Advanced

  • Disabled: If activated, input is no longer possible.

  • Native input type: The native input type determines the format of an input field, such as a date or a telephone number, which has a specific layout. This is particularly helpful on mobile devices: If you select 'Phone', for example, mobile users will not see the standard keyboard but the numeric keypad. Even if you select 'Date', mobile users will see a native date selection. Whether a different input layout is displayed depends on the device and its support for this functionality.

  • Native autocomplete: Specify whether the elements specified under General are available for auto-completion.

Did this answer your question?