node-form-mailer 1.0.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Potentially problematic release.
This version of node-form-mailer might be problematic. Click here for more details.
- package/.env.sample +22 -0
- package/app.js +21 -0
- package/modules/mailer.js +106 -0
- package/package.json +36 -0
- package/test/.env.sample +22 -0
- package/test/package-lock.json +1730 -0
- package/test/package.json +17 -0
- package/test/pages/contact-form.html +129 -0
- package/test/pages/thank-you.html +123 -0
- package/test/test.js +18 -0
|
@@ -0,0 +1,17 @@
|
|
|
1
|
+
{
|
|
2
|
+
"name": "test",
|
|
3
|
+
"version": "1.0.0",
|
|
4
|
+
"description": "",
|
|
5
|
+
"main": "test.js",
|
|
6
|
+
"scripts": {
|
|
7
|
+
"test": "nodemon test.js"
|
|
8
|
+
},
|
|
9
|
+
"author": "",
|
|
10
|
+
"license": "ISC",
|
|
11
|
+
"devDependencies": {
|
|
12
|
+
"nodemon": "^2.0.20"
|
|
13
|
+
},
|
|
14
|
+
"dependencies": {
|
|
15
|
+
"express": "^4.18.2"
|
|
16
|
+
}
|
|
17
|
+
}
|
|
@@ -0,0 +1,129 @@
|
|
|
1
|
+
<!DOCTYPE html>
|
|
2
|
+
<html lang="en">
|
|
3
|
+
<head>
|
|
4
|
+
<meta charset="UTF-8">
|
|
5
|
+
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
|
6
|
+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
7
|
+
<title>Contact Form</title>
|
|
8
|
+
<style>
|
|
9
|
+
* {
|
|
10
|
+
margin: 0;
|
|
11
|
+
padding: 0;
|
|
12
|
+
box-sizing: border-box;
|
|
13
|
+
}
|
|
14
|
+
body {
|
|
15
|
+
font-family: 'Source Sans Pro', sans-serif;
|
|
16
|
+
}
|
|
17
|
+
.mb-5 {
|
|
18
|
+
margin-bottom: 20px;
|
|
19
|
+
}
|
|
20
|
+
.form-main-wrapper {
|
|
21
|
+
display: flex;
|
|
22
|
+
align-items: center;
|
|
23
|
+
justify-content: center;
|
|
24
|
+
padding: 48px;
|
|
25
|
+
}
|
|
26
|
+
.form-wrapper {
|
|
27
|
+
margin: 0 auto;
|
|
28
|
+
max-width: 550px;
|
|
29
|
+
width: 100%;
|
|
30
|
+
background: white;
|
|
31
|
+
}
|
|
32
|
+
.form-label {
|
|
33
|
+
display: block;
|
|
34
|
+
font-weight: 500;
|
|
35
|
+
font-size: 16px;
|
|
36
|
+
color: #07074d;
|
|
37
|
+
margin-bottom: 12px;
|
|
38
|
+
}
|
|
39
|
+
.form-input {
|
|
40
|
+
width: 100%;
|
|
41
|
+
padding: 12px 24px;
|
|
42
|
+
border-radius: 6px;
|
|
43
|
+
border: 1px solid #e0e0e0;
|
|
44
|
+
background: white;
|
|
45
|
+
font-weight: 500;
|
|
46
|
+
font-size: 16px;
|
|
47
|
+
color: #6b7280;
|
|
48
|
+
outline: none;
|
|
49
|
+
resize: none;
|
|
50
|
+
}
|
|
51
|
+
.form-input:focus {
|
|
52
|
+
border-color: #5892FF;
|
|
53
|
+
box-shadow: 0px 3px 8px rgba(0, 0, 0, 0.05);
|
|
54
|
+
}
|
|
55
|
+
|
|
56
|
+
.form-btn {
|
|
57
|
+
text-align: center;
|
|
58
|
+
font-size: 16px;
|
|
59
|
+
border-radius: 6px;
|
|
60
|
+
padding: 14px 32px;
|
|
61
|
+
border: none;
|
|
62
|
+
font-weight: 600;
|
|
63
|
+
background-color: #5892FF;
|
|
64
|
+
color: white;
|
|
65
|
+
cursor: pointer;
|
|
66
|
+
}
|
|
67
|
+
.form-btn:hover {
|
|
68
|
+
box-shadow: 0px 3px 8px rgba(0, 0, 0, 0.05);
|
|
69
|
+
}
|
|
70
|
+
</style>
|
|
71
|
+
</head>
|
|
72
|
+
<body>
|
|
73
|
+
<main>
|
|
74
|
+
<div class="form-main-wrapper">
|
|
75
|
+
<div class="form-wrapper">
|
|
76
|
+
<form action="/" method="POST">
|
|
77
|
+
<div class="mb-5">
|
|
78
|
+
<label for="name" class="form-label"> Full Name </label>
|
|
79
|
+
<input
|
|
80
|
+
type="text"
|
|
81
|
+
name="name"
|
|
82
|
+
id="name"
|
|
83
|
+
placeholder="Full Name"
|
|
84
|
+
class="form-input"
|
|
85
|
+
/>
|
|
86
|
+
</div>
|
|
87
|
+
|
|
88
|
+
<div class="mb-5">
|
|
89
|
+
<label for="email" class="form-label"> Email Address </label>
|
|
90
|
+
<input
|
|
91
|
+
type="email"
|
|
92
|
+
name="email"
|
|
93
|
+
id="email"
|
|
94
|
+
placeholder="Enter your email"
|
|
95
|
+
class="form-input"
|
|
96
|
+
/>
|
|
97
|
+
</div>
|
|
98
|
+
|
|
99
|
+
<div class="mb-5">
|
|
100
|
+
<label for="subject" class="form-label"> Subject </label>
|
|
101
|
+
<input
|
|
102
|
+
type="text"
|
|
103
|
+
name="subject"
|
|
104
|
+
id="subject"
|
|
105
|
+
placeholder="Enter your subject"
|
|
106
|
+
class="form-input"
|
|
107
|
+
/>
|
|
108
|
+
</div>
|
|
109
|
+
|
|
110
|
+
<div class="mb-5">
|
|
111
|
+
<label for="message" class="form-label"> Message </label>
|
|
112
|
+
<textarea
|
|
113
|
+
rows="6"
|
|
114
|
+
name="message"
|
|
115
|
+
id="message"
|
|
116
|
+
placeholder="Type your message"
|
|
117
|
+
class="form-input"
|
|
118
|
+
></textarea>
|
|
119
|
+
</div>
|
|
120
|
+
|
|
121
|
+
<div>
|
|
122
|
+
<button class="form-btn">Submit</button>
|
|
123
|
+
</div>
|
|
124
|
+
</form>
|
|
125
|
+
</div>
|
|
126
|
+
</div>
|
|
127
|
+
</main>
|
|
128
|
+
</body>
|
|
129
|
+
</html>
|
|
@@ -0,0 +1,123 @@
|
|
|
1
|
+
<!DOCTYPE html>
|
|
2
|
+
<html lang="en">
|
|
3
|
+
<head>
|
|
4
|
+
<meta charset="UTF-8">
|
|
5
|
+
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
|
6
|
+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
7
|
+
<title>Thank you !</title>
|
|
8
|
+
<style>
|
|
9
|
+
*{
|
|
10
|
+
box-sizing:border-box;
|
|
11
|
+
}
|
|
12
|
+
body{
|
|
13
|
+
background: #ffffff;
|
|
14
|
+
background: linear-gradient(to bottom, #ffffff 0%,#e1e8ed 100%);
|
|
15
|
+
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#e1e8ed',GradientType=0 );
|
|
16
|
+
height: 100%;
|
|
17
|
+
margin: 0;
|
|
18
|
+
background-repeat: no-repeat;
|
|
19
|
+
background-attachment: fixed;
|
|
20
|
+
|
|
21
|
+
}
|
|
22
|
+
.parent-wrapper{
|
|
23
|
+
width:100%;
|
|
24
|
+
height:100vh;
|
|
25
|
+
display: flex;
|
|
26
|
+
flex-direction: column;
|
|
27
|
+
}
|
|
28
|
+
.child-wrapper{
|
|
29
|
+
padding :30px;
|
|
30
|
+
text-align:center;
|
|
31
|
+
}
|
|
32
|
+
h1{
|
|
33
|
+
font-family: 'Kaushan Script', cursive;
|
|
34
|
+
font-size:4em;
|
|
35
|
+
letter-spacing:3px;
|
|
36
|
+
color:#5892FF ;
|
|
37
|
+
margin:0;
|
|
38
|
+
margin-bottom:20px;
|
|
39
|
+
}
|
|
40
|
+
.child-wrapper p{
|
|
41
|
+
margin:0;
|
|
42
|
+
font-size:1.3em;
|
|
43
|
+
color:#aaa;
|
|
44
|
+
font-family: 'Source Sans Pro', sans-serif;
|
|
45
|
+
letter-spacing:1px;
|
|
46
|
+
}
|
|
47
|
+
.go-home{
|
|
48
|
+
color:#fff;
|
|
49
|
+
background:#5892FF;
|
|
50
|
+
border:none;
|
|
51
|
+
padding:10px 50px;
|
|
52
|
+
margin:30px 0;
|
|
53
|
+
border-radius:30px;
|
|
54
|
+
text-transform:capitalize;
|
|
55
|
+
box-shadow: 0 10px 16px 1px rgba(174, 199, 251, 1);
|
|
56
|
+
cursor:pointer;
|
|
57
|
+
}
|
|
58
|
+
.footer-wrapper{
|
|
59
|
+
margin-top: auto;
|
|
60
|
+
background:#D7E6FE;
|
|
61
|
+
padding:6px;
|
|
62
|
+
text-align:center;
|
|
63
|
+
}
|
|
64
|
+
.footer-wrapper p{
|
|
65
|
+
margin:0;
|
|
66
|
+
padding:4px;
|
|
67
|
+
color:#5892FF;
|
|
68
|
+
font-family: 'Source Sans Pro', sans-serif;
|
|
69
|
+
letter-spacing:1px;
|
|
70
|
+
}
|
|
71
|
+
.footer-wrapper p a{
|
|
72
|
+
text-decoration:none;
|
|
73
|
+
color:#5892FF;
|
|
74
|
+
font-weight:600;
|
|
75
|
+
}
|
|
76
|
+
|
|
77
|
+
@media (min-width:360px){
|
|
78
|
+
h1{
|
|
79
|
+
font-size:4.5em;
|
|
80
|
+
}
|
|
81
|
+
.go-home{
|
|
82
|
+
margin-bottom:20px;
|
|
83
|
+
}
|
|
84
|
+
}
|
|
85
|
+
|
|
86
|
+
@media (min-width:600px){
|
|
87
|
+
.content{
|
|
88
|
+
max-width:1000px;
|
|
89
|
+
margin:0 auto;
|
|
90
|
+
}
|
|
91
|
+
.parent-wrapper{
|
|
92
|
+
height: initial;
|
|
93
|
+
max-width:620px;
|
|
94
|
+
margin:0 auto;
|
|
95
|
+
margin-top:50px;
|
|
96
|
+
box-shadow: 4px 8px 40px 8px rgba(88, 146, 255, 0.2);
|
|
97
|
+
}
|
|
98
|
+
}
|
|
99
|
+
</style>
|
|
100
|
+
</head>
|
|
101
|
+
<body>
|
|
102
|
+
<main>
|
|
103
|
+
<div class=content>
|
|
104
|
+
<div class="parent-wrapper">
|
|
105
|
+
<div class="child-wrapper">
|
|
106
|
+
<h1>Thank you !</h1>
|
|
107
|
+
<p>we will get in touch with you as soon as possible and</p>
|
|
108
|
+
<p>you should receive a confirmation email soon.</p>
|
|
109
|
+
<button class="go-home" onclick="history.back()">
|
|
110
|
+
go back
|
|
111
|
+
</button>
|
|
112
|
+
</div>
|
|
113
|
+
<div class="footer-wrapper">
|
|
114
|
+
<p>Email not received?
|
|
115
|
+
<a href="#" onclick="history.back()">Click here to send again</a>
|
|
116
|
+
</p>
|
|
117
|
+
</div>
|
|
118
|
+
</div>
|
|
119
|
+
</div>
|
|
120
|
+
|
|
121
|
+
</main>
|
|
122
|
+
</body>
|
|
123
|
+
</html>
|
package/test/test.js
ADDED
|
@@ -0,0 +1,18 @@
|
|
|
1
|
+
const express = require('express')
|
|
2
|
+
const app = express()
|
|
3
|
+
const port = 3000
|
|
4
|
+
const formMailer = require('../app')
|
|
5
|
+
|
|
6
|
+
const path = require('path')
|
|
7
|
+
const pages = '/pages'
|
|
8
|
+
|
|
9
|
+
|
|
10
|
+
app.get('/', (req, res) => res.sendFile(path.join(__dirname, pages, 'contact-form.html')))
|
|
11
|
+
app.get('/thank-you', (req, res) => res.sendFile(path.join(__dirname,pages, 'thank-you.html')))
|
|
12
|
+
|
|
13
|
+
app.post('/',formMailer, (req, res) => {
|
|
14
|
+
res.redirect(303, '/thank-you');
|
|
15
|
+
})
|
|
16
|
+
|
|
17
|
+
|
|
18
|
+
app.listen(port, () => console.log(`listening on port ${port}!`))
|