xxxxxxxxxx1
<?php2
$name = $_POST['name'];3
$email = $_POST['email'];4
$message = $_POST['message'];5
$subject = $_POST['subject'];6
header('Content-Type: application/json');7
if ($name === ''){8
print json_encode(array('message' => 'Name cannot be empty', 'code' => 0));9
exit();10
}11
if ($email === ''){12
print json_encode(array('message' => 'Email cannot be empty', 'code' => 0));13
exit();14
} else {15
if (!filter_var($email, FILTER_VALIDATE_EMAIL)){16
print json_encode(array('message' => 'Email format invalid.', 'code' => 0));17
exit();18
}19
}20
if ($subject === ''){21
print json_encode(array('message' => 'Subject cannot be empty', 'code' => 0));22
exit();23
}24
if ($message === ''){25
print json_encode(array('message' => 'Message cannot be empty', 'code' => 0));26
exit();27
}28
$content="From: $name \nEmail: $email \nMessage: $message";29
$recipient = "story@intakt-design.com";30
$mailheader = "From: $email \r\n";31
mail($recipient, $subject, $content, $mailheader) or die("Error!");32
print json_encode(array('message' => 'Email Delivered! Thanks for contacting inTakt Design!', 'code' => 1));33
exit();34
?>35
36
<!-- Contact Form -->37
<div class="contact-content py-5">38
<section class="mb-4 col-11 col-sm-10 col-lg-8 mx-auto mt-0 mb-3 form">39
40
<!--Section heading-->41
<h2 class="h1-responsive font-weight-bold text-center p-3 my-4 form-text form-head">Just Fill in the Blanks!</h2>42
<!--Section description-->43
<p class="text-center w-responsive mx-auto mb-5 form-text form-subhead">Do you have any questions or inquiries? Please do not hesitate to contact me directly.<br />I will typically respond within 24 hours.</p>44
45
<div class="row">46
47
<!--Grid column-->48
<div class="col-md-9 mb-md-0 mb-5">49
<form id="contact-form" name="contact-form">50
51
<!--Grid row-->52
<div class="row">53
54
<!--Grid column-->55
<div class="col-md-6 form-field-containers">56
<div class="md-form mb-0 form-field-containter">57
<input type="text" id="name" name="name" class="form-control">58
<label for="name" class="form-text form-field mt-n1">Your name</label>59
</div>60
</div>61
<!--Grid column-->62
63
<!--Grid column-->64
<div class="col-md-6 form-field-containers">65
<div class="md-form mb-0 form-field-container">66
<input type="text" id="email" name="email" class="form-control">67
<label for="email" class="form-text form-field mt-n1">Your email</label>68
</div>69
</div>70
<!--Grid column-->71
72
</div>73
<!--Grid row-->74
75
<!--Grid row-->76
<div class="row">77
<div class="col-md-12 mt-3 form-field-containers">78
<div class="md-form mb-0 form-field-container">79
<input type="text" id="subject" name="subject" class="form-control">80
<label for="subject" class="form-text form-field mt-n1">Subject</label>81
</div>82
</div>83
</div>84
<!--Grid row-->85
86
<!--Grid row-->87
<div class="row">88
89
<!--Grid column-->90
<div class="col-md-12 mt-3">91
92
<div class="md-form message-container">93
<textarea type="text" id="message" name="message" rows="2" class="form-control md-textarea p-2 message waves-effect"></textarea>94
<label for="message" class="form-text form-field mt-n1 message-label"><span class="message-canned-txt italic">Type Your Message Here</span></label>95
</div>96
97
</div>98
</div>99
<!--Grid row-->100
101
</form>102
103
<div class="text-center text-md-left">104
<a class="btn btn-rounded waves-effect cta-btn-res col-12 col-lg-5 mt-3 mb-0" onclick="validateForm()">Submit</a>105
</div>106
<div class="status" id="status"></div>107
</div>108
<!--Grid column-->109
110
<!--Grid column-->111
<div class="col-md-3 text-center">112
<ul class="list-unstyled mb-0">113
<li><a href="#connect" class="fas fa-user-astronaut fa-2x form-icon phone waves-effect"></a><br />114
<a href="#connect" class="form-text contact-info phone waves-effect">Connect with Me!</a>115
</li>116
117
<li><a href="tel:501-259-6907" class="fas fa-phone mt-4 fa-2x form-icon phone waves-effecte"></a><br />118
<a href="tel:501-259-6907" class="form-text contact-info phone waves-effect">+ 501 259 6907</a>119
</li>120
121
<li><a href="mailto:story@intakt-design.com" class="fas fa-envelope mt-4 fa-2x form-icon email waves-effect"></a><br />122
<a href="mailto:story@intakt-design.com" class="form-text contact-info email waves-effect">story@intakt-design.com</a>123
</li>124
</ul>125
</div>126
<!--Grid column-->127
</div>128
</section>129
<!--/ Contact Form-->130
</div>131
<!--/ Contact Me --> 132
xxxxxxxxxx1
.contact-content {2
background-image: linear-gradient(45deg, rgba(0,0,10,0.95), rgba(10,10,30,.85), rgba(0,0,10,0.95));3
margin: 0;4
}5
6
.contact-header {7
text-align:center;8
background-image: linear-gradient(45deg, rgba(12,12,22,1), rgba(25,25,40,.9), rgba(12,12,22,1));9
padding: 2rem 0 1.9rem;10
box-shadow: 2px 2px 8px 5px rgba(0,0,0,.5);11
margin: 0;12
}13
14
.contact-header-border-top {15
background-image: linear-gradient(42deg,rgb(255,255,0), rgb(0,225,0), rgb(0,85,255));16
margin:0;17
padding: .75rem 0;18
height: 80px;19
box-shadow: 2px 2px 8px 5px rgba(0,0,0,.5);20
border: 0 !Important;21
22
}23
24
.contact-logo-divide {25
width: 1.9rem;26
height: 2.5rem;27
padding: 0;28
}29
30
.contact-header-border-bottom {31
background-image: linear-gradient(35deg,rgb(255,255,0), rgb(0,225,0), rgb(0,85,255));32
margin:0;33
padding:0;34
height: 15px;35
box-shadow: 2px 2px 8px 5px rgba(0,0,0,.5);36
}37
38
.contact-header-borderline {39
color: transparent;40
margin:0;41
padding:0;42
outline: 0;43
height: 15px;44
}45
46
.form {47
background-image: linear-gradient(45deg, rgba(12,12,22,1), rgba(25,25,40,.9), rgba(12,12,22,1));48
padding: 1rem 5rem 3rem 5rem;49
border: 3px inset #ddd;50
box-shadow: 2px 2px 5px 5px rgba(0,0,0,0.2);51
}52
53
.form-text {54
font-family: 'Noto Sans TC', sans-serif;55
color: #fff !Important;56
}57
58
.form-text:focus, form-field:focus, form-text:focus-within, form-field:focus-within, form-control:focus, form-control:focus-within, .form-field-container:focus, .form-field-container:focus-within, .form-field-containers:focus, .form-field-containers:focus-within {59
color: #aaa !Important;60
}61
62
.form-icon {63
color:#fff;64
}65
66
.phone:hover, .phone:focus {67
color: #aaa;68
}69
70
.email:hover, .email:focus {71
color: #aaa;72
}73
74
.form-head {75
font-weight:700;76
font-size: 2rem;77
color: #fff !Iportant;78
}79
80
.form-subhead {81
font-size: 1.2rem;82
color: #fff !Iportant;83
}84
85
.message {86
overflow: scroll;87
color: #202020 !Important;88
background-image: linear-gradient(to right, rgba(235,235,245,.75), rgba(245,245,255,.9), rgba(235,235,245,.75));89
border: 2px inset #ddd;90
}91
92
.message-canned-txt, .message-label {93
color: #929292 !Important;94
}95
96
.message-canned-txt:focus-within, .message-canned-txt:focus,.message-label:focus-within, .message-label:focus, .message-container:focus, .message-container:focus-within, .message:focus, .message:focu-wiithin {97
color: #fff !Important;98
}99
100
.status {101
padding: 1rem 2rem 0 0;102
color: #6600ff103
}104
105
textarea{ 106
-webkit-user-select: text !important;107
-khtml-user-select: text !important;108
-moz-user-select: text !important;109
-ms-user-select: text !important;110
user-select: text !important;111
}xxxxxxxxxx1
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script> 2
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 3
<script type="text/javascript" src="js/jquery-3.5.1.js"></script>4
<script type="text/javascript" src="popper.js"></script>5
<script type="text/javascript" src="js/bootstrap.bundle.js"></script>6
<script type="text/javascript" src="js/mdb.js"></script>7
<script type="text/javascript" src="js/mdb.pro.js"></script>8
9
<!--Custom scripts-->10
<script>11
function validateForm() {12
var name = document.getElementById('name').value;13
if (name == "") {14
document.querySelector('.status').innerHTML = "Name cannot be empty";15
return false;16
}17
var email = document.getElementById('email').value;18
if (email == "") {19
document.querySelector('.status').innerHTML = "Email cannot be empty";20
return false;21
} 22
else {23
var re = /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;24
if(!re.test(email)){25
document.querySelector('.status').innerHTML = "Email format invalid";26
return false;27
}28
}29
var subject = document.getElementById('subject').value;30
if (subject == "") {31
document.querySelector('.status').innerHTML = "Subject cannot be empty";32
return false;33
}34
var message = document.getElementById('message').value;35
if (message == "") {36
document.querySelector('.status').innerHTML = "Message cannot be empty";37
return false;38
}39
40
document.querySelector('.status').innerHTML = "Sending...";41
42
sendMessage();43
}44
45
function sendMessge() {46
formData = {47
'name' : $('input[name=name]').val(),48
'email' : $('input[name=email]').val(),49
'subject' : $('input[name=subject]').val(),50
'message' : $('textarea[name=message]').val()51
};52
53
$.ajax({54
url : "mail.php",55
type: "POST",56
data : formData,57
success: function(data, textStatus, jqXHR)58
{59
60
$('#status').text(data.message);61
if (data.code) //If mail was sent successfully, reset the form.62
$('#contact-form').closest('form').find("input[type=text], textarea").val("");63
},64
error: function (jqXHR, textStatus, errorThrown)65
{66
$('#status').text(jqXHR);67
}68
});69
}70
71
Console errors: 0