[英]HTML Contact Us form
我有一個聯系我們表格的模板,它位於每個網頁的底部。 當用戶輸入詳細信息時,我希望它將消息發送到我指定的電子郵件地址,並向用戶發送成功發送的通知(只是一個簡單的互聯網彈出窗口)
<div id="contact" class="contact">
<div class="container">
<div class="contact-grids">
<div class="col-md-6">
<div class="contact-left wow fadeInRight" data-wow-delay="0.4s">
<h3>Contact Us</h3>
<label>Please contact us if you require one of our solutions. All enquiries and quotes are free of service. </label> <label><img src="images/icons/phoneicon.png" width="50px" /> (028) 900 00 00</label>
<label><img src="images/icons/emailicon.png" width="50px" />example@gmail.com</label>
<label><img src="images/icons/openinghoursicon.png" width="50px" />Monday - Friday (9am - 4pm)</label>
<div class="contact-left-grids">
<div class="clearfix"> </div>
</div>
</div>
</div>
<div class="col-md-6">
<div class="contact-right wow fadeInLeft" data-wow-delay="0.4s">
<form>
<input type="text" class="text" value="Name..." onfocus="this.value = '';" onblur="if (this.value == '') {this.value = 'Name...';}">
<input type="text" class="text" value="Email..." onfocus="this.value = '';" onblur="if (this.value == '') {this.value = 'Email...';}">
<textarea value="Message:" onfocus="this.value = '';" onblur="if (this.value == '') {this.value = 'Message';}">Message..</textarea>
<a class="leran-more" href="#">Submit</a></div>
</form>
</div>
</div>
<div class="clearfix"> </div>
</div>
<!--- copy-right ---->
<br>
<p> © copyright</a></p>
<script type="text/javascript">
$(document).ready(function() {
/*
var defaults = {
containerID: 'toTop', // fading element id
containerHoverID: 'toTopHover', // fading element hover id
scrollSpeed: 1200,
easingType: 'linear'
};
*/
$().UItoTop({ easingType: 'easeOutQuart' });
});
</script>
<a href="#" id="toTop" style="display: block;"> <span id="toTopHover" style="opacity: 1;"> </span></a>
<!--- copy-right ---->
</div>
</div>
<!---- contact --->
要顯示一個彈出框,您只需添加alert("Email Sent");
到您的 javascript 代碼
至於發送電子郵件,那是服務器端,有點取決於您的配置。 你有任何代碼或起點嗎?
正如上面的評論中提到的,您通常需要某種后端(在您的服務器上運行)來發送電子郵件。 使用哪一個取決於您的服務器設置,但有很多可用。 通常,您可能會設置一個表單/ajax 來將數據從您的網頁提交到將發送郵件的服務器。
您可以對郵件腳本進行簡單的網絡搜索或使用一些簡單的 PHP(假設您的服務器支持它)來發送電子郵件:
<?php
$name = $_POST['name'];
$email = $_POST['email'];
$message = $_POST['message'];
$body = "\"{$name}\" <{$email}> sent you a message!\n\n{$message}";
mail("you@yourdomain.com", "Some subject", $body, "From: {$email}");
?>
您需要修改您的表單以提交它
<form method="POST" action="/path/to/mailer.php">
<input type="text" class="text" value="Name..." onfocus="this.value = '';" onblur="if (this.value == '') {this.value = 'Name...';}" name="name">
<input type="text" class="text" value="Email..." onfocus="this.value = '';" onblur="if (this.value == '') {this.value = 'Email...';}" name="email">
<textarea value="Message:" onfocus="this.value = '';" onblur="if (this.value == '') {this.value = 'Message';}" name="message">Message..</textarea>
<a class="learn-more" href="#">Submit</a></div>
</form>
同樣,對於通知,您可以找到眾多提供漂亮樣式覆蓋或帶有簡單alert("your message here");
在您提交頁面上的 JavaScript 中。 由於默認情況下,表單提交會將用戶重定向到提交頁面,因此也可以只在那里顯示內聯 HTML 消息。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.