Email Form design

email form Design Using HTML, CSS, JavaScript – Free Code

by


Email form Design Using HTML, CSS, JavaScript – Here Free Code example

<form id="email-form" onsubmit="submitForm(); return false;">
  <label for="email">Email:</label>
  <input type="email" id="email" placeholder="Enter your email address" required>
  <br>
  <label for="subject">Subject:</label>
  <input type="text" id="subject" placeholder="Enter the subject of the email" required>
  <br>
  <label for="message">Message:</label>
  <textarea id="message" placeholder="Enter your message" required></textarea>
  <br>
  <button type="submit">Send</button>
</form>

Now use your email form design project CSS code:

#email-form {
  width: 380px;
  padding: 15px;
  border: 1px solid #CCCCCC;
  margin: 0 auto;
}

label {
  font-weight: bold;
}

input, textarea {
  width: 100%;
  padding: 10px;
  border: 1px solid #CCCCCC;
  margin-bottom: 12px;
  box-sizing: border-box;
}

button[type="submit"] {
  background-color: #4CAF44;
  color: white;
  padding: 10px 18px;
  border: none;
  cursor: pointer;
}

button[type="submit"]:hover {
  background-color: #45a045;
}

Now use your project javascript code:

function submitForm() {
  const email = document.getElementById("email").value;
  const subject = document.getElementById("subject").value;
  const message = document.getElementById("message").value;

  alert(`Email: ${email}\nSubject: ${subject}\nMessage: ${message}`);
}
email form design example
email form design example

This creates a simple email form with fields for the email address, subject, and message, and a submit button. The form uses the onsubmit attribute to call the submitForm() function when the form is submitted. The JavaScript function gets the values of the form fields and displays them in an alert box.

You can customize the form by changing the layout, colors, and styles of the form fields and labels using CSS, and adding validation to the form fields using JavaScript.

In the real-world example, you would need to use a server-side script to handle the form submission and send the email. JavaScript is not recommended use for sending emails because it’s the client-side script, and it doesn’t have access to the server-side resources.

Read also, Login page design using HTML CSS. and How to Creat Email Using Cpanel.

Leave a Comment