وثائق HTML قابلة للتشغيل: رابط mailto

Q: كيف أنشئ رابط بريد إلكتروني في HTML؟

استخدم رابطًا تبدأ href فيه بـ mailto: متبوعة بالعنوان: hello@example.com . النقر عليه يفتح رسالة جديدة في تطبيق البريد الافتراضي لدى القارئ.

Q: كيف أضيف موضوعًا إلى رابط mailto؟

أضفه كمعامل استعلام بعد ?: mailto:hello@example.com?subject=Order%20question. رمّز المسافات بـ %20، واربط المعاملات الإضافية بـ &، مثل ?subject=Hi&body=Hello.

Q: كيف أرسل رابط mailto إلى عدة مستلمين؟

افصل العناوين بفواصل: mailto:ana@example.com,bob@example.com. واستخدم المعاملين cc= وbcc= للنسخ: mailto:ana@example.com?cc=bob@example.com&bcc=cy@example.com.

Q: كيف أجعل رقم الهاتف قابلًا للنقر في HTML؟

استخدم رابط tel: مع الرقم بالصيغة الدولية: +1 555 123 4567 . على الهواتف يبدأ مكالمة، وعلى الحاسوب يفتح تطبيق الاتصال المثبت إن وُجد.

كيف تنشئ رابط بريد إلكتروني

ابدأ href في الرابط بـ mailto: ثم العنوان. النقر عليه يفتح رسالة جديدة إلى ذلك العنوان في تطبيق البريد لدى القارئ.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Email link</title>
</head>
<body>
  <p>Questions? Write to <a href="mailto:hello@example.com">hello@example.com</a>.</p>
  <p>Or call <a href="tel:+15551234567">+1 555 123 4567</a>.</p>
</body>
</html>

المعاينة لا تفتح تطبيقات أخرى، وعند النقر على أحد هذه الروابط فيها تعرض العنوان الذي كان سيفتحه. في صفحة حقيقية يفتح الأول رسالة بريد جديدة، ويبدأ الثاني مكالمة على الهاتف.

استخدم العنوان نفسه كنص للرابط. القارئ الذي لا يملك تطبيق بريد مُعدًّا (وهذا شائع على الحواسيب التي تستخدم البريد عبر المتصفح) يستطيع نسخه على الأقل، أما الرابط الذي يقول «راسلنا» فقط فيتركه عالقًا.

الموضوع والنص وcc وbcc

يمكن لرابط mailto أن يملأ أجزاء أخرى من الرسالة. أضف معاملات بعد ? واربطها بـ &، مثل سلسلة الاستعلام في العنوان:

المعامل	يملأ	مثال
`subject`	سطر الموضوع	`?subject=Order%20question`
`body`	نص الرسالة	`&body=Hi%20there`
`cc`	مستلمو النسخة	`&cc=sales@example.com`
`bcc`	مستلمو النسخة المخفية	`&bcc=log@example.com`

المستلمون المتعددون يوضعون في جزء العنوان مفصولين بفواصل: mailto:ana@example.com,bob@example.com.

