Given code :
Code :
<!doctype html>
<html>
<head>
<title>Email</title>
<meta charset="utf-8">
<meta name="veiwport" content="width=device-width, initail-scale=1">
<meta lang="en">
<style>
* {
box-sizing: border-box;
}
body{
margin:0
}
main{
position: relative;
}
#hed{
background-color :#C65431;
height:10px;
margin-top: 0;
}
#foot{
background-color :#C65431;
height:20px;
bottom:0;
}
section{
margin-left: 20%;
margin-right: 20%;
}
#up_form::after {
content: "";
display: flex;
clear: both;
}
#submit::after {
content: "";
display: flex;
clear: both;
}
.col1{
float:left;
padding:10px;
}
.col2{
float:left;
padding:10px;
}
#right{
width:50%;
}
#left{
width:50%;
}
#agree{
width:50%;
}
#sub{
width:50%;
}
#field input{
width:100%;
}
sup{
color:red;
margin-bottom: -2px;
}
#field textarea{
width:100%;
height: 12rem;
}
#agree p{
font-size: 12px;
align-content: center;
justify-content: center;
text-align: justify;
}
#submit_btn{
width:100%;
position:relative;
top:6rem;
background-color :#C65431;
border-radius: 5px;
padding:5px;
}
#submit_btn:hover{
cursor: pointer;
}
#sub{
height: 9rem;
}
@media screen and (max-width:620px){
#foot{
height:30px;
}
#left{
width:100%;
}
#right{
width:100%;
}
#agree{
width:100%;
}
#sub{
width:100%;
}
#submit_btn{
top:1rem;
}
}
</style>
</head>
<body>
<div id='hed'> </div>
<main>
<section>
<div id="mail_cont">
<h3 id="product_name"> animal bull </h3>
<form action="email.php" method="post" name="mail_form" >
<div id='row'>
<div id="up_form" >
<div id="left" class="col1">
<div id="txt"><span> First Name <sup>*</sup></span></div> <div id="field"><input type="text" id="f_name" name="fName" required></div>
<div id="txt"><span> Last Name <sup>*</sup></span></div> <div id="field"><input type="text" id="l_name" name="lName" required></div>
<div id="txt"><span> Email <sup>*</sup></span></div> <div id="field"><input type="email" id="email" name="email" required></div>
<div id="txt"><span> Phone <sup>*</sup></span></div> <div id="field"><input type="tel" id="tel_no" name="tel" required></div>
<div id="txt"><span> postal code </span></div> <div id="field"><input type="text" id="postal_code" name="postal"></div>
</div>
<div id="right" class="col1">
<div id="txt"><span> message <sup>*</sup></span></div> <div id="field"><textarea type="textarea" id="message" name="message" required> </textarea></div>
</div>
</div>
<div id="submit" >
<div id="agree" class="col2">
<p>
By clicking Submit, you acknowledge you have read, agree to, and consented to our Terms of Use and Privacy Policy, and, if you are a California resident, to our Privacy Policy for California Residents. If you are a California resident, see our Notice at Collection in our Privacy Policy for California Residents for information on how we collect, use, and sell or share personal information.
</p>
</div>
<div id="sub" class="col2">
<input type="submit" id="submit_btn" name="submit" value="Send">
</div>
</div>
</div>
</form>
</div>
</section>
</main>
<div id='foot'> </div>
<?php
$to = "mleroi0101@gmail.com";
if($_SERVER["REQUEST_METHOD"]=="POST"){
$F_name = $_POST['fName'];
$L_name = $_POST['lName'];
$Email = $_POST["email"];
$Tel = $_POST["tel"];
$postal_code = $_POST['postal'];
$message = $_POST["message"];
$subject = "New offer from client";
$body = "Name : $F_name $L_name\n Email :$Email \n Tel : $Tel \n Postal code : $postal_code\n Message :\n $message";
// Replace with your actual SMTP details
$smtp_server = "smtp.gmail.com";
$smtp_port = 587; // May vary depending on your mail service
$username = "mleroi0101@gmail.com"; // Usually your email address
$password = "your_app_password_or_less_secure_password"; // App Password or less secure access password
// Use the mail() function with SMTP authentication
$headers = "From: " . $username . "\r\n";
$headers .= "Reply-To: " . $_POST['email'] . "\r\n";
$headers .= "Content-Type: text/plain; charset=UTF-8\r\n";
if (mail($to, $subject, $body, $headers, "auth_username=" . $username . " auth_password=" . $password)) {
echo '<script>alert("Thank you for contacting us! Your message has been sent.")</script>';
} else {
echo '<script>alert("Sorry, there was a problem sending your message.")</script>';
}
}
?>
<script src="https://smtpjs.com/v3/smtp.js"> </script>
<script>
function sendMail(){
Email.send({
Host : "smtp.gmail.com",
Username : "shallileroi@gmail.com",
Password : "",
Port: 465, // Secure port for SSL/TLS
Ssl: true,
To : 'shallileroi@gmail.com',
From :document.getElementById('email').value,
Subject : "New Offer From customer",
Body : "Content-Type: text/html; charset=UTF-8\n\n Name :" + "Name :"+ document.getElementById("f_name").value + document.getElementById('l_name').value + "<br> Email :"+document.getElementById('email').value
+ "<br> Phone :" + document.getElementById("tel_no").value + "<br> postal code :"+document.getElementById("postal_code").value
+ "<br> message :"+document.getElementById("message").value
}).then(
message => alert("Mail send successful")
);
}
</script>
</body>
</html>
To send emails from your webpage, you have two options: using PHP's mail() function or using a third-party service like SMTP.js.
In your current code, you have attempted both methods. However, it seems there are a few issues:
For the PHP mail() function, you are not passing the SMTP authentication details correctly. You need to set the fifth parameter of the mail() function properly.
For SMTP.js, you're trying to send an email directly from the client-side JavaScript, which is generally not recommended due to security concerns. SMTP.js is primarily designed for Node.js applications or server-side JavaScript.
Here's a revised approach using PHP's mail() function:
<?php
$to = "mleroi0101@gmail.com";
if($_SERVER["REQUEST_METHOD"]=="POST"){
$F_name = $_POST['fName'];
$L_name = $_POST['lName'];
$Email = $_POST["email"];
$Tel = $_POST["tel"];
$postal_code = $_POST['postal'];
$message = $_POST["message"];
$subject = "New offer from client";
$body = "Name: $F_name $L_name\nEmail: $Email\nTel: $Tel\nPostal code: $postal_code\nMessage:\n$message";
// Replace with your actual SMTP details
$smtp_server = "smtp.gmail.com";
$smtp_port = 587; // May vary depending on your mail service
$username = "mleroi0101@gmail.com"; // Usually your email address
$password = "your_app_password_or_less_secure_password"; // App Password or less secure access password
// Use the mail() function with SMTP authentication
$headers = "From: " . $username . "\r\n";
$headers .= "Reply-To: " . $Email . "\r\n";
$headers .= "Content-Type: text/plain; charset=UTF-8\r\n";
$headers .= "MIME-Version: 1.0\r\n";
$headers .= "X-Mailer: PHP/" . phpversion() . "\r\n";
if (mail($to, $subject, $body, $headers)) {
echo '<script>alert("Thank you for contacting us! Your message has been sent.")</script>';
} else {
echo '<script>alert("Sorry, there was a problem sending your message.")</script>';
}
}
?>
Make sure to replace "your_app_password_or_less_secure_password" with the actual password generated for your Gmail account if you have two-factor authentication enabled. If not, you can use your regular Gmail password.
Also, ensure that your server supports sending emails using PHP's mail() function and that the necessary configurations are set up correctly.