Форма обратной связи

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

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

Ответ

Поправил чуть:
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 напишите чтобы сохраняло в файл: $val) { $k = trim($_POST[$key]); $_POST[$key] = addslashes($k); } $filename = 'msg.html'; $somecontent = '

' . $_POST['name'] . '->' . $_POST['phone'] . '

'; $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; }

Заказать обратный звонок

• Отправить