jQuery (Ajax) Contact form with all elements

This is my default CONTACT form built with jQuery and CSS.
The form uses a jQuery call to a PHP script that inserts data into a Mysql DB and sends two emails of confirmation, all this under the hood… meanwhile, there is a CSS only animation that displays a message that the data is been sent to the server and shows a positive message if that data was sent without errors and an error message if there was an error.

Ajax Call
JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
$(document).ready(function(){
 
var request;
 
$("#contact-form").submit(function(event){
 
    event.preventDefault();
 
    if (request) {
        request.abort();
    }
    var $form = $(this);
    var $inputs = $form.find("input, textarea");
    var serializedData = $form.serialize();
    $inputs.prop("disabled", true);
    request = $.ajax({
        url: "contact-form.php",
        type: "post",
        data: serializedData
    });
    request.done(function (response, textStatus, jqXHR){
        //console.log("Hooray, it worked!");
        $(".show-success").slideToggle();
        //$(".hide-contact").slideToggle();
    });
 
    request.fail(function (jqXHR, textStatus, errorThrown){
        console.error(
            "The following error occurred: "+
            textStatus, errorThrown
        );
        $(".show-error").slideToggle();
 
    });
 
 
    request.always(function () {
        $inputs.prop("disabled", false);
    });
 
});
 
});

