Building Your Learning Module...
Getting things ready for you!
Find videos you like?
Save to resource drawer for future reference!
Email and telephone links trigger actions instead of navigating to a URL.
These special links use protocols like mailto: for emails and tel: for phone numbers. When clicked, they open the user's default email client or phone app.
Open user's email client to compose a message
Initiate a phone call on mobile devices
Perfect for contact forms and support pages
Basic Email Link
Opens the default email client with the recipient address
<a href="mailto:contact@example.com">Send us an email</a>With Subject Line
Pre-fills the email subject line
<a href="mailto:info@example.com?subject=Hello">Contact</a>With CC, BCC & Body
Include multiple recipients, body text, and formatting
<a href="mailto:info@example.com?cc=other@example.com&bcc=hidden@example.com&subject=Topic&body=Hello">Send Email</a>Multiple Recipients
Separate multiple emails with commas
<a href="mailto:email1@example.com,email2@example.com">Email Team</a>Basic Phone Link
On mobile devices, starts a phone call. On desktop, may trigger VoIP apps
<a href="tel:+1-555-123-4567">Call Us</a>Format: International
Use international format with + sign and country code
<a href="tel:+1-555-0123">+1 (555) 0123</a>Display Format Different from Link
href uses digits only, display shows formatted number
<a href="tel:5551234567">(555) 123-4567</a>With Extension
Add extension using comma pause or special codes
<a href="tel:+1-555-0123,123">Call (ext. 123)</a>Display contact details with clickable email and phone links
<div class="contact-card">
<h2>📞 Get in Touch</h2>
<div class="contact-item">
<strong>Email:</strong>
<a href="mailto:hello@example.com" class="contact-link">
hello@example.com
</a>
</div>
<div class="contact-item">
<strong>Phone:</strong>
<a href="tel:+1-555-0123" class="contact-link">
(555) 0123
</a>
</div>
<div class="contact-item">
<strong>Support:</strong>
<a href="mailto:support@example.com?subject=Support%20Request" class="contact-link">
support@example.com
</a>
</div>
</div>Loading preview...
Various ways to contact with email and phone options
<div class="contact-grid">
<div class="contact-method">
<h3>📧 Email Sales</h3>
<a href="mailto:sales@example.com?subject=Sales%20Inquiry" class="btn">
sales@example.com
</a>
</div>
<div class="contact-method">
<h3>🛠️ Technical Support</h3>
<a href="mailto:support@example.com?subject=Technical%20Support" class="btn">
support@example.com
</a>
</div>
<div class="contact-method">
<h3>☎️ Call Support</h3>
<a href="tel:+1-555-9999" class="btn">
1-555-9999
</a>
</div>
<div class="contact-method">
<h3>📱 SMS</h3>
<a href="sms:+1-555-9999?body=Hello" class="btn">
Text: 1-555-9999
</a>
</div>
</div>Loading preview...
Email, phone, and special linking options
<section class="contact-section">
<h2>How to Reach Us</h2>
<div class="contact-options">
<div class="option">
<h3>📧 Send Email</h3>
<p>Get a response within 24 hours</p>
<a href="mailto:hello@example.com?subject=Hello&body=I have a question..." class="link">
Send Message
</a>
</div>
<div class="option">
<h3>☎️ Call Directly</h3>
<p>Mon-Fri, 9am-5pm EST</p>
<a href="tel:+1-800-555-0123" class="link">
1-800-555-0123
</a>
</div>
<div class="option">
<h3>💬 Live Chat</h3>
<p>Instant support available</p>
<a href="javascript:void(0)" class="link">
Start Chat
</a>
</div>
</div>
</section>Loading preview...
Simple Email
<a href="mailto:info@example.com">Email Us</a>Email with Subject
<a href="mailto:info@example.com?subject=Hello">Email</a>Simple Phone
<a href="tel:+1-555-0123">Call Us</a>SMS Message
<a href="sms:+1-555-0123">Text Us</a>