Доброго времени суток. У меня вот такая ситуация.
Как сделать, чтобы пользователь сайта когда заполнил форму и кликнул по кнопке - "Отправить", отправилось письмо и также, как и нажав на крестик исчезло окно? Сайт находится на хостинге Ucoz/
Вот сама внутренняя часть формы:
<table border="0" width="100%" id="table1" cellspacing="1" cellpadding="2">
<tr><td><input type="text" name="f1" size="30" style="width:95%;" maxlength="70" placeholder="E-mail" onfocus="placeholder='';" onblur="placeholder='E-mail';"> </td></tr>
<tr><td><input type="text" name="f2" size="30" style="width:95%;" maxlength="70" placeholder="Ваше имя" onfocus="placeholder='';" onblur="placeholder='Ваше имя';"> </td></tr>
<tr><td><textarea rows="7" name="f3" cols="30" style="width:95%;" placeholder="Что нужно выполнить?" onfocus="placeholder='';" onblur="placeholder='Что нужно выполнить?';"></textarea> </td></tr>
<tr><td colspan="2" align="center"><br /><input type="submit" value="Отправить"></td></tr>
</table>
JS
<script>
window.addEventListener("DOMContentLoaded", function() {
var d = document.querySelector("#parent_popup"),
e = document.querySelector(".close");
e.addEventListener("click", function(a) {
a.preventDefault();
d.classList.toggle("show");
})
function getCookie(name) {
var matches = document.cookie.match(new RegExp(
"(?:^|; )" + name.replace(/([\.$?*|{}\(\)\[\]\\\/\+^])/g, '\\$1') + "=([^;]*)"
));
return matches ? decodeURIComponent(matches[1]) : undefined;
}
!getCookie('rem') && window.setTimeout(function() {
var date = new Date(new Date().getTime() + 7 * 24 * 60 * 60 * 1000);
document.cookie = "rem=yes; path=/; expires=" + date.toUTCString();
d.classList.toggle("show");
window.setTimeout(function() {
d.classList.contains("show") && d.classList.toggle("show")
},1800000) //open
},1000) //pause
});
</script>
HTML
<div id="parent_popup" >
<div id="popup">
<table cellpadding='10' cellspacing='0' width='100%'>
<tr>
<td colspan="3" align='center' height="35px""><span style="text-align: -webkit-center;font-size:22px;"><strong>Зимнее предложение до 29 февраля 2016 года- <span style="color:#FF8C00;">Скидка 15%</span> на весь ремонт!</strong></span></td>
</tr>
<tr>
<td width='30%'><img src="http://catsitebel.ucoz.com/discount_15.png" alt="ремонт квартир" style="width: 270px;"/></td>
<td align='center' valign='top' width='36%'><span style="text-align: -webkit-center;font-size:18px;">Оставьте заявку на бесплатную консультацию <span style="color:#FF8C00;">прямо сейчас</span> и получите <span style="color:#FF8C00;">Скидку 15%</span> при заказе ремонта!</span><br/><br/><br/><br/><br/><br/><br/>Мы гарантируем что ваши данные не будут переданы третьим лицам</td>
<td align="right" valign='top' width='33%'>$MFORM_1$</td>
</tr>
</table>
<a class="close" title="Закрыть" >X</a>
</div>
</div>
CSS
<style type="text/css">
#parent_popup{background: url([url]http://catsitebel.ucoz.com/vse-ottenki.png[/url]) no-repeat center center fixed;-webkit-background-size: cover;-moz-background-size: cover;-o-background-size: cover;background-size: cover;display:none;position:fixed;z-index:99999;top:0;right:0;bottom:0;left:0}
#parent_popup.show{display:block}
#popup{background:#FFF;width:1000px;margin:10% auto;padding:5px 10px 5px 10px;border:3px solid #DDD;position:relative;-webkit-box-shadow:0 0 20px #000;-moz-box-shadow:0 0 20px #000;box-shadow:0 0 20px #000;-webkit-border-radius:8px;-moz-border-radius:8px;border-radius:8px}
.close{background-color:rgba(0,0,0,0.8);border:2px solid #CCC;height:24px;line-height:24px;position:absolute;right:-24px;cursor:pointer;font-weight:bold;text-align:center;text-decoration:none;color:rgba(255,255,255,0.9);font-size:14px;text-shadow:0 -1px rgba(0,0,0,0.9);top:-24px;width:24px;-webkit-border-radius:15px;-moz-border-radius:15px;-ms-border-radius:15px;-o-border-radius:15px;border-radius:15px;-moz-box-shadow:1px 1px 3px #000;-webkit-box-shadow:1px 1px 3px #000;box-shadow:1px 1px 3px #000}
.close:hover{background-color:rgba(0,122,200,0.8)}
</style>
ДЕМО
