How to make an HTML form send data to an email address?

Question

I just started learning html and CSS and I'm in a difficult situation. I'm trying to build a website, and I'm not sure how can I get an email sent to my email address from this form. Do I need to use JavaScript in order to get the email sent? How can I do it? Can somebody help me finish this page? The code is below:

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body {font-family: Arial, Helvetica, sans-serif;}
* {box-sizing: border-box;}

input[type=text], select, textarea {
  width: 100%;
  padding: 12px;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-sizing: border-box;
  margin-top: 6px;
  margin-bottom: 16px;
  resize: vertical;
}

input[type=submit] {
  background-color: #4CAF50;
  color: white;
  padding: 12px 20px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

input[type=submit]:hover {
  background-color: #45a049;
}

.container {
  border-radius: 5px;
  background-color: #f2f2f2;
  padding: 20px;
}
</style>
</head>
<body>

<h3>Contact Form</h3>

<div class="container">
  <form action="/action_page.php">
    <label for="fname">First Name</label>
    <input type="text" id="fname" name="firstname" placeholder="Your name..">

    <label for="lname">Last Name</label>
    <input type="text" id="lname" name="lastname" placeholder="Your last name..">

    <label for="country">Country</label>
    <select id="country" name="country">
      <option value="australia">Australia</option>
      <option value="canada">Canada</option>
      <option value="usa">USA</option>
    </select>

    <label for="subject">Subject</label>
    <textarea id="subject" name="subject" placeholder="Write something.." style="height:200px"></textarea>

    <input type="submit" value="Submit">
  </form>
</div>

</body>
</html>

If you just want the Client to use their default mail program then check [this](https://www.w3docs.com/snippets/html/how-to-create-mailto-links.html) out. Otherwise you need to use a Server Language like PHP, Node, Python, Java, or....You can assign the `AnchorElement.href = ` with JavaScript, if you wish to take information off of your page and put it in the email. — StackSlave, Mar 07 '20 at 00:02
Does this answer your question? [How to send an email from JavaScript](https://stackoverflow.com/questions/7381150/how-to-send-an-email-from-javascript) — Heretic Monkey, Mar 07 '20 at 00:07

Christian · Answer 1 · 2020-03-07T00:31:24.593

There is no feature in HTML to send the form submission directly to an email address.

The example below is from w3schools.com try html form mail where you can also see the result of the mentioned mailto: option:

<!DOCTYPE html>
<html>

<body>

    <h2>Send e-mail to someone@example.com:</h2>

    <form action="mailto:someone@example.com" method="post" enctype="text/plain">
        Name:
        <br>
        <input type="text" name="name">
        <br> E-mail:
        <br>
        <input type="text" name="mail">
        <br> Comment:
        <br>
        <input type="text" name="comment" size="50">
        <br>
        <br>
        <input type="submit" value="Send">
        <input type="reset" value="Reset">
    </form>

</body>

</html>

Your code seems to come from an example like this try hmtl form submits example, which sends query parameters as fname=John&lname=Doe to a php script, which is then supposed to send the email.

Read here how to send emails using php, but if you just starting html and css, this is a completely different story, I hope this helps anyway. A lot of stuff to read and study.

How to make an HTML form send data to an email address?

1 Answers1