Всем привет!
Подготовил для вас интересный эффект для блога или сайта – выскальзывающая форма обратной связи. Для эффекта выскальзывания использую чистый CSS без javascript.
Итак, как же выглядит этот эффект?
Когда пользователь зайдет на сайт или блог, он увидит с левой стороны страницы кнопку «Контакты»:
Если пользователь наведет курсор мыши на кнопку «Контакты», блок формы обратной связи выплывет из прижатого левого бока:
Ну как вам?
В такой блок вы можете вставить что угодно: форму обратной связи, отзывы, подписку на RSS, корзину заказов, свое фото с краткой биографией о себе и другое.
Теперь идем к коду.
Возьмем стандартный HTML-код:
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> </head> <body> </body> </html>
Между тегами <body></body> ставьте вот такой код:
<div id="slide-out"> <img src="ties.png" alt="" /> <div id="slide-out_inside"> <-- сдесь будет код формы обратной связи, отзывов, подписки на RSS, корзины заказов, свое фото с кратной биографией о себе и др. --> </div> </div>
Для примера я вставлю форму обратной связи:
<div id="slide-out"> <img src="ties.png" alt="Контакты" /> <div id="slide-out_inside"> <form method="post" action=""> <input ENGINE="text" name="name" placeholder="Ваше Имя" class="name" required /> <input type="text" name="email" placeholder="Ваш E-mail" class="name" required /> <textarea name="quest" placeholder="Ваш вопрос" rows="6" cols="40" required ></textarea> <input type="submit" name="subscribe" value="Отправить!"> </form> </div> </div>
Для того чтобы текст «Контакты» был написан по вертикали на 900, я использовал картинку «ties.png» размерами 13х80 px. Рисовал в фотошопе и делал картинку с прозрачным фоном. Как сделать картинке прозрачный фон, читайте здесь.
Теперь пропишем CSS. Для эффекта плавного всплывания в коде используется псевдо класс transition на CSS3.
#slide-out {
position: fixed;
top: 40px;
left: 0;
width: 35px;
padding: 12px 0;
text-align: center;
background: #000;
-webkit-transition-duration: 0.3s;
-moz-transition-duration: 0.3s;
-o-transition-duration: 0.3s;
transition-duration: 0.3s;
-webkit-border-radius: 0 5px 5px 0;
-moz-border-radius: 0 5px 5px 0;
border-radius: 0 5px 5px 0;
}
#slide-out_inside {
position: fixed;
top: 40px;
left: -250px;
background: #000;
width: 200px;
padding: 25px;
-webkit-transition-duration: 0.3s;
-moz-transition-duration: 0.3s;
-o-transition-duration: 0.3s;
transition-duration: 0.3s;
text-align: left;
-webkit-border-radius: 0 0 5px 0;
-moz-border-radius: 0 0 5px 0;
border-radius: 0 0 5px 0;
}
#slide-out_inside textarea {
width: 190px;
height: 100px;
margin-bottom: 6px;
}
#slide-out:hover {
left: 250px;
}
#slide-out:hover #slide-out_inside {
left: 0;
}
input.name {
margin-bottom: 5px;
}
Вот абсолютно готовый код:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Выскальзывающая панель на CSS (bloggood.ru)</title>
<style>
#slide-out {
position: fixed;
top: 40px;
left: 0;
width: 35px;
padding: 12px 0;
text-align: center;
background: #000;
-webkit-transition-duration: 0.3s;
-moz-transition-duration: 0.3s;
-o-transition-duration: 0.3s;
transition-duration: 0.3s;
-webkit-border-radius: 0 5px 5px 0;
-moz-border-radius: 0 5px 5px 0;
border-radius: 0 5px 5px 0;
}
#slide-out_inside {
position: fixed;
top: 40px;
left: -250px;
background: #000;
width: 200px;
padding: 25px;
-webkit-transition-duration: 0.3s;
-moz-transition-duration: 0.3s;
-o-transition-duration: 0.3s;
transition-duration: 0.3s;
text-align: left;
-webkit-border-radius: 0 0 5px 0;
-moz-border-radius: 0 0 5px 0;
border-radius: 0 0 5px 0;
}
#slide-out_inside textarea {
width: 190px;
height: 100px;
margin-bottom: 6px;
}
#slide-out:hover {
left: 250px;
}
#slide-out:hover #slide-out_inside {
left: 0;
}
input.name {
margin-bottom: 5px;
}
</style>
</head>
<body>
<div id="slide-out">
<img src="ties.png" alt="Контакты" />
<div id="slide-out_inside">
<form method="post" action="">
<input type="text" name="name" placeholder="Ваше Имя" class="name" required />
<input type="text" name="email" placeholder="Ваш E-mail" class="name" required />
<textarea name="quest" placeholder="Ваш вопрос" rows="6" cols="40" required ></textarea>
<input type="submit" name="subscribe" value="Отправить!">
</form>
</div>
</div>
</body>
</html>
[посмотреть пример] <=> [скачать исходник]
Подписывайтесь на обновление моего блога. Удачи!
Понравился пост? Помоги другим узнать об этой статье, кликни на кнопку социальных сетей ↓↓↓
Последние новости категории:
Как растянуть блок на всю высоту экрана с помощью CSS
Анимация (покачивание-swing) текста или изображения при наведении мыши
CSS стили для горизонтальных линий «HR»
Как сделать простой эффект Lightbox на CSS3Похожие статьи
Как сделать в input type кнопки «+» и «-» по бокам
Способ исправления орфографических ошибок и опечаток на сайте.
Создание графики на Javascript
Популярные статьи:
-
Как узнать id компьютера
Дата: 29 марта 2013
Прокомментировано:90
просмотров: 330341 -
Размеры форматов листов А0 – А7
Дата: 23 января 2013
Прокомментировано:3
просмотров: 274700 -
Смешные логические загадки с подвохом, отгадки прилагаются
Дата: 12 ноября 2014
Прокомментировано:5
просмотров: 222519 -
Готовые макеты блоков для веб-страниц на HTML и CSS
Дата: 25 июня 2014
Прокомментировано:23
просмотров: 187690 -
Установка windows 7 на ноутбук
Дата: 18 декабря 2012
Прокомментировано:169
просмотров: 186564
12 Ответов на комментарий - Выскальзывающая форма обратной связи на чистом CSS
Добавить комментарий
Метки: css, для сайта, форма обратной связи, эффекты для сайта
А как прописать чтоб на почту приходило письмо. Т.е Клиент на сайте заполняет форму, И запрос поступал на е-маил относящийся к сайту.
Рита, Вам нужно написать обработчик на PHP. Для примера, можете посмотреть, как я написал обработчик для другой формы:
https://bloggood.ru/effekty-dlya-sajta-2/prostaya-html-forma-obratnoj-svyazi-dlya-sajta.html/
А можете просто скопировать готовую форму с обработчиком и вставить в выскальзывающий блок.
Здравствуйте! Благодаря вашим материалам мне удалось добавить выезжающую форму обратной связи на сайт. Удалось так же добавить обработчик для отправки данных из заполненной формы. За что вам большое спасибо;)
Но вот вопрос, как можно сделать так, чтобы сообщение об успешной/не успешной отправке не выходило на отдельной странице, а появлялось там же в форме? Буду очень благодарна, если вы выделите время для ответа.
Здравствуйте, Елена! Какой скрипт вы используете? Дайте ссылку на страницу и я вам помогу.
Использую скрипт, который вы указывали по ссылке (на один комментарий выше в ответе для Риты).
Мой сайт еще в процессе разработки, поэтому живет только на моем компе:)
<html> <head> <meta charset="utf-8"> <title>Оформление ссылок</title> <style> #submit { font-family: sans-serif; color: #ffffff; font-size: 18px; padding: 0px; text-decoration: none; box-shadow: 0px 1px 3px #666666; -webkit-box-shadow: 0px 1px 3px #666666; -moz-box-shadow: 0px 1px 3px #666666; text-shadow: 1px 1px 3px #666666; background: -webkit-gradient(linear, 0 0, 0 100%, from(#ce1515), to(#8b0d0d)); background: -moz-linear-gradient(top, #ce1515, #8b0d0d); } #submit:hover { background: -webkit-gradient(linear, 0 0, 0 100%, from(#8b0d0d), to(#ce1515)); background: -moz-linear-gradient(top, #8b0d0d, #ce1515) } #respond input[ENGINE=text], textarea { -webkit-transition: all 0.30s ease-in-out; -moz-transition: all 0.30s ease-in-out; -ms-transition: all 0.30s ease-in-out; -o-transition: all 0.30s ease-in-out; outline: none; padding: 3px 0px 3px 3px; margin: 5px 1px 3px 0px; border: 1px solid #DDDDDD; } #respond input[type=text]:focus, textarea:focus { box-shadow: 0 0 5px rgba(81, 203, 238, 1); margin: 5px 1px 3px 0px; border: 1px solid rgba(81, 203, 238, 1); } </style> </head> <body> <meta charset="UTF-8" /> <?php if (isset($_POST['name'])) {$name = $_POST['name']; if ($name == '') {unset($name);}} if (isset($_POST['email'])) {$email = $_POST['email']; if ($email == '') {unset($email);}} if (isset($_POST['sub'])) {$sub = $_POST['sub']; if ($sub == '') {unset($sub);}} if (isset($_POST['body'])) {$body = $_POST['body']; if ($body == '') {unset($body);}} if (isset($name) && isset($email) && isset($sub) && isset($body)){ $address = "test-bloggood@rambler.ru"; $mes = "Имя: $name \nE-mail: $email \nТема: $sub \nТекст: $body"; $send = mail ($address,$sub,$mes,"Content-type:text/plain; charset = UTF-8\r\nFrom:$email"); if ($send == 'true') {echo "Сообщение отправлено успешно. <a href='https://bloggood.ru/'>Главная страница</a>";} else {echo "Ошибка, сообщение не отправлено!";} } else { echo "Заполнили все поля!!!"; } ?> <h2>Форма обратной связи.</h2> <form name="MyForm" action="" method="post"> <p><input class="input" name="name" type="text" style="width:15%" /> Ваше имя*</p> <p><input class="input" name="email" type="text" style="width:15%" /> Электронная почта*</p> <p><input class="input" name="sub" type="text" style="width:15%" /> Тема сообщения</p> <p>Текст сообщения:<br /><textarea name="body" cols="1" rows="5" style="width:30%" /></textarea></p> <p><input id="submit" value="Отправить" type="submit" /></p> </form> </body> </html>В строке № 58, поменяйте сообщение
Эммм… я извиняюсь, но ведь это то же самое?
Смотрите, боковая панель для отправки сообщения на почту.
Выезжает, посетитель пишет свой текст, нажимает “отправить”.
В этот момент по существующему коду php все происходит замечательно, НО сообщение об успешной отправке открывается в новом окне, после чего происходит перенаправление на главную страницу сайта.
Нужно: сделать так, чтобы сообщение об успешной отправке сообщения выходило там же в боковой панели. И после закрытия панели посетитель может продолжить перемещение по сайту с того места, где остановился.
Здесь нужны изменения в php, мне кажется. Или ajax добавить. Хотя, конечно, мое мнение о том, что нужно сделать – это предположения. Потому понимаю в этом совсем не много.
Елена, вы явно не пробовали этот код.
Где здесь перенаправление на главную страницу сайта?
Вы остаетесь на месте, на этой странице.
Елена, если хотите, могу создать Вам лично, под вашу форму обработчик или полностью форму с обработчиком за символическую сумму.
Вы правы, перенаправления на главную страницу нет;) Но, прежде, чем писать комментарий, все же я код проверяла;) Просто не позволила бы себе писать без оснований. Тем более, что мне нравится ваш блог и не хотелось бы сорить здесь чем попало.
Смотрите, получается так, уведомление о том, что сообщение отправлено выходит в новом окне. Только, если раньше посетитель мог вернуться на сайт по перенаправлению, то теперь нет. Просто остается на этой бесцветной страничке. Ну да, рядом ссылка есть, чтобы вернуться. Но многие люди ведь ленивые)))
Степан, мне интересно ваше предложение, быть может я когда-нибудь воспользуюсь им. Но пока что размеры моего сайтика не настолько велики, чтобы я могла позволить себе делать что-то на заказ. К сожалению.
Но, в любом случае, спасибо, что уделили мне время и писали ответы;)
“сообщение отправлено выходит в новом окне” – здесь я снова с Вами не согласен. Если вы вставите эту форму на сайт, то сообщение появиться на той странице, где форма.
[просмотр]
или я Вас не так понял?
Добрый день, форму эту освоил, а есть в блоге код mail.php?
Добрый день, Олег!
Под эту нет, но можете не нужное убрать и подкорректировать из вот этой