Форма обратной связи html: Делаем форму обратной связи на сайте

Содержание

Форма обратной связи для сайта. Что это такое, для чего она нужна и как ее создать?

Форма обратной связи уже давно является наиболее приемлемым способом общения между владельцем ресурса и пользователем.

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

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

Это происходит благодаря тому, что человеку, который хочет задать вопрос, не нужно тратить драгоценные минуты на запуск почтового клиента, чтобы отправить письмо. Все что требуется – это перейти на страницу с формой обратной связи, ввести в предназначенных для этого полях имя, адрес электронной почты, нужный текст и кнопку отправки. Что касается больших компаний, то здесь при выборе адресата многие пользователи просто теряются, так как часто указано множество различных электронных ящиков. И тут в который раз выручит форма обратной связи! Более того, при ее правильном использовании можно в значительной мере повысить конверсию.

Также в данной форме может присутствовать еще одна строка, установить которую крайне рекомендуется всем владельцам сайтов, использующих такой вид обратной связи. Речь идет о Captcha — коде, который представляет собой дополнительное поле, куда необходимо ввести определенные цифры с картинки либо набор символов. Без этого письмо отправлено не будет.

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

Для того, чтобы создать форму обратной связи самостоятельно, необходимы специальные навыки, среди которых знание html, javascript и php. Однако, существует и альтернатива, используя которую каждый владелец сайта может без труда сгенерировать нужную регистрационную форму, бланк заказа либо форму обратной связи. А именно онлайн конструктор форм formdesigner.ru

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

В первом разделе у вас будет возможность настроить внешний вид писем, установить защиту, выбрать действие, которое последует при успешной отправке и т.

д.

В разделе «Элементы» можно добавить, удалить либо отредактировать поля для заполнения. Они могут быть текстовыми, цифровыми, с изображением и т.д. Помимо этого, у вас будет возможность установить кнопки социальных сетей.

Особенностью онлайн конструктора форм formdesigner.ru является то, что при помощи нашего онлайн-сервиса можно создать форму обратной связи всего в несколько кликов. После чего вы получите специальный код, который следует вставить на сайт.

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

Дополнительное положительное качество formdesigner.ru – это то, что кроме рассылки писем на ваши адреса, они сохраняются и в самой системе, поэтому можно в любой момент прочитать даже то, что попало под фильтр спама. Помимо этого, в разделе «Статистика» вам будет предоставлен подробный отчет за определенный период времени.

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

190+ Форма обратной связи HTML шаблоны

Шаблоны веб-сайтов для контактной формы

Вы можете использовать Шаблоны веб-сайтов с контактной формой для разных целей. Например, вы можете установить его на место сайта, пока он не будет готов. На адаптивном веб-сайте форму для бизнес-контактов можно регулярно использовать независимо от веб-дизайна.

Бесплатные шаблоны контактных форм удобны, и любому веб-мастеру не будет лишним иметь один в наличии. Посетители страницы шаблонов контактных форм регистрируются, заполняют простую контактную форму, пишут текст сообщения и нажимают кнопку «Отправить». Лучшие бесплатные фоновые контактные формы Google Maps целевые страницы адаптируются к мобильным устройствам и обеспечивают отличную стилевую базу. Бесплатные темы WordPress для контактной формы по недвижимости гарантируют потрясающее отображение вашего контента. Одностраничные шаблоны контактной формы позволяют легко использовать множество различных элементов, таких как контактная информация веб-сайта, значки, плагины тем WordPress, типы шрифтов, знаки карты Google, контактные данные для экстренных случаев, контактная форма css3 с картой Google, конструктор целевой страницы приложения и т. Д. Загрузите лучший бесплатный шаблон контактной страницы html5 с современным веб-дизайном, видеоэффектами и представьте свой бизнес наилучшим образом.
Одностраничный адаптивный шаблон SCRN, который скоро появится, гарантирует, что сайт будет работать без сбоев. Мы предлагаем современную форму обратной связи для общих запросов.

Бесплатные контактные HTML-шаблоны имеют оригинальный дизайн, который впишется в тематику дизайна сайта. Мы находим многие другие контактные данные для запросов на странице контактов, включая информацию, вопросы поддержки, визуальные контактные формы, адрес электронной почты, контакты целевой страницы приложения и другие. Лучший адаптивный шаблон контактной формы с фоном карты Google и элегантной контактной формой на веб-сайте позволяет клиентам легко связаться с вашей службой поддержки. С плагинами WordPress вы получаете высококачественный шаблон формы для связи с сотрудниками в экстренных случаях. Бесплатная контактная HTML-форма в Интернете оптимизирована для мобильных устройств и помогает классифицировать получаемые вами электронные письма. Добавьте электронную почту в контактную форму в темах WordPress, а шаблоны начальной загрузки обеспечивают очень красивое анимированное представление контактов.

Адаптивная целевая страница контактной формы и бесплатный шаблон страницы контактной формы html5 подходят для многих сайтов, потому что вы можете изменить фон изображения, что автоматически меняет тему сайта. В шаблоне контактной формы веб-сайта вы найдете все элементы, присущие таким сайтам: карты Google, элементы шаблонов администрирования и т. Д. Сегодня очень популярные шаблоны, такие как шаблон целевой страницы начальной загрузки, шаблон карт Google, макет контакта для экстренных случаев студента, простой контакт. шаблон формы, креативный одностраничный шаблон, тема WordPress для контактной формы, шаблон страницы контактной формы html5 и т. д. Нажмите кнопку загрузки, и вы получите тему WordPress для контактной формы и шаблон контактной формы html5 с креативной целевой страницей. На Nicepage вы можете найти старинную контактную форму, минимальный шаблон формы регистрации, одностраничный шаблон wunderkind, бесплатный шаблон PHP контактной формы html5 и т. Д.

