How to send mail from contact form in html

To send mail from a contact form in HTML, you'll need to use a combination of HTML, CSS, and JavaScript, along with a server-side programming language like PHP or Node.js. Here's a step-by-step guide to help you achieve this:

HTML Form

Create an HTML form with the necessary fields (e.g., name, email, message) and an "Send" button:

<form id="contact-form">
  <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">
</form>

JavaScript

Use JavaScript to capture the form data and send it to your server-side script:

const form = document.getElementById('contact-form');
form.addEventListener('submit', (e) => {
  e.preventDefault();
  const name = document.getElementById('name').value;
  const email = document.getElementById('email').value;
  const message = document.getElementById('message').value;
  // Send the data to your server-side script
  fetch('/send-mail', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify({ name, email, message }),
  })
   .then((response) => response.json())
   .then((data) => {
      if (data.success) {
        alert('Message sent successfully!');
      } else {
        alert('Error sending message. Please try again.');
      }
    })
   .catch((error) => console.error(error));
});

Server-side Script (PHP or Node.js)

Create a server-side script to handle the form data and send the email. For this example, we'll use PHP.

PHP

<?php
// Configuration
$to = '[email protected]';
$subject = 'Contact Form Submission';

// Get the form data
$name = $_POST['name'];
$email = $_POST['email'];
$message = $_POST['message'];

// Validate the form data
if (!filter_var($email, FILTER_VALIDATE_EMAIL)) {
  die('Invalid email address');
}

// Send the email
$headers = 'From: '. $email. "\r\n".
           'Reply-To: '. $email. "\r\n".
           'Content-Type: text/plain; charset=UTF-8';
mail($to, $subject, $message, $headers);

// Return a success response
echo json_encode(['success' => true]);
?>

Node.js (using Express.js)

const express = require('express');
const app = express();
const nodemailer = require('nodemailer');

app.post('/send-mail', (req, res) => {
  const { name, email, message } = req.body;
  const transporter = nodemailer.createTransport({
    host: 'your-smtp-host',
    port: 587,
    secure: false, // or 'STARTTLS'
    auth: {
      user: '[email protected]',
      pass: 'your-password',
    },
  });

  const mailOptions = {
    from: email,
    to: '[email protected]',
    subject: 'Contact Form Submission',
    text: message,
  };

  transporter.sendMail(mailOptions, (error, info) => {
    if (error) {
      return console.log(error);
    }
    console.log('Email sent: ' + info.response);
    res.json({ success: true });
  });
});

Conclusion

In this example, we've created an HTML form, captured the form data using JavaScript, and sent it to a server-side script using the Fetch API. The server-side script (PHP or Node.js) validates the form data, sends the email using a mail library (e.g., PHP's mail() function or Node.js's nodemailer library), and returns a success response.

Remember to replace the placeholders (e.g., [email protected], your-smtp-host, your-password) with your actual email address, SMTP host, and password.

Mail Knowledge

How to send mail from contact form in html