How to send an email using only HTML5 and CSS

Question

I am trying to write a code that can send an email to a specific address when I click the submit button. Below I mention my HTML code by clicking the "Send" button, I do not receive any emails on my account. Please let me know what to do.

<form method=POST action="mailto: [e-mail] " 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 email using HTML only and not have any server-side code, but this is not really recommended. Using the mailto: URI scheme, you can set both the Subject, Body of the message, and the sender. You will not be able to determine from whom it is being sent, since an email client that processes the mailto: URI will handle this.

The following is a simple example of a form for a basic contact form. Remember that users will need a program that can handle the URI scheme, and if not, nothing will happen. This does not send the email, but creates it inside the mail application.

 <form method="GET" action="mailto: [e-mail] " 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> 

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

If you want your contact form to contain even more information, such as "Name", "Phone number" and other information, you can have Javascript to process the form. You can do this by adding an event listener for the "submit" event.

 <form method="GET" action="mailto: [e-mail] " 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 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 create an email body that looks like this. Of course, you can always add more rules and parsing to the contact function to make it more enjoyable.

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

Answer 2

The form as such works to the extent that you can send emails using only HTML (CSS has nothing to do with this). Pressing the "Send" button launches the mail client on the user's computer, but this can be prevented by the settings in the browser. Then the user needs to use the submit button (or equivalent) in this client. If you did this in your test and did not receive the email, then [e-mail] not your account or the email has been filtered out somewhere in spam filtering.

If the goal is to obtain information about users, then the "Email" field is useless, because if the sending works at all, the incoming message will be displayed with the users email address (and often also called) in the From field.

Answer 3

To do this, you will need to use a server-side language such as PHP to process the form.