{"id":6834,"date":"2024-04-14T18:03:43","date_gmt":"2024-04-14T10:03:43","guid":{"rendered":"https:\/\/webflow.tenten.co\/?p=6834"},"modified":"2024-04-14T18:03:43","modified_gmt":"2024-04-14T10:03:43","slug":"overview-of-phone-field","status":"publish","type":"post","link":"https:\/\/webflow.tenten.co\/en\/overview-of-phone-field\/","title":{"rendered":"Overview of Phone Field"},"content":{"rendered":"\n<div class=\"docs_rich-text w-richtext\">\n<p>The telephone field is a <a href=\"https:\/\/help.webflow.com\/article\/cms-collections\">Collection<\/a> feature that permits you and Collaborators to specify a phone number for items in a Collection. Phone numbers designated in this field can be exhibited in <a href=\"https:\/\/help.webflow.com\/article\/collection-list\">Collection lists<\/a> or on <a href=\"https:\/\/help.webflow.com\/article\/collection-pages\">Collection pages<\/a> as text.<\/p>\n<p>Similar to a <a href=\"https:\/\/help.webflow.com\/article\/link-field\">link feature<\/a>, a phone field can function as a hyperlink. You can also utilize the phone field to refine a Collection list or set conditional visibility on components in Collection lists and pages. Here are frequent applications for the phone field:<\/p>\n<ul>\n<li>Show phone numbers of team members, departments, and so on<\/li>\n<li>Direct to these phone numbers on the website so visitors can make a call with a click or tap<\/li>\n<\/ul>\n<p>In this tutorial, we delve into:<\/p>\n<ul>\n<li>Establishing a phone field<\/li>\n<li>Incorporating content to a phone field<\/li>\n<li>Associating phone fields to text<\/li>\n<li>Associating phone fields to phone links<\/li>\n<li>Refining a Collection list using the phone field<\/li>\n<li>Configuring conditional visibility using the phone field<\/li>\n<\/ul>\n<h6><strong>Pro Tip: <\/strong>You can also embed inline phone links with the <a href=\"https:\/\/help.webflow.com\/article\/rich-text-field\">rich text field<\/a>.<\/h6>\n<h2>Establishing a Phone Field<\/h2>\n<p>A phone field can be appended to a fresh or existing Collection. In the settings of Collection, hit on <strong>New Field<\/strong> and then select the <strong>Phone<\/strong> field.<\/p>\n<figure class=\"w-richtext-figure-type-image w-richtext-align-center\" data-rt-type=\"image\" data-rt-align=\"center\" data-rt-max-width=\"80%\">\n<div><img decoding=\"async\" src=\"https:\/\/webflow.tenten.co\/wp-content\/uploads\/2024\/04\/64b94a12c39b040c71984525_5e6131c2dcb1b6864ae3e121_59926777e03d780001a55127_doc-252520cms-field252520-252520phone252520-25252000.png\" width=\"auto\" height=\"auto\" loading=\"auto\" title=\"64b94a12c39b040c71984525_5e6131c2dcb1b6864ae3e121_59926777e03d780001a55127_doc-252520cms-field252520-252520phone252520-25252000\"><\/div>\n<\/figure>\n<p>Similar to any field, you can specify whether the field is mandatory or optional.<\/p>\n<h2>Including Content to a Phone Field<\/h2>\n<p>The telephone field admits any typable value. Nevertheless, keep in mind that if these values lack a valid phone number format, then links to these phone numbers may not operate as desired.<\/p>\n<figure class=\"w-richtext-figure-type-image w-richtext-align-center\" data-rt-type=\"image\" data-rt-align=\"center\" data-rt-max-width=\"80%\">\n<div><img decoding=\"async\" src=\"https:\/\/webflow.tenten.co\/wp-content\/uploads\/2024\/04\/64b94a12c39b040c7198453e_5e6131c25d6b0e9d3d887de2_599267827851aa0001d84b96_doc-252520cms-field252520-252520phone252520-25252007.png\" width=\"auto\" height=\"auto\" loading=\"auto\" title=\"64b94a12c39b040c7198453e_5e6131c25d6b0e9d3d887de2_599267827851aa0001d84b96_doc-252520cms-field252520-252520phone252520-25252007\"><\/div>\n<\/figure>\n<h2>Joining Phone Fields to Phone Links<\/h2>\n<p>You can link a phone field to any text element in a Collection list or a Collection page:<\/p>\n<ol>\n<li>Include a text element in your Collection list or page<\/li>\n<li>Tick the <strong>Get text from<\/strong> checkbox in the <strong>Inner Text Settings<\/strong> that displays<\/li>\n<li>Opt the phone field from the <strong>field dropdown<\/strong><\/li>\n<\/ol>\n<p>You can also get the phone number as text for buttons and text links from the Link Settings.<\/p>\n<figure class=\"w-richtext-figure-type-video w-richtext-align-center\" data-rt-type=\"video\" data-rt-align=\"center\" data-rt-max-width=\"80%\" data-rt-max-height=\"45%\" data-rt-dimensions=\"640:360\" data-page-url=\"https:\/\/vimeo.com\/229660579\">\n<div><iframe src=\"https:\/\/player.vimeo.com\/video\/229660579\" frameborder scrolling=\"no\"><\/iframe><\/div><figcaption>\u00a0<\/figcaption><\/figure>\n<p><p>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).<\/p>\n<figure class=\"w-richtext-figure-type-image w-richtext-align-center\" data-rt-type=\"image\" data-rt-align=\"center\" data-rt-max-width=\"240px\">\n<div><img decoding=\"async\" src=\"https:\/\/webflow.tenten.co\/wp-content\/uploads\/2024\/04\/64b94a12c39b040c7198453b_5e6131c38d7690624ed3350b_5992679ea513ef0001792d2f_doc-252520cms-field252520-252520phone252520-25252002.png\" width=\"auto\" height=\"auto\" loading=\"auto\" title=\"64b94a12c39b040c7198453b_5e6131c38d7690624ed3350b_5992679ea513ef0001792d2f_doc-252520cms-field252520-252520phone252520-25252002\"><\/div>\n<\/figure>\n<p>You can erase the connection by deselecting the \u201c<strong>Get text from\u201d<\/strong> checkbox in the <strong>Settings <\/strong>panel<strong>.<\/strong><\/p>\n<h2>Connecting Phone Fields to Phone Links<\/h2>\n<p>You can also associate a phone number to any link element, including a <a href=\"https:\/\/help.webflow.com\/article\/button\">button<\/a>. This link will initiate a phone call utilizing the phone number for the corresponding Collection item. To craft a dynamic phone link:<\/p>\n<ol>\n<li>Create a link element in your Collection list or page<\/li>\n<li>Select <strong>Phone<\/strong> in the <strong>Link Settings<\/strong> that materialize<\/li>\n<li>Choose <strong>Get phone from<\/strong><\/li>\n<li>Select the phone field from the <strong>field dropdown<\/strong><\/li>\n<\/ol>\n<figure class=\"w-richtext-figure-type-video w-richtext-align-center\" data-rt-type=\"video\" data-rt-align=\"center\" data-rt-max-width=\"80%\" data-rt-max-height=\"45%\" data-rt-dimensions=\"640:360\" data-page-url=\"https:\/\/vimeo.com\/233090503\">\n<div><iframe src=\"https:\/\/player.vimeo.com\/video\/233090503\" frameborder scrolling=\"no\"><\/iframe><\/div><figcaption>\u00a0<\/figcaption><\/figure>\n<h6>Phone links will only function on devices that make phone calls.<\/h6>\n<p>You can also enter the Link Settings by picking the text element and either tapping on the settings icon adjacent to the element label on the canvas or by navigating to the Settings panel (D). Here, you can also acquire the text for text links and buttons from the Phone number field.<\/p>\n<figure class=\"w-richtext-figure-type-image w-richtext-align-center\" data-rt-type=\"image\" data-rt-align=\"center\" data-rt-max-width=\"240px\">\n<div><img decoding=\"async\" src=\"https:\/\/webflow.tenten.co\/wp-content\/uploads\/2024\/04\/64b94a12c39b040c71984516_5e6131c246e6b86501d237ad_599267b70a6863000119771d_doc-252520cms-field252520-252520phone252520-25252004.png\" width=\"auto\" height=\"auto\" loading=\"auto\" title=\"64b94a12c39b040c71984516_5e6131c246e6b86501d237ad_599267b70a6863000119771d_doc-252520cms-field252520-252520phone252520-25252004\"><\/div>\n<\/figure>\n<p>You can break the linkage by unchecking the \u201c<strong>Get phone from\u201d<\/strong> checkbox under <strong>Link Settings.<\/strong><\/p>\n<h2>Refining a Collection List utilizing the Telephone Field<\/h2>\n<p>You can filter a Collection list using the phone field by specifying any of the ensuing regulations: Matches, Deviates, Is provided, Is absent.<\/p>\n<ol>\n<li>Select the Collection list you wish to filter<\/li>\n<li>Head to the <strong>Settings panel (D)<\/strong><\/li>\n<li>Incorporate a <strong>Filter<\/strong> beneath <strong>Collection List Settings<\/strong><\/li>\n<li>Choose your phone field in the initial dropdown<\/li>\n<li>Select a guideline in the second field<\/li>\n<li>Assign a value if the choice is possible<\/li>\n<li>Tap <strong>Save<\/strong><\/li>\n<\/ol>\n<figure class=\"w-richtext-figure-type-image w-richtext-align-center\" data-rt-type=\"image\" data-rt-align=\"center\" data-rt-max-width=\"220px\">\n<div><img decoding=\"async\" src=\"https:\/\/webflow.tenten.co\/wp-content\/uploads\/2024\/04\/64b94a12c39b040c71984513_5e6131c2d2151345f2bb1c90_599267d30a68630001197720_doc-252520cms-field252520-252520phone252520-25252005.png\" width=\"auto\" height=\"auto\" loading=\"auto\" title=\"64b94a12c39b040c71984513_5e6131c2d2151345f2bb1c90_599267d30a68630001197720_doc-252520cms-field252520-252520phone252520-25252005\"><\/div>\n<\/figure>\n<p>The filter guidelines that you can utilize with the phone field and values are:<\/p>\n<ul>\n<li><strong>Matches<\/strong> &#8211; examines Collection items with a phone number equal to the value you define for this regulation<\/li>\n<li><strong>Deviates<\/strong> &#8211; searches for Collection items with a phone number that isn\u2019t equal to the value you define for this regulation<\/li>\n<li><strong>Is provided<\/strong> &#8211; hunts for Collection items that possess a phone number set for this link field<\/li>\n<li><strong>Is absent<\/strong> &#8211; seeks for Collection items that don\u2019t have a phone number set for this link field<\/li>\n<\/ul>\n<p><a href=\"https:\/\/help.webflow.com\/article\/filtering-collection-lists\">Discover more about filtering Collection lists.<\/a><\/p>\n<h2>Configuring Conditional Visibility utilizing the Phone Field<\/h2>\n<p>If you are utilizing a clickable phone icon linked to your phone field, you can configure a conditional visibility rule on this icon in your Collection list or page. This can certify that this icon will be apparent only when a phone number is set in the phone field for that Collection item.<\/p>\n<ol>\n<li>Select the phone link icon (the link block)<\/li>\n<li>Visit the <strong>Settings panel (D)<\/strong><\/li>\n<li>Add a <strong>Condition<\/strong> (when this element is visible) under <strong>Conditional visibility<\/strong><\/li>\n<li>Select your phone field in the initial dropdown<\/li>\n<li>Choose <strong>Is set<\/strong> in the second dropdown<\/li>\n<li>Tap <strong>Save<\/strong><\/li>\n<\/ol>\n<figure class=\"w-richtext-figure-type-image w-richtext-align-center\" data-rt-type=\"image\" data-rt-align=\"center\" data-rt-max-width=\"220px\">\n<div><img decoding=\"async\" src=\"https:\/\/webflow.tenten.co\/wp-content\/uploads\/2024\/04\/64b94a12c39b040c71984510_5e6131c2e37ec35ac9de2365_599267df7851aa0001d84b9f_doc-252520cms-field252520-252520phone252520-25252006.png\" width=\"auto\" height=\"auto\" loading=\"auto\" title=\"64b94a12c39b040c71984510_5e6131c2e37ec35ac9de2365_599267df7851aa0001d84b9f_doc-252520cms-field252520-252520phone252520-25252006\"><\/div>\n<\/figure>\n<p><a href=\"http:\/\/help.webflow.com\/article\/conditional-visibility\">Discover more about conditional visibility.<\/a><\/p>\n<\/div>\n","protected":false},"excerpt":{"rendered":"Use the phone field to specify a phone number for items in a Collection.","protected":false},"author":2,"featured_media":6835,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"om_disable_all_campaigns":false,"inline_featured_image":false,"_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"csco_display_header_overlay":false,"csco_singular_sidebar":"","csco_page_header_type":"","footnotes":""},"categories":[300],"tags":[],"class_list":{"0":"post-6834","1":"post","2":"type-post","3":"status-publish","4":"format-standard","5":"has-post-thumbnail","7":"category-cms-dynamic-content","8":"cs-entry"},"acf":[],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/posts\/6834","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/comments?post=6834"}],"version-history":[{"count":0,"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/posts\/6834\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/media\/6835"}],"wp:attachment":[{"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/media?parent=6834"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/categories?post=6834"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/tags?post=6834"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}