bstpan,
форма незакончена, второого button нет ... всё в прятки играем?
вариант с двумя кнопками и одной формой
<!DOCTYPE HTML>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<style type="text/css">
.popup {
display: none;
}
</style>
</head>
<body>
<script>
$(function(){
$('.open_popup').click(function() {
var popup_id = $('#' + $(this).attr("rel"));
$(popup_id).show();
$('.overlay2').show();
})
$('.popup .close, .overlay2').click(function() {
$('.overlay2, .popup').hide();
})
});
</script>
<div align="center"><br>
<span class="open_popup" rel="popup1"> <button class="knopka" value="Отправить заявку"> Отправить заявку </button> </span>
</div>
<div class="overlay2"></div>
<div class="popup" id="popup1">
<span class="close">X</span>
<form action="" class="contact-form" name="contact-form" method="post" >
<div class="col-sm-4 col-sm-offset-1">
<div class="form-group">
<p align="left"><font color="green"> Тема: </font> </p>
<input id="id_subject" type="text" name="subject" maxlength="100" />
</div>
<div class="form-group">
<font color="green"> <p align="left">E-mail: </font></p>
<input type="text" name="email" id="id_email" />
</div>
<div class="form-group">
<p align="left"><font color="green"> Cообщение:</font></p>
<textarea id="id_message" rows="10" cols="30" name="message"></textarea>
</div>
<div class="form-group">
<input type="submit" name="submit" class="btn btn-primary btn-lg" required="required" value="Отправить" />
</div>
</div></form>
</div>
<div align="center"><br>
<span class="open_popup" rel="popup1"> <button class="knopka" value="Отправить заявку"> Отправить заявку </button> </span>
</div>
</body>
</html>