diff --git a/addons/web/static/src/views/fields/phone/phone_field.js b/addons/web/static/src/views/fields/phone/phone_field.js
index 63539bc1089..71a2e68dd36 100644
--- a/addons/web/static/src/views/fields/phone/phone_field.js
+++ b/addons/web/static/src/views/fields/phone/phone_field.js
@@ -28,4 +28,8 @@ PhoneField.extractProps = ({ attrs }) => {
     };
 };
 
+class FormPhoneField extends PhoneField {}
+FormPhoneField.template = "web.FormPhoneField";
+
 registry.category("fields").add("phone", PhoneField);
+registry.category("fields").add("form.phone", FormPhoneField);
diff --git a/addons/web/static/src/views/fields/phone/phone_field.xml b/addons/web/static/src/views/fields/phone/phone_field.xml
index ac5c1dd15c4..2d28ca010b6 100644
--- a/addons/web/static/src/views/fields/phone/phone_field.xml
+++ b/addons/web/static/src/views/fields/phone/phone_field.xml
@@ -2,18 +2,32 @@
 <templates xml:space="preserve">
 
     <t t-name="web.PhoneField" owl="1">
-        <t t-if="props.readonly">
-            <a t-if="props.value" class="o_form_uri o_phone_link" t-att-href="'tel:'+props.value" t-esc="props.value"/>
-        </t>
-        <t t-else="">
-            <input
-                class="o_input"
-                t-att-id="props.id"
-                type="tel"
-                t-att-placeholder="props.placeholder"
-                t-ref="input"
-            />
-        </t>
+        <div class="o_phone_content d-inline-flex w-100">
+            <t t-if="props.readonly">
+                <a t-if="props.value" class="o_form_uri" t-att-href="'tel:'+props.value" t-esc="props.value"/>
+            </t>
+            <t t-else="">
+                <input
+                    class="o_input"
+                    t-att-id="props.id"
+                    type="tel"
+                    t-att-placeholder="props.placeholder"
+                    t-ref="input"
+                />
+            </t>
+        </div>
+    </t>
+
+    <t t-name="web.FormPhoneField" t-inherit="web.PhoneField" t-inherit-mode="primary">
+        <xpath expr="//div[hasclass('o_phone_content')]//input" position="after">
+            <a
+                t-if="props.value"
+                t-att-href="'tel:'+props.value"
+                class="ms-3 d-inline-flex align-items-center"
+            >
+                <i class="fa fa-phone"></i><small class="fw-bold ms-1">Call</small>
+            </a>
+        </xpath>
     </t>
 
 </templates>
diff --git a/addons/web/static/tests/views/fields/phone_field_tests.js b/addons/web/static/tests/views/fields/phone_field_tests.js
index db2316e2843..b791c2b7b28 100644
--- a/addons/web/static/tests/views/fields/phone_field_tests.js
+++ b/addons/web/static/tests/views/fields/phone_field_tests.js
@@ -85,6 +85,15 @@ QUnit.module("Fields", (hooks) => {
             "input should contain field value in edit mode"
         );
 
+        const phoneLink = target.querySelector(".o_field_phone a");
+        assert.containsOnce(
+            target,
+            phoneLink,
+            "should have rendered the phone number as a link with correct classes"
+        );
+        assert.strictEqual(phoneLink.textContent, "Call", "link is shown with the right text");
+        assert.hasAttrValue(phoneLink, "href", "tel:yop", "should have proper tel prefix");
+
         // change value in edit mode
         await editInput(target, "input[type='tel']", "new");
 
@@ -114,7 +123,7 @@ QUnit.module("Fields", (hooks) => {
 
         assert.containsN(
             target,
-            ".o_field_widget a.o_form_uri.o_phone_link",
+            ".o_field_widget a.o_form_uri",
             2,
             "should have the correct classnames"
         );
@@ -145,7 +154,7 @@ QUnit.module("Fields", (hooks) => {
         );
         assert.containsN(
             target,
-            ".o_field_widget a.o_form_uri.o_phone_link",
+            ".o_field_widget a.o_form_uri",
             2,
             "should still have links with correct classes"
         );