Всем привет, хочу поделиться рабочей формой обратной связи на node.js.
Для начала, создадим саму форму (Проект обязательно должен называться index.html):
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Форма обратной связи</title>
</head>
<body>
<div class="page">
<h1>Форма связи</h1>
<form action="/message" method="post" class="form">
<div class="hint">
<p>Имя:</p>
<input type="text" class="name inp" name="firstName" placeholder="Ваше имя..." required>
</div>
<div class="hint">
<p>Почта:</p>
<input type="email" class="gmail inp" name="gmail" placeholder="Ваш адрес електронной почты..." required>
</div>
<div class="hint">
<p>Сообщение:</p>
<textarea name="message" class="message" required placeholder="Ваше сообщение..."></textarea>
</div>
<div class="pos-btn"><button type="submit">Отправить</button></div>
</form>
</div>
<div class="footer"></div><!--Футер для отступа-->
</body>
<style>
@import url(https://fonts.googleapis.com/css?family=Montserrat:100,200,300,regular,500,600,700,800,900,100italic,200italic,300italic,italic,500italic,600italic,700italic,800italic,900italic);
*{
margin:0;
padding:0;
}
html{
font-family: "Montserrat";
font-weight: 400;
}
.footer{
margin-top: 100px;
}
.inp{
width: 250px;
font-family:inherit;
padding: 5px 15px;
height: 30px;
font-weight: inherit;
letter-spacing: 1.3px;
border-radius: 0;
outline: none;
border: 0;
background-color: rgb(247, 247, 247);
}
.message{
resize: none;
padding: 12px 15px;
width: 250px;
letter-spacing: 1.3px;
font-weight: inherit;
font-family:inherit;
height: 120px;
border-radius: 0;
outline: none;
border: 0;
background-color: rgb(247, 247, 247);
}
.pos-btn{
width: 100%;
top: 50px;
position: relative;
display: flex;
justify-content: center;
}
.pos-btn button{
background-color: black;
text-transform: uppercase;
color: white;
min-width: 280px;
border: 0;
margin: 0px 15px;
cursor: pointer;
padding: 23px 0px;
font-family: inherit;
}
.hint{
margin: 20px;
}
.hint p{
padding: 2px;
letter-spacing: 2px;
font-size: 14px;
}
.form{
background-color: white;
display: flex;
flex-direction: column;
width: 600px;
margin: 80px 0px 0px 0px;
}
@media (max-width:600px){
.form{
width:100%;
align-items: center;
}
}
@media (max-width:325px){
}
.page{
margin-top: 50px;
width: 100%;
display: flex;
align-items: center;
flex-direction: column;
}
</style>
</html>Дальше ловим данные с форм через node.js и записываем их в текстовой файл(Проект обязательно должен называться index.js):
import { fileURLToPath } from 'url'
import path from 'path'
import fs from 'fs'
import http, { request } from "http"
const __filename = fileURLToPath(import.meta.url);
const __dirname = path.dirname(__filename);
let server = http.createServer(function(request, response) {
let indexPage = fs.readFileSync(path.join(__dirname, "index.html"))
if (request.url == "/") {
response.writeHead(200, { "Content-Type": "text/html" })
response.end(indexPage)
}
else if (request.url == "/message" && request.method == "POST") {
let data = ""
request.on("data", function(chunk) {
data += chunk;
})
request.on("end", function() {
let search = new URLSearchParams(data)
let name = search.get("firstName")
let email = search.get("gmail")
let message = search.get("message")
fs.appendFileSync(path.join(__dirname, "admin.txt"), `\nПолучено новое сообщение!(\n
Имя: ${name},\n
Почта: ${email},\n
Сообщение: ${message};\n
)\n`)
})
response.writeHead(302, { "Location": "/" })
response.end("Sent successfully!")
}
else{
response.writeHead(200, { "Content-Type": "text/html" })
response.end(`<div style="display:flex; width:100%;flex-direction:column; align-items:center;"><h1>404</h1><br><hr style="width:100%; background:black; color:black;"><br><h1>Page not found</h1></div>`)
}
})
server.listen(3000)
Написав код, создайте admin.txt, туда будут записываться данные с форм. После всех манипуляций осталось только паблишнуть проект, для этого я использую бесплатный сервис https://replit.com/. Первый шаг - регистрация. Тут все как всегда, юзернейм, почта, пароль.
После регистрации кликаем на My Repls:
Потом на + Create:
Дальше находим Node.js и называем наш проект как хотим, к примеру MySite.:
Прошу также учесть, что проект публичный, то есть, его будут видеть все, кто зайдет на ваш профиль, если хотите скрыть проект, прийдеться покупать платную версию.
После создания "Репла" перетаскиваем наши файлы с папки, а именно admin.txt, index.html и index.js:
После чего в package.json, который создается автоматически обязательно прописываем "type":"module",:
Дальше жмем Run и ждем, пока проект загрузиться:
Дальше копируем у себя свою ссылку, которую я обвел и вставляем в браузер:
После отправки данные с форм приходят к нам в файлик на хостинге:
Также, обратите внимание, что проект по ссылке будет открываться не сразу. К примеру, у меня он открылся через 5 минут после нажатия Run.
Спасибо за внимание! Хорошего дня :)