在 HTML 上发送电子邮件

Question

I am making a website completely from scratch and I am facing a problem when I want to receive an email when the client presses the submit button. Here is my code on the form tag.

What am I doing wrong?

<form id="contactform" method="post" action="MAILTO:myemail@hotmail.com?    subject=subject&message=message">
  <p class="contact1"><label for="name">Name</label></p>
  <input id="name" name="name" placeholder="First and last name" required="" tabindex="1" type="text">

  <p class="contact"><label for="email">Email</label></p>
  <input id="email" name="email" placeholder="example@hotmail.com" required="" tabindex="2" type="text">

  <p class="contact"><label for="Subject">Subject</label></p>
  <input id="subject" name="subject" placeholder="Subject" required="" tabindex="2" type="text">

  <p class="contact"><label for="comment">Your Message</label></p>
  <textarea name="comment" id="comment" tabindex="4"></textarea> <br>
  <input name="submit" id="submit" tabindex="5" value="Send Message" type="submit">
</form>

Answer 1

The solution:

It is impossible to send emails with HTML, JavaScript, CSS or any client side language. You have to go server side. The most common choice for emails is PHP. So your opening form tag should look like this:

<form method="POST" action="mailer.php">

And then the code in mailer.php would be:

$name = $_POST["name"];
$message = $_POST["message"];
mail("your_email@site.com", "Subject", "Message from your site. \n Name: ".$name." \n Message: ".$message);

Bear in mind that this is a very basic email script and does not protect against script injection and XSS.

Answer 2

In order to pull this off you would need some level scripting (server-side I think... not sure if client side can do this...) to hold your values in a placeholder variable, and then repaint the screen with the and then inject them into the <a> tag.

If you want to simply pre-populate a standard link with a SUbject line, even body text, and use the individuals default mail client, you can dress up the link as such:

<a href="mailto:someone@yoursite.com?subject=This is an example SL
&body=Your body copy can go here \n ... and new lines can be made like that.
&cc=justincaseyouwantit@yoursite.com&bcc=final-protection@yoursite.com">
Click here to send an email</a>

if you wanted to use a form to build those links you would have to capture the form's input as variables, and then build the link with those variables defined, and then echo it to the screen.

DEMO

Answer 3

You're doing it totally wrong.

When the user would press submit button. The form would be redirected to the new page, with the link that is provided in the action attribute.

Remember, most of the users have some default Email Clients installed on their System. I have Google Mail set as Default, some folk out there might have Outlook, some of us would love to use Thunderbird (by Mozilla).

These programs would have their own Algorithm to send emails. So the code that you're using would never succeed. If does, then it would send you an email as

Sender: client_email
Subject: Subject
Body:

No data in the body tag, since you're not including that method at all.

The above would be the email recieved to you. Also, if you do so, the Form Data would be lost and the software would try to ask the user for data as a new cycle.

I think you need to do something like the following.

<form id="contactform" method="post" action="send_email.html"> 
    <p class="contact1"><label for="name">Name</label></p> 
    <input id="name" name="name" placeholder="First and last name" required="" tabindex="1" type="text">     

    <p class="contact"><label for="email">Email</label></p> 
    <input id="email" name="email" placeholder="example@hotmail.com" required="" tabindex="2" type="text">       

    <p class="contact"><label for="Subject">Subject</label></p> 
    <input id="subject" name="subject" placeholder="Subject" required="" tabindex="2" type="text">   

    <p class="contact"><label for="comment">Your Message</label></p> 
    <textarea name="comment" id="comment" tabindex="4"></textarea> <br>
    <input name="submit" id="submit" tabindex="5" value="Send Message" type="submit">
</form>

And then, handle the Email sending request on the Server-side, and send it yourself using the Server-side Language you're using.

In that way, you'll also get the email, and the content that User wrote and tried to send you.

Answer 4

I have to say: I am not a hundred percent sure. But it is not possible to send E-Mails via HTML. You need some kind of Server. Maybe try the Google AppEngine it is free(until some limit), easy to lern and has an extra E-Mail API.

Answer 5

It may not always work. Look at http://webdesign.about.com/cs/forms/a/aamailtobroke.htm

Personally I never used such solution. I use always PHP to send email

When I use your solution my e-mail client opens correctly but mail content doesn't look nice.

But when I use:

<form action="mailto:admin@example.com" enctype="text/plain" method="post">
<p>Name: <input name="Name" type="text" id="Name" size="40"></p>
<p>E-mail address: <input name="E-mail" type="text" id="E-mail" size="40"></p>
<p>Comment:</p>
<p><textarea name="Comment" cols="55" rows="5"
id="Comment"></textarea></p>
<p><input type="submit" name="Submit" value="Submit"></p>
</form>

it works really fine