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 to Create Mailto Forms?
The mailto form is a special type of HTML form that uses an email client to send form data directly via email instead of submitting to a web server. When the form is submitted, it opens the user's default email application with the form data pre-filled in the email body.
Mailto forms are particularly useful for simple contact forms on static websites where server-side processing is not available. They provide an easy way for visitors to send feedback, questions, or suggestions directly to a specified email address.
Syntax
The basic syntax for creating a mailto form uses the action attribute with a mailto: URL
<form method="post" action="mailto:email@domain.com" enctype="text/plain"> <!-- form elements --> </form>
The key attributes for mailto forms are
action Set to
mailto:recipient@email.commethod Should be
postfor mailto formsenctype Set to
text/plainfor readable email content
Basic Mailto Form
Example
Following example shows a simple mailto form with basic contact fields
<!DOCTYPE html>
<html>
<head>
<title>Basic Mailto Form</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>Contact Us</h2>
<form method="post" action="mailto:contact@example.com" enctype="text/plain">
<div style="margin-bottom: 15px;">
<label for="name">Name:</label><br>
<input type="text" id="name" name="Name" style="width: 300px; padding: 5px;">
</div>
<div style="margin-bottom: 15px;">
<label for="email">Email:</label><br>
<input type="email" id="email" name="Email" style="width: 300px; padding: 5px;">
</div>
<div style="margin-bottom: 15px;">
<label for="message">Message:</label><br>
<textarea id="message" name="Message" rows="5" cols="40" style="padding: 5px;"></textarea>
</div>
<input type="submit" value="Send Email" style="background-color: #4CAF50; color: white; padding: 10px 20px; border: none; cursor: pointer;">
</form>
</body>
</html>
When submitted, this form opens the user's email client with the recipient address and form data formatted in the email body.
Enhanced Mailto Form with Validation
For better user experience, we can add client-side validation to ensure required fields are filled before submission.
Example
<!DOCTYPE html>
<html>
<head>
<title>Enhanced Mailto Form</title>
<style>
.form-container {
max-width: 400px;
margin: 20px auto;
padding: 20px;
background-color: #f9f9f9;
border-radius: 8px;
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}
.form-group {
margin-bottom: 15px;
}
label {
display: block;
margin-bottom: 5px;
font-weight: bold;
}
input, textarea {
width: 100%;
padding: 8px;
border: 1px solid #ccc;
border-radius: 4px;
box-sizing: border-box;
}
.submit-btn {
background-color: #007bff;
color: white;
padding: 10px 20px;
border: none;
border-radius: 4px;
cursor: pointer;
margin-right: 10px;
}
.reset-btn {
background-color: #6c757d;
color: white;
padding: 10px 20px;
border: none;
border-radius: 4px;
cursor: pointer;
}
.error {
color: red;
font-size: 12px;
margin-top: 5px;
}
</style>
</head>
<body style="font-family: Arial, sans-serif;">
<div class="form-container">
<h2 style="text-align: center; color: #333;">Contact Form</h2>
<form name="contactForm" method="post" action="mailto:support@example.com"
enctype="text/plain" onsubmit="return validateForm()">
<div class="form-group">
<label for="fullname">Full Name *</label>
<input type="text" id="fullname" name="Full_Name" required>
<div id="nameError" class="error"></div>
</div>
<div class="form-group">
<label for="email">Email Address *</label>
<input type="email" id="email" name="Email" required>
<div id="emailError" class="error"></div>
</div>
<div class="form-group">
<label for="subject">Subject</label>
<input type="text" id="subject" name="Subject">
</div>
<div class="form-group">
<label for="message">Message *</label>
<textarea id="message" name="Message" rows="6" required></textarea>
<div id="messageError" class="error"></div>
</div>
<div style="text-align: center;">
<input type="submit" value="Send Message" class="submit-btn">
<input type="reset" value="Clear Form" class="reset-btn">
</div>
</form>
</div>
<script>
function validateForm() {
var name = document.forms["contactForm"]["Full_Name"].value;
var email = document.forms["contactForm"]["Email"].value;
var message = document.forms["contactForm"]["Message"].value;
var isValid = true;
// Clear previous errors
document.getElementById("nameError").innerHTML = "";
document.getElementById("emailError").innerHTML = "";
document.getElementById("messageError").innerHTML = "";
if (name.trim() === "") {
document.getElementById("nameError").innerHTML = "Name is required";
isValid = false;
}
if (email.trim() === "") {
document.getElementById("emailError").innerHTML = "Email is required";
isValid = false;
} else if (!/\S+@\S+\.\S+/.test(email)) {
document.getElementById("emailError").innerHTML = "Please enter a valid email";
isValid = false;
}
if (message.trim() === "") {
document.getElementById("messageError").innerHTML = "Message is required";
isValid = false;
}
return isValid;
}
</script>
</body>
</html>
This enhanced form includes validation to ensure all required fields are completed before opening the email client.
Mailto Form with Additional Parameters
You can enhance mailto forms by including additional email parameters like CC, BCC, and subject in the action attribute.
Example
<!DOCTYPE html>
<html>
<head>
<title>Mailto Form with Parameters</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>Support Request Form</h2>
<form method="post"
action="mailto:support@example.com?cc=admin@example.com&subject=Support%20Request"
enctype="text/plain">
<div style="margin-bottom: 15px;">
<label for="customer">Customer Name:</label><br>
<input type="text" id="customer" name="Customer_Name" required
style="width: 300px; padding: 5px;">
</div>
<div style="margin-bottom: 15px;">
<label for="priority">Priority:</label><br>
<select id="priority" name="Priority" style="width: 312px; padding: 5px;">
<option value="Low">Low</option>
<option value="Medium">Medium</option>
<option value="High">High</option>
<option value="Urgent">Urgent</option>
</select>
</div>
<div style="margin-bottom: 15px;">
<label for="issue">Issue Description:</label><br>
<textarea id="issue" name="Issue_Description" rows="5" cols="40"
required style="padding: 5px;"></textarea>
</div>
<input type="submit" value="Submit Request"
style=" 
878 Views
