В данной статье речь пойдет о динамической форме обратной связи, которая при изменении размера окна, будет становится адаптивной к просмотру. То есть форма обратной связи будет доступна для просмотра на всех видах устройств, на персональных компьютерах, ноутбуках, смартфонах и планшетах.
Форма обратной связи будет состоять из 3 полей ввода данных - имя, адрес электронной почты и текст письма. Все поля будут обязательны для заполнения, отправить пустое письмо будет нельзя. Поле ввода адреса электронной почты дополнительно будет проходить валидацию на правильность ввода. Данные будут представлены в html коде, стили оформления формы обратной связи будут прописаны в отдельном CSS файле. По принципу данного скрипта возможно создание по аналогии большего или меньшего количества полей ввода.
Преимущества использования данной формы заключаются в непрерывной работе сайта и динамической отправки данных из формы, без перезагрузки страницы. А также нужно отметить удобство просмотра на мобильных устройствах.
В файле send.php править следующие строки: $to = "[email protected]"; $subject= "Message from site.ru"; $header="From: site.ru";;
$(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; }); });
Создание контактных форм: обратной связи, комментирования, форма входа, форма регистрации с проверкой правильности ввода информации.
Аккуратная форма с пошаговым заполнением. Снизу указан индикатор заполнения формы.
Заполнение формы в несколько шагов с проверкой правильности заполнения.
Проверка правильности ввода ифнормации осуществляется «на лету» перед отправкой сообщения с использованием javascript.
Анимированное переключение с помощью jQuery между формой входа на сайт, формой регистрации и полем для восстановления пароля. На демонстрационной странице нажмите на желтую ссылку для того чтобы увидеть эффект.
Подобное решение можно использовать для того, чтобы дать посетителю возможность быстро связаться с владельцем сайта с любой страницы. На демонстрационной странице нажмите на стрелочку снизу, чтобы выехала форма.
Форма с проверкой правильности ввода информации.
Симпатичная форма регистрации, реализованная с помощью CSS, PHP и jQuery.
Реализована возможность перед отправкой сообщения добавлять новые поля.
Симпатичная аккуратная PHP форма обратной связи с проверкой правильности ввода информации. Технологии: CSS, PHP, jQuery.
С проверкой правильности заполнения.
Для реализации выезжающей формы обратной связи для быстрой отправки сообщения.
Форма обратной связи, или если по другому, один из самых важных элементов любого сайта. И конечно же, как и все другие элементы пользовательского интерфейса, контактные , должны быть как-то внешне стилизованы и оформлены, дабы привлечь внимание пользователей и расположить к общению.
Предлагаю на ваше обозрение парочку вариантов стилей форм обратной связи, исключительно средствами 3, без использования дополнительных изображений в оформлении. Ничего лишнего, лишь короткие фрагменты кода (сниппеты) для контактных форм, выполненных в светлых и тёмных тонах.
В зависимости от цвета основного фона страницы, визуально будет меняться базовый цвет фона самой формы. Размер формы зависит от размеров контейнера, в котором форма будет расположена.
Html каркас формы стандартный, необходимые поля ввода и кнопка «Отправить», для связки с CSS, каждому элементу формы присвоен определённый класс, ничего сложного, разобраться будет нетрудно.
< form> < input name= "name" placeholder= "Укажите ваше имя!" class = "name" required /> < input name= "emailaddress" placeholder= "Укажите ваш Email!" class = "email" type= "email" required /> < textarea rows= "4" cols= "50" name= "subject" placeholder= "Введите ваше сообщение:" class = "message" required> textarea> < input name= "submit" class = "btn" type= "submit" value= "Отправить" /> form> |
По стилям особо расписывать ничего не буду, отмечу лишь одно, в оформлении использовал некоторые свойства CSS3, линейный градиент, эффект тени, слегка скруглённые углы и т.д., постарался добиться некой кроссбраузерности для этих свойств, но в старых версиях браузеров, форма будет выглядеть всё же несколько иначе ((.
/* Базовый стиль формы */ form { margin: 0 auto; max- width: 95 %; padding: 30px 30px 6px 30px; border: 1px solid rgba(0 , 0 , 0 , .2 ) ; - moz- border- radius: 5px; - webkit- border- radius: 5px; border- radius: 5px; - moz- background- clip: padding; - webkit- background- clip: padding- box; background- clip: padding- box; background: rgba(0 , 0 , 0 , 0.5 ) ; - moz- box- shadow: 0 0 13px 3px rgba(0 , 0 , 0 , .5 ) ; - webkit- box- shadow: 0 0 13px 3px rgba(0 , 0 , 0 , .5 ) ; box- shadow: 0 0 13px 3px rgba(0 , 0 , 0 , .5 ) ; overflow: hidden; } /* Поле сообщения */ textarea{ background: rgba(255 , 255 , 255 , 0.4 ) ; width: 100 %; height: 110px; border: 1px solid rgba(255 , 255 , 255 , .6 ) ; - moz- border- radius: 4px; - webkit- border- radius: 4px; border- radius: 4px; - moz- background- clip: padding; - webkit- background- clip: padding- box; background- clip: padding- box; display: block; font- family: "Open Sans" , sans- serif; font- size: 18px; font- weight: 300 ; color: #fff; padding- left: 25px; padding- right: 20px; padding- top: 12px; margin- bottom: 20px; overflow: hidden; } /* Поля ввода */ input { width: 100 %; height: 48px; border: 1px solid rgba(255 , 255 , 255 , .4 ) ; - moz- border- radius: 4px; - webkit- border- radius: 4px; border- radius: 4px; - moz- background- clip: padding; - webkit- background- clip: padding- box; background- clip: padding- box; display: block; font- family: "Open Sans" , sans- serif; font- size: 18px; font- weight: 300 ; color: #fff; padding- left: 20px; padding- right: 20px; margin- bottom: 20px; } input[ type= submit] { cursor: pointer; } input. name { background: rgba(255 , 255 , 255 , 0.4 ) ; padding- left: 25px; } input. email { background: rgba(255 , 255 , 255 , 0.4 ) ; padding- left: 25px; } input. message { background: rgba(255 , 255 , 255 , 0.4 ) ; padding- left: 25px; } ::- webkit- input- placeholder { color: #fff; } :- moz- placeholder{ color: #fff; } ::- moz- placeholder { color: #fff; } :- ms- input- placeholder { color: #fff; } input: focus, textarea: focus { background- color: rgba(0 , 0 , 0 , 0.2 ) ; - moz- box- shadow: 0 0 5px 1px rgba(255 , 255 , 255 , .5 ) ; - webkit- box- shadow: 0 0 5px 1px rgba(255 , 255 , 255 , .5 ) ; box- shadow: 0 0 5px 1px rgba(255 , 255 , 255 , .5 ) ; overflow: hidden; } /* Стили для кнопки отправить */ . btn { width: 138px; height: 44px; - moz- border- radius: 4px; - webkit- border- radius: 4px; border- radius: 4px; float: right; border: 1px solid #253737; background: #416b68; background: - webkit- gradient(linear, left top, left bottom, from(#6da5a3), to(#416b68)); background: - webkit- linear- gradient(top, #6da5a3, #416b68); background: - moz- linear- gradient(top, #6da5a3, #416b68); background: - ms- linear- gradient(top, #6da5a3, #416b68); background: - o- linear- gradient(top, #6da5a3, #416b68); background- image: - ms- linear- gradient(top, #6da5a3 0%, #416b68 100%); padding: 10. 5px 21px; - webkit- border- radius: 6px; - moz- border- radius: 6px; border- radius: 6px; - webkit- box- shadow: rgba(255 , 255 , 255 , 0.1 ) 0 1px 0 , inset rgba(255 , 255 , 255 , 0.7 ) 0 1px 0 ; - moz- box- shadow: rgba(255 , 255 , 255 , 0.1 ) 0 1px 0 , inset rgba(255 , 255 , 255 , 0.7 ) 0 1px 0 ; box- shadow: rgba(255 , 255 , 255 , 0.1 ) 0 1px 0 , inset rgba(255 , 255 , 255 , 0.7 ) 0 1px 0 ; text- shadow: #333333 0 1px 0; color: #e1e1e1; } . btn: hover { border: 1px solid #253737; text- shadow: #333333 0 1px 0; background: #416b68; background: - webkit- gradient(linear, left top, left bottom, from(#77b2b0), to(#416b68)); background: - webkit- linear- gradient(top, #77b2b0, #416b68); background: - moz- linear- gradient(top, #77b2b0, #416b68); background: - ms- linear- gradient(top, #77b2b0, #416b68); background: - o- linear- gradient(top, #77b2b0, #416b68); background- image: - ms- linear- gradient(top, #77b2b0 0%, #416b68 100%); color: #fff; } . btn: active { margin- top: 1px; text- shadow: #333333 0 -1px 0; border: 1px solid #333333; background: #ffCC00; background: - webkit- gradient(linear, left top, left bottom, from(#ffCC00), to(#ff6600)); background: - webkit- linear- gradient(top, #ffcc00, #ff6600); background: - moz- linear- gradient(top, #ffcc00, #ff6600); background: - ms- linear- gradient(top, #ffcc00, #ff6600); background: - o- linear- gradient(top, #ffcc00, #ff6600); background- image: - ms- linear- gradient(top, #ffcc00 0%, #ff6600 100%); color: #fff; - webkit- box- shadow: rgba(255 , 255 , 255 , 0 ) 0 1px 0 , inset rgba(255 , 255 , 255 , 0.7 ) 0 1px 0 ; - moz- box- shadow: rgba(255 , 255 , 255 , 0 ) 0 1px 0 , inset rgba(255 , 255 , 255 , 0.7 ) 0 1px 0 ; box- shadow: rgba(255 , 255 , 255 , 0 ) 0 1px 0 , inset rgba(255 , 255 , 255 , 0.7 ) 0 1px 0 ; outline: none; } |
/* Базовый стиль формы */ form { margin: 0 auto; max-width: 95%; padding: 30px 30px 6px 30px; border: 1px solid rgba(0,0,0,.2); -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px; -moz-background-clip: padding; -webkit-background-clip: padding-box; background-clip: padding-box; background: rgba(0, 0, 0, 0.5); -moz-box-shadow: 0 0 13px 3px rgba(0,0,0,.5); -webkit-box-shadow: 0 0 13px 3px rgba(0,0,0,.5); box-shadow: 0 0 13px 3px rgba(0,0,0,.5); overflow: hidden; } /* Поле сообщения */ textarea{ background: rgba(255, 255, 255, 0.4); width: 100%; height: 110px; border: 1px solid rgba(255,255,255,.6); -moz-border-radius: 4px; -webkit-border-radius: 4px; border-radius: 4px; -moz-background-clip: padding; -webkit-background-clip: padding-box; background-clip: padding-box; display:block; font-family: "Open Sans", sans-serif; font-size:18px; font-weight: 300; color:#fff; padding-left:25px; padding-right:20px; padding-top:12px; margin-bottom:20px; overflow:hidden; } /* Поля ввода */ input { width: 100%; height: 48px; border: 1px solid rgba(255,255,255,.4); -moz-border-radius: 4px; -webkit-border-radius: 4px; border-radius: 4px; -moz-background-clip: padding; -webkit-background-clip: padding-box; background-clip: padding-box; display:block; font-family: "Open Sans", sans-serif; font-size:18px; font-weight: 300; color:#fff; padding-left:20px; padding-right:20px; margin-bottom:20px; } input { cursor:pointer; } input.name { background: rgba(255, 255, 255, 0.4); padding-left:25px; } input.email { background: rgba(255, 255, 255, 0.4); padding-left:25px; } input.message { background: rgba(255, 255, 255, 0.4); padding-left:25px; } ::-webkit-input-placeholder { color: #fff; } :-moz-placeholder{ color: #fff; } ::-moz-placeholder { color: #fff; } :-ms-input-placeholder { color: #fff; } input:focus, textarea:focus { background-color: rgba(0, 0, 0, 0.2); -moz-box-shadow: 0 0 5px 1px rgba(255,255,255,.5); -webkit-box-shadow: 0 0 5px 1px rgba(255,255,255,.5); box-shadow: 0 0 5px 1px rgba(255,255,255,.5); overflow: hidden; } /* Стили для кнопки отправить */ .btn { width: 138px; height: 44px; -moz-border-radius: 4px; -webkit-border-radius: 4px; border-radius: 4px; float:right; border: 1px solid #253737; background: #416b68; background: -webkit-gradient(linear, left top, left bottom, from(#6da5a3), to(#416b68)); background: -webkit-linear-gradient(top, #6da5a3, #416b68); background: -moz-linear-gradient(top, #6da5a3, #416b68); background: -ms-linear-gradient(top, #6da5a3, #416b68); background: -o-linear-gradient(top, #6da5a3, #416b68); background-image: -ms-linear-gradient(top, #6da5a3 0%, #416b68 100%); padding: 10.5px 21px; -webkit-border-radius: 6px; -moz-border-radius: 6px; border-radius: 6px; -webkit-box-shadow: rgba(255,255,255,0.1) 0 1px 0, inset rgba(255,255,255,0.7) 0 1px 0; -moz-box-shadow: rgba(255,255,255,0.1) 0 1px 0, inset rgba(255,255,255,0.7) 0 1px 0; box-shadow: rgba(255,255,255,0.1) 0 1px 0, inset rgba(255,255,255,0.7) 0 1px 0; text-shadow: #333333 0 1px 0; color: #e1e1e1; } .btn:hover { border: 1px solid #253737; text-shadow: #333333 0 1px 0; background: #416b68; background: -webkit-gradient(linear, left top, left bottom, from(#77b2b0), to(#416b68)); background: -webkit-linear-gradient(top, #77b2b0, #416b68); background: -moz-linear-gradient(top, #77b2b0, #416b68); background: -ms-linear-gradient(top, #77b2b0, #416b68); background: -o-linear-gradient(top, #77b2b0, #416b68); background-image: -ms-linear-gradient(top, #77b2b0 0%, #416b68 100%); color: #fff; } .btn:active { margin-top:1px; text-shadow: #333333 0 -1px 0; border: 1px solid #333333; background: #ffCC00; background: -webkit-gradient(linear, left top, left bottom, from(#ffCC00), to(#ff6600)); background: -webkit-linear-gradient(top, #ffcc00, #ff6600); background: -moz-linear-gradient(top, #ffcc00, #ff6600); background: -ms-linear-gradient(top, #ffcc00, #ff6600); background: -o-linear-gradient(top, #ffcc00, #ff6600); background-image: -ms-linear-gradient(top, #ffcc00 0%, #ff6600 100%); color: #fff; -webkit-box-shadow: rgba(255,255,255,0) 0 1px 0, inset rgba(255,255,255,0.7) 0 1px 0; -moz-box-shadow: rgba(255,255,255,0) 0 1px 0, inset rgba(255,255,255,0.7) 0 1px 0; box-shadow: rgba(255,255,255,0) 0 1px 0, inset rgba(255,255,255,0.7) 0 1px 0; outline: none; }
Второй вариант оформления формы обратной связи представлен в светлых тонах, размеры формы (ширина, высота), как и в первом варианте не фиксированы, и легко будут вписываться в размеры контейнера где эта формы будет расположена.
Как и в первом варианте, структура Html контактной формы стандартная, элементы формы с определёнными классами, соответствующими классам в CSS.
< form> < input name= "name" placeholder= "Укажите ваше имя!" class = "textbox" required /> < input name= "emailaddress" placeholder= "Укажите ваш Email!" class = "textbox" type= "email" required /> < textarea rows= "4" cols= "50" name= "subject" placeholder= "Введите ваше сообщение:" class = "message" required> textarea> < input name= "submit" class = "button" type= "submit" value= "Отправить" /> form> |
При формировании базовых размеров форм и внутренних элементов, использовал процентные значения для ширины width , благодаря чему, форма легко подстраивается под размеры контейнера в котором она будет расположена. Цветовая гамма кнопки «Отправить», её размеры и расположения, легко меняются, достаточно поэкспериментировать с определёнными значениями.
/* Базовые стили формы */ form{ margin: 0 auto; max- width: 95 %; box- sizing: border- box; padding: 40px; border- radius: 5px; background: RGBA(255 , 255 , 255 , 1 ) ; - webkit- box- shadow: 0px 0px 15px 0px rgba(0 , 0 , 0 , .45 ) ; box- shadow: 0px 0px 15px 0px rgba(0 , 0 , 0 , .45 ) ; } /* Стили полей ввода */ . textbox{ height: 50px; width: 100 %; border- radius: 3px; border: rgba(0 , 0 , 0 , .3 ) 2px solid; box- sizing: border- box; font- family: "Open Sans" , sans- serif; font- size: 18px; padding: 10px; margin- bottom: 30px; } . message: focus, . textbox: focus{ outline: none; border: rgba(24 , 149 , 215 , 1 ) 2px solid; color: rgba(24 , 149 , 215 , 1 ) ; } /* Стили текстового поля */ . message{ background: rgba(255 , 255 , 255 , 0.4 ) ; width: 100 %; height: 120px; border: rgba(0 , 0 , 0 , .3 ) 2px solid; box- sizing: border- box; - moz- border- radius: 3px; font- size: 18px; font- family: "Open Sans" , sans- serif; - webkit- border- radius: 3px; border- radius: 3px; display: block; padding: 10px; margin- bottom: 30px; overflow: hidden; } /* Базовые стили кнопки */ . button{ height: 50px; width: 100 %; border- radius: 3px; border: rgba(0 , 0 , 0 , .3 ) 0px solid; box- sizing: border- box; padding: 10px; background: #90c843; color: #FFF; font- family: "Open Sans" , sans- serif; font- weight: 400 ; font- size: 16pt; transition: background . 4s; cursor: pointer; } /* Изменение фона кнопки при наведении */ . button: hover{ background: #80b438; } |
/* Базовые стили формы */ form{ margin:0 auto; max-width:95%; box-sizing:border-box; padding:40px; border-radius:5px; background:RGBA(255,255,255,1); -webkit-box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, .45); box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, .45); } /* Стили полей ввода */ .textbox{ height:50px; width:100%; border-radius:3px; border:rgba(0,0,0,.3) 2px solid; box-sizing:border-box; font-family: "Open Sans", sans-serif; font-size:18px; padding:10px; margin-bottom:30px; } .message:focus, .textbox:focus{ outline:none; border:rgba(24,149,215,1) 2px solid; color:rgba(24,149,215,1); } /* Стили текстового поля */ .message{ background: rgba(255, 255, 255, 0.4); width:100%; height: 120px; border:rgba(0,0,0,.3) 2px solid; box-sizing:border-box; -moz-border-radius: 3px; font-size:18px; font-family: "Open Sans", sans-serif; -webkit-border-radius: 3px; border-radius: 3px; display:block; padding:10px; margin-bottom:30px; overflow:hidden; } /* Базовые стили кнопки */ .button{ height:50px; width:100%; border-radius:3px; border:rgba(0,0,0,.3) 0px solid; box-sizing:border-box; padding:10px; background:#90c843; color:#FFF; font-family: "Open Sans", sans-serif; font-weight:400; font-size: 16pt; transition:background .4s; cursor:pointer; } /* Изменение фона кнопки при наведении */ .button:hover{ background:#80b438; }
Вариантов оформления контактных форм масса, главное иметь чуточку фантазии и базовые знания CSS. На страницах моего блога, вы можете найти другие, и примеры стилистики форм обратной связи.
Для особо невнимательных, хочу, в который уже раз, пояснить: представленные в статье формы, это всего лишь внешняя оболочка, чтобы формы реально выполняли свои функции, к ним необходимо прикрутить скрипт-обработчик, коих полно разбросано в «интернетах», так что убедительная просьба, не писать в комментариях, что формы не работают и т.п., всё прекрасно работает, просто нужно понимать что, куда и зачем))).
С уважением, Андрей.
Всем привет! В этой статье вы узнаете, как создать всплывающую форму обратной связи для html и wordpress сайтах. В первую очередь такие формы будут необходимы интернет-магазинам, лендингам, да и простым сайтам-визиткам, так как это реально удобно для пользователя.
К примеру, посетитель зашел на ваш сайт, просмотрел необходимую ему информацию, вроде бы уже готов заказать ваш товар или услугу, но вот звонить в другой город и тратить большие деньги ему совсем не хочется. Вот в такие моменты и приходит на помощь всплывающая форма обратной связи.
Итак, допустим у вас уже есть сайт, и вы хотите создать форму, при заполнении которой, пользователь сможет получить от вас обратную связь. Для этого, в первую очередь создается сам каркас.
Вставляем в нужное место на сайте следующий код:
По желанию вы можете добавить дополнительные поля для ввода информации, либо убрать уже имеющиеся. Настоятельно не рекомендую вам использовать в подобных формах капчу, либо другие защиты от ботов, что затруднит пользователю заполнение формы.
Код вставлен, что мы видим?
Форма появилась, но надо придать ей вид. Для этого добавляем следующие стили:
/* Форма обратной связи */ #inline { margin-left:30px; width:80%; margin:0 auto; background:#fff; padding:10px 20px; } .txt { display:inline-block; color:#676767; width:190px; margin-bottom:10px; border:1px solid #ccc; padding:5px 9px; font-size:15px!important; line-height:1.4em; } .txtarea { display:inline-block; color:#676767; width:617px; margin-bottom:10px; border:1px solid #ccc; padding:5px 9px; font-size:15px!important; line-height:1.4em; height:80px; } .txt:focus, .txtarea:focus { border-style:solid; border-color:#bababa; color:#444; } input.error, textarea.error { border-color:#973d3d; border-style:solid; background:#f0bebe; color:#a35959; } input.error:focus, textarea.error:focus { border-color:#973d3d; color:#a35959; } #send { color:#FFFFFF; display:block; cursor:pointer; padding:5px 11px; font-size:1.2em; border:solid 1px #F9F9F9; border-radius:2px; background:#70C6B9; width:210px; margin-bottom:20px; } #send:hover { background:#979797; } /* Форма обратной связи */
Так уже гораздо лучше. В любом случае, форму вам надо будет подстраивать под общий дизайн сайта, поэтому у вас она в конечном итоге будет отличаться от моей.
Выглядит это вот так:
Что получается? Посетитель кликает на поле, и скрипт подставляет ему уже готовую маску, с кодом страны. Довольно удобно.
Для этого, необходимо подключить скрипт маски. Скачать его вы сможете в самом конце статьи вместе с исходниками.
Подключаем скрипт перед закрывающимся тегом. Не забудьте поменять путь к файлу на свой. Хорошо, форма обратной связи создана, стили настроены, теперь нужно повестить на нее обработчик, чтобы уведомления приходили вам на почту.
Для этого перед закрывающимся тегом вставьте следующий скрипт:
Как работает этот скрипт?
Осталось сделать самое последнее – создать файл sendmessage.php вставить в него нижеприведенный php код и загрузить его в корень вашего сайта.
Новое сообщение\r\n"; $msg .= "Имя: ".$username."
\r\n"; $msg .= "
Номер телефона: ".$userphone."
\r\n"; $msg .= "
Почта: ".$usermail."
\r\n"; $msg .= "
Сообщение: ".$content."
\r\n"; $msg .= " "; // отправка сообщения if(@mail($sendto, $subject, $msg, $headers)) { echo "true"; } else { echo "false"; } ?>
Вот и все, простая форма обратной связи для html сайта готова. Не забудьте только поменять e-mail в файле sendmessage.php на свой.
Добавляем всплывающую форму обратной связи на сайт
Бывают случаи, когда нужна именно всплывающая форма, которая открывается при нажатии на кнопку. Сделать ее очень просто. В качестве примера возьмем форму, созданную нами ранее и будет работать с ней.
Для начала нам нужно подключить jqury fancybox, скачать который вы сможете в конце статьи.
Добавьте эти строчки перед закрывающимся тегом body, только поменяйте путь к файлам на свой.
И придаем ей стили.
Modalbox { color:#FFFFFF; display:block; cursor:pointer; padding:10px 11px; font-size:1.2em; border:solid 1px #F9F9F9; border-radius:2px; background:#70C6B9; width:210px; text-decoration:none; text-align:center; margin:0 auto 20px; } .modalbox:hover { background:#979797; }
Обратите внимание, что кнопке, при нажатии на которую будет вызывать всплывающее окно, обязательно должен быть присвоен класс modalbox и путь href=”#inline”. Без этого всплывающая форма не будет открываться на сайте.
После чего прячем созданную нами ранее форму, чтобы она открывалась во всплывающем окне. Для этого нужно заменить стили #inline со старых на новые.
#inline { display:none; margin-left:30px; width:80%; margin:0 auto; background:#fff; padding:10px 20px; }
В итоге у нас получается вот такая кнопочка.
При нажатии на которую открывается всплывающее окно с обратной связью.
Опять же, стили, расположение полей и элементов можно менять так, как вам будет нужно. К примеру, для обратного звонка с сайта достаточно будет оставить всего 2 поля – имя и телефон, а остальные поля убрать.
Не забывайте, что для того, чтобы форма работала, в конце сайта нужно будет добавить обработчик, который опубликован выше, и загрузить в корень сайта файл sendmessage.php .
В случае, если ваш сайт работает на движке wordpress, вы можете использовать специальные плагины для добавления контактной формы. Один из лучших плагинов Contact Form 7. Скачать его можно с официального сайта, либо через админку в разделе Плагины.
После активации плагина в левом меню появится новая вкладка. Открываете ее и нажимаете Add New.
Вводите название новой формы, выбираете поля, которые должны быть в форме. Обычно вполне хватает стандартных, которые добавлены автоматически. Сохраняете форму.
После сохранения на экране появится шорткод, который нужно будет вставить на страницу, где должна будет отображаться контактная форма, например, на странице Контакты.
Копируете этот код, переходите на нужную страницу, в визуальном редакторе выбираете формат «Текст», вставляете этот шорткод и сохраняете страницу.
Затем проверяем, отображается ли форма на странице и корректно ли работает. Для этого, достаточно будет просто перейти на страницу, где вставили код. У вас должна появиться вот такая форма:
Теперь посетители вашего сайта смогут связаться с вами через созданную контактную форму на движке wordpress.
Я сам не люблю добавлять лишние плагины на данный движок, так как они грузят сайт, замедляя его работу. Поэтому для всплывающей формы использую обычно 2 варианта.
Первый способ уже был описан выше, поэтому сразу перейдем ко второму.
Для начала, вставляем следующий код сразу после открытия тега body.
X
Давайте разберемся что есть что:
Обратите внимание на то, что у вас id и название формы могут отличаться от моих. Новый код добавлен, теперь задаем ему стили.
Bg-b { position:absolute; width:100%; height:100%; left:0; top:0; background:rgba(51,51,51,0.55); z-index:1000; } body { position:relative; } .callme { position:fixed; top:30%; left:50%; width:300px; margin-left:-150px; z-index:1100; background:#fff; padding:20px 20px 10px; border-radius:4px; } .callme small { position:absolute; right:10px; top:10px; font-size:15px; cursor:pointer; }
Сохраняем код и проверяем. Теперь форма должна быть расположена по середине вашего экрана, а сзади нее полупрозрачный затемненный фон. Все хорошо, но осталось добавить последнее – скрипт, который будет открывать и прятать данную форму при клике на нужные кнопки.
Данный скрипт необходимо вставить в файл footer, перед закрывающимся тегом body.
Остались последние штрихи и всплывающая форма на wordpress будет готова. Добавьте классам.callme и.bg-b стиль display:none. Это необходимо для того, чтобы форма не появлялась на экране при запуске сайта.
Мы рассмотрели с вами несколько вариантов создания формы для обратного звонка. Надеюсь, что у вас не возникнет проблем с внедрением формы на ваш сайт. Если же у вас возникнут проблемы или вопросы, вы всегда сможете получить консультацию в комментариях.
В последних версиях WordPress jQuery скрипты не работают с символом $ , поэтому это следует учесть и заменить $ на jQuery
Довольно часто бывает такая проблема, при которой сквозная форма на сайте, перестает отправлять на внутренних страницах. Для того, чтобы этого не происходило, указывайте в обработчике полный пусть к файлу sendmessage.php. Например, вот так:
Url: "http://site.ru/sendmessage.php"
А скачать исходники первых двух форм, вы сможете по
По многочисленным просьбам, форма обратной связи была модернизирована. Теперь в ней учтена установка галочки на согласие об отправке данных согласно законодательству РФ № 152-ФЗ «О персональных данных», доработана адаптивность под любые разрешения экранов, сжаты js и css файлы.
Посмотреть пример, а также и скачать исходники обновленной формы обратной связи и всплывающей формы теперь можно online, по ссылкам.