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





Евгений Болдырев