How to get mail alerts with html and css

To get mail alerts with HTML and CSS, you'll need to create a simple web page that sends an email notification when a user submits a form. Here's a step-by-step guide:

Step 1: Create an HTML form

Create an HTML file (e.g., index.html) with the following code:

<!DOCTYPE html>
<html>
<head>
  <title>Mail Alert</title>
  <style>
    /* Add some basic styling to make it look nice */
    body {
      font-family: Arial, sans-serif;
    }
  </style>
</head>
<body>
  <h1>Mail Alert</h1>
  <form id="mail-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>
    <input type="submit" value="Send Mail">
  </form>
</body>
</html>

This HTML code creates a simple form with two input fields (name and email) and a submit button.

Step 2: Add JavaScript to send the email

Add the following JavaScript code to the HTML file (inside the <body> tag):

<script>
  // Get the form elements
  const form = document.getElementById('mail-form');
  const nameInput = document.getElementById('name');
  const emailInput = document.getElementById('email');

  // Add an event listener to the form submission
  form.addEventListener('submit', (e) => {
    e.preventDefault(); // Prevent the default form submission behavior

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

    // Create a new email message
    const mailto = `mailto:${email}?subject=Mail%20Alert&body=Hello%20${name}!`;

    // Open the email client with the new message
    window.location.href = mailto;
  });
</script>

This JavaScript code gets the form elements, adds an event listener to the form submission, and creates a new email message using the mailto protocol. When the form is submitted, it opens the email client with the new message.

Step 3: Add CSS to style the form

Add the following CSS code to the HTML file (inside the <head> tag):

/* Add some basic styling to make it look nice */
body {
  font-family: Arial, sans-serif;
}

#mail-form {
  max-width: 300px;
  margin: 40px auto;
  padding: 20px;
  border: 1px solid #ccc;
  border-radius: 10px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

#mail-form label {
  display: block;
  margin-bottom: 10px;
}

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

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

#mail-form input[type="submit"]:hover {
  background-color: #3e8e41;
}

This CSS code adds some basic styling to the form, making it look nicer and more user-friendly.

That's it!

Save the HTML file and open it in a web browser. Fill out the form and submit it. The email client should open with a new message containing the form data.

Note: This code uses the mailto protocol, which is supported by most email clients. However, some email clients may not support this protocol or may require additional configuration to work properly.

Mail Knowledge

How to get mail alerts with html and css