5

Как сделать такую же форму обратной связи?

alt text alt text

Надо, чтобы изначально была кнопка, а потом она будто вытягивается и там два инпута. И сворачивается. Я сколько ни делаю уже, постоянно криво. Делал через .toggleClass вытягивание, не знаю как сделать.

3
  • Покажите, что у вас есть на данный момент. Закиньте код на jsfiddle.net
    – Deonis
    3 сен 2013 в 11:45
  • полный код в студию
    – mountpoint
    3 сен 2013 в 11:45
  • Пока что в таком состоянии: jsfiddle.net/Gs7mW/4
    – htmlcoder
    3 сен 2013 в 11:48

1 ответ 1

10

Поправил чуть:

http://jsfiddle.net/alpha9000/SbxHT/

$('#feedback div').click(function(){
    $('#feedback ul').toggle(300);
});

$('#feedback a').click(function(){
    
    var kx='name='+$('#feedback input[name=fname]').val()+'&phone='+$('#feedback input[name=phone]').val();
    // передаём в $_POST на feedback.php
	$.ajax({
		url: 'feedback.php',
		type: 'POST',
		dataType: 'html',
		data: kx
	});    
    $('#feedback ul').toggle(300);
    return false;
});

/* а в PHP напишите чтобы сохраняло в файл:

<?php
error_reporting(0);
foreach ($_POST as $key => $val) { $k = trim($_POST[$key]); $_POST[$key] = addslashes($k); }
$filename = 'msg.html';
$somecontent = '<div>' . $_POST['name'] . '->' . $_POST['phone'] . '</div>';
$handle = fopen($filename, 'a'); fwrite($handle, $somecontent); fclose($handle);
echo "Спасибо! Ваше сообщение отправлено.";
?>

и всё)
*/
* { padding: 0px; margin: 0px; font-family: 'Calibri', serif; font-size: 1em;}
#feedback { position: absolute; right: 5%; bottom: 5%; background: #ddd; width: 250px; border-radius: 5px; box-shadow: 0px 0px 3px 2px rgba(0,0,0,.5);}
#feedback div {text-align: center; cursor: pointer; padding: 2px;}
#feedback ul { padding: 0px 10px 5px 10px; list-style: none; display: none;}
#feedback li { margin-bottom: 5px; }
#feedback input { display: block; width: 225px; }
#feedback a { background: #999; color: #000; border-radius: 5px; padding: 0px 5px; text-decoration: none; transition: background 0.3s 0s;}
#feedback a:hover { background: #333; color: #fff; }
#feedback .last { text-align: right; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div id="feedback">
    <div>Заказать обратный звонок</div>
    <ul>
        <li><input name="fname" placeholder="Имя" type="text" /></li>
        <li><input name="phone" placeholder="+7 (901) 234-56-78" type="text" /></li>    
        <li class="last"><a href="#">Отправить</a></li>
    </ul>
</div>

4

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.