How to submit a form using mailto in form action?

I have an error when I try to submit my form, I have a message who say something like "ce formulaire n'est pas sécurise. la saisie automatique a été désactivée."

My goal is when the user submit the form, you have the email windows with all the values he wrote.

<form method="get" enctype="multipart/form-data" action="mailto:test.com">
  <div class="mb-4">
    <label for="fullName"></label>
    <input class="border-b border-color-brown shadow appearance-none w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none my-3" id="fullName" type="text" placeholder="Full Name">
    <label for="subject"></label>
    <input class="border-b border-color-brown shadow appearance-none w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none my-3" id="subject" type="text" placeholder="Subject">
    <label for="email"></label>
    <input class="border-b border-color-brown shadow appearance-none w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none my-3" id="email" type="email" placeholder="Email">
    <label for="comment"></label>
    <textarea name="comment" id="comment" class="border-b border-color-brown shadow appearance-none focus:outline-none w-full py-2 px-3 text-gray-700 leading-tight py-2 my-3" placeholder="Comment"></textarea>
  </div>
  <div class="flex justify-center">
    <input class="bg-color-brown hover:bg-color-light-brown text-white font-bold py-2 px-4 rounded text-color-black-brown" type="submit" value="send">
  </div>
</form>

Solution

Just because .. I took the time to edit your HTML, and set up a working fiddle that will mailto the correct way.. The proof of concept is in the console.log -- Here is an actual working example as well

There is no need to wrap it up in a <form> since you're not using action -- You can make a stand alone form. Also the name attributes are uneccessary as well, since we're not using <form>

Also since it will be sent directly from the user's default email client, there is no need for an email field.

function sendEmail() {
  var link = document.getElementById('send_email');
  var name = document.getElementById('fullName').value;
  var subject = document.getElementById('subject').value;
  var message = "Hello my name is " + name + " -- " + document.getElementById('comment').value;
  var email = "[email protected]";
  var href = "mailto:" + email + "?subject=" + subject + "&body=" + message;
  console.log(href);
  link.setAttribute("href", href);
}

<div class="mb-4">
  <label for="fullName"></label>
  <input class="border-b border-color-brown shadow appearance-none w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none my-3" id="fullName" type="text" placeholder="Full Name" onKeyUp="sendEmail()">
  <label for="subject"></label>
  <input class="border-b border-color-brown shadow appearance-none w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none my-3" id="subject" type="text" placeholder="Subject" onKeyUp="sendEmail()">
  <label for="comment"></label>
  <textarea id="comment" class="border-b border-color-brown shadow appearance-none focus:outline-none w-full py-2 px-3 text-gray-700 leading-tight py-2 my-3" placeholder="Comment" onKeyUp="sendEmail()"></textarea>
</div>
<div class="flex justify-center">
  <a href="" id="send_email"><button class="bg-color-brown hover:bg-color-light-brown text-white font-bold py-2 px-4 rounded text-color-black-brown" href="">Send Email</button></a>
</div>