-
Notifications
You must be signed in to change notification settings - Fork 0
/
contact.html
137 lines (109 loc) · 4.37 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
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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Contact-Form</title>
<link rel="stylesheet" href="contact.css">
<!--========================== Google Fonts ======================= -->
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Roboto+Mono:ital,wght@1,500&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Russo+One&display=swap" rel="stylesheet">
<link rel="apple-touch-icon" sizes="180x180" href="favicon/android-chrome-192x192.png">
<link rel="icon" type="image/png" sizes="32x32" href="favicon/android-chrome-512x512.png">
<link rel="icon" type="image/png" sizes="16x16" href="favicon/apple-touch-icon.png">
<link rel="manifest" href="favicon/site.webmanifest">
</head>
<body>
<!-- contact1 -->
<section class="w3l-simple-contact-form1">
<div class="contact-form section-gap">
<div class="wrapper">
<div class="text-center">
<h1 class="header1" style="font-size: 40px;">Welcome!!!</h1>
</div>
<div class="contact-form" style="max-width: 450px; margin: 0 auto;">
<div class="form-mid">
<form action="javascript:sendmail()" method="post">
<div class="field">
<input type="text" class="form-control" name="Name" id="Name" placeholder="Name" required="">
</div>
<div class="field">
<input type="email" class="form-control" name="Sender" id="Sender" placeholder="Email"
required="">
</div>
<div class="field">
<input type="text" class="form-control" name="Subject" id="Subject" placeholder="Subject"
required="">
</div>
<textarea name="Message" class="form-control" id="Message" placeholder="Message"
required=""></textarea>
<button type="submit" class="btn btn-contact">Send Message</button>
<!-- <input type="button" class="btn btn-contact" onclick="sendmail();" value="Send Message"> -->
</form>
</div>
</div>
</div>
</div>
</section>
<!-- /contact1 -->
<!-- <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> -->
<script
src="https://code.jquery.com/jquery-2.2.4.min.js"
integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44="
crossorigin="anonymous"></script>
<script src="https://smtpjs.com/v3/smtp.js"></script>
<script>
function sendmail(){
var name = $('#Name').val();
var email = $('#Sender').val();
var subject = $('#Subject').val();
var message = $('#Message').val();
// var body = $('#body').val();
var Body='Name: '+name+'<br>Email: '+email+'<br>Subject: '+subject+'<br>Message: '+message;
//console.log(name, phone, email, message);
Email.send({
SecureToken:"fbf31702-bb7f-4a4e-9c1c-4ccf17ee777f",
To: 'bishalpandey2001@gmail.com',
From: "Vishal Pandey",
Subject: "New message on contact from "+name,
Body: Body
}).then(
message =>{
//console.log (message);
if(message=='OK'){
alert('Your mail has been send. Thank you for connecting.');
}
else{
console.error (message);
alert('There is error at sending message. ')
}
}
);
}
</script>
</script>
<script src="https://cdn.jsdelivr.net/npm/darkmode-js@1.5.7/lib/darkmode-js.min.js"></script>
<script>
const options = {
bottom: '64px', // default: '32px'
right: 'unset', // default: '32px'
left: '32px', // default: 'unset'
time: '0.5s', // default: '0.3s'
mixColor: '#fff', // default: '#fff'
backgroundColor: '#fff', // default: '#fff'
buttonColorDark: '#100f2c', // default: '#100f2c'
buttonColorLight: '#fff', // default: '#fff'
saveInCookies: false, // default: true,
label: '🌓', // default: ''
autoMatchOsTheme: true // default: true
}
const darkmode = new Darkmode(options);
darkmode.showWidget();
</script>
<footer id="footer">
<p>© Copyright 2021 Vishal Pandey</p>
</footer>
</body>
</html>