يجب ترميز القيم بترميز URL: المسافة %20، وكسر السطر %0D%0A، و& تصبح %26، و? تصبح %3F. السكربت في هذا المثال يفك ترميز كل رابط كي ترى ما يصل إلى تطبيق البريد:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>mailto parameters</title>
  <style>
    pre { background: #e5e7eb; padding: 8px; white-space: pre-wrap; }
  </style>
</head>
<body>
  <a href="mailto:support@example.com?subject=Order%20%23123&body=Hi%2C%0D%0AMy%20order%20has%20not%20arrived.">Report a problem</a>
  <br>
  <a href="mailto:ana@example.com,bob@example.com?cc=boss@example.com&subject=Q3%20plan">Email the team</a>

  <pre id="out"></pre>

  <script>
    const out = document.querySelector('#out');
    for (const a of document.querySelectorAll('a')) {
      const [to, query] = a.getAttribute('href').slice(7).split('?');
      out.textContent += 'To: ' + to + '\n';
      for (const [key, value] of new URLSearchParams(query)) {
        out.textContent += key + ': ' + value + '\n';
      }
      out.textContent += '\n';
    }
  </script>
</body>
</html>

الموضوع Order #123 يجب أن يُكتب Order%20%23123: فعلامة # المجردة تنهي العنوان عندها، ويضيع النص. ولا تستخدم + للمسافات أيضًا. في رابط mailto تبقى + علامة زائد حرفية، وتعرضها تطبيقات بريد كثيرة كما هي.

بناء رابط mailto بـ JavaScript

الترميز اليدوي عرضة للأخطاء. encodeURIComponent تتولاه عنك. اكتب في الحقول وسيتحدّث الرابط أدناه:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>mailto builder</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    label { display: block; margin-bottom: 8px; }
    input, textarea { display: block; width: 100%; max-width: 360px; font: inherit; }
    code { display: block; background: #e5e7eb; padding: 8px; word-break: break-all; }
  </style>
</head>
<body>
  <label>To <input id="to" value="hello@example.com"></label>
  <label>Subject <input id="subject" value="Question & feedback"></label>
  <label>Body <textarea id="body" rows="3">Hi,
I have a question.</textarea></label>

  <p><a id="link">Open in mail app</a></p>
  <code id="href"></code>

  <script>
    const fields = ['to', 'subject', 'body'].map((id) => document.getElementById(id));
    const update = () => {
      const [to, subject, body] = fields.map((f) => f.value);
      const href = 'mailto:' + to +
        '?subject=' + encodeURIComponent(subject) +
        '&body=' + encodeURIComponent(body.replace(/\r?\n/g, '\r\n'));
      document.getElementById('link').href = href;
      document.getElementById('href').textContent = href;
    };
    fields.forEach((f) => f.addEventListener('input', update));
    update();
  </script>
</body>
</html>

encodeURIComponent تحوّل & إلى %26 وكسر السطر إلى %0A، وreplace تجعل كسر السطر الزوج %0D%0A الذي يتوقعه البريد. اترك جزء العنوان كما كُتب: @ و, مسموحتان هناك بلا ترميز.

روابط الهاتف بـ tel: وsms:

tel: تنشئ رابط اتصال بنقرة. اكتب الرقم مع رمز الدولة وبلا مسافات في href، أما النص الظاهر فيمكن تنسيقه كما تشاء.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Contact links</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    .contact { display: flex; flex-wrap: wrap; gap: 8px; }
    .contact a {
      padding: 10px 14px;
      border: 1px solid #e5e7eb;
      border-radius: 8px;
      color: #111827;
      text-decoration: none;
    }
    .contact a:hover { border-color: #2563eb; }
  </style>
</head>
<body>
  <div class="contact">
    <a href="tel:+442079460958">Call +44 20 7946 0958</a>
    <a href="sms:+15551234567">Text +1 555 123 4567</a>
    <a href="mailto:hello@example.com">hello@example.com</a>
  </div>
</body>
</html>

tel:+442079460958 يعمل من أي دولة. أما الرقم المحلي مثل tel:02079460958 فلا يعمل إلا للمتصلين من داخل تلك الدولة.
الشرطات مسموحة كفواصل (tel:+1-555-123-4567)، أما المسافات فليست جزءًا من الصيغة، فاحذفها من href.
sms: تفتح تطبيق الرسائل. إضافة رسالة بـ ?body= تعمل في تطبيقات كثيرة، لكن الدعم يختلف، فلا تعتمد عليه.
على الحاسوب تفتح tel: تطبيق اتصال إن كان مثبتًا (مثل FaceTime أو هاتف برمجي)، ولا تفعل شيئًا في غير ذلك.

يحوّل Safari على iPhone أرقام الهواتف في النص العادي إلى روابط تلقائيًا. إذا أفسد ذلك شيئًا مثل رقم طلب، فأوقفه بـ <meta name="format-detection" content="telephone=no">.

الرسائل المزعجة وعناوين البريد

العنوان في رابط mailto يستطيع قراءته أي روبوت ينزّل الصفحة. حيل مثل كتابة hello [at] example [dot] com أو تجميع العنوان بـ JavaScript توقف بعض أدوات الجمع البسيطة، لكنها تجعل الرابط أصعب استخدامًا أيضًا. نموذج التواصل، المشروح في النماذج في HTML، يُبقي العنوان خارج الصفحة تمامًا. وفي معظم المواقع، يكون مرشح جيد للرسائل المزعجة في صندوق الوارد هو الحل الأبسط.

تجنّب <form action="mailto:...">. فهو يعتمد على تطبيق البريد لدى القارئ، ويرسل الحقول مرمَّزة بترميز URL وصعبة القراءة، ولا يعطيك أي تأكيد بأن شيئًا قد أُرسل.

أخطاء شائعة

نسيان mailto:. href="hello@example.com" رابط نسبي إلى صفحة تحمل اسم العنوان.
مسافات أو # بلا ترميز في الموضوع أو النص. رمّز القيم بـ %20 و%23، أو بـ encodeURIComponent.
استخدام + للمسافات. تظهر كعلامة زائد.
علامة ? ثانية بدلًا من &. المعامل الأول فقط يأتي بعد ?، والبقية تُربط بـ &.
«راسلنا» كنص وحيد، وهذا لا يترك لمستخدمي البريد عبر المتصفح شيئًا ينسخونه.
أرقام هاتف محلية في tel:. أضف رمز الدولة.

الأسئلة الشائعة

كيف أنشئ رابط بريد إلكتروني في HTML؟

استخدم رابطًا تبدأ href فيه بـ mailto: متبوعة بالعنوان: <a href="mailto:hello@example.com">hello@example.com</a>. النقر عليه يفتح رسالة جديدة في تطبيق البريد الافتراضي لدى القارئ.

كيف أضيف موضوعًا إلى رابط mailto؟

أضفه كمعامل استعلام بعد ?: mailto:hello@example.com?subject=Order%20question. رمّز المسافات بـ %20، واربط المعاملات الإضافية بـ &، مثل ?subject=Hi&body=Hello.

كيف أرسل رابط mailto إلى عدة مستلمين؟

افصل العناوين بفواصل: mailto:ana@example.com,bob@example.com. واستخدم المعاملين cc= وbcc= للنسخ: mailto:ana@example.com?cc=bob@example.com&bcc=cy@example.com.

كيف أجعل رقم الهاتف قابلًا للنقر في HTML؟

استخدم رابط tel: مع الرقم بالصيغة الدولية: <a href="tel:+15551234567">+1 555 123 4567</a>. على الهواتف يبدأ مكالمة، وعلى الحاسوب يفتح تطبيق الاتصال المثبت إن وُجد.

لماذا لا يفعل رابط mailto شيئًا؟

الرابط يسلّم العنوان فقط إلى تطبيق البريد الافتراضي. إذا لم يكن لدى القارئ تطبيق مُعدّ، وهذا شائع على الحواسيب التي تستخدم البريد عبر المتصفح، فلن يحدث شيء مفيد. اعرض العنوان كنص للرابط كي يمكن نسخه.

مفاهيم ذات صلة