-
Notifications
You must be signed in to change notification settings - Fork 15
/
contactus.php
executable file
·93 lines (91 loc) · 3.81 KB
/
contactus.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
<!DOCTYPE html>
<html>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<head>
<title>Contact form</title>
<link rel="stylesheet" type="text/css" href="css/contactus.css">
</head>
<header>
<div class="header">
<?php
include "header.php" ;?>
</div>
<script>
function myFunction() {
var x = document.getElementById("myTopnav");
if (x.className === "topnav") {
x.className += " responsive";
} else {
x.className = "topnav";
}
}
</script>
</header>
<body onload="init();">
<div>
<div class="formContent">
<form class="form" action="#" method="post" id="form">
<h1>Contact Us</h1>
<label for="">Full Name</label>
<span id="ErrorName" style="color: red; margin-left: 15px;"> </span>
<input type="text" name="name" id="name" placeholder="Your name" required="required" minlength="4"><br>
<label for="">Email</label>
<span id="ErrorEmail" style="color: red; margin-left: 15px;"> </span>
<input type="text" name="email" id="emailaddress" placeholder="Email address" required="required"><br>
<span id="ErrorSubject" style="color: red; margin-left: 15px;"> </span>
<textarea name="subject" id="subject" placeholder="Leave a message..." minlength="20" style="height: 350px" required="required"></textarea><br>
<input type="submit" value="Submit" id="submit">
</form>
</div>
<footer>
<p>Copyright © 2019 All rights reserved | Team Ariadne</p>
</footer>
<script type="text/javascript">
//With init() addEventListener can call each variables easily.
function init(){
var name = document.getElementById("name");
var emailaddress = document.getElementById("emailaddress");
var subject = document.getElementById("subject");
var form = document.getElementById("form");
name.addEventListener("blur", checkName);
emailaddress.addEventListener("keyup", checkEmail);
form.addEventListener("submit", validateForm);
}
//To check and validate the value entered.
function checkName(){
text = document.getElementById("name");
if (text.value.length < 4 )
{
document.getElementById("ErrorName").innerHTML = "Name must be more than 4 char";
text.focus(); //focus() makes sure inputs entered is correct.
return false;
}else
{
document.getElementById("ErrorName").innerHTML = "";
return true
}
}
function checkEmail(){
text = document.getElementById("emailaddress");
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,}))$/; //regex - for email validation
if (!re.test(String(text.value).toLowerCase()))
{
document.getElementById("ErrorEmail").innerHTML = "Enter a valid mail";
text.focus(); //focus() makes sure inputs entered is correct.
return false;
}else
{
document.getElementById("ErrorEmail").innerHTML = "";
return true
}
}
// submit form
function validateForm(){
if (checkName() == false) { return false;}
if (checkEmail() == false) { return false;}
alert('Your message was sent succesfully. We respond as soon as possible...');
return true;
}
</script>
</body>
</html>