В данной статье речь пойдет о динамической форме обратной связи, которая при изменении размера окна, будет становится адаптивной к просмотру. То есть форма обратной связи будет доступна для просмотра на всех видах устройств, на персональных компьютерах, ноутбуках, смартфонах и планшетах.
Форма обратной связи будет состоять из 3 полей ввода данных - имя, адрес электронной почты и текст письма. Все поля будут обязательны для заполнения, отправить пустое письмо будет нельзя. Поле ввода адреса электронной почты дополнительно будет проходить валидацию на правильность ввода. Данные будут представлены в html коде, стили оформления формы обратной связи будут прописаны в отдельном CSS файле. По принципу данного скрипта возможно создание по аналогии большего или меньшего количества полей ввода.
Преимущества использования данной формы заключаются в непрерывной работе сайта и динамической отправки данных из формы, без перезагрузки страницы. А также нужно отметить удобство просмотра на мобильных устройствах.
В файле send.php править следующие строки: $to = "[email protected]"; $subject= "Message from site.ru"; $header="From: site.ru";;
Написать письмо
* Все поля обязательны для заполнения
Отправить
@import url("https://fonts.googleapis.com/css?family=Open+Sans|Roboto");
html, body {
height: 100%;
padding: 0;
margin: 0;
}
body {
background: #d3dce1;
font-family: "Roboto", sans-serif;
font-size: 14px;
}
.outer {
display: table;
width: 100%;
height: 100%;
text-align: center;
}
.middle {
display: table-cell;
vertical-align: middle;
}
.inner {
text-align: center;
width: auto;
padding: 0 15px;
}
.login-wr {
position: relative;
margin: 0 auto;
background: #fff;
max-width: 550px;
box-shadow: 3px 3px 24px #999;
padding: 15px 15px 15px 15px;
}
h2 {
text-align: left;
font-weight: 200;
font-size: 1.6em;
margin: 0 0 10px 0;
padding: 0 0 10px 0;
border-bottom: 1px solid #eeeeee;
color: #474747;
}
.form {
padding-top: 20px;
text-align: left;
}
input,
input {
margin-bottom: 25px;
height: 40px;
outline: 0;
-moz-outline-style: none;
}
button {
height: 40px;
outline: 0;
-moz-outline-style: none;
}
input {
background: url("img/user.png") no-repeat left 10px center;
}
input {
background: url("img/email.png") no-repeat left 10px center;
}
textarea {
background: url("img/pencil.png") no-repeat left 10px top 10px;
}
textarea {
width: calc(100% - 55px);
height: 120px;
border: 1px solid #bbb;
padding: 10px 10px 10px 45px;
font-size: 14px;
}
input,
input {
width: calc(100% - 45px);
max-width: 250px;
border: 1px solid #bbb;
padding: 0 0 0 45px;
font-size: 14px;
}
input:focus,
input:focus {
border: 1px solid #2196f3;
}
p {
padding-bottom: 10px;
}
button {
width: 100%;
max-width: 150px;
background: #e6ebee;
border:none;
border-bottom: 5px solid #d3dce1;
color: #333;
font-size: 14px;
font-weight: 200;
cursor: pointer;
transition: box-shadow .4s ease;
}
$(function() { $("#loader").hide(); $("form").submit(function(e) { var name = $("#name").val(); var email = $("#email").val(); var message = $("#message").val(); var data = "name=" + name + "&email=" + email + "&message=" + message; if(data) { $.ajax({ type: "POST", url: "./send.php", data: data, beforeSend: function(html) { $("#loader").show(); $("#submit").hide(); }, success: function(html){ $("#loader").hide(); $("#result").html(html); } }); } return false; }); });
Приветствую моих читателей, набрался опыта и расскажу Вам о принципах работы формы обратной связи php. Покажу на наглядных примерах, чтобы вы понимали как все устроено и как происходит взаимодействие между самой формой ввода (ее полями input) и файлом-обработчиком, написанный на языке php. К тому же бесплатно сможете скачать исходники вместе с .
Конечно здорово будет, если вы хоть немного разбираетесь в HTML / CSS т.к. Вам придется уже по аналогии перетягивать код на свою страницу. PHP язык затрагивать не будем, все необходимые правки, которые нужно будет сделать под себя я покажу.
UPDATE :По откликам читателей, я понял, что нужно что-то более красивое и функциональное, встречайте , ознакомьтесь и посмотрите. Сами выбирайте какая больше понравится)
UPDATE2 : Version 3.0 Адаптивный Лендинг + форма ajax с передачей UTM-меток , ознакомьтесь и посмотрите. Вам понравится
Вспомнил себя, когда я впервые пытался делать самостоятельно форму обратной связи на php, и честно признаться было трудоемко, т.к. не понимал что и как происходит. Терпение и упорство друзья и у вас все получится.
Форма обратной связи php — структура
Разбор самой формы обратной связи будем изучать на примере посадочной страницы (Landing Page), кстати есть отдельная статья по . Посмотреть как это работает в действии можете по кнопкам расположенным ниже, прикладываю исходники этого одностраничника и главного файла обработчика-php (этот файл и будет обрабатывать и отправлять письмо на email)
После того как скачаете исходники и распакуете архив, вы увидите следующую структуру по файлам:
- image — все изображения, которые используются для самого Landing Page, кнопки и т.д.
- js — javascript скрипты, которые обеспечивают например всплывающее модальное окно на странице и другие визуальные эффекты
- index.html — индексный файл нашего одностраничника
- index1.php — файл обработчик, в который передаются значения из формы, далее формируется письмо из полученных переменных и отправляется на указанный email адрес. Так же index1.php случит в роли промежуточной страницы уведомления об успешной отправке данных с автоматическим перенаправлением обратно на index.html (т.е. наш одностраничник)
Важно, чтобы ваш хостинг, на котором располагаются файлы сайта, поддерживал php обработку, иначе файл index1.php не выполнится и работать не будет. Чтобы уточнить этот нюанс обратитесь в кампанию, где зарегистрирован ваш хостинг или просто протестируйте — работает, значит есть поддержка. Если нет, то включите опцию поддержки языка php
Взгляните на схему работы взаимодействия всех элементов (страница, форма, обработчик)
Взглянем на работу одной из кнопок, которая вызывает модальное всплывающее окно, в котором находится форма обратной связи. Данный приведенный исходный код — это не раз, два вставил на страницу и заработает, Вам придется самим подгонять под свой дизайн и потребности.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 | Заказать обратный звонок Заказажите обратный звонок |
Заказать обратный звонок Заказажите обратный звонок
Ниже полный исходный код обработчика index1.php, для того чтобы настроить отправку на свой почтовый ящик, поменяйте «[email protected]» на свой, остальное в принципе можно оставить без изменений
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 | С вами свяжутся |
С вами свяжутся body { background: #22BFF7 url(img/zakaz.jpg) top -70% center no-repeat; } setTimeout("location.replace("/index.html")", 3000); /*Изменить текущий адрес страницы через 3 секунды (3000 миллисекунд)*/
Проверка работоспособности формыВызываем окно и вводим данные для тестовой проверки нашей формы
Еще раз напомню, ваш хостинг должен поддерживать обработку php файлов, иначе наш обработчик просто не выполнится и никакое письмо не отправится на указанный email-адрес. Результат успешно отработанной форма обратной связи
У меня на этом все, старался донести смысл и работу скрипта наилучшим образом. Возникнут вопросы, можете смело обращаться в комментарии или ко мне в VK (смотрите контактные данные). Желаю легкой и продуктивной работы Вам.
В этой небольшой заметке я покажу вам, как шаг за шагом создать красивую контактную форму на чистом CSS без использования изображений. Форма будет иметь поля со следующими данными: имя, адрес электронной почты, URL-адрес, тема и текст сообщения. Для кроссбраузерности мы воспользуемся вендорными префиксами, однако, для сокращения кода, здесь мы рассмотрим верстку без них. .
Создаем форму на HTML Вот так будет выглядеть наша форма обратной связиДля начала немного пояснений к форме.
- Input type = email используется для обозначения поля где пользователь может ввести адрес электронной почты. Браузеры, которые поддерживают этот тип поля смогут определить, ввел ли пользователь корректный адрес электронной почты или нет.
- Input type = url используется для проверки ввода правильного или допустимого URL-адреса.
- Require = required определяет состояние элемента формы, как требуется. Браузеры, которые поддерживают этот атрибут, блокируют отправку формы, до тех пор, пока все обязательные поля не будут заполнены.
- Placeholder этот атрибут представляет собой подсказку, чтобы пользователь знал, что и в каком формате вводить данные. Заполнитель исчезает при нажатии на поле.
Name *
E-mail address *
Website
Subject
Message *
All fields with a * are required
Создание полосатого фонаДля создания эффекта почтового конверта, начнем с заливки фона полосатым градиентом.
#content{ position:relative; margin:50px auto; width:400px; min-height:200px; z-index:100; padding:30px; border:1px solid #383838; background: #D1D1D1; /* My stripped background */ background: repeating-linear-gradient(-45deg, #EFC1CB , #EFC1CB 30px, #F2F2F2 30px, #F2F2F2 40px, #C2E8F5 40px, #C2E8F5 70px,#F2F2F2 70px, #F2F2F2 80px); border-radius:8px; box-shadow:0px 1px 6px #3F3F3F; }
Свойство repeating-linear-gradient позволяет создать бесконечно повторяемый линейный градиент. Сначала мы наклонили полосы на угол в 45 градусов, а затем последовательно раскрасили полосы и задали им ширину в пикселах. Теперь у нас есть градиентный фон. Осталось добавить светло серый фон. Воспользуемся псевдоклассом after:
/** my "fake" background that will hover the stripes **/ #content:after{ background:#F9F9F9; margin:10px; position: absolute; content: " "; bottom: 0; left: 0; right: 0; top: 0; z-index: -1; border:1px #E5E5E5 solid; border-radius:8px; }
Оформляем заголовок H1Для заголовка H1, я выбрал шрифт Questrial, для тела контактной формы — Droid Sans, а для амперсанда — шрифт Alice. Все эти шрифты есть в каталоге шрифтов от Google, поэтому, все, что мне нужно сделать — это использовать API-код от Google:
Теперь оформляем заголовок.
H1 { font-family: "Questrial", Verdana, sans-serif; text-align:center; font-size:40px; padding:0; margin:0 0 20px 0; position:relative; color:#8C8C8C; } /** have a nice ampersand **/ h1:after { font-size:25px; color:#D6CFCB; content: "&"; text-align:center; display:block; width:100%; font-family: "Alice", Verdana, serif; text-shadow: 0px 1px 0px #fff; } /** create the gradient bottom **/ h1:before { position:absolute; bottom:15px; content: " "; text-align:center; display:block; height:2px; width:100%; background: linear-gradient(left, rgba(255,255,255,0) 0%,rgba(182,180,180,0.7) 42%,rgba(180,178,178,0) 43%,rgba(168,166,166,0) 50%,rgba(180,178,178,0) 57%,rgba(182,180,180,0.7) 58%,rgba(238,237,237,0.3) 90%,rgba(255,255,255,0) 100%); /* W3C */ }
Добавим пиктограммы без использования картинокМы сделаем это с помощью шрифтовых иконок. Вы можете использовать, тот иконочный шрифт, который во вложении, а можете использовать любые другие, мне нравится составлять пакеты иконок с сайта flaticon.com. Преимущества использования шрифтов в нашем контексте — очевидно. Мы можем манипулировать размером, цветом и даже анимацией иконок. Чего не скажешь об обычных изображениях. Кроме того, мы всегда выигрываем в качестве отображения на retina дисплеях.
/** adding our icon font !! */ @font-face { font-family: "IconicStroke"; src: url("font/iconic_stroke-webfont.eot"); src: url("font/iconic_stroke-webfont.eot?#iefix") format("embedded-opentype"), url("font/iconic_stroke-webfont.woff") format("woff"), url("font/iconic_stroke-webfont.ttf") format("truetype"), url("font/iconic_stroke-webfont.svg#IconicStrokeRegular") format("svg"); font-weight: normal; font-style: normal; } .iconic:before{ font-size:25px; font-family: "IconicStroke"; } .iconic.link:before { content: "/"; } .iconic.quote-alt:before { content: """; } .iconic.comment:before { content: "q"; } .iconic.user:before { content: "u"; } .iconic.mail-alt:before { content: "M"; }
Теперь можно оформить наши поля ввода данных в неактивном и активном состоянии.
/** we remove the red glow around required fields since we are already using the red star */ input:required, textarea:required { -moz-box-shadow:none; -webkit-box-shadow:none; -o-box-shadow:none; box-shadow:none; } /** inputs and textarea**/ input:not(), textarea{ outline:none; display:block; width:380px; padding:4px 8px; border:1px dashed #DBDBDB; color:#3F3F3F; font-family:"Droid Sans",Tahoma,Arial,Verdana sans-serif; font-size:14px; border-radius:2px; transition:background 0.2s linear, box-shadow 0.6s linear; } input:not():active, textarea:active, input:not():focus, textarea:focus{ background:#F7F7F7; border:dashed 1px #969696; box-shadow:2px 2px 7px #E8E8E8 inset; } input:not(){ height: 20px; } textarea{ min-height:150px; resize:vertical } /* placeholder */ ::-webkit-input-placeholder { color:#BABABA; font-style:italic; } input:-moz-placeholder, textarea:-moz-placeholder{ color:#BABABA; font-style:italic; }
Оформление кнопки «Отправить» и подписейДля кнопки «Отправить» мы используем тип поля type=submit . К сожалению, для оформления такого типа полей, мы не сможем воспользоваться псевдоклассами:before и:after . Поэтому я внедрил спецсимвол непосредственно в код HTML. Конечно, это не лучшее решение, так что вы можете его просто удалить.
/** Styling the send button **/ input{ margin-left:235px; cursor:pointer; background:none; border:none; font-family: "Alice",serif; color:#767676; font-size:18px; padding:10px 4px; border:1px solid #E0E0E0; text-shadow: 0px 1px 1px #E8E8E8; background: rgb(247,247,247); background: linear-gradient(top, rgba(247,247,247,1) 1%,rgba(242,242,242,1) 100%); border-radius:5px; box-shadow:0px 1px 1px #FFF inset, 0 0 0px 5px #EAEAEA; transition:all 0.2s linear; } input:hover{ color:#686868; border-color: #CECECE; background: linear-gradient(top, rgba(244,244,244,1) 0%,rgba(242,242,242,1) 100%); box-shadow:0px 1px 1px #FFF inset, 0 0 0px 5px #E0E0E0; } input:active, input:focus{ position:relative; top:1px; color:#515151; background: linear-gradient(top, rgba(234,234,234,1) 0%,rgba(242,242,242,1) 100%); box-shadow:0px -1px 1px #FFF inset, 0 0 0px 5px #E0E0E0; }
Чтобы форма имела законченный вид, давайте добавим приятные цвета и переходы к подписям при наведении на них курсором.
Label{ color:#7F7E7E; -webkit-transition: color 1s ease; -moz-transition: color 1s ease; transition: color 1s ease; } label:hover{ color:#191919; } label:before{ color:#C1BFBD; transition: color 1s ease; } label:hover:before{ color:#969696; transition: color 1s ease; } p{ margin-bottom:20px; } .indication{ color:#878787; font-size:12px; font-style:italic; text-align:right; padding-right:10px; } .required{ color:#E5224C; }
Вместо заключенияЯ надеюсь, что эта небольшая запись помогла вам лучше понять возможности HTML5 и CSS3. Еще раз подчеркну, что это лишь заготовка, которую вы можете использовать как основу для своих разработок. Во вложении к записи форма обратной связи адаптивна.
Добрый день, форма обратной связи должна присутствовать на каждом сайте. Сегодня я покажу пример готовой формы для вставки на любой сайт, в том числе и на движок wordpress. Готовый пример html и php кода можно будет скопировать на свой сайт. Кроме готового примера, существует много плагинов, которые так же пользуются большой популярностью. На многих сайта такая форма уже встроена в тему, но иногда бывает необходимость добавить еще одну на другую страницу или заменить старую.
Перед тем, как начинать писать эту статью, я прошелся по интернету в поисках ответа на этот вопрос. Пересмотрев больше количество сайтов и блогов, я нашел очень мало качественных ответов по вставке формы обратной связи на сайт. Большинство материалов написано по работе с плагинами. В некоторых статьях не совсем понятно, что и как нужно делать, код не работает, письма не приходят...и так далее.
Есть конечно и достойные ответы, но их очень мало. Я приведу простой пример, для которого много ума не нужно. Особых знаний в php не требуется, точнее они вообще не нужны. Что и где нужно изменить, я напишу подробно, когда это будет нужно. Форма работает нормально, без сбоев. Пример формы находится у меня на . В готовый пример я добавил немного стилей для красоты, чтоб форма совсем уже не смотрелась «убого». При желании можно все изменить на ваше усмотрение.
Готовая форма обратной связи для сайта на htmlВ данном примере, форма обратной связи для сайта состоит из html кода. Такой пример html кода вставляете абсолютно на любую страницу сайта, не важно, где и что вы используете. Этот же код можно вставить на страницу движка wordpress, все будет работать правильно и без сбоев.
Имя E-mail: Тема сообщения Ваш текст:
< form action = "/wp-content/themes/xmarkup/form.php" method = "post" name = "form" > Имя< input class = "inp" style = "width: 30%;" name = "name" type = "text" / > E - mail : < input class = "inp" style = "width: 30%;" name = "email" type = "text" / > Темасообщения< input class = "inp" style = "width: 30%;" name = "temma" type = "text" / > Ваштекст: < textarea class = "inp" style = "width: 80%;" cols = "1" name = "massage" rows = "5" > < / textarea > < input class = "inp" type = "submit" value = "Отправить" / > < / form > |
В самом начале кода, в первом строчке, вы должны указать свой путь к php файлу form.php (про него немного попозже). Больше ничего менять не нужно. Если вас не устраивает название формы и ее поля, вы всегда можете добавить новые или изменить старые. Так же можно добавить свои стили прямо суда в таблицу. Если такой вариант вам неудобный, задавайте новые классы и уже потом добавляйте стили через ваш файл style.css
Кто не знает, как это можно сделать, заходим в админку сайта, переходим в редактор и открываем файл style.css. В самый конец таблицы стилей добавляем вот этот код. В итоге должен быть вставлен код формы на страницу и ваши css стили в таблицу style.css
Inp{ padding: 10px; border: 1px solid #E5E5E5; width: 200px; color: #999999; box-shadow: rgba(0, 0, 0, 0.1) 0px 0px 8px; -moz-box-shadow: rgba(0, 0, 0, 0.1) 0px 0px 8px; -webkit-box-shadow: rgba(0, 0, 0, 0.1) 0px 0px 8px; }
Inp { padding : 10px ; border : 1px solid #E5E5E5; width : 200px ; color : #999999; box - shadow : rgba (0 , 0 , 0 , 0.1 ) 0px 0px 8px ; Moz - box - shadow : rgba (0 , 0 , 0 , 0.1 ) 0px 0px 8px ; Webkit - box - shadow : rgba (0 , 0 , 0 , 0.1 ) 0px 0px 8px ; |
После проделанных действий, у вас должна получиться вот такая форма обратной связи на странице. Не стоит сильно увлекаться, ваша форма должна быть простой и максимально удобной. Без лишних дополнительных полей...имя, почта, тема и сообщение. При желании, даже Тему сообщения можно убрать.
С разметкой формы определились, красоту навели, теперь необходимо создать файл с расширением php и добавить в него вот такой код. Файл добавляйте через FTP клиент на ваш сайт. Большинство пользователей используют CMS, скидывайте данный файл в папке с вашей темой. Адрес и название этого файла, вы должны изначально прописать в разметке вашей формы, которую я показывал выше. Я прописал полный путь для примера, чтоб было понятно, что и куда необходимо вставить.
(
