forked from jonmbake/bootstrap3-contact-form
-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
executable file
·109 lines (109 loc) · 5.7 KB
/
index.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>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="A contact form using the Bootstrap 3 framework.">
<meta name="author" content="">
<link rel="shortcut icon" href="../../assets/ico/favicon.png">
<title>Bootstrap 3 Contact Form</title>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" >
<link rel="stylesheet" href="assets/vender/intl-tel-input/css/intlTelInput.css">
<!-- EXTRACT ADDITIONAL STYLING HERE =======> -->
<style>
.container {
width: auto;
max-width: 800px;
}
.form-group {
margin-bottom: 8px;
}
#feedbackForm {
font-size: 12px;
}
</style>
<!-- <======= UP TO HERE -->
<!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
<script src="assets/vender/bootstrap/assets/js/html5shiv.js"></script>
<script src="assets/vender/bootstrap/assets/js/respond.min.js"></script>
<![endif]-->
</head>
<body>
<!-- EXTRACT FORM HERE =======> -->
<div class="container">
<div id="contact_form" class="row">
<div class="col-md-12">
<h2>Contact Us</h2>
<form role="form" id="feedbackForm" data-toggle="validator" data-disable="false">
<div class="form-group">
<label class="control-label" for="name">Name *</label>
<div class="input-group">
<input type="text" class="form-control" id="name" name="name" placeholder="Enter your name" required/>
<span class="input-group-addon"><i class="glyphicon glyphicon-unchecked form-control-feedback"></i></span>
</div>
<span class="help-block" style="display: none;">Please enter your name.</span>
</div>
<!-- UNCOMMENT HERE IF YOU WANT TITLE, COMPANY, WEBSITE OR PHONE FIELDS - you must also uncomment values in $fields_req in sendmail.php
<div class="form-group">
<label class="control-label" for="title">Title</label>
<input type="text" class="form-control optional" id="title" name="title" />
</div>
<div class="form-group">
<label class="control-label" for="company">Company</label>
<input type="text" class="form-control optional" id="company" name="company" />
</div>
<div class="form-group">
<label class="control-label" for="website">Website</label>
<input type="url" class="form-control optional" id="website" name="website" />
</div>
<div class="form-group">
<label class="control-label" for="phone">Phone</label>
<input type="tel" class="form-control optional" id="phone" name="phone" placeholder="Enter your phone (Optional)"/>
<span class="help-block" style="display: none;">Please enter a valid phone number.</span>
</div>
-->
<div class="form-group">
<label class="control-label" for="email">Reason for Contact *</label>
<select name="reason" class="form-control" required>
<option value="General Inquiry">General Inquiry</option>
<option value="Place Order">Place Order</option>
<option value="Report Issue">Report Issue</option>
</select>
<span class="help-block" style="display: none;">Please enter a valid e-mail address.</span>
</div>
<div class="form-group">
<label class="control-label" for="email">Email Address *</label>
<div class="input-group">
<input type="email" class="form-control" id="email" name="email" placeholder="Enter your email" required/>
<span class="input-group-addon"><i class="glyphicon glyphicon-unchecked form-control-feedback"></i></span>
</div>
<span class="help-block" style="display: none;">Please enter a valid e-mail address.</span>
</div>
<div class="form-group">
<label class="control-label" for="message">Message *</label>
<div class="input-group">
<textarea rows="5" cols="30" class="form-control" id="message" name="message" placeholder="Enter your message" required></textarea>
<span class="input-group-addon"><i class="glyphicon glyphicon-unchecked form-control-feedback"></i></span>
</div>
<span class="help-block" style="display: none;">Please enter a message.</span>
</div>
<div class="form-group">
<div class="g-recaptcha" data-sitekey="your_site_key"></div>
<span class="help-block" style="display: none;">Please check that you are not a robot.</span>
</div>
<span class="help-block" style="display: none;">Please enter a the security code.</span>
<button type="submit" id="feedbackSubmit" class="btn btn-primary btn-lg" data-loading-text="Sending..." style="display: block; margin-top: 10px;">Send Feedback</button>
</form>
</div><!--/span-->
</div><!--/row-->
<hr>
</div><!--/.container-->
<!-- <======= UP TO HERE -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<script src="assets/vender/intl-tel-input/js/intlTelInput.min.js"></script>
<script src="assets/js/contact-form.js"></script>
<script src='https://www.google.com/recaptcha/api.js'></script>
</body>
</html>