Send an email without redirecting or reloading the page
Paweł Czarnecki
Posted on May 27, 2022
HTML
<div class="bg-text">Send Form</div>
<form id="myForm" method="POST" autocomplete="off" onsubmit="event.preventDefault(); sendForm()">
<label for="name">Name: </label>
<input type="text" name="name" id="name" />
<label for="email">Email: </label>
<input type="email" name="email" id="email" />
<label for="subject">Subject: </label>
<input type="text" name="subject" id="subject" />
<label for="message-input">Message: </label>
<textarea name="message-input" id="message-input" rows="7"></textarea>
<button type="submit" value="Send" id="submit" class="">Send</button>
</form>
SCSS
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: sans-serif;
font-size: 20px;
}
body {
background-color: rgb(5, 43, 38);
color: #ddd;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
.bg-text {
position: absolute;
font-size: 15rem;
opacity: 0.1;
text-align: center;
user-select: none;
pointer-events: none;
}
form {
display: flex;
justify-content: center;
align-items: flex-start;
flex-direction: column;
padding: 60px 50px;
background-color: rgba(0, 0, 0, 0.5);
backdrop-filter: blur(5px);
border-radius: 5px;
gap: 5px;
label {
margin-top: 15px;
}
input,
textarea {
width: 350px;
border-radius: 5px;
background-color: rgba(14, 42, 36, 0.839);
border: none;
color: #ddd;
padding-left: 5px;
outline: none;
&:focus{
border-bottom: 3px solid rgb(8, 92, 90);
}
}
input {
height: 40px;
}
textarea {
padding-block: 5px;
resize: none;
height: 200px;
overflow-y: auto;
&::-webkit-scrollbar {
width: 5px;
}
&::-webkit-scrollbar-thumb {
background-color: rgb(8, 92, 90);
}
}
#submit {
padding: 15px 30px;
margin-top: 20px;
color: #ddd;
background-color: rgb(8, 92, 90);
border: none;
cursor: pointer;
}
}
JavaScript
const sendForm = () => {
const data = new FormData(document.getElementById('myForm'))
const xhr = new XMLHttpRequest()
xhr.open('POST', 'sendmail.php')
xhr.onload = function () {
console.log(this.response)
}
xhr.send(data)
}
PHP
<?php
$name = $_POST['name'];
$email = $_POST['email'];
$subject = $_POST['subject'];
$message = $_POST['message-input'];
$mailheader = "From: ".$name." <".$email.">\r\n";
$to = 'your-email@email.com';
mail($to, $subject, $message, $mailheader);
?>
💖 💪 🙅 🚩
Paweł Czarnecki
Posted on May 27, 2022
Join Our Newsletter. No Spam, Only the good stuff.
Sign up to receive the latest update from our blog.