documentation-logo
Menu
  • Guides
  • Form Creation
  • General fields

How do I use the phone field in IvyForms?

ON THIS PAGE

The Phone field is used to collect telephone numbers in a structured way, so you can capture contact details consistently across your forms. It supports different phone number formats, optional country detection, and conditional visibility through smart logic. This article explains how the Phone field works and which settings you can adjust in the form builder.

 

Front-end view of a Phone field in an IvyForms form.

Front-end appearance

Where can I find the Phone field in IvyForms?

You can add a Phone field from the General fields section in the left panel of the IvyForms builder. When this section is expanded, all basic input types are listed, and the Phone field appears together with Text, Email, and other common fields. Click it to insert it into your form, then select it in the preview to access its options.

 

IvyForms field list with the Phone field selected and other fields grayed out in the panel.

What settings can I configure for the Phone field?

Once you click the Phone field in the preview area, the left sidebar changes from Add field to Options. This panel is divided into three main sections: General, Advanced, and Smart logic. Together, these control how the field looks, how phone numbers are formatted, and when the field is shown to users.

 

How do general settings work for the Phone field?

 

The General tab contains the primary configuration options for the Phone field. Here you can define the label and helper text, mark the field as required, choose the phone number format, and enable automatic country detection.

 

General options tab for the Phone field in IvyForms showing label, description, required, placeholder, phone format, CSS classes, and auto country detection.
 

  • Label – defines the title of the field that appears next to or above the phone input.
  • Hide label – removes the label from the front-end so only the input and any description are visible.
  • Description – lets you add a short instruction below the field, for example “Include your country code if needed”.
  • Required – makes the Phone field mandatory, so the form cannot be submitted without a valid number.
  • Read-only – displays a fixed phone number that users can see but cannot edit.
  • Placeholder – shows example content inside the input, such as “+49 170 0000000” or “Enter phone number”.
  • Phone format – selects how the phone number is formatted.
    • International – prepares the field for numbers that include a country code.
    • National – focuses on local phone number formats without a leading country code.
    • E.164 – saves the number in a compact international format that starts with a plus sign and country code.
  • CSS classes – allows you to add custom class names that can be targeted with your own CSS styles.
  • Enable auto country detection – when this option is on, IvyForms attempts to detect the user’s country automatically and preselects the appropriate country code, which can speed up filling out the field.

 

How do advanced settings work for the Phone field?

 

The Advanced tab provides additional controls for how the Phone field behaves and how it fits into your layout. These options help you limit the length of the input, adjust the label position, and prevent repeated entries.

 

Advanced options tab for the Phone field in IvyForms showing maximum length, label position, and no duplicates options.
 

  • Limit maximum length – sets a cap on how many characters users can type into the Phone field, which can help avoid overly long or incorrect entries.
  • Label position – changes where the label appears relative to the input. You can use Default, Top, Left, or Right to better match your form design.
  • No duplicates – prevents the same phone number from being submitted more than once, which is useful if you want each entry to contain a unique contact number.

 

How can I use smart logic with the Phone field?

Smart Logic is available only in the Pro version of IvyForms.

 

The Smart logic settings let you show or hide the Phone field based on conditions you define. By default, smart logic is disabled and the field is always visible. When you turn it on, you can create rules that control when the Phone field should appear.

 

Smart logic settings for the Phone field in IvyForms showing conditional match options and rule configuration.
 

After enabling smart logic, the Conditional match option becomes available with two evaluation modes:

  • Any – the Phone field is displayed if at least one of the conditions you set is true.
  • All – the Phone field is displayed only when every defined condition is met at the same time.

 

These conditions are based on other fields in the same form. For example, you can show the Phone field only when a user chooses “Phone call” as a preferred contact method in a Radio Button field, or when they select a specific support category. This helps you request phone numbers only when they are relevant, keeping your forms shorter and easier to complete.