Mailto on Submit Button

Mailto on submit button

In HTML you can specify a mailto: address in the <form> element's [action] attribute.

<form action="mailto:youraddr@domain.tld" method="GET">
    <input name="subject" type="text" />
    <textarea name="body"></textarea>
    <input type="submit" value="Send" />
</form>

What this will do is allow the user's email client to create an email prepopulated with the fields in the <form>.

What this will not do is send an email.

How to use mailto on a self-submit form?

It is a LOT easier to read if you do not echo stuff

If you do, you need to concatenate PHP style and use the backticks for the JavaScript

NOTE: You need SINGLE quotes for the line with ${} javascript vars or the $ is interpreted:

echo "<script> 
      var email = \"".$maildest."\"; 
      var subject = encodeURIComponent(\"Request of the user\"); 
      var emailBody = encodeURIComponent(\`".$MAIL."\`);"
echo 'window.location = `mailto:${email}?subject=${subject}&body=${emailBody}`;';
echo "</script>";

Please note the backticks for the $MAIL and the last line since you likely have newlines in there

Also you need to escape spaces and special chars

Look in the console - the mailto normally works better as a form action

Without echo:

?>
An OUTLOOK window opened with the informations you entered. <br/>Send the email so we can take it into account.<br/>
<script>
    var email = "<?= $maildest ?>";
    var subject = encodeURIComponent("Request of the user");
    var emailBody = encodeURIComponent(`<?= $MAIL ?>`);
    window.location = `mailto:${email}?subject=${subject}&body=${emailBody}`;
    </script>
<? 
exit(0);
?>

Here is a version that does not use the server:

window.addEventListener("load", function() {  document.getElementById("form").addEventListener("submit", function(e) {    e.preventDefault();    var email = this.email.value,      subject = encodeURIComponent("Request of the user"),      elements = this.elements,      emailTexts = [];            [...elements].forEach(function(ele) {        if (ele.type!="submit") emailTexts.push(ele.name + ":" + ele.value)      })    var emailBody = encodeURIComponent(emailTexts.join("\n"));    var loc = `mailto:${email}?subject=${subject}&body=${emailBody}`;    console.log(loc)    window.location = loc;  });});

An OUTLOOK window will open with the informations you enter. <br/>Send the email so we can take it into account.<br/><form id="form" ....>  Email: <input type="text" name="email" value="" /><br/> Name: <input type="text" name="Name" value="" /><br/> Comment: <textarea name="Comment"></textarea><br/>  <input type="submit" /></form>

Contact Form Submit Button link to Email

Sadly (vanilla) HTML+CSS doesn't provide possibility to send emails. Such an action can be achieved with PHP. HTML is just a markup language (it tells your browser where various elements are located), whereas CSS is styling language (it tells the browser how do the HTML-defined elements look like).

Your code opens your default e-mail client, because that's what mailto action does.

Maybe this answer using PHP can be helpful for you in creating your form: https://stackoverflow.com/a/18382062/12631978

Form not working with Mailto correctly

You forgot to set the name attribute! The subject you can set as a parameter (subject) on the email address. Try the following code:

<form action="mailto:example@example.com?subject=Test" method="post" enctype="text/plain" class="form-horizontal">  <div class="form-group">    <label for="name" class="col-sm-2 control-label">Name</label>    <div class="col-sm-10">      <input type="text" class="form-control" name="name" id="name" placeholder="Name">    </div>  </div>  <div class="form-group">    <label for="company" class="col-sm-2 control-label">Company</label>    <div class="col-sm-10">      <input type="text" class="form-control" name="company" id="company" placeholder="Company">    </div>  </div>  <div class="form-group">    <label for="email" class="col-sm-2 control-label">Email</label>    <div class="col-sm-10">      <input type="email" class="form-control" name="email" id="email" placeholder="Email">    </div>  </div>  <div class="form-group">    <label for="message" class="col-sm-2 control-label">Message</label>    <div class="col-sm-10">      <textarea class="form-control" rows="3" name="message" placeholder="Your Message"></textarea>    </div>  </div>  <div class="form-group">    <div class="col-sm-offset-2 col-sm-10">      <button type="submit" class="btn btn-default">Submit</button>    </div>  </div></form>

How do I code my submit button go to an email address

You might use Form tag with action attribute to submit the mailto.

Here is an example:

<form method="post" action="mailto:youremail@youremail.com" >
<input type="submit" value="Send Email" /> 
</form>

Is it possible to use the mailto function to submit a form or is it only possible through PHP/JS?

mailto: URLs for <form> actions are highly unreliable as they depend on the user having an email client, which the browser can successfully communicate with, set up for the user's mail service, and set as the default for the system. They also depend on the user confirming the sending of the email in their email client.

For anything remotely reliable you need to submit the data over HTTP (preferably HTTPS) and process it on a server.

You can process it with PHP or any other programming language (limited only by what your hosting allows). You can write your own program, host a program written by a third-party, or use a third-party service to send the email (which would mean submitting the data to a third-party URL).

Mailto on Submit Button