DEV Community

Paweł Czarnecki
Paweł Czarnecki

Posted on

Send an email without redirecting or reloading the page

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>
Enter fullscreen mode Exit fullscreen mode

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;
    }
}

Enter fullscreen mode Exit fullscreen mode

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)
}

Enter fullscreen mode Exit fullscreen mode

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);
?>
Enter fullscreen mode Exit fullscreen mode

Top comments (0)