HTML Contact Us form

Question

I have a template of a contact us form which is at the bottom of each webpage. When the user enters there details I want it to send the message to my designated email address and also a notification to the user that it has been sent successfully (Just a simple internet popup)

    <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 --->

Answer 1

To show a popup box all you need to do is add alert("Email Sent"); to your javascript code

As far as sending email goes, that is server side and depends on your configuration a bit. Do you have any code or a starting point?

Answer 2

As mentioned in the comment above, you will generally need some sort of backend (runs on your server) to send email. Which one to use depends on your server setup but there are many available. In general, you'll probably set up a form/ajax to submit the data from your web page to the server which will send out the mail.

You could do a simple web search for a mail script or use some simple PHP (assuming your server supports it) to send the email:

<?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}");
?>

You would the need to modify your form to submit it

<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>

Similarly for a notification, you could find one of numerous libraries that provide nice styled overlays or go with a simple alert("your message here"); in JavaScript on your submission page. Since, by default, form submission redirects the user to the submission page, could also just display a message inline HTML there.