BloGGood.ru

Блог Костаневича Степана

До Нового Года осталось:

Блог на разные темы, seo-оптимизация, раскрутка сайта, создание сайта, вкусные эффекты для сайта и многое другое…

Главная » Рецепты CSS » Выскальзывающая форма обратной связи на чистом CSS

Выскальзывающая форма обратной связи на чистом CSS

2015-05-02 / Вр:00:02 / просмотров: 4476

Всем привет!
Подготовил для вас интересный эффект для блога или сайта – выскальзывающая форма обратной связи. Для эффекта выскальзывания использую чистый CSS без javascript.

Итак, как же выглядит этот эффект?
Когда пользователь зайдет на сайт или блог, он увидит с левой стороны страницы кнопку «Контакты»:

Выскальзывающая форма обратной связи на чистом CSS

Если пользователь наведет курсор мыши на кнопку «Контакты», блок формы обратной связи выплывет из прижатого левого бока:

Выскальзывающая форма обратной связи на чистом CSS

Ну как вам?
В такой блок вы можете вставить что угодно: форму обратной связи, отзывы, подписку на 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 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>

Для того чтобы текст «Контакты» был написан по вертикали на 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>

[посмотреть пример] <=> [скачать исходник]

Подписывайтесь на обновление моего блога. Удачи!

Понравился пост? Помоги другим узнать об этой статье, кликни на кнопку социальных сетей ↓↓↓

Получай обновления блога!!! Подпишись:

Популярные статьи:

12 Ответов на комментарий - Выскальзывающая форма обратной связи на чистом CSS

  1. Рита

    А как прописать чтоб на почту приходило письмо. Т.е Клиент на сайте заполняет форму, И запрос поступал на е-маил относящийся к сайту.

    Ответить

    Степан => автор блога

    Степан => автор блога отвечает:

    Рита, Вам нужно написать обработчик на PHP. Для примера, можете посмотреть, как я написал обработчик для другой формы:
    http://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[type=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='http://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, поменяйте сообщение

  2. Елена

    Эммм… я извиняюсь, но ведь это то же самое?

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

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

    Здесь нужны изменения в php, мне кажется. Или ajax добавить. Хотя, конечно, мое мнение о том, что нужно сделать – это предположения. Потому понимаю в этом совсем не много.

    Ответить

    Степан => автор блога

    Степан => автор блога отвечает:

    Елена, вы явно не пробовали этот код.
    Где здесь перенаправление на главную страницу сайта?
    Вы остаетесь на месте, на этой странице.

    Елена, если хотите, могу создать Вам лично, под вашу форму обработчик или полностью форму с обработчиком за символическую сумму.

    Ответить

  3. Елена

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

    Ответить

    Степан => автор блога

    Степан => автор блога отвечает:

    “сообщение отправлено выходит в новом окне” – здесь я снова с Вами не согласен. Если вы вставите эту форму на сайт, то сообщение появиться на той странице, где форма.
    [просмотр]

    или я Вас не так понял?

    Ответить

  4. Олег

    Добрый день, форму эту освоил, а есть в блоге код mail.php?

    Ответить

    Степан => автор блога

    Степан => автор блога отвечает:

    Добрый день, Олег!
    Под эту нет, но можете не нужное убрать и подкорректировать из вот этой

    Ответить

Добавить комментарий

;-) :| :x :twisted: :smokes: :smile: :shock: :sad: :rose: :roll: :razz: :pop-corne: :oops: :o :mrgreen: :lol: :idea: :grin: :gazeta: :evil: :cry: :cool: :coffe: :arrow: :???: :?: :!:

Чтобы добавить в комментарий код HTML, PHP, CSS, JavaScript, нужно сделать так: [code] ваш код [/code]

Subscribe without commenting

Метки: , , ,

Мои цели на 2017 год:

1). Закончить тему «Bootstrap»

2). Закончить тему «Все про PHP и MySQL»

3). Довести количество статей до 750

4). Создать портфолио и мини интернет-магазин шаблонов

5). Создать книгу

6). Довести количество статей до 800

7). Добиться посещаемости 3000 человек/сутки

8). Увеличить число подписчиков до 250

Статистика по блогу

Количество записей на блоге: 781
Количество страниц на блоге: 20
Количество рубрик на блоге: 28
Количество меток на блоге: 72
Количество комментариев на блоге: 4278