-
Notifications
You must be signed in to change notification settings - Fork 0
/
contact.html
109 lines (100 loc) · 5.16 KB
/
contact.html
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
<!DOCTYPE html>
<html lang="en">
<head>
<title>Contact</title>
<!-- The format detection will ensure Edge does not try to allow the telephone number to launch Skype or other phone programs -->
<meta name="format-detection" content="telephone=no">
<meta name="viewport" content="width=device-width, maximum-scale=1">
<meta name="theme-color" content="#218021">
<!-- CSS stylesheets for the page -->
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/basestyles.css">
<link rel="stylesheet" href="css/contact.css">
<noscript><link rel="stylesheet" href="css/contact_no_script.css"></noscript>
<!-- This is the reference to use the Fjalla One font for <h1> and <h3> tags that contain the name of the business -->
<link href="https://fonts.googleapis.com/css?family=Fjalla+One" rel="stylesheet">
</head>
<body>
<!-- Header with nav bar. -->
<header>
<div class="main-header">
<h1 class="name"><a href="index.html">Lawn Paynes</a></h1>
<ul class="main-nav">
<li><a href="index.html" class="home">Home</a></li>
<li><a href="services.html" class="leaf">Services</a></li>
<li><a href="our_work.html" class="shovel">Our Work</a></li>
<li><a href="contact.html" class="contactUs">Contact</a></li>
</ul>
</div>
</header>
<!-- The contactForm div will contain a contact form to be sent via a jQuery AJAX request and to validate the inputs -->
<div class="contactForm">
<form>
<h2>Contact Us!</h2>
<p> Complete the form below and we will contact you!</p>
<!-- This <p> tag that is the child of noscript will display if JavaScript is disabled -->
<noscript>
<p>JavaScript is disabled. Please enable JavaScript and reload the page so that you can submit the form! Thank you!</p>
</noscript>
<!-- The errorAlert span will contain an error message inserted by the AJAX request if there is a server error -->
<span class="errorAlert"></span>
<div class="inputs">
<label for="Name"><span class="asterisk">*</span>Name:</label>
<br>
<!-- Set the Name input as the field to autofocus on page load -->
<input type="text" id="name" name="name" placeholder="Your Name" autofocus>
<!-- The alert spans after each input will contain an error message inserted by the script if they are empty or do not match the format requested for each input -->
<span class="alertName"></span>
<br>
<label for="mail"><span class="asterisk">*</span>Email:</label>
<br>
<input type="email" id="mail" name="mail" placeholder="[email protected]" required>
<span class="alertEmail"></span>
<br>
<label for="phone"><span class="asterisk">*</span>Phone Number:</label>
<br>
<input type="tel" id="phone" name="phone" placeholder="(123) 456-7890">
<span class="alertPhone"></span>
<br>
</div>
<fieldset class="checks">
<legend>Services of Interest</legend>
<input type="checkbox" id="lawnCare" name="lawnCare" value="Lawn Care">
<label for="lawnCare">Lawn Care</label>
<br>
<input type="checkbox" id="landscaping" name="landscaping" value="landscaping">
<label for="landscaping">Landscaping</label>
<br>
<input type="checkbox" id="treeCare" name="treeCare" value="Tree Care">
<label for="treeCare">Tree Care</label>
</fieldset>
<div class="comments">
<label for="comments"><span class="asterisk">*</span>Comments:</label>
<br>
<textarea type="textarea" id="comments" name="comments" placeholder="Type your comments here." rows="10"></textarea>
<span class="alertComment"></span>
<br>
</div>
<!-- Buttons to submit the contact form or reset their inputs -->
<div class="buttons">
<input type="reset">
<input type="button" value="Submit">
</div>
</form>
</div>
<footer class="footer ">
<h3 class="foot-name">Lawn Paynes</h3>
<div class="foot-nav">
<a href="mailto:[email protected]">Email Us!</a>
<span id="telephone">(502) 111-1111</span>
<a href="index.html">Home</a> <br>
<p class="ryan ">Site by <a href="mailto:[email protected] ">Ryan Sallee</a></p>
<p class="disclaimer "> The resemblence of this site to any actual businesses is purely coincidental.</p>
</div>
</footer>
<!-- jQuery CDN -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- Script to validate the inputs as well as submit the form data via AJAX -->
<script src="js/lawn_form.js"></script>
</body>
</html>