Phone field overview

The phone field is a Collection field that lets you and Collaborators specify a phone number for items in a Collection. Phone numbers specified in this field can be displayed in Collection lists or on Collection pages as text.

Just like a link field, a phone field can be used as a link. You can also use the phone field to filter a Collection list or set conditional visibility on elements in Collection lists and pages. Here are common uses for the phone field:

• Display phone numbers of team members, departments, etc
• Link to these phone numbers on the website so visitors can place a call with a click or a tap

In this lesson, we talk about:

• Creating a phone field
• Adding content to a phone field
• Connecting phone fields to text
• Connecting phone fields to phone links
• Filtering a Collection list using the phone field
• Setting conditional visibility using the phone field

Pro Tip: You can also add inline phone links with the rich text field.

Creating a phone field

A phone field can be added to a new or existing Collection. In Collection settings, click on New Field and then choose the Phone field.

And as with any field, you can specify if the field is required or not.

Adding content to a phone field

The phone field accepts any typable value. However, note that if these values do not have a valid phone number format, then links to these phone numbers may not work as intended.

Connecting phone fields to phone links

You can connect a phone field to any text element in a Collection list or a Collection page:

1. Add a text element in your Collection list or page
2. Check the Get text from checkbox in the Inner Text Settings that appears
3. Select the phone field from the field dropdown

You can also get the phone number as text for buttons and text links from the Link Settings.

You can also access these Inner Text Settings by selecting the text element and either clicking on the settings icon next to the element label on the canvas or by going to the Settings panel (D).

You can remove the connection by unchecking the “Get text from” checkbox in the Settings panel.

Connecting phone fields to phone links

You can also connect a phone number to any link element, including a button. This link will trigger a phone call using the phone number for the corresponding Collection item. To create a dynamic phone link:

1. Add a link element in your Collection list or page
2. Choose Phone in the Link Settings that appear
3. Select Get phone from
4. Select the phone field from the field dropdown

Phone links will only work on devices that place phone calls.

You can also access the Link Settings by selecting the text element and either clicking on the settings icon next to the element label on the canvas or by going to the Settings panel (D). Here, you can also grab the text for text links and buttons from the Phone number field.

You can remove the connection by unchecking the “Get phone from” checkbox under Link Settings.

Filtering a Collection list using the phone field

You can filter a Collection list using the phone field by specifying either of the following rules: Equals, Does not equal, Is set, Is not set.

1. Select the Collection list you want to filter
2. Go to the Settings panel (D)
3. Add a Filter under Collection List Settings
4. Select your phone field in the first dropdown
5. Choose a rule in the second field
6. Set a value if the option is available
7. Click Save

The filter rules that you can use with the phone field and values are:

• Equals - looks for Collection items with a phone number equal to the value you specify for this rule
• Does Not Equal - looks for Collection items with phone number that isn’t equal to the value you specify for this rule
• Is Set - looks for Collection items that have a phone number set for this link field
• Is Not Set - looks for Collection items that don’t have a phone number set for this link field

Learn more about filtering Collection lists.

Setting conditional visibility using the phone field

If you are using a clickable phone icon connected to your phone field, you can set a conditional visibility rule on this icon in your Collection list or page. This can ensure that this icon will be visible only when a phone number is set in the phone field for that Collection item.

1. Select the phone link icon (the link block)
2. Go to the Settings panel (D)
3. Add a Condition (when this element is visible) under Conditional visibility
4. Select your phone field in the first dropdown
5. Choose Is set in the second dropdown
6. Click Save

Learn more about conditional visibility.