How to submit a form using mailto in form action?

Question

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>

Only `textarea` has a `name` attribute. And `mailto:` has poor support in forms. — gre_gor, Feb 21 '23 at 21:21
1) as already mentioned, most of your inputs are missing a `name`; 2) the `mailto:` is not an email address; 3) According to most other examples here inputs can only include `subject`, `body`, `cc` and `bcc`, eg https://stackoverflow.com/questions/12626940/mailto-on-submit-button, https://stackoverflow.com/questions/52637406/how-do-i-add-html-form-data-to-a-mailto-link, https://stackoverflow.com/questions/17996602/html-mailto-form-prefill-subject-and-body, https://stackoverflow.com/questions/69627636/html-form-mailto-mail-body-is-empty-no-matter-what-got-filled-out ... — Don't Panic, Feb 21 '23 at 21:43
As to the actual error, it looks like a duplicate of this: https://stackoverflow.com/questions/65250821/html-form-with-mailto-action-does-not-work-due-to-insecure-endpoint — Don't Panic, Feb 21 '23 at 21:43
Does this answer your question? [HTML form with mailto action does not work due to insecure endpoint](https://stackoverflow.com/questions/65250821/html-form-with-mailto-action-does-not-work-due-to-insecure-endpoint) — Don't Panic, Feb 21 '23 at 21:44
@Don'tPanic "mailto: is not an email address" its my fault when i tried to post ma code here, i changed my real email address. "most of your inputs are missing a name" its not the error because i have the error on the textareat too — Imrickjames, Feb 21 '23 at 22:27

score 1 · Accepted Answer · answered Feb 21 '23 at 21:58

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 = "you@yourdomain.com";
  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>

Thank you it works, I thought I could do it without going through JS — Imrickjames, Feb 21 '23 at 22:40

score -2 · Answer 2 · answered Feb 21 '23 at 21:15

I can't see how this has anything to do with tailwind, besides having tailwindcss classes. The question at best is about html.

But regardless here is an answer.

You can't achieve that with a form without processing the form input. The closest you can do is using javascript to create a link to a prefilled email.

Here is an example how to do it from another question

How to submit a form using mailto in form action?

2 Answers2