Премиальные шаблоны начальной загрузки с контактными формами в современном стиле облегчат вашу работу.

Шаблоны начальной загрузки адаптивного веб-сайта для мобильных устройств позволяют привлечь всеобщее внимание одним движением пальца. На лучшем бесплатном веб-сайте с контактной формой шаблоны будут получать удовольствие от просмотра вашего контента. 25 лучших бесплатных форм обратной связи помогут вам быстро расширить охват, а также привлечь больше потенциальных клиентов в свой бизнес. Добавьте свой адрес на страницу контактов, чтобы пользователям было проще найти вашу компанию. Потенциальным клиентам очень легко загрузить шаблоны начальной загрузки и настроить их. Клиенты могут зарегистрироваться на сайте и запросить контактные данные компании. Бесплатный шаблон формы запроса на контакт в формате html5 с викторинами по генерации лидов всегда обеспечивает первоклассную производительность. HTML-шаблоны с более быстрым веб-дизайном и создателем логотипов недвижимости отлично подходят для современных веб-сайтов. В целом отличная контактная форма с кодом капчи привлечет внимание клиентов.
Бесплатный шаблон страницы контактной формы html5 с целевыми страницами Unbounce поможет вам вывести свой бизнес на совершенно новый уровень. Шаблон страницы контактной формы HTML5, скоро появится шаблон, тема WordPress для контактной формы гарантирует, что каждый получит всю необходимую информацию. Адаптивная целевая страница приложения позволяет посетителям добавлять имя и адрес электронной почты после регистрации на веб-сайте. Иногда вы можете найти информацию, что тема WordPress находится в стадии разработки, а это значит, что вы сможете загрузить макет через несколько раз.

Форма обратной связи для сайта CSS+HTML

В этом уроке я хочу показать как можно создать форму обратной связи HTML5 с эффектами анимации полей.
Мы будем использовать CSS3 и HTML5 без Java скриптов. Форму обратной связи в действии вы можете посмотреть в демо примере.

Просмотр Скачать

Структура HTML Формы

Каждая строка у нас помещена в DIV контейнер, так гораздо удобнее располагать метки рядом с полем ввода. Вся форма помещена в DIV шириной 660px по центру страницы.

<div>
<h2>Написать письмо !</h2>
<form name=»contact» method=»post» action=»#»>
<p><span>*</span> Поля со звездочкой обязательны для заполнения</p>
<div>
<label for=»name»>Ваше Имя <span>*</span></label>
<input type=»text» name=»name» tabindex=»1″ placeholder=»Стив Джобс» required>
</div>

<div>
<label for=»email»>E-mail Адрес <span>*</span></label>
<input type=»email» name=»email» tabindex=»2″ placeholder=» Этот адрес электронной почты защищен от спам-ботов. У вас должен быть включен JavaScript для просмотра. » required>
</div>

<div>
<label for=»subject»>Тема <span>*</span></label>
<input type=»text» name=»subject» tabindex=»3″ placeholder=»Тема письма» required>
</div>

<div>
<label for=»message»>Сообщение <span>*</span></label>
<textarea name=»message» tabindex=»4″ required></textarea>
</div>

<div>
<input type=»submit» name=»submitbtn» tabindex=»5″ value=»Отправить Сообщение»>
</div>
</form>
</div>

Структура CSS Формы

Вся анимация выполнена с новыми свойствами CSS 3. Все фоны выполнены обыкновенными градиентами. Обратите внимание на анимацию кнопки. Тени при наведении тоже выполнена на CSS3.

/* form styles */
form .row {
display: block;
padding: 7px 8px;
margin-bottom: 7px;
}
form .row:hover {
background: #f1f7fa;
}

