Простая контактная форма на PHP. Контактная форма для сайта html


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

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

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

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

 

 

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

 

 

<form method="post" action=""> <div> <span>Ваше имя:</span> <input name="name" type="text" required> </div> <div> <span>Тема:</span> <input name="theme" type="text" required> </div> <div> <span>Ваш email:</span> <input name="email" type="text" required> </div> <div> <span>Сообщение:</span> <textarea name="comment" required></textarea> </div> <div> <span></span> <input name="submit" type="submit" value="Отправить"> <?=$message?> </div> </form>

 

 

PHP код рассмотрим несколько подробнее, так как в нем уже требуется небольшая настройка.

 

 

<?php $to = "[email protected]"; $subject = "Посылка с контактной формы"; if(isset($_POST["submit"])) { if(!preg_match("/^(?:[a-z0-9]+(?:[-_.]?[a-z0-9]+)[email protected][a-z0-9_.-] +(?:.?[a-z0-9]+)?.[a-z]{2,5})$/i",trim($_POST["email"]))) { $message = "<div> Указанный email не соответствует формату!</div>"; } else { $message = "<div> Форма успешно отправленна!</div>"; } } ?>

В первую очередь необходимо указать Ваш email, ведь именно на него будет отправляться сообщение пользователя Вашего сайта. Целевой email адрес хранится в переменной $to, которой он присваивается в следующей строке:

 

$to = “[email protected]”;

 

Следовательно, в этой строке Вам необходимо заменить электронный адрес [email protected] на необходимый.

 

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

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

 

$message = "<div> Указанный email не соответствует формату!</div>";

 

и

 

$message = "<div> Форма успешно отправленна!</div>";

 

где первая строка содержит сообщение об ошибке, а вторая об успешной отправке.

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

 

@charset "utf-8"; *{ margin:0; padding:0; font-family:Verdana, Geneva, sans-serif; font-size:13px; } #wrapper{ width:960px; margin:0 auto; } h2{ 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. Кстати, если Вы захотите сделать ее более красивой и привлекательной, можете воспользоваться стильной формой обратной связи, которая также имеется у нас. На этом все, только положительных вам отзывов!

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

roothelp.ru

Создаем всплывающую контактную форму для сайта

