Для какой бы цели не был создан сайт, думаю, он направлен на какую-нибудь аудиторию с которой необходимо организовать связь. В данном уроке как раз будет рассмотрен один из путей организации такой связи, а именно контактная форма.
Представленная форма обратной связи состоит всего из одного файла, за исключением файла со стилями, код которого разделяется на две части реализующих две функции:
<form class="contact" method="post" action=""> <div> <span class="label">Ваше имя:</span> <input class="input" name="name" type="text" required> </div> <div> <span class="label">Тема:</span> <input class="input" name="theme" type="text" required> </div> <div> <span class="label">Ваш email:</span> <input class="input" name="email" type="text" required> </div> <div> <span class="label">Сообщение:</span> <textarea class="input" name="comment" required></textarea> </div> <div> <span class="label"></span> <input class="btn" name="submit" type="submit" value="Отправить"> <?=$message?> </div> </form>
<?php $to = "email@adress.com"; $subject = "Посылка с контактной формы"; if(isset($_POST["submit"])) { if(!preg_match("/^(?:[a-z0-9]+(?:[-_.]?[a-z0-9]+)?@[a-z0-9_.-] +(?:.?[a-z0-9]+)?.[a-z]{2,5})$/i",trim($_POST["email"]))) { $message = "<div id="message" class="error"> Указанный email не соответствует формату!</div>"; } else { $message = "<div id="message" class="success"> Форма успешно отправленна!</div>"; } } ?>
В первую очередь необходимо указать Ваш email, ведь именно на него будет отправляться сообщение пользователя Вашего сайта. Целевой email адрес хранится в переменной $to, которой он присваивается в следующей строке:
$to = “email@adress.com”;
Следовательно, в этой строке Вам необходимо заменить электронный адрес adress@mail.com на необходимый.
Так же Вы можете поменять тему сообщения на более удобную для Вас. Тема сообщения содержится в переменной $subject, значение которой можно изменить по тому же принципу, что и адрес электронной почты.
Скрипт, содержащийся в данном уроке, выводит на экран пользователя оповещение об успешной отправке его сообщения или же об ошибке в случае ввода некорректных данных. При необходимости, Вы можете изменить содержание данных оповещений в следующих строках кода:
$message = "<div id="message" class="error"> Указанный email не соответствует формату!</div>";
и
$message = "<div id="message" class="success"> Форма успешно отправленна!</div>";
где первая строка содержит сообщение об ошибке, а вторая об успешной отправке.
Ниже представлен css код, который использовался в примере этого урока, но Вы можете заменить его другим, тем самым подогнать внешний вид формы под уникальный дизайн Вашего сайта.
@charset "utf-8"; *{ margin:0; padding:0; font-family:Verdana, Geneva, sans-serif; font-size:13px; } #wrapper{ width:960px; margin:0 auto; } h1{ margin:5px 0 10px 115px; font-size:24px; } .contact{ margin-top:5px; display:inline-block; } .contact div{ padding:5px; } .label{ display:inline-block; width:100px; text-align:right; vertical-align:top; margin-right:10px; margin-top:2px; font-size:16px; } .input{ width:400px; height:20px; font-size:15px; } textarea.input{ width:402px; height:100px; } .btn{ padding:3px 7px; font-size:15px; } #message{ display:inline-block; font-size:12px; padding:6px 5px 4px 5px; } .error{ background:#FFCFCF; border:#F00 solid 1px; } .success{ background:#CFCFFF; border:#00F solid 1px; }
В общем, вот такая простая контактная форма у нас получилась с обработчиком на PHP. Кстати, если Вы захотите сделать ее более красивой и привлекательной, можете воспользоваться стильной формой обратной связи, которая также имеется у нас. На этом все, только положительных вам отзывов!