-
Notifications
You must be signed in to change notification settings - Fork 0
/
vo_contact.html
142 lines (119 loc) · 5.58 KB
/
vo_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
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
<!DOCTYPE html>
<html lang="en">
<head>
<!--
Kyle Marler's Voice Over contact page
Author: Kyle Marler
Date: 4.16.22
Filename: vo_contact.html
-->
<meta charset="utf-8" />
<meta name="keywords" content="contact, kyle, marler, voice over, american accent" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Contact Kyle</title>
<link href="css/vo_flex.css" rel="stylesheet" />
<link href="css/vo_style1.css" rel="stylesheet" />
<link href="css/vo_navicon.css" rel="stylesheet" />
<link href="css/vo_forms.css" rel="stylesheet" />
<!--
I used the script from Tutorial 7 to intercept the data before it got
to the fake server to display a message that the data was received.
-->
<script src="scripts/vo_formsubmit.js"></script>
</head>
<body>
<header>
<img src="images/banner.png" alt="Kyle and friends" id="banner" />
<nav>
<img src="images/navicon.png" alt="" id="navicon" />
<ul>
<li><a href="vo_home.html">Home</a></li>
<li><a href="vo_about.html">About</a></li>
<li><a href="vo_portfolio.html">Portfolio</a></li>
<li><a href="vo_reviews.html">Reviews</a></li>
<li><a href="vo_pricing.html">Pricing</a></li>
<li><a href="vo_contact.html">Contact</a></li>
</ul>
</nav>
</header>
<main>
<h1>Contact Kyle</h1>
<p>Please fill out the form below to get started on a voice project.</p>
<p>Fields marked with an asterisk (*) are required.</p>
<form id="contact" action="http://www.kylewebsite/kyleserver/form" method="post">
<fieldset id="custInfo">
<legend>Customer Information</legend>
<div class="formRow">
<label for="firstName">First Name*</label>
<input name="firstName" id="firstName" type="text"
placeholder="Bruce" required />
</div>
<div class="formRow">
<label for="lastName">Last Name*</label>
<input name="lastName" id="lastName" type="text"
placeholder="Wayne" required />
</div>
<div class="formRow">
<label for="phone">Phone Number</label>
<input name="phone" id="phone" type="tel" placeholder="555-555-5555"
pattern="^\d{3}-\d{3}-\d{4}$" />
</div>
<div class="formRow">
<label for="email">Email*</label>
<input name="email" id="email" type="email"
pattern="(\w\.?)+@[\w\.-]+\.\w{2,}" required />
</div>
</fieldset>
<fieldset id="projectInfo">
<legend>Project Information</legend>
<div class="formRow">
<label>Project Type</label>
<fieldset class="optGroup">
<label for="socialAd">Social Media Ad</label>
<input name="projectType" value="socialAd" id="socialAd" type="radio" />
<label for="eLearn">eLearn</label>
<input name="projectType" value="eLearn" id="eLearn" type="radio" />
<label for="training">Corporate Training</label>
<input name="projectType" value="training" id="training" type="radio" />
<label for="phoneSystem">Phone System</label>
<input name="projectType" value="phoneSystem" id="phoneSystem" type="radio" />
</fieldset>
</div>
<div class="formRow">
<label for="wordCount">Word Count of Script*</label>
<input name="wordCount" id="wordCount" type="number" value="50"
step="1" min="0" max="20000" required />
</div>
<div class="formRow">
<label>Preferred deliverable format</label>
<fieldset class="optGroup">
<label for="mp3">MP3</label>
<input name="fileFormat" value="mp3" id="mp3" type="radio" />
<label for="wav">WAV</label>
<input name="fileFormat" value="wav" id="wav" type="radio" />
<label for="ogg">OGG</label>
<input name="fileFormat" value="ogg" id="ogg" type="radio" />
</fieldset>
</div>
<div class="formRow">
<label for="singingProject">Please check the box if this is a singing project</label>
<input name="singingProject" id="singingProject" value="yes" type="checkbox" />
</div>
<div class="formRow">
<label for="comments">Please provide any additional project details.</label>
<textarea name="comments" id="comments"></textarea>
</div>
</fieldset>
<div id="buttons">
<input type="submit" value="Submit" />
<input type="reset" value="Reset All Fields" />
</div>
</form>
</main>
<footer>
Kyle Marler Voice Over • Based in Dayton, OH • Worldwide Clientele •
<a href="mailto:[email protected]">[email protected]</a> •
<a href="tel:+19374743328">937.474.3328</a>
</footer>
</body>
</html>