$to = "[email protected]"; in mailer.php to your email address.If you have any questions or innovations please leave me a comment.
| <!DOCTYPE html> | |
| <html lang="en"> | |
| <head> | |
| <meta charset="utf-8"> | |
| <title>Contact Form</title> | |
| <link rel="stylesheet" href="style.css"/> | |
| </head> | |
| <body> | |
| <form action="" id="form"> | |
| <label for="email">Email:</label> | |
| <input type="text" name="email" id="email" placeholder="[email protected]"><br> | |
| <label for="subject">Subject:</label> | |
| <input type="text" name="subject" id="subject" placeholder="subject"><br> | |
| <label for="message">Message:</label> | |
| <textarea name="message" id="message" placeholder="message"></textarea><br> | |
| <button name="submit" id="submit">Send</button> | |
| <label id="info"></label> | |
| </form> | |
| <script src="http://code.jquery.com/jquery-latest.min.js"></script> | |
| <script src="js.js"></script> | |
| </body> | |
| </html> |
| $(document).ready(function() { | |
| var form = $('#form'), | |
| email = $('#email'), | |
| subject = $('#subject'), | |
| message = $('#message'), | |
| info = $('#info'), | |
| submit = $("#submit"); | |
| form.on('input', '#email, #subject, #message', function() { | |
| $(this).css('border-color', ''); | |
| info.html('').slideUp(); | |
| }); | |
| submit.on('click', function(e) { | |
| e.preventDefault(); | |
| if(validate()) { | |
| $.ajax({ | |
| type: "POST", | |
| url: "mailer.php", | |
| data: form.serialize(), | |
| dataType: "json" | |
| }).done(function(data) { | |
| if(data.success) { | |
| email.val(''); | |
| subject.val(''); | |
| message.val(''); | |
| info.html('Message sent!').css('color', 'green').slideDown(); | |
| } else { | |
| info.html('Could not send mail! Sorry!').css('color', 'red').slideDown(); | |
| } | |
| }); | |
| } | |
| }); | |
| function validate() { | |
| var valid = true; | |
| var regex = /^([a-zA-Z0-9_.+-])+\@(([a-zA-Z0-9-])+\.)+([a-zA-Z0-9]{2,4})+$/; | |
| if(!regex.test(email.val())) { | |
| email.css('border-color', 'red'); | |
| valid = false; | |
| } | |
| if($.trim(subject.val()) === "") { | |
| subject.css('border-color', 'red'); | |
| valid = false; | |
| } | |
| if($.trim(message.val()) === "") { | |
| message.css('border-color', 'red'); | |
| valid = false; | |
| } | |
| return valid; | |
| } | |
| }); |
| <?php | |
| if($_POST) { | |
| $to = "[email protected]"; // your mail here | |
| $email = filter_var($_POST["email"], FILTER_SANITIZE_EMAIL); | |
| $subject = filter_var($_POST["subject"], FILTER_SANITIZE_STRING); | |
| $message = filter_var($_POST["message"], FILTER_SANITIZE_STRING); | |
| $body = "Message: $message\nE-mail: $email"; | |
| if(@mail($to, $subject, $body)) { | |
| $output = json_encode(array('success' => true)); | |
| die($output); | |
| } else { | |
| $output = json_encode(array('success' => false)); | |
| die($output); | |
| } | |
| } |
| label { | |
| width: 200px; | |
| display: block; | |
| } | |
| input, textarea { | |
| width: 200px; | |
| margin: 5px 0; | |
| border: 1px solid #CCC; | |
| } | |
| p { | |
| width: 200px; | |
| } |
should you can me explain what the function done do? ty for the sharing man 👍
Thank you for posting this, been searching for a long time for a neat solution (i.e. without using third party servers)
Works perfectly ...
Regards chiprobot