Search code examples
javascripthtmlcssform-submit

FormSubmit email arriving blank

As the title suggests, the form submit emails sent from my website are arriving but without the name or the email or the body. There are several other posts about this specific issue and none of their solutions worked. Here is what I see : screenshot Here is my code :

<div class="right-contact">
  <form action="https://formsubmit.co/[myemail]@gmail.com" method="POST" enctype="text/plain" class="contact-form">
    <div class="input-control i-c-2">
       <input type="text" name="name" required placeholder="Your Name">
       <input type="email" name="email" required placeholder="Your Email">
    </div>
    <div class="input-control">
      <input type="text" name="Subject" required placeholder="Subject...">
     </div>
     <div class="input-control">
     <textarea name="Description" id="" cols="15" rows="8" placeholder="Description..."></textarea>
     </div>
     <div class="container-submit-download">
     <div class="submit-btn">
       <button class="main-btn send-email-btn" type="submit">
        <span class="btn-text">Submit</span>
        <span class="btn-icon">
        <i class="fa-solid fa-paper-plane"></i>
        </span>
       </button>
     </div>
</div>
I've also read on one of the posts that the javascript might be wipping the content of the body so here is my js code :

const sections = document.querySelectorAll('.section');
const sectBtns = document.querySelectorAll('.controls');
const sectBtn = document.querySelectorAll('.control');
const allSection = document.querySelector('.main-content');


function PageTransitions() {
  // Button click active class
  for (let i = 0; i < sectBtn.length; i++) {
    sectBtn[i].addEventListener('click', function() {
      let currentBtn = document.querySelectorAll('.active-btn');
      currentBtn[0].className = currentBtn[0].className.replace('active-btn', '');
      this.className += ' active-btn';
      // Both of these work
      // this.className += ' active-btn';  Here we added a space between the  ' and the 
      class(active - btn)
      // sectBtn[i].classList.add("active-btn");  Here we use the 'classList' to add a new 
      class to an HTML element
    })
  }

  // Section Active
  allSection.addEventListener('click', (e) => {
    const id = e.target.dataset.id;
    if (id) {
      // Remove selected from other btns (buttons)
      sectBtn.forEach((btn) => {
        btn.classList.remove('active');
      })
      e.target.classList.add('active');

      // Hide other sections
      sections.forEach((section) => {
        section.classList.remove('active');
      })

      const element = document.getElementById(id);
      element.classList.add('active');
    }
  })

  // Toggle Theme

  const thmeBtn = document.querySelector('.theme-btn');
  thmeBtn.addEventListener('click', () => {
    let element = document.body;
    element.classList.toggle('light-mode');
  })
}

PageTransitions();

Any help would be appreciated, Thank :)

Solution

  • There are only two standard encoding formats for browser form submission: multi-part (which is mormally only used when uploading files) and URL-encoded. enctype="text/plain" is not a standard format.

    The default is application/x-www-form-urlencoded, so you can just omit the enctype attribute of the form. If you want to send in multi-part format, you would use enctype="multipart/form-data".