Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
How do we send an email using HTML forms?
To send an email using HTML forms, you can use the mailto protocol in the form's action attribute. This method opens the user's default email client with pre-filled information from the form fields. However, this approach has significant limitations and is not recommended for production websites.
Syntax
Following is the basic syntax for using mailto in HTML forms −
<form action="mailto:recipient@example.com" method="post" enctype="text/plain"> <!-- form fields --> </form>
The enctype="text/plain" attribute ensures the form data is sent in a readable plain text format rather than URL-encoded format.
Basic Email Form Example
Following example demonstrates a simple contact form using the mailto method −
<!DOCTYPE html>
<html>
<head>
<title>Email Form Example</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>Student Contact Form</h2>
<form action="mailto:admin@example.com" method="post" enctype="text/plain">
<label for="sname">Student Name:</label><br>
<input type="text" id="sname" name="sname" required><br><br>
<label for="ssubject">Subject:</label><br>
<input type="text" id="ssubject" name="ssubject" required><br><br>
<label for="message">Message:</label><br>
<textarea id="message" name="message" rows="5" cols="40"></textarea><br><br>
<input type="submit" value="Send Email">
</form>
</body>
</html>
When the user clicks "Send Email", their default email client opens with the recipient address and form data pre-filled in the message body.
Advanced Mailto Parameters
You can enhance the mailto URL with additional parameters for subject, CC, BCC, and body text −
<!DOCTYPE html>
<html>
<head>
<title>Advanced Mailto Form</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>Contact Us</h2>
<form action="mailto:support@example.com?subject=Contact%20Form&cc=manager@example.com" method="post" enctype="text/plain">
<label for="name">Your Name:</label><br>
<input type="text" id="name" name="name" required><br><br>
<label for="email">Your Email:</label><br>
<input type="email" id="email" name="email" required><br><br>
<label for="inquiry">Inquiry Type:</label><br>
<select id="inquiry" name="inquiry">
<option value="general">General Question</option>
<option value="support">Technical Support</option>
<option value="billing">Billing Issue</option>
</select><br><br>
<label for="details">Details:</label><br>
<textarea id="details" name="details" rows="6" cols="50"></textarea><br><br>
<input type="submit" value="Send Message">
</form>
</body>
</html>
This form includes a pre-set subject line "Contact Form" and CC's the manager. The form data appears in the email body when submitted.
Mailto Parameters
Following table shows the available parameters for mailto URLs −
| Parameter | Description | Example |
|---|---|---|
subject |
Sets the email subject line | ?subject=Hello |
cc |
Carbon copy recipient | &cc=user@example.com |
bcc |
Blind carbon copy recipient | &bcc=admin@example.com |
body |
Pre-fills email body text | &body=Hello%20World |
Note − URL parameters must be encoded. Use %20 for spaces, %0A for line breaks, and & to separate multiple parameters.
Limitations of Mailto Forms
The mailto method has several significant drawbacks −
Email client dependency − Users must have an email client configured on their device. Many users rely only on web-based email services.
No server processing − Form data cannot be processed, validated, or stored on the server before sending.
Poor user experience − The form submission opens external software, interrupting the web browsing flow.
Security concerns − Email addresses are exposed in the HTML source code, making them vulnerable to spam bots.
Limited formatting − Form data appears as plain text without proper formatting or HTML styling.
Better Alternatives
For production websites, consider these more reliable alternatives −
Server-side processing − Use PHP, Node.js, Python, or other server-side languages with email libraries like PHPMailer or Nodemailer.
Third-party services − Services like Formspree, EmailJS, or Netlify Forms handle form processing and email delivery.
Contact form plugins − For CMS platforms like WordPress, use dedicated contact form plugins.
API integration − Use email service APIs like SendGrid, Mailgun, or Amazon SES for reliable delivery.
Conclusion
While HTML forms can send emails using the mailto protocol, this method is unreliable and provides a poor user experience. The mailto approach is only suitable for simple internal tools or prototypes. For production websites, always use server-side processing or third-party email services to ensure reliable email delivery and better user experience.
58K+ Views