form label {
display: inline-block;
font-size: 1.2em;
font-weight: bold;
width: 120px;
padding: 6px 0;
color: #464646;
vertical-align: top;
}
form .req { color: #ca5354; }

form .note {
font-size: 1.2em;
line-height: 1.33em;
font-weight: normal;
padding: 2px 7px;
margin-bottom: 10px;
}

form input:focus, form textarea:focus { outline: none; }

/* placeholder styles: http://stackoverflow.com/a/2610741/477958 */
::-webkit-input-placeholder { color: #aaafbd; font-style: italic; } /* WebKit */
:-moz-placeholder { color: #aaafbd; font-style: italic; } /* Mozilla Firefox 4 to 18 */
::-moz-placeholder { color: #aaafbd; font-style: italic; } /* Mozilla Firefox 19+ */
:-ms-input-placeholder { color: #aaafbd; font-style: italic; } /* Internet Explorer 10+ */

form . txt {
display: inline-block;
padding: 8px 9px;
padding-right: 30px;
width: 240px;
font-family: ‘Oxygen’, sans-serif;
font-size: 1.35em;
font-weight: normal;
color: #898989;
}

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

Как добавить на сайт форму обратной связи — Webasyst

Пример формы обратной связи

Как добавить такую форму на свой сайт

  1. Откройте приложение «Сайт» и перейдите в раздел «Блоки».
  2. Выберите блок с названием «site.send_email_form».
  3. Щелкните по фрагменту кода под надписью «Встроить на страницу или в шаблон».
  4. Скопируйте выделенный фрагмент кода и вставьте его в HTML-код любой страницы или шаблон темы дизайна.
Как изменить адрес, на который отправляются сообщения из формы обратной связи

Сообщения, которые посетители сайта оставляют через форму обратной связи, отправляются на email-адрес, указанный в поле «Email-адрес для уведомлений» в приложении «Настройки».

Введите в этом поле любой email-адрес, на который должны отправляться все системные уведомления Вебасиста, включая сообщения из формы обратной связи.

Если вы не хотите изменять содержимое этого поля, то можно указать адрес получателя сообщений обратной связи в исходном коде блока «site.send_email_form». Для этого добавьте нужный email-адрес внутри кавычек, как показано ниже:


$wa->sendEmail("[email protected]", $errors)

Можно указать и несколько адресов получателей:

Простой формат (только адреса)


{$wa->sendEmail(['[email protected]', '[email protected] ru'], $errors)}

Расширенный формат (адреса получателей с их именами)


{$wa->sendEmail(['[email protected]' => 'Имя1', '[email protected]' => 'Имя2'], $errors)}
Как убрать поле для ввода защитного кода (капчи)

Для защиты от автоматически добавляемых сообщений (спама) в форме обратной связи используется поле для ввода защитного кода (капчи).

Если вы считаете, что необходимость вводить защитный код мешает посетителям вашего сайта отправлять сообщения, то отключите это поле. Для этого перед строкой с вызовом метода {$wa->sendEmail(…)} добавьте следующее:


{$wa->storage(['captcha', $wa->app()], '')}

Таким образом вы «говорите» фреймворку Webasyst, что правильной капчей является пустая, т. е. сообщение отправится, если ничего не написать в поле для ввода защитного кода.

Теперь осталось убрать поле для ввода защитного кода, чтобы оно не вводило в заблуждение посетителей сайта. Для этого удалите из исходного кода блока «site.send_email_form» следующий фрагмент:


<div>
    <div>
        {$wa->captcha(!empty($errors.captcha))}
        {if !empty($errors.captcha)}<em>{$errors.captcha}</em>{/if}
    </div>
</div>

Как создать форму обратной связи в WordPress

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

Шаг 1. Страница с формой

Создаём в папке с темой новый файл — это будет шаблон страницы с формой. Файл можно назвать как угодно, нам важно лишь его содержимое.

<?php
/* 
 * Template name: Форма обратной связи
 */
get_header(); // эта строчка кода у вас может отличаться
 
/*
 * Тут мы будем обрабатывать ошибки и выводить соответствующие сообщения
 */
if( isset( $_GET['msg'] ) ) {
	// в случае успеха
	if( $_GET['msg'] == 'success' )
		echo '<span>Сообщение успешно отправлено</span>';
 
	// в случае ошибки
	if( $_GET['msg'] == 'error' )
		echo '<span><strong>Ошибка:<strong> Проверьте правильность введённых вами данных. </span>';
	// вы сами можете добавить различные другие сообщения об ошибках
 
}
 
/* 
 * Антиспам-трюк
 * у нас есть два фейковых поля, при заполнении которых прерывается выполнение скрипта
 * сделаем так, чтобы они были скрыты для пользователей при помощи CSS
 */
echo '<style>textarea[name="comment"],textarea[name="message"]{display:none}</style>';
?>
	<form action="<?php echo site_url() ?>/send.php" method="POST">
		<input type="text" name="name" required="true" placeholder="Имя *" />
		<input type="text" name="email" required="true" placeholder="Email *" />
		<textarea name="comment"></textarea>
		<textarea name="message"></textarea>
		<textarea name="soobschenie" required="true" placeholder="Сообщение *"></textarea>
		<button>Отправить</button>
	</form>
<?php
get_footer();  // эта строчка кода у вас может отличаться

Шаг 2. Файл-обработчик. Отправка формы

В этой статье в качестве файла-обработчика я создал новый файл send. php прямо в директории установки WordPress, но вы можете поместить его и в тему без проблем.

<?php
// проверка на спам - просто прерываем выполнение кода, при желании можно и сообщение спамерам вывести
if( isset( $_POST['comment'] ) || isset( $_POST['message'] ) )
	exit;
 
// подключаем WP, можно конечно обойтись без этого, но зачем?
require( dirname(__FILE__) . '/wp-load.php');
 
// следующий шаг - проверка на обязательные поля, у нас это емайл, имя и сообщение
if( isset( $_POST['name'] )
  && isset( $_POST['email'] ) && is_email( $_POST['email'] ) // is_email() - встроенная функция WP для проверки корректности емайлов
  && isset( $_POST['soobschenie'] ) ) {
 
	$headers = array(
		"Content-type: text/html; charset=utf-8",
		"From: " . $_POST['name'] . " <" . $_POST['email'] . ">"
	);
 
	if( wp_mail( get_option('admin_email'), 'Сообщение с сайта', wpautop( $_POST['soobschenie'] ), $headers ) ) {
		header('Location:' . site_url('/contact?msg=success') );
		exit;
	}
 
 
}
 
header('Location:' .  site_url('/contact?msg=error') );
exit;

Миша

Недавно я осознал, что моя миссия – способствовать распространению WordPress. Ведь WordPress – это лучший движок для разработки сайтов – как для тех, кто готов использовать заложенную структуру этой CMS, так и для тех, кто предпочитает headless решения.

Сам же я впервые познакомился с WordPress в 2009 году. Организатор WordCamp. Преподаватель в школах Epic Skills и LoftSchool.

Если вам нужна помощь с вашим сайтом или может даже разработка с нуля на WordPress / WooCommerce — пишите. Я и моя команда сделаем вам всё на лучшем уровне.

Простая форма обратной связи своими руками.

 В этой статье мы расскажем о том, как сделать простую, работающую форму обратной связи на PHP.

Первым делом разберемся с файловой структурой, у нас будет главная страница index.html, папка со стилями — css, в которой будет один файл стилей template.css и файл PHP — send.php.

Первым делом создадим разметку нашей формы в файле index. html:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
	<title>Страница</title>
	<link rel="stylesheet" href="/../css/template.css" type="text/css" />
</head>
<body>
	<form action="send.php" method="get">
		<input type="text" placeholder="Введите сюда e-mail" name="e-mail"><br>
		<input type="text" placeholder="Введите сюда ваше имя" name="name"><br>
		<input type="submit" value="Нажмите, чтобы отправить письмо">
	</form>
</body>
</html>

Ключевыми тут являются атрибуты action и method у <form>, первый отвечает за путь до PHP файла обработчика отправления письма, а второй за тип передачи в этот обработчик данных.

  • В нашем случае файл-обработчик send.php, который лежит в корневом каталоге, рядом с index.html, потому и путь такой.
  • И мы выбрали метод GET, так же можно выбирать метод POST, просто получать данные потом в PHP файле вы будете по другому.
  • Для <input> важен атрибут name, при помощи его значения потом мы будем доставать значения в PHP.

Добавим немного стилей, чтобы форма была по центру страницы:

form {
	text-align:center;
}
form input {
	margin:20px 0;
}

Теперь остается только написать обработчик send.php, который будет отправлять сообщение на почту.

Немного о логике происходящего. Пользователь, попав на страницу index.html, заполняет поля формы и нажимает на кнопку Отправить (В нашем случае она будет с текстом «Нажмите, чтобы отправить письмо»), после чего страница переходи к файлу send.php, который будет выполнять, написанный нами скрипт, по его результатам выводить сообщение об успешной/не успешной отправке.

Немного о самом скрипте, чтобы продемонстрировать работоспособность примера, письмо будет отправляться на указанный в поле E-mail. Т.е. вы сможете ввести свой адрес и удостоверится в работе скрипта.

Вот сам скрипт, с комментариями строк:

<?php
	//Получаем данные из глобальной переменной $_GET, так как мы передаем данные методом GET
	$name = $_GET['name']; // Вытаскиваем имя в переменную
	$email = $_GET['e-mail']; // Вытаскиваем почту в переменную
	$message = "Поздравляем, $name, отправка сообщений на почту $email работает"; // Формируем сообщение, отправляемое на почту
	$to = $email; // Задаем получателя письма
	$from = "noreply-site. web.cofp.ru"; // От кого пришло письмо
	$subject = "Письмо с примера простой формы сайта web.cofp.ru"; // Задаем тему письма
	$headers = "From: $from\r\nReply-To: $to\r\nContent-type: text/html; charset=utf-8\r\n"; // Формируем заголовок письма (при неправильном формировании может ломаться кодировка и т.д.)
	if (mail($to, $subject, $message, $headers)) { // При помощи функции mail, отправляем сообщение, проверяя отправилось оно или нет
		echo "<p>Сообщение успешно отправлено</p>"; // Отправка успешна
	}
	else {
		echo "<p>Что-то пошло не так, как планировалось</p>"; // Письмо не отправилось
	}
?>

Чтобы понять, что тут происходит, вам нужны хотя бы базовые знания PHP или программирования на других языках. Комментарии помогут вам.

Там где мы вытаскиваем данные в переменные — используется глобальная переменная и значения атрибутов name, соответствующих полей.

Результат работы примера можно увидеть на демо-странице:

 

Скачать исходники примера ниже:

Создаем форму обратной связи на PHP

Одной из наиболее часто встречающихся на практике задач является реализация формы обратной связи. Тобишь написание ее HTML кода, оформление ее на CSS, создание PHP скрипта, который бы обрабатывал полученные от пользователя данные и отправлял их на нашу почту, написание JS скрипта, который бы проверял форму на адекватность вводимых данных, защита нашего детища от спама, чтобы наш почтовый ящик не обвалился от атак ботов.

Все вышеперечисленные моменты будут рассмотрены в нашем обзоре и подробно прокомментированы.

Итак, начинаем создание формы обратной связи:

HTML

В первую очередь мы пишем HTML код, в нем задаются поля, которые будет заполнять пользователь. Они же в дальнейшем будут оформляться. Код формы выглядит следующим образом:

<form method="post" action="mail.php">
 
   <div>
      <label for="name">Имя:</label>
      <input maxlength="30" type="text" name="name" />
 
      <label for="phone">Телефон:</label>
      <input maxlength="30" type="text" name="phone" />
 
      <label for="mail">E-mail:</label>
      <input maxlength="30" type="text" name="mail" />
   </div>
 
   <div>
      <label for="message">Сообщение:</label>
      <textarea rows="7" cols="50" name="message"></textarea>
 
      <input type="submit" value="Отправить" />
   </div>
 
</form>

И визуально она выглядит сейчас следующим образом:

Согласен, пока все некрасиво и ничего не понятно, но мы только начали.

Рассмотрим приведенный выше код подробно:

  • <form method="post" action="mail.php"> … </form>

    для того, чтобы создать форму необходимо использовать тег form. Именно он определяет начало и конец формы для интерпретатора кода. У него, как и у любого тега, есть целый набор атрибутов, но обязательных для работы формы всего два, это method (метод отправки запроса на сервер, для форм стандартно используют post) и action (указывает путь к файлу-обработчику формы, именно в этом файле будет содержаться скрипт на PHP, который после будет отправлять введенные пользователем значения нам на почту, в нашем случае мы видим, что это файл называется mail.php и лежит он в том же директории сайта, что и рассматриваемая нами страница).
  • <input maxlength="30" type="text" name="name" />

    Далее у нас следуют инпуты. Это собственно сами поля формы в которые пользователи будут вводить необходимую нам информацию (type=»text» говорит о том, что это будет текст). Атрибут maxlength указывает сколько символов может ввести пользователь в данное поле формы. Самый важный атрибут это name – он задает имя конкретного поля. Именно по этим именам в дальнейшем PHP скрипт будет обрабатывать поступающую в него информацию. При желании можно еще задать атрибут placeholder, который выводит внутри поля текст исчезающий при установке курсора внутри нее. Одной из проблем плейсхолдера является то, что он не поддерживается некоторыми старыми браузерами.
  • <label for="name">Имя:</label>

    Используется в случае если мы отказались от плейсхолдеров. Обычная подпись поля, атрибут for сообщает к какому конкретно полю относится данная подпись. Значением указывается name интересующего нас поля.
  • <textarea rows="7" cols="50" name="message"></textarea>

    Также как и инпут предназначен для введения пользователем информации, только на этот раз поле заточено для длинных сообщений. Rows указывает размер поля в строках, cols в символах. В целом они задают высоту и ширину нашего поля.
  • <input type="submit" value="Отправить" />

    О том, что это кнопка для отправки формы нам сообщает type=»submit», а value задает текст, который будет внутри этой кнопки.
  • <div> </div>

    использованы только для дальнейшего визуального оформления формы.

CSS

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

Мы использовали данный код:

form {
   background: #f4f5f7;
   padding: 20px;
}
form .left, form .right {
   display: inline-block;
   vertical-align: top;
   width: 458px;
}
form .right {
   padding-left: 20px;
}
label {
   display: block;
   font-size: 18px;
   text-align: center;
   margin: 10px 0px 0px 0px;
}
input, textarea {
   border: 1px solid #82858D;
   padding: 10px;
   font-size: 16px;
   width: 436px;
}
textarea {
   height: 98px;
   margin-bottom: 32px;
}
input[type="submit"] {
   width: 200px;
   float: right;
   border: none;
   background: #595B5F;
   color: #fff;
   text-transform: uppercase;
}

Подробно расписывать CSS я не вижу смысла, обращу Ваше внимание лишь на ключевые моменты:

  1. Не стоит писать оформление под каждый тег в форме. Старайтесь строить свои селекторы так, чтобы парой строк кода оформлять все необходимые Вам элементы.
  2. Не используйте для переноса строк и создания отступов лишние теги по типу <br>, <p> и тд, с этими задачами прекрасно справляется CSS со свойством display: block и margin с padding. Больше о том, почему не стоит пользоваться <br> в верстке вообще можете почитать в статье Тэг br, а так ли он нужен?.
  3. Не стоит пользоваться табличной версткой для форм. Это противоречит семантике этого тега, а поисковики любят семантичный код. Для того, чтобы формировать визуальную структуру документа нам достаточно тегов div, и заданных им в CSS свойств display: inline-block (выстраивает блоки в ряд) и vertical-align: top (не дает им разбежаться по экрану), задаем им необходимую высоту и вуаля, ничего лишнего и все расположено так, как нам нужно.

Для желающих экономить свое время на оформлении сайтов могу посоветовать пользоваться CSS фреймворками при создании сайтов, особенно самописных. Мой выбор в этом плане- Twitter Bootstrap. Урок по оформлению форм с его использованием можно посмотреть тут.

PHP

Ну вот и пришло время сделать нашу форму работоспособной.

Заходим в наш корневой каталог сайта и создаем там файл mail.php, к которому мы ранее указывали путь в атрибуте action тега form.

В конечном итоге его код будет выглядеть следующим образом:

<!doctype html>
<html>
<head>
   <meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
   <title>Ваше сообщение успешно отправлено</title>
</head>
 
<body>
 
<?php
   $back = "<p><a href=\"javascript: history.back()\">Вернуться назад</a></p>";
 
   if(!empty($_POST['name']) and !empty($_POST['phone']) and !empty($_POST['mail']) 
   and !empty($_POST['message'])){
      $name = trim(strip_tags($_POST['name']));
      $phone = trim(strip_tags($_POST['phone']));
      $mail = trim(strip_tags($_POST['mail']));
      $message = trim(strip_tags($_POST['message']));
 
      mail('почта_для_получения_сообщений@gmail. com', 'Письмо с адрес_вашего_сайта', 
      'Вам написал: '.$name.'<br />Его номер: '.$phone.'<br />Его почта: '.$mail.'<br />
      Его сообщение: '.$message,"Content-type:text/html;charset=windows-1251");
 
      echo "Ваше сообщение успешно отправлено!<Br> Вы получите ответ в 
      ближайшее время<Br> $back";
 
      exit;
   } 
   else {
      echo "Для отправки сообщения заполните все поля! $back";
      exit;
   }
?>
</body>
</html>

Обсуждение HTML и CSS части этого документа можно пропустить. По своей сути это обычная страница сайта, которую Вы можете оформить по своему желанию и необходимости. Рассмотрим же важнейшую ее часть – PHP скрипт обработки формы:

$back = "<p><a href=\"javascript: history.back()\">Вернуться назад</a></p>";

Этой строкой мы создаем ссылку для возвращения на предыдущую страницу. Поскольку мы заранее не знаем с какой страницы пользователь попадет на эту, то делается это при помощи маленькой JS функции. В дальнейшем мы просто будем обращаться к этой переменной для вывода ее в нужных нам местах.

if(!empty($_POST['name']) and !empty($_POST['phone']) 
and !empty($_POST['mail']) and !empty($_POST['message'])){
   //внутрення часть обработчика
} 
else {
   echo "Для отправки сообщения заполните все поля! $back";
   exit;
}

Тут мы прикручиваем проверку формы на наполненность полей. Как вы догадались, в части $_POST[‘name’] в кавычках мы пишем значение атрибута name наших инпутов.

Если все поля заполнены, то скрипт начнет обрабатывать данные в своей внутренней части, если же хоть одно поле не было заполнено, то на экран пользователя выведется сообщение с требованием заполнить все поля формы echo «Для отправки сообщения заполните все поля! $back» и ссылкой для возврата на предыдущую страницу, которую мы создали самой первой строкой.

Дале вставляем во внутреннюю часть обработчика формы:

$name = trim(strip_tags($_POST['name']));
$phone = trim(strip_tags($_POST['phone']));
$mail = trim(strip_tags($_POST['mail']));
$message = trim(strip_tags($_POST['message']));

Таким образом мы очистили вводимые пользователем данные от html тегов и лишних пробелов. Это позволяет нам обезопасить себя от получения вредоносного кода в высылаемых нам сообщениях.

Проверки можно и усложнить, но это уже по вашему желанию. Минимальную защиту на серверной стороне мы уже поставили. Дальнейшее мы сделаем на стороне клиента используя JS.

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

После чистки тегов добавляем отправку сообщения:

mail('почта_для_получения_сообщений@gmail.com', 'Письмо с адрес_вашего_сайта', 
'Вам написал: '.$name.'<br />Его номер: '.$phone.'<br />Его почта: '.$mail.'<br />
Его сообщение: '.$message,"Content-type:text/html;charset=windows-1251");

Именно эта строка и занимается формированием и отправкой сообщения к нам. Заполняется она следующим образом:

  1. ‘почта_для_получения_сообщений@gmail.com’ – сюда между кавычек вставляете свою почту
  2. ‘Письмо с адрес_вашего_сайта’ – это тема сообщения, которое будет приходить на почту. Можно написать сюда что угодно.
  3. ‘Вам написал: ‘.$name.’<br />Его номер: ‘.$phone.’<br />Его почта: ‘.$mail.’<br />Его сообщение: ‘.$message – формируем сам текст сообщения. $name – вставляем информацию заполненную пользователем через обращение к полям из предыдущего шага, в кавычках описываем что значит это поле, тегом <br /> делаем перенос строки, чтобы сообщение в целом было читабельно.
  4. Content-type:text/html;charset=windows-1251 — в конце идет явное указание типа данных передаваемого в сообщении и его кодировки.

ВАЖНО!

Кодировка указанная в «голове» документа (<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />), кодировка из сообщения Content-type:text/html;charset=windows-1251 и в целом кодировка файла PHP должны совпадать иначе в получаемых на почту сообщениях вместо русских или английских букв будут выводиться «кракозябры». [A-Za-z0-9][A-Za-z0-9\._-]*[A-Za-z0-9_]*@([A-Za-z0-9]+([A-Za-z0-9-]*[A-Za-z0-9]+)*\.)+[A-Za-z]+$/ — первые несколько символов это английские буквы или точки, потом знак @, потом снова английские буквы, потом точка и потом еще несколько английских букв).

  • Если все верно, то проверка ничего не выводит и идет к следующему блоку кода, если же проверка на символы выдала ошибку, то выполняется часть скрипта с действиями 5 и 6.
  • Пользователю выводится это сообщение о ошибке.
  • Происходит выход из скрипта проверки.
  • Как можете заметить такая мини проверка пишется для каждого нашего поля. Проверку на одно поле я выделил на скриншоте красным квадратом, у других полей она имеет аналогичную структуру и если возникнет необходимость добавить поле или убрать его, Вы теперь с легкостью сможете это сделать.

    Полный код страниц формы

    Для удобства разместили полный код страниц в открытом доступе. Итак, в корне сайта должны лежать файлы:

    Подводя итоги

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

    Так что начинайте с малого, своей первой рабочей формы, и дополняйте ее по мере необходимости своими частями.

    Надеюсь этот мануал окажется для Вас полезным. Если что-то было не понятно или не получается повторить – задавайте вопросы в комментариях.

    О защите от спама я напишу в следующих статьях.

    Оценок: 63 (средняя 4.7 из 5)

    10 Контактные формы CSS

    Коллекция отобранных вручную бесплатных HTML и CSS контактных форм примеров кода. Обновление коллекции за октябрь 2018 г. 1 новый предмет.

    1. Формы CSS
    2. Формы входа в систему CSS
    3. CSS Checkout Forms
    4. CSS Формы подписки
    5. Формы начальной загрузки
    О коде

    Ретро форма обратной связи пользовательского интерфейса

    Форма обратной связи пользовательского интерфейса HTML и CSS в стиле ретро.

    Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

    Адаптивный: нет

    Зависимости: —

    Автор
    • Махваш Фатима
    О коде

    Адаптивный CSS 3D Контактная форма

    Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

    Зависимости: —

    Автор
    • Шанте Остин
    О коде

    Плавающая контактная форма CSS

    Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

    Зависимости: —

    Автор
    • Кришантус Вананди
    О коде

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

    Дизайн Гурураджа — https: // dribbble. com / shots / 2666271-Контакт

    Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

    Зависимости: —

    Сделано с
    • HTML / CSS (PostCSS) / JavaScript
    О коде

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

    Форма обратной связи с анимацией в HTML, CSS и JS.

    Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

    Зависимости: —

    О коде

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

    Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

    Зависимости: bootstrap.css

    Автор
    • Лина Лаванья
    О коде

    Контактная форма UI

    Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

    Зависимости: font-awesome.css

    Автор
    • Дэвид Фитас
    О коде

    Контактная форма в винтажном стиле

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

    Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

    Зависимости: —

    Автор
    • Матеус Марсильо
    О коде

    Минималистичная форма

    Простая и красивая Контактная форма . Полезно и легко модифицировать.

    Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

    Зависимости: —

    Автор
    • Винсент Дюран
    О коде

    Полная выпадающая контактная форма CSS

    Простая контактная форма , в которой используется флажок для имитации действия щелчка и переход CSS для создания эффекта «утопления».

    Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

    Зависимости: -

    Как легко создать форму в HTML

    Первое, что вам нужно решить, создавая форму в HTML, - это тип формы, которую вы хотите создать. Онлайн-формы чаще всего используются для:

    • Информационный бюллетень Подпишитесь
    • Отзывы клиентов
    • Запросы на контактную информацию
    • Регистрация на мероприятие или конкурс
    • Онлайн-заказы и оплата

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

    Но действительно, вы бы хотели научиться создавать форму в HTML с нуля вместо того, чтобы сосредоточиться на своем бизнесе? Существует простой способ создать любую необходимую вам форму, спроектировать ее и собрать ответы без каких-либо дополнительных исследований с вашей стороны - просто воспользуйтесь сервисом создания онлайн-форм AidaForm.

    Прочтите это руководство по AidaForm и узнайте, как создать форму в HTML, не написав ни единой строчки кода.

    Как создать форму в HTML с помощью AidaForm

    1

    Войдите в свою учетную запись AidaForm

    Щелкните Войти на любой странице aidaform.com и откройте страницу своей учетной записи. Зарегистрируйтесь, если у вас еще нет учетной записи AidaForm. Вы можете бесплатно зарегистрироваться и создать до пяти различных форм!

    2

    Создайте нужный тип формы

    Чтобы начать создание формы, щелкните Create a Form в своей области для участников.Вы можете начать с пустого шаблона и добавить только поля, необходимые для вашего типа формы. Или выберите шаблон со стандартными блоками, такими как имя, адрес электронной почты, телефон или текстовое поле, если вы знаете, что они вам понадобятся в форме. Введите имя вашей контактной формы и нажмите кнопку Create .

    Разверните Редактор форм , чтобы добавить соответствующие поля. Перетащите поля «Имя», «Электронная почта» и «Текст», чтобы создать контактную форму; добавить вопросы с несколькими вариантами ответов и шкалы оценок для формы обратной связи с клиентами; создавать раскрывающиеся списки и флажки для запросов на контакты по продажам и т. д.Если вы не знаете, какие поля добавить, поищите в Интернете похожие примеры форм. Это поможет вам получить общее представление о том, как структурировать форму.

    3

    Создайте форму, соответствующую вашему веб-сайту

    Откройте Form Designer , чтобы выбрать тему, которая будет хорошо смотреться на вашем веб-сайте. Добавьте свой логотип. Вам не нужно выбирать цвет для каждого элемента индивидуально благодаря настройкам умной темы.

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

    Когда будете готовы, нажмите Опубликовать , чтобы получить прямую ссылку на свой опрос для отправки по электронной почте, публикации в сообществе социальных сетей или добавления ссылки на кнопку на своем веб-сайте.

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

    Вот как создать форму с использованием HTML в AidaForm - без необходимости писать код HTML или сценарии PHP.Зарегистрируйте учетную запись и создавайте всевозможные HTML-формы уже сегодня!

    Создание HTML-форм в Интернете с помощью службы AidaForm

    • Используйте настраиваемые поля для всех типов форм: дата, загрузка файла, вопросы с несколькими вариантами ответов, Карты Google и т. Д.
    • Добавить проверку полей, поля подписи и защиту CAPTCHA
    • Собирайте ответы и надежно храните их в своей учетной записи - не нужно ничего интегрировать вручную

    Создание простой формы в HTML из базового шаблона

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

      

    Свяжитесь с нами

    Пожалуйста, отправьте ваше сообщение ниже. Мы свяжемся с вами в ближайшее время!

    Сообщение успешно отправлено!

    Ошибка

    К сожалению, при отправке формы произошла ошибка.

    Как получить электронную почту из HTML-формы

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

    Используя конструктор форм перетаскивания Simfatic Forms, вы можете быстро создавать потрясающие формы электронной почты!

    Как отправить электронное письмо прямо из HTML-формы?

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

    Есть ли HTML-код для отправки электронной почты из формы?

    В HTML нет функции для отправки формы непосредственно на адрес электронной почты .А что насчет «mailto»? Использование mailto: Вы можете установить поле действия формы как «mailto». В этом случае веб-браузер вызывает почтовый клиент для отправки формы на указанный адрес электронной почты.

     
    

    Однако этот метод несовместим с другими браузерами. Это тоже неудобно для пользователя; при отправке формы выдается предупреждающее сообщение. Для получения дополнительных сведений об этом методе см .: форму электронной почты с использованием mailto

    Может ли JavaScript отправить форму на адрес электронной почты?

    JavaScript также не может отправлять электронную почту . Если клиентский JavaScript позволяет программно отправлять электронную почту, спамеры первыми воспользуются им, и вы возненавидите свой веб-браузер!

    Итак, как получить электронную почту из HTML-формы?

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

    Ваш веб-браузер отображает форму с помощью внешнего кода HTML.Когда вы отправляете форму, браузер отправляет информацию, которую вы отправили в форме, в серверную часть.

    Ссылка на внутренний скрипт упоминается в атрибуте «действие» тега HTML-формы.

     
    
    
    
      

    Браузер выбирает ссылку (URL), упомянутую в атрибуте действия, и отправляет данные для отправки формы на этот URL. Веб-сервер передает данные отправки формы сценарию в URL-адресе действия (yourform-processor.php в примере.) Теперь внутренний скрипт может отправлять электронные письма, сохранять отправку формы в базу данных или даже направлять пользователя на страницу оплаты.

    Как создать внутренний скрипт?

    Существует ряд языков сценариев, созданных для внутреннего программирования. PHP - одна из популярных и широко поддерживаемых платформ сценариев (другие включают Perl, Ruby, ASP- только для Windows и т. Д.). Почти все службы хостинга поддерживают PHP на своих веб-серверах.

    Работа простого PHP скрипта

    Скрипт PHP запускается на вашем веб-сервере.Когда форма отправляется, почтовый скрипт формы собирает данные, представленные в форме, составляет электронное письмо и отправляет его на адрес, который он настроен.

    Дополнительная литература и ресурсы

    Примечание: Используя инструмент для создания веб-форм, такой как Simfatic Forms, вы можете быстро создавать полные веб-формы (отправлять материалы по электронной почте, сохранять в базе данных и т. Д.).

    Как создавать HTML-формы

    В этом руководстве вы узнаете, как создать форму в HTML для сбора данных, вводимых пользователем.

    Что такое HTML-форма

    HTML-формы необходимы для сбора различных типов пользовательских данных, таких как контактные данные, такие как имя, адрес электронной почты, номера телефонов, или такие данные, как информация о кредитной карте и т. Д.

    Формы

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

    Тег используется для создания HTML-формы. Вот простой пример формы входа:

      <форма>
        
        
        
      

    В следующем разделе описаны различные типы элементов управления, которые можно использовать в форме.

    Элемент ввода

    Это наиболее часто используемый элемент в HTML-формах.

    Он позволяет вам указывать различные типы полей ввода пользователя в зависимости от атрибута type . Элемент ввода может иметь тип текстовое поле , поле пароля , флажок , переключатель , кнопка отправки , кнопка сброса , поле выбора файла , а также несколько новых типов ввода. в HTML5.

    Ниже описаны наиболее часто используемые типы входов.

    Текстовые поля

    Текстовые поля - это однострочные области, которые позволяют пользователю вводить текст.

    Элементы управления однострочным вводом текста создаются с использованием элемента , чей атрибут type имеет значение text . Вот пример однострочного ввода текста, используемого для ввода имени пользователя:

      <форма>
        
        
      

    - Результат приведенного выше примера будет выглядеть примерно так:

    Примечание: Тег используется для определения меток для элементов .Если вы хотите, чтобы ваш пользователь вводил несколько строк, вы должны вместо этого использовать

    - Результат приведенного выше примера будет выглядеть примерно так:


    Ящики для выбора

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

      <форма>
        
        
      

    - Результат приведенного выше примера будет выглядеть примерно так:


    Кнопки отправки и сброса

    Кнопка отправки используется для отправки данных формы на веб-сервер.При нажатии кнопки отправки данные формы отправляются в файл, указанный в атрибуте action формы, для обработки отправленных данных.

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

      

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

    Примечание: Вы также можете создавать кнопки с помощью элемента