Форма обратной связи

Валидация формы обратной связи.

На многих сайтах присутствует страница с формой обратной связи, элемент достаточно нужный и с этим трудно не согласиться. Давайте вместе создадим такую форму, позволим пользователю ввести в неё данные, проверим их на корректность и после этого отправим данные на сервер.

Прежде чем приступать работе, нужно ясно понять:
— что из себя будет представлять форма обратной связи;
— какие поля будет в себя включать;
— какие данные мы будем проверять и по какому критерию;
— какой лучше использовать метод и способ отправки данных формы на сервер.

Немного подумав, мы решили, что форма будет иметь следующие поля:

1. имя — ведь нам нужно как-то обращаться к пользователю, когда мы будем писать ему ответ;
2. электронная почта — мы же должны знать, куда отправлять ответ;
3. тема сообщения — тоже необходимая информация, по ней мы определимся, кто будет отвечать на это письмо;
4. текст сообщения — здесь комментарии излишни.

Сразу определимся, что все поля обязательны для заполнения и, соответственно, все они требуют проверки на корректность введённых данных.

Мы не будем подробно рассматривать этапы создания HTML вёрстки и оформления её стилями, т.к. наша главная задача — написать скрипт валидации введённых данных и отправить их на сервер. Поэтому сразу представим готовую разметку HTML и таблицу стилей для него с минимумом комментариев.

HTML-разметка формы обратной связи.

Отметим лишь один элемент данной формы:

В этот мы будем выводить красиво оформленное сообщение об ошибке.

Таблица стилей для формы обратной связи.

Представлены только стили, относящиеся непосредственно к самой форме обратной связи.

Очень важно.
Для уменьшения размера таблицы стилей, я не буду приводить свойства с вендорными префиксами, обеспечивающими кроссбраузерность. Не забывайте прописывать их при реализации своих проектов.

Критерии валидации формы обратной связи.

Прежде чем мы начнём писать скрипт валидации, давайте определимся, по каким критериям мы будем оценивать корректность введённых пользователем данных, какие данные мы будем считать валидными, а какие нет.

Во-первых , для всех полей формы проверяем заполнены они или нет. Это самая простая проверка.

Это очень важно.
Для следующих проверок будут использоваться регулярные выражения. Мы не будем разбирать, как составляются и работают регулярные выражения. Это отдельная и достаточно объёмная тема для разговора. О регулярных выражениях вы сможете прочитать здесь .
При написании скрипта валидации мы будем использовать уже готовые паттерны (шаблоны) RegExp.

Во-вторых , поле «Ваше имя». Давайте определимся, что мы ожидаем получить реальное имя человека на русском языке. Значит поступившие данные должны содержать только прописные и строчные буквы русского алфавита. Разрешим ещё и пробел — пользователь кроме имени может указать ещё и своё отчество. Наличие любых других символов приведёт к ошибке.
Паттерн RegExp для такой проверки будет выглядеть так: /^[а-яёА-ЯЁ\s]+$/ .

В-третьих , поле «Электронная почта». Здесь особых объяснений не нужно.
Паттерн RegExp для этого поля выглядит так:
/^[A-Za-z0-9](([_\.\-]?[a-zA-Z0-9]+)*)@([A-Za-z0-9]+)(([\.\-]?[a-zA-Z0-9]+)*)\.([A-Za-z])+$/ .

В-четвёртых , поля «Тема сообщения» и «Текст сообщения». В этих полях допустимы любые символы. Более серьёзная проверка на спам и защита от хакеров осуществляется в php-скрипте, в который мы передадим данные формы, но это находится за пределами темы нашей статьи.

Начинаем писать Javascript валидации формы.

Для ограничения области видимости нашего скрипта и исключения конфликтов с другими js-скриптами, разместим код в анонимной самозапускающейся функции.

Источник

Форма обратной связи через Node.js

Всем привет, хочу поделиться рабочей формой обратной связи на node.js.

Для начала, создадим саму форму (Проект обязательно должен называться index.html):

         
Форма связи
 
 
Имя:
 
Почта:
 
Сообщение:
 
 
Отправить
  
 @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 

