If you need individual details from your visitors, then the input field is the best option. You can ask for any single text inputs, such as their first and last name or email address.

💡 Many inputs can be filled in automatically by the browser. Learn more about this here.

Adding the Input Field Block

In the blocks tab, navigate to Input and drag the input field block into your heyflow
Adjust the settings such as decorators and masks
Add a system label to make sure you are processing the data in a meaningful way.
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.

Native Autocomplete

To make it even easier for users to insert their data, you can use our native autocomplete feature and autofill their data from the browser. Learn more here on how it helps to improve your conversions.

You can find this function in the input field under Advanced, where you can insert the autocomplete attribute, e.g:

First name = given-name,
last name = family-name,
email = email,
phone = tel etc.

You can find more information on the individual autocomplete attributes here.

As soon as the attributes are stored in the individual input fields, the browser can recognize them and fill them in automatically:

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.

Designing the Input Field

There are multiple ways to adjust the block even more than described above. Just head to the Design tab and start working on the Presets. In some plans, you can dive even deeper into all spheres of design & look. When working on the presets, you can head to the Styles section on top and start editing every little detail of each section.

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.