HTML联系我们表单

HTML Contact Us form

本文关键字：表单 我们 联系我 联系 HTML      更新时间：2023-09-26

我有一个模板的联系我们的形式，这是在每个网页的底部。当用户输入这些详细信息时，我希望它将消息发送到我指定的电子邮件地址，并通知用户它已成功发送(只是一个简单的互联网弹出)

    <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> &nbsp;&copy; 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来提交数据从你的网页到服务器将发送邮件。

你可以做一个简单的web搜索邮件脚本或使用一些简单的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>

同样，对于通知，您可以从众多提供漂亮样式覆盖的库中找到一个，或者在您的提交页面上使用简单的JavaScript alert("your message here");。由于默认情况下，表单提交会将用户重定向到提交页面，因此也可以在那里显示一条内联HTML消息。

相关文章：