Simple and reliable contact form on JavaScript. Which works without reloading the page and sends data via SMTP. The form includes field validation and a mask for the phone.
The big advantage of the form is that it works on PureJS. And does not require additional libraries.
The message arrives at the mail specified in the sendmail-index.php file. To work, you need a mailbox from which to send messages.
Write our form
In this step, we will create a basic HTML form which we put in the function RenderForm();. Create a sendform.js file and place the code below:
"use strict"
const startForm = document.getElementById('start-c-form');
const formBody = document.getElementById('c-form-body');
let formTitle = startForm.getAttribute('name');
let formAbout = startForm.getAttribute('about');
let fromUrl = location.href;
function freeze_body() {
document.body.style.overflow = "hidden";
}
function unfreeze_body() {
document.body.style.overflow = "visible";
}
startForm.onclick = function () {
formBody.classList.add('opened');
freeze_body();
formBody.innerHTML = `
<div class="smtpform">
<form action="#" id="form" class="form-body">
<div class="close-form"><span>x</span></div>
<div class="form-title">${formTitle}</div>
<div class="form-item">
<label for="formName" class="form-label">Name*</label>
<input id="formName" type="text" name="name" class="form-input req">
</div>
<div class="form-item">
<label for="formPhone" class="form-label">Phone*</label>
<input id="formPhone" type="tel" name="phone" placeholder="(096) 11-222-33" class="form-input req">
</div>
<div class="form-item">
<label for="formEmail" class="form-label">E-mail*</label>
<input id="formEmail" type="text" name="email" class="form-input _email req">
</div>
<div class="form-item">
<label for="fromMessage" class="form-label">${formAbout}</label>
<textarea name="message" id="fromMessage" class="form-input"></textarea>
</div>
<input type="hidden" name="fromname" value='${formTitle}'>
<input type="hidden" name="fromurl" value='${fromUrl}'>
<button type="submit" class="form-button">Send</button>
<div class="formextra">
<div class="formsocials">
<span class="formsocials-text">Or write to our messengers</span>
<div class="formsocials-body">
<a href="#" class="formsocials-item" target="_blank" rel="nofollow" title="Write on Massanger"> <svg xmlns="http://www.w3.org/2000/svg" width="30px" fill="#FFFFFF" viewBox="0 0 30 30" class="img-svg replaced-svg"> <path d="M15,3C8.373,3,3,8.373,3,15c0,6.016,4.432,10.984,10.206,11.852V18.18h-2.969v-3.154h2.969v-2.099c0-3.475,1.693-5,4.581-5 c1.383,0,2.115,0.103,2.461,0.149v2.753h-1.97c-1.226,0-1.654,1.163-1.654,2.473v1.724h3.593L19.73,18.18h-3.106v8.697 C22.481,26.083,27,21.075,27,15C27,8.373,21.627,3,15,3z"></path></svg></a>
<a href="#" class="formsocials-item" target="_blank" rel="nofollow" title="Write on Viber"> <svg xmlns="http://www.w3.org/2000/svg" width="30px" fill="#FFFFFF" aria-hidden="true" focusable="false" data-prefix="fab" data-icon="telegram-plane" class="img-svg replaced-svg" role="img" viewBox="0 0 448 512"><path d="M446.7 98.6l-67.6 318.8c-5.1 22.5-18.4 28.1-37.3 17.5l-103-75.9-49.7 47.8c-5.5 5.5-10.1 10.1-20.7 10.1l7.4-104.9 190.9-172.5c8.3-7.4-1.8-11.5-12.9-4.1L117.8 284 16.2 252.2c-22.1-6.9-22.5-22.1 4.6-32.7L418.2 66.4c18.4-6.9 34.5 4.1 28.5 32.2z"></path></svg></a>
<a href="#" class="formsocials-item" target="_blank" rel="nofollow" title="Write on Telegram"> <svg xmlns="http://www.w3.org/2000/svg" width="30px" fill="#FFFFFF" aria-hidden="true" focusable="false" data-prefix="fab" data-icon="viber" class="img-svg replaced-svg" role="img" viewBox="0 0 512 512"><path d="M444 49.9C431.3 38.2 379.9.9 265.3.4c0 0-135.1-8.1-200.9 52.3C27.8 89.3 14.9 143 13.5 209.5c-1.4 66.5-3.1 191.1 117 224.9h.1l-.1 51.6s-.8 20.9 13 25.1c16.6 5.2 26.4-10.7 42.3-27.8 8.7-9.4 20.7-23.2 29.8-33.7 82.2 6.9 145.3-8.9 152.5-11.2 16.6-5.4 110.5-17.4 125.7-142 15.8-128.6-7.6-209.8-49.8-246.5zM457.9 287c-12.9 104-89 110.6-103 115.1-6 1.9-61.5 15.7-131.2 11.2 0 0-52 62.7-68.2 79-5.3 5.3-11.1 4.8-11-5.7 0-6.9.4-85.7.4-85.7-.1 0-.1 0 0 0-101.8-28.2-95.8-134.3-94.7-189.8 1.1-55.5 11.6-101 42.6-131.6 55.7-50.5 170.4-43 170.4-43 96.9.4 143.3 29.6 154.1 39.4 35.7 30.6 53.9 103.8 40.6 211.1zm-139-80.8c.4 8.6-12.5 9.2-12.9.6-1.1-22-11.4-32.7-32.6-33.9-8.6-.5-7.8-13.4.7-12.9 27.9 1.5 43.4 17.5 44.8 46.2zm20.3 11.3c1-42.4-25.5-75.6-75.8-79.3-8.5-.6-7.6-13.5.9-12.9 58 4.2 88.9 44.1 87.8 92.5-.1 8.6-13.1 8.2-12.9-.3zm47 13.4c.1 8.6-12.9 8.7-12.9.1-.6-81.5-54.9-125.9-120.8-126.4-8.5-.1-8.5-12.9 0-12.9 73.7.5 133 51.4 133.7 139.2zM374.9 329v.2c-10.8 19-31 40-51.8 33.3l-.2-.3c-21.1-5.9-70.8-31.5-102.2-56.5-16.2-12.8-31-27.9-42.4-42.4-10.3-12.9-20.7-28.2-30.8-46.6-21.3-38.5-26-55.7-26-55.7-6.7-20.8 14.2-41 33.3-51.8h.2c9.2-4.8 18-3.2 23.9 3.9 0 0 12.4 14.8 17.7 22.1 5 6.8 11.7 17.7 15.2 23.8 6.1 10.9 2.3 22-3.7 26.6l-12 9.6c-6.1 4.9-5.3 14-5.3 14s17.8 67.3 84.3 84.3c0 0 9.1.8 14-5.3l9.6-12c4.6-6 15.7-9.8 26.6-3.7 14.7 8.3 33.4 21.2 45.8 32.9 7 5.7 8.6 14.4 3.8 23.6z"></path></svg></a>
</div>
</div>
<div class="formlogo">
<img src="/images/logo.svg" width="100" height="100" class="formlogo-img" alt="Company Name" title="Company Name">
</div>
</div>
</form>
</div>
`;
RenderForm();
const formClose = document.querySelector('.close-form');
formClose.onclick = function () {
formBody.classList.remove('opened');
unfreeze_body()
formBody.innerHTML = ``;
};
}
function RenderForm() {
// document.addEventListener('DOMContentLoaded', function () {
const form = document.getElementById('form');
form.addEventListener('submit', formSend);
async function formSend(e) {
e.preventDefault();
let error = formValidate(form);
let formData = new FormData(form);
//Sending ajax and wait response
if (error === 0) {
form.classList.add('sending');
let response = await fetch('sendmail-index.php', {
method: 'POST',
body: formData
});
if (response.ok) {
let result = await response.json();
alert(result.message);
form.reset();
form.classList.remove('sending');
formBody.classList.remove('opened');
formBody.innerHTML = ``;
unfreeze_body();
} else {
alert("Error");
form.classList.remove('sending');
}
} else {
alert('Fill in the required fields*');
}
}
// Form Validation
function formValidate(form) {
let error = 0;
let formRequired = document.querySelectorAll('.req');
for (let index = 0; index < formRequired.length; index++) {
const input = formRequired[index];
formRemoveError(input);
if (input.classList.contains('_email')) {
if (!emailValidator(input)) {
formAddError(input);
error++;
}
} else if (input.value === '') {
formAddError(input);
error++;
}
}
return error;
}
// Add and Remove class error in HTML
function formAddError(input) {
input.parentElement.classList.add('error');
input.classList.add('error');
}
function formRemoveError(input) {
input.parentElement.classList.remove('error');
input.classList.remove('error');
}
function emailValidator(input) {
input = input.value;
let re = /\S+@\S+\.\S+/;
if (re.test(input)) {
return input;
} else {
alert('Invalid email');
}
};
document.getElementById('formPhone').addEventListener('input', function (e) {
var x = e.target.value.replace(/\D/g, '').match(/(\d{0,3})(\d{0,2})(\d{0,3})(\d{0,2})/);
e.target.value = !x[2] ? x[1] : '(' + x[1] + ') ' + x[2] + (x[3] ? '-' + x[3] : '') + (x[4] ? '-' + x[4] : '');
});
// });
}
Let’s create styles for our form
Create a file sendform.css and place the code below.
:root {
--main-form-color: rgb(13, 14, 13);
--support-form-color: #ff2536;
--form-text-color: rgb(255, 255, 255);
--form-hover-color: #df2131;
}
.smtpform {
max-width: 550px;
margin: 0px auto;
color: var(--form-text-color);
padding: 30px 0;
box-sizing: border-box;
width: 100%;
position: fixed;
top: 50%;
left: 50%;
margin-right: -50%;
overflow-y: auto;
max-height: 100%;
transform: translate(-50%, -50%);
}
#c-form-body.opened {
z-index: 9999999;
width: 100%;
height: 100%;
content: '';
top: 0;
left: 0;
background-color: rgba(0, 0, 0, 0.692);
position: fixed;
transition: cubic-bezier(0.215, 0.610, 0.355, 1) 2s;
}
.smtpform * {
outline: none;
}
.form-body {
position: relative;
background: var(--main-form-color);
padding: 20px;
margin: 0 15px;
border-radius: 5px;
box-shadow: 0 14px 28px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.22);
}
.form-body::after {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.493) url(https://c.tenor.com/I6kN-6X7nhAAAAAj/loading-buffering.gif) center / 50px no-repeat;
opacity: 0;
visibility: hidden;
}
.form-body.sending::after {
opacity: 1;
visibility: visible;
}
.form-title {
font-size: 40px;
font-weight: 700;
margin-bottom: 30px;
width: calc(100% - 3.25rem);
}
.form-item {
margin-bottom: 30px;
}
.form-label {
font-size: 1.1rem;
display: block;
margin-bottom: 10px;
}
.form-input {
height: 60px;
border-radius: 0.25rem;
padding: 0.375rem 0.75rem;
box-sizing: border-box;
font-family: inherit;
line-height: 1.5;
width: 100%;
font-size: 1rem;
background-color: rgb(209, 209, 209);
background-clip: padding-box;
transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}
.form-input::placeholder {
color: #212529;
opacity: 0.4;
}
.form-input:focus {
background: rgb(255, 255, 255);
transition: cubic-bezier(0.55, 0.055, 0.675, 0.19) .3s;
transition: 0.5s;
}
.form-input.error {
border-bottom: 2px solid red;
}
.form-body textarea {
min-height: 120px;
resize: vertical;
width: 100%;
}
.form-button {
width: 100%;
display: flex;
justify-content: center;
align-items: center;
min-height: 60px;
background-color: var(--support-form-color);
text-transform: uppercase;
color: white;
font-size: 1.5rem;
font-weight: 700;
border: 0;
cursor: pointer;
border-radius: 20px;
box-shadow: -1px 8px 0 #9d0404;
transition: .3s;
}
.form-button:hover {
background-color: var(--form-hover-color);
}
.close-form {
position: absolute;
width: 30px;
height: 30px;
right: -10px;
top: -10px;
background: var(--support-form-color);
padding: 20px;
display: block;
cursor: pointer;
font-family: Roboto, sans-serif;
border-left: 5px solid #ffffff87;
border-bottom: 5px solid #ffffffa3;
box-shadow: -14px 7px 28px rgb(255 255 255 / 35%), -15px 3px 10px rgb(255 255 255 / 0%);
}
.close-form:hover {
background: var(--form-hover-color);
}
.close-form span {
font-size: 40px;
position: absolute;
top: 50%;
left: 50%;
margin-right: -50%;
transform: translate(-50%, -50%);
}
.button-start-form {
width: 100%;
max-width: 200px;
display: inline-flex;
justify-content: center;
align-items: center;
min-height: 50px;
background-color: var(--support-form-color);
text-transform: uppercase;
color: white;
font-size: 1.2rem;
font-weight: 400;
border: 0;
cursor: pointer;
border-radius: 5px;
box-shadow: -1px 4px 0 #9d0404;
transition: .2s;
}
.button-start-form {
width: 100%;
max-width: 200px;
display: inline-flex;
justify-content: center;
align-items: center;
min-height: 50px;
background-color: var(--support-form-color);
text-transform: uppercase;
color: white;
font-size: 1.2rem;
font-weight: 400;
border: 0;
cursor: pointer;
border-radius: 5px;
box-shadow: -1px 4px 0 #9d0404;
transition: .2s;
}
.button-start-form:hover {
background-color: var(--form-hover-color);
}
.formextra {
background: #171717;
display: flex;
flex-wrap: wrap;
margin: 20px 0 5px 0;
padding: 10px;
border-radius: 5px;
justify-content: space-between;
align-items: center;
}
.formsocials {
flex-basis: 50%;
}
.formsocials-body {
display: flex;
flex: 1 1 auto;
justify-content: space-between;
}
.formsocials-text {
font-size: 14px;
display: block;
margin: 5px 0;
}
.formsocials-item {
padding: 5px;
}
.formsocials-item:hover {
background: var(--form-hover-color);
}
.formlogo-img {
max-width: 80px;
}
Create a button that will call our form
On the page where our form will be displayed, create a button and add some attributes to it:
<button type="button" id="start-c-form" name="Form Name" about="Message field label" class="button-start-form">Start Form</button>
Let’s create a body of form
After clicking on the form, our button will be generated in the div block c-form-body. Let’s create it and place it after the button:
<div id="c-form-body"></div>
Connect styles and scripts
In the first steps, we created the files sendform.js and sendform.css let’s connect them to the page with our SMTP Contact Form!
In <head> </head> on our page we will connect a style file. Like this
<link href="sendform.css" rel="stylesheet" />
Before the tag /body attach your script file code:
<script src="sendform.js"></script>
PHP file to send the contact form
Our file sendform method sends the filled fields of the form to the page sendmail-index.php which replies to the status of our message
Let’s create a file sendmail-index.php. Don’t forget to change the mailbox data in the file to yours.
<?php
require 'phpmailer/PHPMailerAutoload.php';
//Your SMTP server data
$mail = new PHPMailer;
$mail->isSMTP();
$mail->Host = 'localhost';
$mail->SMTPAuth = true;
$mail->Username = 'mymail@mysite.com';
$mail->Password = 'mepassword';
$mail->SMTPSecure = false;
$mail->SMTPAutoTLS = false;
$mail->Port = '25';
$method = $_SERVER['REQUEST_METHOD'];
$c = true;
$mail->Subject = trim($_POST["project_name"]);
$mail->From = 'test4555@lube.ua'; // Mailbox from which the letter will come
$mail->Subject = 'letter title';
$mail->addAddress('mymail@gmail.com', 'Name'); //Mailbox to which messages will arrive
$mail->CharSet = 'UTF-8';
$mail->FromName = 'My Name'; // Sender's name
$mail->isHTML(true);
// foreach ( $_POST as $key => $value ) {
// if ( is_array($value) ) {
// $value = implode(", ", $value);
// }
// if ( $value != "" && $key != "project_name" && $key != "admin_email" && $key != "form_subject" ) {
// $message .= "
// " . ( ($c = !$c) ? '<tr>':'<tr style="background-color: #f8f8f8;">' ) . "
// <td style='padding: 10px; border: #e2dddd 1px solid;'><b>$key</b></td>
// <td style='padding: 10px; border: #e2dddd 1px solid;'>$value</td>
// </tr>
// ";
// }
// }
$message = '<h1>Form is filled out!</h1>';
if(trim(!empty($_POST['name']))) {
$message .='<p>Name: ' . $_POST['name'] . '</p>';
}
if(trim(!empty($_POST['email']))) {
$message .='<p>Email: ' . $_POST['email'] . '</p>';
}
if(trim(!empty($_POST['message']))) {
$message .='<p>Message: ' . $_POST['message'] . '</p>';
}
if(trim(!empty($_POST['phone']))) {
$message .='<p>Phone: ' . $_POST['phone'] . '</p>';
}
if(trim(!empty($_POST['fromname']))) {
$message .='<p>Form Name: ' . $_POST['fromname'] . '</p>';
}
if(trim(!empty($_POST['fromurl']))) {
$message .='<p>Page url: ' . $_POST['fromurl'] . '</p>';
}
$mail->Body = "<table style='width: 100%;'>$message</table>";
$mail->AltBody = 'Hello, world! This is an alternative letter';
function adopt($text) {
return '=?UTF-8?B?'.Base64_encode($text).'?=';
}
if(!empty($_POST['email'])) {
if(!$mail->send()) {
$status = 'Send error';
} else {
$status = 'Data sent!👍';
}
}
$response = ['message' => $status];
header('Content-type: application/json');
echo json_encode($response);
$mail->SMTPDebug = 2;
?>
Our file is created, but as we see for its functioning the special PHPmailer library is required.
Download the library at the link, unzip and download to the folder with your site.
Download PHP Mailer (5x version)
