How to send an email using only HTML5 and CSS

Question

I am trying to write a code which can send an email to a particular address on clicking submit button. Below i am mentioning my HTML code,on clicking submit i am not getting any email on my account.Please let me know what is to be done.

<form method=POST action="mailto:[email protected]" enctype="text/plain">
    <label for="name">Name:</label>
    <br>
    <input type="text" name="Name" id="name" value="Enter Name">
    <br>
    <label for="email">Email:</label>
    <br>
    <input type="email" name="email" id="email" value="Enter Email">
    <br>
    <label for="phone_number">Phone Number:</label>
    <br>
    <input type="tel" name="phone_number" id="phone_number" value="Enter Phone Number">
    <br>
    <input type="submit" name="Submit">
</form>

Answer 1

It is somewhat possible to "send" an e-mail only using HTML and not having to have any Server Side code running, but it's isn't really suggested. Using the mailto: URI Scheme you can set both the Subject, Body of the message and who it gets sent to. You will not be able to set who it gets sent from though, since the mail client that handles the URI Scheme of mailto: will handle that.

Below is a simple example of a form to setup a basic contact form. Remember, users will need to have a program that can handle the URI Scheme, and if they don't, nothing will happen. This doesn't send an e-mail, but creates one inside of their mail application.

<form method="GET" action="mailto:[email protected]" enctype="text/plain">
    <div>Subject</div>
    <input type="text" name="subject" />

    <div>Message</div>
    <textarea name="body"></textarea>

    <br/>
    <input type="submit" value="Send" />
</form>

The way this works if fairly simple. We use the "GET" method for the form to add the attributes to the end of the URI Scheme, which should be "subject" and "body". You can learn more about the URI mailto: scheme at http://en.wikipedia.org/wiki/Mailto

If you would like your contact form to contain even more information like Name, Phone Number, and other information, you can have Javascript handle the form submission. You can do this by adding an event listener for the 'submit' event.

<form method="GET" action="mailto:[email protected]" enctype="text/plain">
    <div>Subject</div>
    <input type="text" name="subject" />

    <div>Name</div>
    <input name="Name" />

    <div>E-Mail</div>
    <input name="E-Mail Address" />

    <div>Message</div>
    <textarea name="Message"></textarea>

    <br/>
    <input type="submit" value="Send" />

    <input type="hidden" name="body" />
</form>

<script>
   var form = document.getElementsByTagName('form')[0];
   form.addEventListener('submit',contact,false);
   function contact(e) {
      // Prevent Default Form Submission
      e.preventDefault();

      var target = e.target || e.srcElement;
      var i = 0;
      var message = '';

      // Loop Through All Input Fields
      for(i = 0; i < target.length; ++i) {
         // Check to make sure it's a value. Don't need to include Buttons
         if(target[i].type != 'text' && target[i].type != 'textarea') {
                // Skip to next input since this one doesn't match our rules
            continue;
         }

         // Add Input Name and value followed by a line break
         message += target[i].name + ': ' + target[i].value + "\r\n";
      }
      // Modify the hidden body input field that is required for the mailto: scheme
      target.elements["body"].value = message;

      // Submit the form since we previously stopped it. May cause recursive loop in some browsers? Should research this.
      this.submit();
   }
</script>

The above script will produce an e-mail body that looks like the following. You can of course always add more rules and parsing into the contact function to make it look nicer.

subject: a
Name: b
E-Mail Address: c
Message: d

Answer 2

The form as such works, to the extent that it is possible to send an e-mail using only HTML (CSS has really nothing to do with it). Clicking on the submit button launches an e-mail client in the user’s computer, but this may be prevented by settings in the browser. The user then needs to use the submit button (or equivalent) in that client. If you did that in your test and did not get e-mail, then [email protected] is not your account or the e-mail was filtered out in spam filtering somewhere.

If the intent is to get the user’s information, then the Email field is useless, since if the sending works at all, the incoming message will appear with the user’s e-mail address (and quite often name, too) in the From field.

Answer 3

To send an email only using HTML (on your side) you can use a service like https://formspree.io/. Services like Formspree handle all the code for you. All you have to do is setup your form to point to their email provider. If you don't like Formspree much you can try looking for alternatives, I made one myself here. The issue with Formspree is that your users will be re-directed to their website to do a captcha before the email is sent.

For example you can use a service like this by making your form something like below:

<form action="https://formspree.io/[email protected]" method="POST">
    <input type="text" name="name">
    <input type="email" name="_replyto">
    <input type="submit" value="Send">
</form>

As you can see the form is sent to https://formspree.io/[email protected] . There are detailed instructions on formspree's website in how to use their service. Using a service like formspree is super easy as you don't have to write any of the back end that manages your form.

Answer 4

In order to do this you would need to use a server side language such as PHP to process the form.