form

form.markdown

form

A Pen by Marjorie Roswell on CodePen.

License.

index.html

<form action="mailto:info@example.com" method="post">
  <input type="text" name="name" placeholder="Your name">
  <input type="email" name="email" placeholder="Your email address">
  <textarea name="message" placeholder="Your message"></textarea>
  <button type="submit">Send</button>
</form>

script.js

function validateForm() {
  // Check if the name field is empty.
  if (document.getElementById("name").value == "") {
    alert("Please enter your name.");
    return false;
  }

  // Check if the email field is empty.
  if (document.getElementById("email").value == "") {
    alert("Please enter your email address.");
    return false;
  }

  // Check if the email address is valid.
  var emailRegex = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,6}$/;
  if (!emailRegex.test(document.getElementById("email").value)) {
    alert("Please enter a valid email address.");
    return false;
  }

  // Check if the message field is empty.
  if (document.getElementById("message").value == "") {
    alert("Please enter a message.");
    return false;
  }

  // The form data is valid, so submit the form.
  document.getElementById("form").submit();
}

style.css

form {
  width: 500px;
  margin: 0 auto;
  padding: 20px;
  border: 1px solid #ccc;
}

input, textarea {
  width: 100%;
  padding: 10px;
  border: 1px solid #ccc;
}

button {
  background-color: #000;
  color: #fff;
  padding: 10px;
  border: none;
  cursor: pointer;
}