This is my default CONTACT form built with jQuery and CSS.
The form uses a jQuery call to a PHP script that inserts data into a Mysql DB and sends two emails of confirmation, all this under the hood… meanwhile, there is a CSS only animation that displays a message that the data is been sent to the server and shows a positive message if that data was sent without errors and an error message if there was an error.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 |
$(document).ready(function(){ var request; $("#contact-form").submit(function(event){ event.preventDefault(); if (request) { request.abort(); } var $form = $(this); var $inputs = $form.find("input, textarea"); var serializedData = $form.serialize(); $inputs.prop("disabled", true); request = $.ajax({ url: "contact-form.php", type: "post", data: serializedData }); request.done(function (response, textStatus, jqXHR){ //console.log("Hooray, it worked!"); $(".show-success").slideToggle(); //$(".hide-contact").slideToggle(); }); request.fail(function (jqXHR, textStatus, errorThrown){ console.error( "The following error occurred: "+ textStatus, errorThrown ); $(".show-error").slideToggle(); }); request.always(function () { $inputs.prop("disabled", false); }); }); }); |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 |
<style> .frm{padding:9px;border-radius: 3px;background:#ECEFF1;font-size: .8em; border:0px; width: 100%;font-weight: 300;box-sizing: border-box;} .frb{background:#3498DB} .pt-12{padding-top:12px}.small{font-size: .8em} .hide{display:none} .org-bg{background:#E74C3C;padding: 12px;border-radius: 3px;margin-bottom: 12px;color: #fff}.grn-bg{background:#52BE80;padding: 12px;border-radius: 3px;margin-bottom: 12px;} .orange-bg{font-family:'Quicksand',sans-serif;font-weight:400;font-size:.8em;} .fc{padding-bottom:12px;font-family:'Quicksand',sans-serif;font-weight:400;font-size:1.2em} #loading{display:none} .spinner { margin: 0px auto 0; width: 70px; text-align: center; } .spinner > div { width: 18px; height: 18px; background-color: #333; border-radius: 100%; display: inline-block; -webkit-animation: sk-bouncedelay 1.4s infinite ease-in-out both; animation: sk-bouncedelay 1.4s infinite ease-in-out both; } .spinner .bounce1 { -webkit-animation-delay: -0.32s; animation-delay: -0.32s; } .spinner .bounce2 { -webkit-animation-delay: -0.16s; animation-delay: -0.16s; } @-webkit-keyframes sk-bouncedelay { 0%, 80%, 100% { -webkit-transform: scale(0) } 40% { -webkit-transform: scale(1.0) } } @keyframes sk-bouncedelay { 0%, 80%, 100% { -webkit-transform: scale(0); transform: scale(0); } 40% { -webkit-transform: scale(1.0); transform: scale(1.0); } } .trimit{background: rgba(149, 192, 234);padding: 12px; border-radius: 3px;margin-top:12px;font-family:'Quicksand',sans-serif;font-weight:400;font-size:.8em;} </style> |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 |
<!-- form ROW --> <div class="row pt-12x"> <div id="loading"> <div class="spinner"> <div class="bounce1"></div> <div class="bounce2"></div> <div class="bounce3"></div> </div> <div class="trimit"><i class="far fa-paper-plane fa-fw"></i> Se trimit datele...</div> </div> <!-- Error Handlers --><div id="show-success"></div> <div class="grn-bg orange-bg list-font-1 hide show-success"><i class="fas fa-check-square fa-fw"></i> <b>Vă mulțumim!</b> Am primit mesajul dumneavoastră.</div> <div class="org-bg orange-bg list-font-1 hide show-error"><i class="far fa-question-circle fa-fw"></i> <b>Eroare!</b> Mesajul nu a fost trimis.</div> <!-- .Error Handlers --> <!-- form --> <form id="contact-form"> <div class="hide-contact"> <div class="fc"><i class="fas fa-user fa-fw brown"></i> Formular contact</div> <div> <input type="text" name="name" class="frm" placeholder="Nume" required=""> </div> <div class="pt-12"> <input type="text" name="email" class="frm" placeholder="Email@exemplu.com" required=""> </div> <div class="pt-12"> <input type="text" name="phone" class="frm" placeholder="Număr telefon" required=""> </div> <div class="pt-12"> <textarea name="message" class="frm" rows="6" placeholder="Mesaj..."></textarea><input type="text" name="city" value="" class="hide"> </div> <div class="pt-12 small"><i class="fas fa-lock fa-fw green"></i> Protecția datelor <small>(GDPR) (EU) 2016/679 <a href="https://en.wikipedia.org/wiki/General_Data_Protection_Regulation"><i class="fas fa-external-link-alt fa-fw"></i></a></small></div> <div class="pt-12"> <button type="submit" class="frm frb dsblb"><i class="fas fa-paper-plane fa-fw"></i> Trimite</button> </div></form> </form> </div> <!-- ./hide-contact --> </div> <!-- ./form-ROW --> |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 |
<?php // v1.0 090318 if(isset($_POST['city']) && !empty($_POST['city'])) { echo "Hello Robot!"; exit; } if(empty($_POST['name']) || empty($_POST['email']) || empty($_POST['message'])) { echo "Hello Robot 2!"; exit; } $today = date("d/m/Y - G:i "); ///////////////////// /////////// ///////// /////// ///// // include_once("_connect.php"); // _POST Vars... $name = htmlentities($_POST['name']); $email = htmlentities($_POST['email']); $phone = htmlentities($_POST['phone']); $message1 = htmlentities($_POST['message']); $data = time(); $sql = "INSERT INTO table_name (name, email, phone, message, data) VALUES ('$name', '$email', '$phone', '$message1', '$data')"; if ($conn->query($sql) === TRUE) { ////// ////// /// // yeyy! Mail to owner... $to_owner = "me@example.com"; $subject_owner = "New message from..."; $message_owner = " <html> <head> <title>New message</title> </head> <body> <p><h3>Mesaj nou pe site...</h3></p> <p>Detalii mesaj:</p> <ul> <li>Name: $name</li> <li>Phone: <a href=\"tel:$phone\">$phone</a></li> <li>Email: $email</li> <li>Data: $today</li> <li>Message: $message1</li> </ul> </body> </html> "; // Always set content-type when sending HTML email $headers_owner = "MIME-Version: 1.0" . "\r\n"; $headers_owner .= "Content-type:text/html;charset=UTF-8" . "\r\n"; // More headers $headers_owner .= 'From: Name<contact@example>' . "\r\n" . "Reply-to: $email" . "\r\n"; $headers_owner .= 'Cc: carbon-copy@example.com' . "\r\n"; mail($to_owner, $subject_owner, $message_owner, $headers_owner); ///////////////// /// +++++++++++++++++++++ ///// exit; } else { echo "Error: " . $sql . "<br>" . $conn->error; } $conn->close(); ?> |