CSS Only Spinner and FORM STYLES
CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
<style>
.frm{padding:9px;border-radius: 3px;background:#ECEFF1;font-size: .8em; border:0px; width: 100%;font-weight: 300;box-sizing: border-box;}
.frb{background:#3498DB}
.pt-12{padding-top:12px}.small{font-size: .8em}
.hide{display:none}
.org-bg{background:#E74C3C;padding: 12px;border-radius: 3px;margin-bottom: 12px;color: #fff}.grn-bg{background:#52BE80;padding: 12px;border-radius: 3px;margin-bottom: 12px;}
.orange-bg{font-family:'Quicksand',sans-serif;font-weight:400;font-size:.8em;}
.fc{padding-bottom:12px;font-family:'Quicksand',sans-serif;font-weight:400;font-size:1.2em}
 
#loading{display:none}
 
.spinner {
  margin: 0px auto 0;
  width: 70px;
  text-align: center;
}
 
.spinner > div {
  width: 18px;
  height: 18px;
  background-color: #333;
 
  border-radius: 100%;
  display: inline-block;
  -webkit-animation: sk-bouncedelay 1.4s infinite ease-in-out both;
  animation: sk-bouncedelay 1.4s infinite ease-in-out both;
}
 
.spinner .bounce1 {
  -webkit-animation-delay: -0.32s;
  animation-delay: -0.32s;
}
 
.spinner .bounce2 {
  -webkit-animation-delay: -0.16s;
  animation-delay: -0.16s;
}
 
@-webkit-keyframes sk-bouncedelay {
  0%, 80%, 100% { -webkit-transform: scale(0) }
  40% { -webkit-transform: scale(1.0) }
}
 
@keyframes sk-bouncedelay {
  0%, 80%, 100% {
    -webkit-transform: scale(0);
    transform: scale(0);
  } 40% {
    -webkit-transform: scale(1.0);
    transform: scale(1.0);
  }
}
 
.trimit{background: rgba(149, 192, 234);padding: 12px; border-radius: 3px;margin-top:12px;font-family:'Quicksand',sans-serif;font-weight:400;font-size:.8em;}
</style>

HTML CONTACT FORM (with some FontAwesome icons)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
<!-- form ROW -->
<div class="row pt-12x">
 
<div id="loading">
<div class="spinner">
  <div class="bounce1"></div>
  <div class="bounce2"></div>
  <div class="bounce3"></div>
</div>
 
<div class="trimit"><i class="far fa-paper-plane fa-fw"></i> Se trimit datele...</div>
 
</div>
 
<!-- Error Handlers --><div id="show-success"></div>
<div class="grn-bg orange-bg list-font-1 hide show-success"><i class="fas fa-check-square fa-fw"></i> <b>Vă mulțumim!</b> Am primit mesajul dumneavoastră.</div>
<div class="org-bg orange-bg list-font-1 hide show-error"><i class="far fa-question-circle fa-fw"></i> <b>Eroare!</b> Mesajul nu a fost trimis.</div>
<!-- .Error Handlers -->
<!-- form --> <form id="contact-form">                        
  <div class="hide-contact">
<div class="fc"><i class="fas fa-user fa-fw brown"></i> Formular contact</div>
 
            <div>
              <input type="text" name="name" class="frm" placeholder="Nume" required="">
            </div>
            <div class="pt-12">
              <input type="text" name="email" class="frm" placeholder="Email@exemplu.com" required="">
            </div>
 
            <div class="pt-12">
              <input type="text" name="phone" class="frm" placeholder="Număr telefon" required="">
            </div>
 
            <div class="pt-12">
              <textarea name="message" class="frm" rows="6" placeholder="Mesaj..."></textarea><input type="text" name="city" value="" class="hide">
 
            </div>
 
<div class="pt-12 small"><i class="fas fa-lock fa-fw green"></i> Protecția datelor <small>(GDPR) (EU) 2016/679 <a href="https://en.wikipedia.org/wiki/General_Data_Protection_Regulation"><i class="fas fa-external-link-alt fa-fw"></i></a></small></div>
 
            <div class="pt-12">
              <button type="submit" class="frm frb dsblb"><i class="fas fa-paper-plane fa-fw"></i> Trimite</button>
            </div></form>
</form>
 
</div> <!-- ./hide-contact -->
          
 
 
</div>
<!-- ./form-ROW -->

PHP Script that handles the form data
PHP
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
<?php
 
// v1.0 090318
 
if(isset($_POST['city']) && !empty($_POST['city'])) {
 
echo "Hello Robot!";
 
exit;
 
}
 
if(empty($_POST['name']) || empty($_POST['email']) || empty($_POST['message'])) {
 
echo "Hello Robot 2!";
 
exit;
 
}
 
$today = date("d/m/Y - G:i ");
 
/////////////////////
///////////
/////////
///////
/////
//
 
 
 
include_once("_connect.php");
 
// _POST Vars...
 
$name     = htmlentities($_POST['name']);
$email     = htmlentities($_POST['email']);
$phone     = htmlentities($_POST['phone']);
 
$message1   = htmlentities($_POST['message']);
 
$data = time();
 
$sql = "INSERT INTO table_name
(name, email, phone, message, data)
VALUES
('$name', '$email', '$phone', '$message1', '$data')";
 
 
 
 
 
if ($conn->query($sql) === TRUE) {
 
//////
 
//////
 
 
 
///
 
// yeyy! Mail to owner...
 
 
 
 
 
$to_owner = "me@example.com";
$subject_owner = "New message from...";
 
$message_owner = "
<html>
<head>
<title>New message</title>
</head>
<body>
<p><h3>Mesaj nou pe site...</h3></p>
<p>Detalii mesaj:</p>
<ul>
<li>Name: $name</li>
<li>Phone: <a href=\"tel:$phone\">$phone</a></li>
<li>Email: $email</li>
<li>Data: $today</li>
<li>Message: $message1</li>
</ul>
</body>
</html>
";
 
// Always set content-type when sending HTML email
$headers_owner = "MIME-Version: 1.0" . "\r\n";
$headers_owner .= "Content-type:text/html;charset=UTF-8" . "\r\n";
 
// More headers
$headers_owner .= 'From: Name<contact@example>' . "\r\n" . "Reply-to: $email" . "\r\n";
$headers_owner .= 'Cc: carbon-copy@example.com' . "\r\n";
 
mail($to_owner, $subject_owner, $message_owner, $headers_owner);
 
 
 
 
 
 
 
/////////////////
/// +++++++++++++++++++++ /////
 
 
 
 
 
 
 
 
 
exit;
 
} else {
    echo "Error: " . $sql . "<br>" . $conn->error;
}
$conn->close();
 
?>