diff --git a/resources/js/components/fieldtypes/LinkFieldtype.vue b/resources/js/components/fieldtypes/LinkFieldtype.vue
index dffacc3fd5..c6d272bef2 100644
--- a/resources/js/components/fieldtypes/LinkFieldtype.vue
+++ b/resources/js/components/fieldtypes/LinkFieldtype.vue
@@ -1,6 +1,5 @@
 <template>
     <div class="flex items-center">
-
         <!-- Link type selector -->
         <div class="w-28 rtl:ml-4 ltr:mr-4">
             <v-select
@@ -10,18 +9,17 @@
                 :options="options"
                 :clearable="false"
                 :reduce="(option) => option.value"
-
             >
                 <template #option="{ label }">
-                  {{ __(label) }}
+                    {{ __(label) }}
                 </template>
             </v-select>
         </div>
 
         <div class="flex-1">
-
             <!-- URL text input -->
             <text-input v-if="option === 'url'" v-model="urlValue" />
+            <text-input v-if="option === 'mail'" v-model="email" />
 
             <!-- Entry select -->
             <relationship-fieldtype
@@ -46,65 +44,67 @@
                 @input="assetsSelected"
                 @meta-updated="meta.asset.meta = $event"
             />
-
         </div>
     </div>
 </template>
 
 <script>
-import PositionsSelectOptions from '../../mixins/PositionsSelectOptions';
+import PositionsSelectOptions from "../../mixins/PositionsSelectOptions";
 
 export default {
-
     mixins: [Fieldtype, PositionsSelectOptions],
 
     data() {
-
         return {
             option: this.meta.initialOption,
             options: this.initialOptions(),
             urlValue: this.meta.initialUrl,
+            email: this.meta.initialMail,
             selectedEntries: this.meta.initialSelectedEntries,
             selectedAssets: this.meta.initialSelectedAssets,
             metaChanging: false,
-        }
-
+        };
     },
 
     computed: {
+        mailValue() {
+            return this.email ? `mailto:${this.email}` : null;
+        },
 
         entryValue() {
             return this.selectedEntries.length
                 ? `entry::${this.selectedEntries[0]}`
-                : null
+                : null;
         },
 
         assetValue() {
             return this.selectedAssets.length
                 ? `asset::${this.selectedAssets[0]}`
-                : null
-        }
-
+                : null;
+        },
     },
 
     watch: {
-
         option(option, oldOption) {
             if (this.metaChanging) return;
 
             if (option === null) {
                 this.update(null);
-            } else if (option === 'url') {
+            } else if (option === "url") {
                 this.updateDebounced(this.urlValue);
-            } else if (option === 'first-child') {
-                this.update('@child');
-            } else if (option === 'entry') {
+            } else if (option === "mail") {
+                this.updateDebounced(this.mailValue);
+            } else if (option === "phone") {
+                this.updateDebounced(this.phoneValue);
+            } else if (option === "first-child") {
+                this.update("@child");
+            } else if (option === "entry") {
                 if (this.entryValue) {
                     this.update(this.entryValue);
                 } else {
                     setTimeout(() => this.$refs.entries.linkExistingItem(), 0);
                 }
-            } else if (option === 'asset') {
+            } else if (option === "asset") {
                 if (this.assetValue) {
                     this.update(this.assetValue);
                 } else {
@@ -112,14 +112,21 @@ export default {
                 }
             }
 
-            this.updateMeta({...this.meta, initialOption: option});
+            this.updateMeta({ ...this.meta, initialOption: option });
         },
 
         urlValue(url) {
             if (this.metaChanging) return;
 
             this.update(url);
-            this.updateMeta({...this.meta, initialUrl: url});
+            this.updateMeta({ ...this.meta, initialUrl: url });
+        },
+
+        email() {
+            if (this.metaChanging) return;
+
+            this.update(this.mailValue);
+            this.updateMeta({ ...this.meta, initialMail: this.mailValue });
         },
 
         meta(meta, oldMeta) {
@@ -127,51 +134,48 @@ export default {
 
             this.metaChanging = true;
             this.urlValue = meta.initialUrl;
+            this.email = meta.initialMail;
             this.option = meta.initialOption;
             this.selectedEntries = meta.initialSelectedEntries;
             this.selectedAssets = meta.initialSelectedAssets;
-            this.$nextTick(() => this.metaChanging = false);
-        }
-
+            this.$nextTick(() => (this.metaChanging = false));
+        },
     },
 
     methods: {
-
         initialOptions() {
             return [
-
                 this.config.required
                     ? null
-                    : { label: __('None'), value: null },
+                    : { label: __("None"), value: null },
 
-                { label: __('URL'), value: 'url' },
+                { label: __("URL"), value: "url" },
+                { label: __("Mail"), value: "mail" },
+                { label: __("Phone"), value: "phone" },
 
                 this.meta.showFirstChildOption
-                    ? { label: __('First Child'), value: 'first-child' }
+                    ? { label: __("First Child"), value: "first-child" }
                     : null,
 
-                { label: __('Entry'), value: 'entry' },
+                { label: __("Entry"), value: "entry" },
 
                 this.meta.showAssetOption
-                    ? { label: __('Asset'), value: 'asset' }
+                    ? { label: __("Asset"), value: "asset" }
                     : null,
-
-            ].filter(option => option);
+            ].filter((option) => option);
         },
 
         entriesSelected(entries) {
             this.selectedEntries = entries;
             this.update(this.entryValue);
-            this.updateMeta({...this.meta, initialSelectedEntries: entries});
+            this.updateMeta({ ...this.meta, initialSelectedEntries: entries });
         },
 
         assetsSelected(assets) {
             this.selectedAssets = assets;
             this.update(this.assetValue);
-            this.updateMeta({...this.meta, initialSelectedAssets: assets});
-        }
-
-    }
-
-}
+            this.updateMeta({ ...this.meta, initialSelectedAssets: assets });
+        },
+    },
+};
 </script>
diff --git a/src/Fieldtypes/Link.php b/src/Fieldtypes/Link.php
index 61a9371e56..bc4ff56149 100644
--- a/src/Fieldtypes/Link.php
+++ b/src/Fieldtypes/Link.php
@@ -61,13 +61,16 @@ public function preload()
 
         $selectedAsset = $value && Str::startsWith($value, 'asset::') ? Str::after($value, 'asset::') : null;
 
-        $url = ($value !== '@child' && ! $selectedEntry && ! $selectedAsset) ? $value : null;
+        $mailUrl = $value && Str::startsWith($value, 'mailto:') ? Str::after($value, 'mailto:') : null;
+
+        $url = ($value !== '@child' && ! $selectedEntry && ! $selectedAsset && ! $mailUrl) ? $value : null;
 
         $entryFieldtype = $this->nestedEntriesFieldtype($selectedEntry);
 
         $assetFieldtype = $showAssetOption ? $this->nestedAssetsFieldtype($selectedAsset) : null;
 
         return [
+            'initialMail' => $mailUrl,
             'initialUrl' => $url,
             'initialSelectedEntries' => $selectedEntry ? [$selectedEntry] : [],
             'initialSelectedAssets' => $selectedAsset ? [$selectedAsset] : [],
@@ -93,6 +96,8 @@ private function initialOption($value, $entry, $asset)
 
         if ($value === '@child') {
             return 'first-child';
+        } elseif (Str::startsWith($value, 'mailto:')) {
+            return 'mail';
         } elseif ($entry) {
             return 'entry';
         } elseif ($asset) {