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.

In this article, you'll learn how to update the block's content, its settings and design.

After clicking on a building block, you’ll find the Content section on the right. This is where you add and edit the block’s main elements.

Use the block label to ask your question or guide the user’s choice. Labels help users understand what’s being asked, and they’re important for accessibility, especially when using screen readers or other assistive technologies. The placeholder displays example text inside the field until the user enters a value.

With show helper text, you can add an additional line below the input field, e.g. to indicate when a field is optional. Finally, the error message specifies the text that will be displayed if the user enters an invalid value or tries to navigate without entering input in a required field.

After clicking on a building block, you’ll find the Settings section on the right. This is where you can customize the block’s options, appearance, and behavior to tailor it perfectly to your flow.

Control key settings for the block, including making values sensitive so they aren’t stored in our database and setting the block as required, making it mandatory for users to select an option before proceeding.

With autofocus, the cursor is automatically placed in the input field, allowing users to start typing immediately. You can also enable autocomplete to provide predefined options for users to select from.

Set the block’s visibility to show only on mobile, desktop, or hide it completely. You can select a color to be used as the background for the block and select from the following label behaviors:

Control the block’s layout by adjusting its width (S, M, L, or maximum) and setting the block's padding from the top, bottom, left, and right.

Under Decorations you can customize the input field further by adding prefix text or a prefix icon, which appear before the input, as well as suffix text or a suffix icon, which appear after the input.

The mask option allows you to transform the input value using a visual pattern, e.g.

With max. chars enabled, you can define the maximum number of characters allowed in the field. Finally, the remove whitespace option automatically deletes any spaces placed before or after the input value.

With trigger on, you can define after which user action the validation should take place and when the result is displayed, e.g. on Navigation or Leave.

If you enable enforce email pattern, the input must match a valid email address. You can also use show regular expression to specify a custom pattern that checks whether the input follows a required format, such as that of an email address. You can find more information here.

System Labels define how your data is stored and organized, while Variables let you reference and display that data dynamically throughout your flow. You can set a label for the whole block to keep your data structured and easy to use.

Under Content you can set a prefilled value of the field. The user can change the value if the block has not been deactivated via the settings.

You can disable the input to prevent users from entering any values in the field. With the native input type, you can define the format of the input field, such as date or phone number, which adapts the layout of the input accordingly. This is especially useful on mobile devices: for example, selecting Phone displays the numeric keypad instead of the standard keyboard, while selecting Date opens the native date picker. The exact behavior depends on the user’s device and its support for this functionality.

To make it even easier for users to insert their data, you can use our autocomplete feature and autofill their data from the browser. You can directly insert the autocomplete attribute, e.g:

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

After clicking on a building block, you’ll find the Design section on the right. You can quickly apply a preset style tailored to that block type. Also, customize colors, fonts, and spacing to match your flow.

When you apply a design to one block type, it automatically updates all blocks of that type across your flow. This keeps your design consistent, clean, and easy to maintain without styling each block manually.

Also see Heyflow's other design options to individualize your flow and building blocks even more: