How to send to an email in HTML?

Question

I would like to create a form that sends the input of the form to a desired email when a submit button is clicked. Ideally, I would like to use HTML.

Here is what I've got so far:

<form class="row g-3 needs-validation" novalidate 
    action=”mailto:myemail@gmail.com”
    method=”POST”
    enctype=”multipart/form-data”
    name=”EmailForm”>
        <div class="col-md-4" style="margin-top: 2.4%">
            <div class="valid-feedback">
            </div>
        </div>
        <div class="col-md-4">
            <label for="floatingInput" class="form-label">First name</label>
            <input type="text" class="form-control" id="floatingInput" placeholder="Konnie"></div><br>
        <div class="col-md-4">
            <label for="floatingInput" class="form-label">Last name</label>
            <input type="text" class="form-control" id="floatingInput" placeholder="Smith" required>
        </div><br>
        <div class="form-floating mb-3">
                <input type="email" class="form-control" id="floatingInput" placeholder="name@example.com" required>
                <label for="floatingInput">Email address</label>
        </div>
  <div class="col-12"> <div class="form-check">
      <input class="form-check-input" type="checkbox" value="" id="invalidCheck" required>
      <label class="form-check-label" for="invalidCheck">
        Agree to terms and conditions
      </label> 
      <div class="invalid-feedback">
        You must agree before submitting.
      </div>
    </div>
  </div>
  <br>
  <div class="col-12">
    <button class="btn btn-primary" type="submit">Submit form</button>
  </div>
        </form>

When I try to submit the form, I get this error:

Not Found

The requested URL was not found on this server.

Of course it's not going to work if the user doesn't have a registered mail client (eg there's no program to respond to the mailto protocol.) — Roddy of the Frozen Peas, Sep 05 '21 at 13:55
you can't automatically send an email with a bare html form - this will only open the user's `mailto` handler — Daniel A. White, Sep 05 '21 at 13:55
Also, have you tried the form from [this question](https://stackoverflow.com/questions/12626940/mailto-on-submit-button)? If yes, try to gradually modify it to your needs and see where the error occurs — A_A, Sep 05 '21 at 13:55

score 0 · Answer 1 · answered Sep 05 '21 at 14:03

Follow the example below to send emails:

create a file index.html and put the following:

<form method="post" action="subscriberform.php">
 <textarea name="message"></textarea>
 <input type="submit">
</form>

create a PHP file subscribeform.php and put the following:

<?php

if($_POST["message"]) {

 mail("your@email.address", "Here is the subject line", $_POST["insert your message here"]. "From: an@email.address");

}
?>

Now upload these files on your hosting and try it out. If an email is not sent, then contact your hosting provider for your server configuration.

score 0 · Answer 2 · answered Sep 05 '21 at 14:07

Unfortunately, it‘s not possible to only use HTML when performing actions like sending E-Mails. A possible way would be to create an input like this:

<input id="receiver" />
<input id="text" />
<button onclick="sendMail()">Send</button>

And a button for sending the mail. Then add a hidden link tag in your HTML:

<a id="sender" style="display: none;">Sender</a>

Now add this script to your HTML:

function sendMail() {
  document.getElementById("sender").href = "mailto:" + document.getElementById("receiver").value + "&body=" + encodeURIComponent(document.getElementById("text").value;
  document.getElementById("sender").click();
}

This will open up the mailing program of the user, and the user only has to click on „Send“ in his mailing program. Everything else is pre-filled.

Afaik, the same is possible without javascript, e.g. in with the code snippet from [this answer](https://stackoverflow.com/a/12627093/6548154) — A_A, Sep 05 '21 at 14:09

sundeep sharma · Answer 3 · 2021-09-05T14:24:27.477

<form class="row g-3 needs-validation" novalidate action="mailto:myemail@gmail.com” method=”post”
    enctype=”multipart/form-data” name=”EmailForm”>
    <div class=" col-md-4" style="margin-top: 2.4%">
    <div class="valid-feedback">
    </div>
    </div>
    <div class="col-md-4">
        <label for="floatingInput" class="form-label">First name</label>
        <input type="text" class="form-control" id="floatingInput" placeholder="Konnie">
    </div><br>
    <div class="col-md-4">
        <label for="floatingInput" class="form-label">Last name</label>
        <input type="text" class="form-control" id="floatingInput" placeholder="Smith" required>
    </div><br>
    <div class="form-floating mb-3">
        <input type="email" class="form-control" id="floatingInput" placeholder="name@example.com" required>
        <label for="floatingInput">Email address</label>
    </div>
    <div class="col-12">
        <div class="form-check">
            <input class="form-check-input" type="checkbox" value="" id="invalidCheck" required>
            <label class="form-check-label" for="invalidCheck">
                Agree to terms and conditions
            </label>
            <div class="invalid-feedback">
                You must agree before submitting.
            </div>
        </div>
    </div>
    <br>
    <div class="col-12">
        <button class="btn btn-primary" type="submit">Submit form</button>
    </div>
</form>

Can you explain why this should work and the example from the OP not? I guess it's the type of quotes used — A_A, Sep 05 '21 at 14:47
before the action attribute quote was this ” and i replace the quote to this " so the code is working — sundeep sharma, Sep 05 '21 at 15:22

How to send to an email in HTML?

3 Answers3