Our Phone Number Block helps you to receive phone numbers of your leads in a consistent structure, including automatically added country codes via a drop-down selection.
In this article, you'll learn how to update the block's content, its settings and design.
💡 Our Phone Block also includes a network validation feature, which automatically checks if the number your flow visitor has entered is registered with a legitimate carrier. Like that, you can easily improve the accuracy and validity of contact information and increase lead quality. Find out more here.
Update the Content
After clicking on a building block, you’ll find the Content section on the right. This is where you 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.
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.
Change the Settings
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.
Country Codes
You can individually select the countries and their codes that users should be able to choose from in the list. Alternatively, you can click on “Allow all country codes” to automatically select all of them.
Additionally, under Default you can select which of the visible country codes should be displayed by default in the block.
💡 Performance tip: To improve the loading speed of your flow, we recommend only enabling a selection of country codes in the phone block, especially if you're targeting users from specific regions.
General
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.
Appearance
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:
Static: Default label shown above the input
Dynamic: Label starts inside the field and floats above when typing
Compact: Label stays inside the field and shifts up slightly when typing
Spacing
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.
Labels & Variables
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, but also for the country as a separate input to keep your data structured and easy to use.
Validation
Under validation, you can activate and deactivate modules, such as the Network validation feature.
Design your Block
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.
🔎 Learn more in our full guide: Design Presets for Blocks
Also see Heyflow's other design options to individualize your flow and building blocks even more: