Mailto form does not sent input fields

1

Hi all,

I’m working on my portfolio page at https://codepen.io/ddcornwall/pen/zEQELW and I’m having trouble with getting my form to work. I’ve compared my code to working examples on the web, but all my form does is open a new mail with no information in it. Is it a Codepen thing? Am I missing something?

Here is my code:


<section id="Contact">
<h1>Contact Me</h1>
<p>10/26/2017 - Not yet a working form.
<form action="mailto:myemail@gmail.com" method="post" enctype="text/plain">
  <div class="form-group">
    <label for="name">Name:</label>
    <input type="text" class="form-control" style="width:40%" id="name">
  </div>
  <div class="form-group">
    <label for="email">Email address:</label>
    <input type="email" class="form-control" style="width:40%" id="email">
  </div>
  <div class="form-group">
    <label for="msg">Message (500 characters max):</label>
    <input type="text" size="500" class="form-control" style="width:50%; height:200px" id="msg">
  </div>

  <button type="submit" value="send" class="btn btn-default">Submit</button>
</form>
</section>  
<!--End Contact Form-->

Thanks in advance for any ideas to try.

2

The form action in an online form needs to be a server-side program that will read the values of the different form fields, talk and authenticate itself to an SMTP server (or alternatively, use a 3rd-party mail API) to send out the mail.

The mailto: html tag is just an href to open the user’s native email client on their computer. You cannot use it for online forms.

You can use this API service to send out mail. Free for 1st 10,000 emails.
https://www.mailgun.com/

3

I respectfully disagree. I copied and pasted the following code from w3schools into a codepend at https://codepen.io/ddcornwall/pen/eemLwj :slight_smile:

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

It does exactly what I’m aiming for without anything server side. Crude, but it will do for now.

Aside from a few bells and whistles and attempts to make the form accessible to screen readers it seems like my form code is just like the example from W3Schools. Except their code inserts the form fields and my does not.

Anyone else have ideas?

4

I don’t know what you’re aiming for, but your code above, all it does is open up a new message window using the user’s email client with the body filled as

name=John Doe
mail=asdf@asdfsd.com
comment=test

The Subject line (for my browser) is “Form Post from Firefox Developer Edition”.

And the “To” address is "someone@example.com" Is that where you wish to send the message? To "someone@example.com" ?

And the user still has to click “SEND” button on whatever email client they have.

If that’s good enough for you and your users, that’s okay I guess. You’re counting on the user to change the “TO:” field and click SEND.

But if the user didn’t click the secondary SEND button on their email program, then the message doesnt get sent.

So the “SEND” button on your online form doesn’t really send anything… might as well rename it “LAUNCH EMAIL PROGRAM” instead.

5

The link you sent just opens a mail client on my computer, it doesn’t send on it’s own still needs the computer to have a mail client.

6