I am a student and I need help with the last part of my website. I did try to find out myself and I asked my friend, but I am still learning code which is why I am struggling. I want a functional contact form without PHP. I copied the form action, and the CSS and HTML function smoothly, but it's just when I press submit, the email that pops up is empty, it only has the address the email is addressed to, not the information an end user would input. I it to be able to display the inputted information. If anyone can help me I would deeply appreciate it. Attached is the HTML and CSS.

    <form action="MAILTO:[email protected]" method="POST" enctype="text/plain">
<div class="containercontact">
  
  <div class="contact-box">
    <div class="left1"></div>
    <div class="right1">
      <h2>Contact Us</h2>
      <input type="text" class="field" placeholder="Your Name">
      <input type="text" class="field" placeholder="Your Email">
      <input type="text" class="field" placeholder="Phone">
      <textarea placeholder="Message" class="field"></textarea>
      <button class="btn">Send</button>
    </div>
  </div>
</div>

    /*contact us*/
.containercontact {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 70px 100px;
}

.containercontact:after {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  background: url("images/beautiul.jpeg") no-repeat center;
  background-size: cover;
  filter: blur(50px);
  z-index: -1;
}
.contact-box {
  max-width: 850px;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  justify-content: center;
  align-items: center;
  text-align: center;
  background-color: #fff;
  box-shadow: 0px 0px 19px 5px rgba(0, 0, 0, 0.19);
}

.left1 {
  background: url("images/beautiul.jpeg") no-repeat center;
  background-size: cover;
  height: 100%;
}

.right1 {
  padding: 25px 40px;
}

h2 {
  position: relative;
  padding: 0 0 10px;
  margin-bottom: 10px;
}

h2:after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  height: 4px;
  width: 50px;
  border-radius: 6px;
}

.field {
  width: 100%;
  border: 2px solid rgba(0, 0, 0, 0);
  outline: none;
  background-color: rgba(230, 230, 230, 0.6);
  padding: 0.5rem 1rem;
  font-size: 1.1rem;
  margin-bottom: 22px;
  transition: 0.3s;
}

.field:hover {
  background-color: rgba(0, 0, 0, 0.1);
}

textarea {
  min-height: 150px;
}

.btn {
  width: 100%;
  padding: 0.5rem 1rem;
  background-color: grey;
  color: #fff;
  font-size: 1.1rem;
  border: none;
  outline: none;
  cursor: pointer;
  transition: 0.3s;
}

.btn:hover {
  background-color: teal;
}

.field:focus {
  border: 2px solid teal;
  background-color: #fff;
}

@media screen and (max-width: 880px) {
  .contact-box {
    grid-template-columns: 1fr;
  }
  .left {
    height: 200px;
  }
}

CodePudding user response：

Add name attribute to form fields

<form action="MAILTO:[email protected]" method="POST" enctype="text/plain">
  <div class="containercontact">
    <div class="contact-box">
      <div class="left1"></div>
      <div class="right1">
        <h2>Contact Us</h2>
        <input type="text" name="name" class="field" placeholder="Your Name">
        <input type="text" name="email" class="field" placeholder="Your Email">
        <input type="text" name="phone" class="field" placeholder="Phone">
        <textarea placeholder="Message" name="message" class="field"></textarea>
        <button class="btn">Send</button>
      </div>
    </div>
  </div>
</form>

Add following code before the </body> tag

<script>
  document.querySelector('form').addEventListener('submit', (e) => {
    e.preventDefault();

    const formData = new FormData(e.target);

    var subject = 'New message from website!';
    var message = 'Name: '   formData.get('name')   '\n\n';
    message  = 'Email: '   formData.get('email')   '\n\n';
    message  =' Phone: '   formData.get('phone')   '\n\n';
    message  = 'Message: '   formData.get('message')   '\n\n';

    var mailto = encodeURI('mailto:[email protected]?subject=' subject 'body=' message);

    window.location.href = mailto;
  });
<script>

CodePudding user response：

I think you need to give "name" attribute to form elements.

<form action="mailto:[email protected]" method="POST" enctype="text/plain">
    <div class="containercontact">
      <div class="contact-box">
        <div class="left1"></div>
        <div class="right1">
          <h2>Contact Us</h2>
          <input type="text" name="name" class="field" placeholder="Your Name">
          <input type="text" name="mail" class="field" placeholder="Your Email">
          <input type="text" name="phone" class="field" placeholder="Phone">
          <textarea name="message" placeholder="Message" class="field"></textarea>
          <input type="submit" value="Send" class="btn" />
        </div>
      </div>
    </div>
  </form>