Question 45031 in Html Question posted in
Some basic documentation can be found here.

How to submit a form using mailto in form action? – Html

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>
Tags:

2

Answers


  1. 0

    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

    Login or Signup to reply.
  2. 0

    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>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search