✖

All TalkersCode Topics

Follow TalkersCode On Social Media

Send HTML Form Data To Email Using JavaScript

Last Updated : Jan 1, 2023

IN - HTML JavaScript

Send HTML Form Data To Email Using JavaScript

In this tutorial we will show you the solution of send HTML form data to email using JavaScript, this all can be done with help of SMTP. SMTP is simple mail transfer protocol which is used to send email, data etc.

This library is free to JavaScript. Let us understand this full structure with help of example.

Step By Step Guide On Send Html Form Data To Email Using JavaScript :-

As, first of all there are many ways with help of which we are able to send html form data to email using JavaScript.

Here, the codes we are going to use JavaScript along with html, php for better and easy understanding. Let us see the codes given below. 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title> send html form data to email using JavaScript </title>
<meta http-equiv="refresh" content="0; url=http://demo.com/" />
</head>
<body>
 <form id="form">
<input name="text" value="msg">
<button type=”submit”>Submit</button>
</form>
<script>
$(function(){
$("#form").submit(function(e){
e.preventDefault();
$.ajax({
url:'email.php',
type:'POST',
data:$("#form").serialize(),
success:function(e) {
}
});
});
});
</script>
</body>
</html>
<?php
$message = $_POST["msg"];
$subject = "Message";
$emailTo = "email@email.com";
mail($emailTo, $subject, $message);
?>
  1. First, we write <! DOCTYPE html> which we used as an instruction to the web browser about what version of HTML file is written in.
  2. Secondly, the <html> tag is used to indicate the beginning of an HTML document.
  3. As above now <head> tag is used to contain information about web page. In this tag a <title> tag is used which helps us to specify a webpage title. Both <head> and <title> tags are Paired tags. So, both have </head> and </title> ending tags respectively.
  4. Here, then we create a body tag. All the content which we want to show on browser’s screen or display is always written inside this codes.
  5. Here, as we see in body we create a form with id form and inside this we create an input type text with value msg. and after that we create a button with type submit and we display text Submit to it also.
  6. Now, we used script here. Script is a paired tag and must have a closing tag. Here, we are going to write our JavaScript.
  7. Here, as you see we first target form with help of its id and remove the prevent default means the action that occur on form by its nature like submit button. After that we use Ajax to send form data.
  8. Now, let us discuss another file that is create using php. Here we directly assigns value to variable and use mail function to send email data.
  9. At last, the <body> and <html> tags are closed with </body> and </html> respectively.

Conclusion :-

At last in conclusion, here we can say that with the help of this article we are able to understand how to send html form data to email using JavaScript.

I hope this tutorial on send html form data to email using JavaScript helps you and the steps and method mentioned above are easy to follow and implement.

Latest Tutorials