Automated mailing system html

Here is an example of an automated mailing system using HTML and CSS:

HTML:

<!DOCTYPE html>
<html>
<head>
  <title>Automated Mailing System</title>
  <style>
    /* Add some basic styling to the page */
    body {
      font-family: Arial, sans-serif;
    }
   .mailing-system {
      width: 80%;
      margin: 40px auto;
      background-color: #f9f9f9;
      padding: 20px;
      border: 1px solid #ccc;
      border-radius: 10px;
      box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    }
   .mailing-system h2 {
      margin-top: 0;
    }
   .mailing-system form {
      margin-top: 20px;
    }
   .mailing-system input[type="text"],.mailing-system input[type="email"] {
      width: 100%;
      height: 40px;
      margin-bottom: 10px;
      padding: 10px;
      border: 1px solid #ccc;
    }
   .mailing-system input[type="submit"] {
      width: 100%;
      height: 40px;
      background-color: #4CAF50;
      color: #fff;
      padding: 10px;
      border: none;
      border-radius: 5px;
      cursor: pointer;
    }
   .mailing-system input[type="submit"]:hover {
      background-color: #3e8e41;
    }
  </style>
</head>
<body>
  <div class="mailing-system">
    <h2>Automated Mailing System</h2>
    <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>
  </div>
</body>
</html>

CSS:

/* Add some basic styling to the page */
body {
  font-family: Arial, sans-serif;
}

.mailing-system {
  width: 80%;
  margin: 40px auto;
  background-color: #f9f9f9;
  padding: 20px;
  border: 1px solid #ccc;
  border-radius: 10px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

.mailing-system h2 {
  margin-top: 0;
}

.mailing-system form {
  margin-top: 20px;
}

.mailing-system input[type="text"],.mailing-system input[type="email"] {
  width: 100%;
  height: 40px;
  margin-bottom: 10px;
  padding: 10px;
  border: 1px solid #ccc;
}

.mailing-system input[type="submit"] {
  width: 100%;
  height: 40px;
  background-color: #4CAF50;
  color: #fff;
  padding: 10px;
  border: none;
  border-radius: 5px;
  cursor: pointer;
}

.mailing-system input[type="submit"]:hover {
  background-color: #3e8e41;
}

JavaScript:

// Get the form elements
const nameInput = document.getElementById('name');
const emailInput = document.getElementById('email');
const messageInput = document.getElementById('message');
const submitButton = document.getElementById('submit');

// Add an event listener to the submit button
submitButton.addEventListener('click', (e) => {
  e.preventDefault();

  // Get the form data
  const name = nameInput.value;
  const email = emailInput.value;
  const message = messageInput.value;

  // Send the form data to the server using AJAX
  const xhr = new XMLHttpRequest();
  xhr.open('POST', 'sendmail.php', true);
  xhr.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
  xhr.send(`name=${name}&email=${email}&message=${message}`);

  // Display a success message
  alert('Message sent successfully!');
});

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'];

  // Send the email using PHP's mail function
  $to = '[email protected]';
  $subject = 'Automated Mailing System';
  $body = "Name: $name\nEmail: $email\nMessage: $message";
  mail($to, $subject, $body, 'From: [email protected]');

  // Display a success message
  echo 'Message sent successfully!';
}
?>

This is a basic example of an automated mailing system using HTML, CSS, and PHP. The system allows users to input their name, email, and message, and then sends the message to a specified email address using PHP's mail function. The system also displays a success message after the message has been sent.

Note that this is a very basic example and you should consider implementing additional security measures, such as validating user input and using a secure connection (HTTPS) to protect user data.

Mail Knowledge

Automated mailing system html