How to send mail in html form

To send an email using an HTML form, you'll need to use a combination of HTML, CSS, and JavaScript to create the form, and then use a server-side programming language like PHP, Python, or Node.js to process the form data and send the email.

Here's a basic example of how you can create an HTML form to send an email:

HTML Form

<form id="contact-form" action="send-email.php" method="post">
  <label for="name">Name:</label>
  <input type="text" id="name" name="name"><br><br>
  <label for="email">Email:</label>
  <input type="email" id="email" name="email"><br><br>
  <label for="message">Message:</label>
  <textarea id="message" name="message"></textarea><br><br>
  <input type="submit" value="Send Email">
</form>

In this example, the form is sent to a PHP file called send-email.php using the action attribute. The method attribute is set to post, which means that the form data will be sent to the server using the HTTP POST method.

PHP Script (send-email.php)

<?php
// Check if the form has been submitted
if ($_SERVER["REQUEST_METHOD"] == "POST") {
  // Get the form data
  $name = $_POST["name"];
  $email = $_POST["email"];
  $message = $_POST["message"];

  // Set the email headers
  $to = "[email protected]";
  $subject = "Contact Form Submission";
  $headers = "From: $email\r\nReply-To: $email\r\nContent-Type: text/plain; charset=UTF-8";

  // Set the email body
  $body = "Name: $name\nEmail: $email\nMessage: $message";

  // Send the email using the mail() function
  mail($to, $subject, $body, $headers);

  // Display a success message
  echo "Thank you for contacting us!";
} else {
  // Display an error message if the form has not been submitted
  echo "Error: Form has not been submitted.";
}
?>

In this example, the PHP script checks if the form has been submitted using the $_SERVER["REQUEST_METHOD"] variable. If the form has been submitted, it gets the form data using the $_POST superglobal, sets the email headers and body, and sends the email using the mail() function. Finally, it displays a success message.

JavaScript (optional)

// Add an event listener to the form submission event
document.getElementById("contact-form").addEventListener("submit", function(event) {
  // Prevent the default form submission behavior
  event.preventDefault();

  // Get the form data
  var name = document.getElementById("name").value;
  var email = document.getElementById("email").value;
  var message = document.getElementById("message").value;

  // Send the form data to the server using AJAX
  var xhr = new XMLHttpRequest();
  xhr.open("POST", "send-email.php", true);
  xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
  xhr.send("name=" + name + "&email=" + email + "&message=" + message);
});

In this example, the JavaScript code adds an event listener to the form submission event. When the form is submitted, it prevents the default form submission behavior using event.preventDefault(), gets the form data using document.getElementById(), and sends the form data to the server using AJAX.

Note that this is just a basic example, and you should consider implementing additional security measures, such as validating user input and preventing spam submissions.

Mail Knowledge

How to send mail in html form