/* устанавливаем слой затемнения фона, ** опрделяем позиции, цвет и интенсивность затемнения */ .black-overlay{ display: none; position: absolute; top: 0%; left: 0%; width: 100%; height: 100%; background-color: black; z-index:1001; -moz-opacity: 0.7; opacity:.70; filter: alpha(opacity=70); } /* устанавливаем рисунок основы, ** опрделяем размеры и положение на экране */ .envelope { display: none; position: absolute; width: 600px; height: 340px; background: url(images/envelope.png) center no-repeat; z-index:1002; position: relative; margin: 10% auto; } /* формируем кнопку закрытия, ** размеры, положение на форме */ .close-btn { width: 31px; height: 31px; display: block; cursor: pointer;/* для случая применения отличных от <a> тегов */ background: url(images/close.png); text-indent: -4999px; } /* кнопка закрытия при наведении */ .close-btn:hover{ background: url(images/close-hover.png);   } /* оформляем заголовок формы */ .title { font-family: "Trebuchet MS",Tahoma,Arial,sans-serif; font-size:22px; font-weight: normal; font-weight: 200; text-align:left; position: absolute; top: 30px; left: 40px; /* можно заменить на другую картинку ** или border-bottom: бла бла бла */ background: url(images/divider.png) no-repeat bottom; color: #545151; height: 40px; width: 400px; margin: 15px 0; text-shadow: 1px 1px #FFF;/* тень текста */ } /* стили для полей ввода */ input[type=text] { font-family: "Trebuchet MS",Tahoma,Arial,sans-serif; font-size: 13px; background-color:rgb(255,255,255); color: #787474; padding-left: 10px; width:208px; height:33px; border-color:rgb(182,182,182); border-width:1px; border-style:solid; -moz-box-shadow:0px 1px 0px 0px rgba(255,255,255,0.5) ,inset 0px 1px 2px 0px rgba(0,0,0,0.2); -webkit-box-shadow:0px 1px 0px 0px rgba(255,255,255,0.5) ,inset 0px 1px 2px 0px rgba(0,0,0,0.2); box-shadow:0px 1px 0px 0px rgba(255,255,255,0.5) ,inset 0px 1px 2px 0px rgba(0,0,0,0.2); -ms-filter:"progid:DXImageTransform.Microsoft.dropshadow(OffX = 0,OffY = 1,Color = #80ffffff,Positive = true)"; filter:progid:DXImageTransform.Microsoft.dropshadow(OffX = 0,OffY = 1,Color = #80ffffff,Positive = true); border-radius: 3px; -moz-border-radius: 3px; } /* меняем оформление полей ввода при фокусе */ input[type=text]:focus, .your-message:focus { outline: none; background-color:rgb(255,255,255); border-color:rgb(126,139,153); border: 1px solid; -moz-box-shadow:0px 0px 5px 0px rgba(168,178,188,0.75) ,0px 1px 0px 0px rgba(255,255,255,0.5) ,inset 0px 1px 2px 0px rgba(0,0,0,0.4); -webkit-box-shadow:0px 0px 5px 0px rgba(168,178,188,0.75) ,0px 1px 0px 0px rgba(255,255,255,0.5) ,inset 0px 1px 2px 0px rgba(0,0,0,0.4); box-shadow:0px 0px 5px 0px rgba(168,178,188,0.75) ,0px 1px 0px 0px rgba(255,255,255,0.5) ,inset 0px 1px 2px 0px rgba(0,0,0,0.4); -ms-filter:"progid:DXImageTransform.Microsoft.Glow(Color=#bfa8b2bc,Strength=5) progid:DXImageTransform.Microsoft.dropshadow(OffX = 0,OffY = 1,Color = #80ffffff,Positive = true)"; filter:progid:DXImageTransform.Microsoft.Glow(Color=#bfa8b2bc,Strength=5) progid:DXImageTransform.Microsoft.dropshadow(OffX = 0,OffY = 1,Color = #80ffffff,Positive = true); } .your-message { font-family: "Trebuchet MS",Tahoma,Arial,sans-serif; font-size: 13px; background-color:rgb(255,255,255); color: #787474; padding: 10px 0 0 10px; width:448px; height:93px; border-color:rgb(182,182,182); border-width:1px; border-style:solid; -moz-box-shadow:0px 1px 0px 0px rgba(255,255,255,0.5) ,inset 0px 1px 2px 0px rgba(0,0,0,0.2); -webkit-box-shadow:0px 1px 0px 0px rgba(255,255,255,0.5) ,inset 0px 1px 2px 0px rgba(0,0,0,0.2); box-shadow:0px 1px 0px 0px rgba(255,255,255,0.5) ,inset 0px 1px 2px 0px rgba(0,0,0,0.2); -ms-filter:"progid:DXImageTransform.Microsoft.dropshadow(OffX = 0,OffY = 1,Color = #80ffffff,Positive = true)"; filter:progid:DXImageTransform.Microsoft.dropshadow(OffX = 0,OffY = 1,Color = #80ffffff,Positive = true); position: absolute; top: 150px; left: 40px; border-radius: 3px; -moz-border-radius: 3px; }   .your-name { position: absolute; top: 100px; left: 40px; }   .email-address { position: absolute; top: 100px; left: 280px; } /* оформляем кнопку отправки */ .send-message { background-color: #929FAB; background-image:-moz-linear-gradient(49% 0% -90deg,rgb(171,181,191) 0%,rgb(124,138,152) 100%); background-image:-webkit-gradient(linear,49% 0%,49% 109%,color-stop(0, rgb(171,181,191)),color-stop(1, rgb(124,138,152))); background-image:-webkit-linear-gradient(-90deg,rgb(171,181,191) 0%,rgb(124,138,152) 100%); background-image:-o-linear-gradient(-90deg,rgb(171,181,191) 0%,rgb(124,138,152) 100%); background-image:-ms-linear-gradient(-90deg,rgb(171,181,191) 0%,rgb(124,138,152) 100%); background-image:linear-gradient(-90deg,rgb(171,181,191) 0%,rgb(124,138,152) 100%); width:130px; height:35px; -moz-box-shadow:0px 1px 0px 0px rgba(255,255,255,0.5) ,inset 0px 1px 3px rgb(97,108,122); -webkit-box-shadow:0px 1px 0px 0px rgba(255,255,255,0.5) ,inset 0px 1px 3px rgb(97,108,122); box-shadow:0px 1px 0px 0px rgba(255,255,255,0.5) ,inset 0px 1px 3px rgb(97,108,122); -ms-filter:"progid:DXImageTransform.Microsoft.gradient(startColorstr=#ffabb5bf,endColorstr=#ff7c8a98,GradientType=0) progid:DXImageTransform.Microsoft.dropshadow(OffX = 0,OffY = 1,Color = #80ffffff,Positive = true)"; filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#ffabb5bf,endColorstr=#ff7c8a98,GradientType=0) progid:DXImageTransform.Microsoft.dropshadow(OffX = 0,OffY = 1,Color = #80ffffff,Positive = true); color: #fff; font-family: "Trebuchet MS",Tahoma,Arial,sans-serif; font-size: 13px; text-shadow: 0 1px 0 #21405D; font-weight: bold; border: none; cursor: pointer; border-radius: 3px; -moz-border-radius: 3px; position: absolute; top: 269px; right: 100px; } /* оформляем кнопку отправки при наведении */ .send-message:hover{ background-color: #A0ACB9; background-image:-moz-linear-gradient(49% 0% -90deg,rgb(170,181,195) 0%,rgb(144,157,169) 100%); background-image:-webkit-gradient(linear,49% 0%,49% 109%,color-stop(0, rgb(170,181,195)),color-stop(1, rgb(144,157,169))); background-image:-webkit-linear-gradient(-90deg,rgb(170,181,195) 0%,rgb(144,157,169) 100%); background-image:-o-linear-gradient(-90deg,rgb(170,181,195) 0%,rgb(144,157,169) 100%); background-image:-ms-linear-gradient(-90deg,rgb(170,181,195) 0%,rgb(144,157,169) 100%); background-image:linear-gradient(-90deg,rgb(170,181,195) 0%,rgb(144,157,169) 100%); width:130px; height:35px; -moz-box-shadow:0px 1px 0px 0px rgba(255,255,255,0.5) ,inset 0px 1px 3px rgb(97,108,122); -webkit-box-shadow:0px 1px 0px 0px rgba(255,255,255,0.5) ,inset 0px 1px 3px rgb(97,108,122); box-shadow:0px 1px 0px 0px rgba(255,255,255,0.5) ,inset 0px 1px 3px rgb(97,108,122); -ms-filter:"progid:DXImageTransform.Microsoft.gradient(startColorstr=#ffaab5c3,endColorstr=#ff909da9,GradientType=0) progid:DXImageTransform.Microsoft.dropshadow(OffX = 0,OffY = 1,Color = #80ffffff,Positive = true)"; filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#ffaab5c3,endColorstr=#ff909da9,GradientType=0) progid:DXImageTransform.Microsoft.dropshadow(OffX = 0,OffY = 1,Color = #80ffffff,Positive = true); } /* оформляем кнопку отправки в режиме активной */ .send-message:active{ background-image:-moz-linear-gradient(49% 0% -90deg,rgb(142,154,167) 0%,rgb(124,138,152) 100%); background-image:-webkit-gradient(linear,49% 0%,49% 109%,color-stop(0, rgb(142,154,167)),color-stop(1, rgb(124,138,152))); background-image:-webkit-linear-gradient(-90deg,rgb(142,154,167) 0%,rgb(124,138,152) 100%); background-image:-o-linear-gradient(-90deg,rgb(142,154,167) 0%,rgb(124,138,152) 100%); background-image:-ms-linear-gradient(-90deg,rgb(142,154,167) 0%,rgb(124,138,152) 100%); background-image:linear-gradient(-90deg,rgb(142,154,167) 0%,rgb(124,138,152) 100%); width:130px; height:35px; -moz-box-shadow:0px 1px 0px 0px rgba(255,255,255,0.5) ,inset 0px 1px 5px rgb(65,73,85); -webkit-box-shadow:0px 1px 0px 0px rgba(255,255,255,0.5) ,inset 0px 1px 5px rgb(65,73,85); box-shadow:0px 1px 0px 0px rgba(255,255,255,0.5) ,inset 0px 1px 5px rgb(65,73,85); -ms-filter:"progid:DXImageTransform.Microsoft.gradient(startColorstr=#ff8e9aa7,endColorstr=#ff7c8a98,GradientType=0) progid:DXImageTransform.Microsoft.dropshadow(OffX = 0,OffY = 1,Color = #80ffffff,Positive = true)"; filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#ff8e9aa7,endColorstr=#ff7c8a98,GradientType=0) progid:DXImageTransform.Microsoft.dropshadow(OffX = 0,OffY = 1,Color = #80ffffff,Positive = true); }

dbmast.ru

контактная форма | RUDEBOX

Опубликовал admin в CSS | 14 622 просмотров

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

Читать дальше >

Опубликовал admin в CSS | 4 215 просмотров

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

Читать дальше >

Опубликовал admin в CSS | 5 704 просмотров

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

Читать дальше >

Опубликовал admin в CSS | 10 698 просмотров

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

Читать дальше >

Опубликовал admin в jQuery | 9 060 просмотров

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

Читать дальше >

Опубликовал admin в PHP | 17 019 просмотров

Как известно, контактная форма является прямой линией связи между администратором и пользователем. Но на некоторых сайтах контактная форма используется в виде оставленным администратором почтовым адресом. Это утруждает пользователей, в связи с множеством действий которые необходимо сделать чтобы оставить свои пожелания или жалобы. Поэтому, в сегодняшнем уроке мы рассмотрим процесс создания замечательной контактной формы с помощью  php, css и jquery.  Кроме этого будут использованы плагины..

Читать дальше >

Опубликовал admin в PHP | 16 644 просмотров

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

Читать дальше >

www.rudebox.org.ua

Контактная форма для сайта html — Славянская культура

Контактная форма для сайта htmlКонтактная форма для сайта html Трудно себе представить сайт без контактной формы. Как на 7 прикрутить свои стили для формы? При необходимости вы можете добавить в HTML форму обратной связи. Это HTML форма, кода на. Подробная информация. Вопрос в следующемПри получении письма с сайта оно приходит от TCконтактная форма. Обратная связь для сайта с помощью скриптов форм на H и P, а так же онлайн конструкторов и генераторов. Очень часто на сайтах и блогах мы видим формы для отправки сообщений автору или администратору. Только что, мы вместе с вами, создали отличный инструмент взаимодействия с пользователями, всплывающую контактную форму для сайта. Контактная форма для сайта неотъемлемая часть процесса конверсии. 1 на HTMLстранице сайта. Далее вставляем на сайт сгенерированный код. В этом посте я наглядно покажу всю анатомию создания контактной формы для сайта средствами HTML и PHP. A C F контактная форма для сайта этот компонент сайт AJAX JQ позволяет легко разместить автономный контактную форму на любой. Контактная форма является неотъемлемой частью каждого сайта, ведь это. С помощью онлайн сервиса MTH вы можете создавать контактные формы для сайтов либо блогов на любой вкус. Контактную форму можно также разместить в сайдбаре блога с помощью виджета для вставки HTMLкода. С помощью нашего конструктора формы обратной связи вы сможете всего в 3 шага создать контактную форму для вашего сайта. Или вставьте собственную с помощью кода HTML если он у. Сегодня опять порадую тех, кому скорость загрузки сайта важнее всего. Вот вам код HTML самой формы обратной связи для сайта, который Вы сможете вставить на свой сайт или блог в любое место, у меня это страница для. Обратиться к помощи бесплатных онлайнсервисов, генерирующих код HTML и предоставляющих обработчики. В этом разделе рассмотрим, из каких частей состоит контактная форма для сайта, и также. Для работы контактной формы, созданной на. Контактная форма для H сайтов без P. Рассмотрим последовательность действий по созданию формы обратной связи рис. Как создается форма обратной связи для сайта с нуля на и. HTML 5 тут так используется конечно. Индексация, Трафик, Ключевые слова, Социальные сети. Тогда все контактные формы на сайте будут однотипными и оформлены в одном стиле. Здравствуйте, уважаемые читатели блога KNN Создать контактную форму на онлайн для сайта. Хотите сказать, что ничего не смыслите в HTML и PHP? Это видео посвящено вопросу о том, как в HTML создаются контактные формы или формы. Полезное Делаем контактную форму для сайта самостоятельно

Как создать контактную форму обратной связи для сайта в HTML. Данный инструмент позволит вам без особых усилий создать простую контактную HTML форму. Очень нужна помощь, подскажите куда какой тег вставить, чтобы письма приходили на конкретный адрес, даю код. Форма описание и применение Марсель. 1 контактная форма для сайта на AJAX. В этом уроке успеем рассмотреть создание контактной формы при помощи. Основная проблема которая стоит перед вебмастерами в вопросе установки формы для заказа звонка на сайте совместимость. Форму для сайта в мы будем создавать в новом файле, чтобы не путаться в. Для создания контактной формы для сайта предлагаю. В этом уроке создадим контактную форму, в которой будут отображаться ошибки в случае не правильного заполнения полей формы. Для сайтов контактную форму в большинстве случаев создают с помощью нужных плагинов. Этот урок покажет как создать самую простую контактную форму для HTMLшаблона. Контактная форма для сайта способы установки.

0 просмотров0 комментариев

slavyanskaya-kultura.ru