24 сентября 2013
30640
контактная форма, форма обратной связи, php, form

Простая контактная форма на PHP

PHP
Демонстрация » Скачать »

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

Представленная форма обратной связи состоит всего из одного файла, за исключением файла со стилями, код которого разделяется на две части реализующих две функции:

  • html код - отвечает за отображение формы на странице;
  • php код - обрабатывает данные отправленные при помощи формы и отправляет эти данные на Ваш электронный адрес.

 

 

Html код, приведенный ниже, не требует никаких изменений.

 

 

<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 код рассмотрим несколько подробнее, так как в нем уже требуется небольшая настройка.

 

 

<?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. Кстати, если Вы захотите сделать ее более красивой и привлекательной, можете воспользоваться стильной формой обратной связи, которая также имеется у нас. На этом все, только положительных вам отзывов!