Дальше ловим данные с форм через 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 Имя: $,\n Почта: $,\n Сообщение: $;\n )\n`) >) response.writeHead(302, < "Location": "/" >) response.end("Sent successfully!") > else< response.writeHead(200, < "Content-Type": "text/html" >) response.end(`
404


Page not found
`) > >) server.listen(3000) 

Написав код, создайте admin.txt, туда будут записываться данные с форм. После всех манипуляций осталось только паблишнуть проект, для этого я использую бесплатный сервис https://replit.com/. Первый шаг — регистрация. Тут все как всегда, юзернейм, почта, пароль.

После регистрации кликаем на My Repls:

Дальше находим Node.js и называем наш проект как хотим, к примеру MySite.:

Прошу также учесть, что проект публичный, то есть, его будут видеть все, кто зайдет на ваш профиль, если хотите скрыть проект, прийдеться покупать платную версию.

После создания «Репла» перетаскиваем наши файлы с папки, а именно admin.txt, index.html и index.js:

После чего в package.json, который создается автоматически обязательно прописываем «type»:»module»,:

Дальше жмем Run и ждем, пока проект загрузиться:

Дальше копируем у себя свою ссылку, которую я обвел и вставляем в браузер:

После отправки данные с форм приходят к нам в файлик на хостинге:

Также, обратите внимание, что проект по ссылке будет открываться не сразу. К примеру, у меня он открылся через 5 минут после нажатия Run.

Спасибо за внимание! Хорошего дня 🙂

Источник

Создание простой формы на HTML, CSS и JavaScript

От автора: Создание HTML-форм – один из основополагающих разделов в веб-дизайне и веб-программировании. Используя формы, мы регистрируемся на сайтах, пишем сообщения в гостевые книги, оставляем комментарии, пишем и отправляем письма через веб-интерфейсы почтовых сервисов. Написание абсолютного большинства веб-приложений начинается с создания формы. На счет «абсолютного большинства» я, конечно загнул, серьезные программисты начинают, как правило, с другого. А вот начинающие разработчики, такие как автор этого туториала, начинают проектирование своего первого dt,-приложения с создания простой HTML-формы.

Автор: Павел Карабило

Начинающий веб-разработчик, самоучка. Живу, учусь, работаю в столице Украины. Активно изучаю JavaScript, jQuery, CSS3, HTML5, PHP, SQL. Особый интерес питаю к дизайну и разработке интерактивных интерфейсов веб-приложений (front-end).

Онлайн курс по JavaScript

Научитесь создавать приложения со сложными интерфейсами

Это основной язык для современной веб-разработки — почти 100% сайтов работает на JavaScript. Освойте его с нуля всего за 4 месяца, и вы сможете зарабатывать от 70 000 рублей.

В этом туториале я буду использовать HTML, CSS3 и совсем чуточку – JavaScript. Следуя за мной шаг за шагом, начинающий веб-программист (или веб-дизайнер) сможет создать простую форму, которая сможет стать основой для первой гостевой книги, системы комментариев или другого простого веб-приложения. Надеюсь, в недалеком будущем, я предоставлю вашему вниманию небольшой туториал, в котором расскажу, как из одной такой формы спроектировать и написать гостевую книгу, используя PHP и MySQL.

Перед тем, как мы приступим к практическим шагам, я Вам рекомендую просмотреть демо-результат работы.

Также скачайте исходники себе на компьютер!

Шаг 1.

Для начала, давайте определимся, для чего мы будем создавать форму. Если бы мы создавали форму для регистрации на крупном портале, то нам пришлось бы разместить на ней поля для ввода имени, фамилии, логина пользователя, его адреса электронной почты, и, возможно, для его реального адреса, поле для пароля, и т.д. В общем, нам придется разместить на форме целую кучу полей, в которых мы запутаемся, а гости нашего сайта – тем более. Я решил сделать простейшую форму для самой простой гостевой книги, для этого мне понадобится:

поле для ввода имени автора сообщения;

поле для ввода адреса его электронной почты;

текстовую область для написания сообщения;

кнопка с надписью «Отправить» или любой другой для того, чтобы все это дело работало.

Начнем, пожалуй, с HTML. Создадим файл и назовем, его, например, index.html. Или как вам будет угодно, я назову его именно так.

Напишем в наш файл следующий HTML-код:

Источник