Z czasem powstanie z tego tematu poradnik. Myślę, że zaraz znajdą się lepsi specjaliści ode mnie, którzy pomogą dopracować kod.
Poniższy formularz powstał na bazie zlepków różnego rodzaju gotowców i poradników. Nie pamiętam dokładnych źródeł, ale chyba nikogo nie okradłem z pracy twórczej
plik index.html/index.php:
plik jquery.mail.js:
jQuery(document).ready(function(){ $('#contactform').submit(function(){ var action = $(this).attr('action'); $("#message").slideUp(750,function() { $('#message').hide(); $('#submit') .attr('disabled','disabled'); $.post(action, { name: $('#name').val(), email: $('#email').val(), phone: $('#phone').val(), subject: $('#subject').val(), comments: $('#comments').val(), verify: $('#verify').val() }, function(data){ document.getElementById('message').innerHTML = data; $('#message').slideDown('slow'); $('#contactform img.loader').fadeOut('slow',function(){$(this).remove()}); $('#submit').removeAttr('disabled'); if(data.match('success') != null) $('#contactform').slideUp('slow'); } ); }); return false; }); });
plik contact.php:
<?php if(!$_POST) exit; if (!defined("PHP_EOL")) define("PHP_EOL", "\r\n"); // Poniżej przypisywanie do naszych zmiennych, danych otrzymanych z formularza $name = $_POST['name']; $email = $_POST['email']; $phone = $_POST['phone']; $subject = $_POST['subject']; $comments = $_POST['comments']; $verify = $_POST['verify']; // Sprawdzanie wprowadzonych danych: if(trim($name) == '') { echo 'Uwaga! Prosimy o podanie imienia i nazwiska.'; exit(); } else if(trim($email) == '') { echo 'Uwaga. Prosimy o podanie poprawnego adresu email.'; exit(); } else if(trim($phone) == '') { echo 'Uwaga. Prosimy o podanie numeru telefonu.'; exit(); } if(trim($subject) == '') { echo 'Uwaga. Prosimy o podanie tematu wiadomości'; exit(); } else if(trim($comments) == '') { echo 'Uwaga. Prosimy o wpisanie treści wiadomości.'; exit(); } else if(!isset($verify) || trim($verify) == '') { echo 'Uwaga. Prosimy o wpisanie wyniku działania.'; exit(); } else if(trim($verify) != '11') { echo 'Uwaga. Numer weryfikacyjny jest niepoprawny.'; exit(); } if(get_magic_quotes_gpc()) { $comments = stripslashes($comments); } //Poniżej adres email, na który wysłana zostanie wiadomość $address = "[email protected]"; // Poniżej tytuł wysyłanego maila $e_subject = 'Osoba ' . $name . ' kontaktuje się z Tobą za pomocą formularza ze strony.'; // Treść wiadomości $e_body = "Ktoś kontaktuje się z Tobą za pośrednictwem formularza na stronie. Treść wiadomości: " . PHP_EOL . PHP_EOL; $e_content = "\"$comments\"" . PHP_EOL . PHP_EOL; $e_reply = "Możesz odpowiedzieć $name poprzez email: $email lub telefonicznie: $phone"; $msg = wordwrap( $e_body . $e_content . $e_reply, 70 ); $headers = "From: $email" . PHP_EOL; $headers .= "Reply-To: $email" . PHP_EOL; $headers .= "MIME-Version: 1.0" . PHP_EOL; $headers .= "Content-type: text/plain; charset=utf-8" . PHP_EOL; $headers .= "Content-Transfer-Encoding: quoted-printable" . PHP_EOL; if(mail($address, $e_subject, $msg, $headers)) { // Jeśli email zostanie pomyślnie wysłany to na stronę trafi komunikat: echo ""; echo ""; echo "Wiadomość została wysłana pomyślnie."; echo ""; echo ""; } else { // W przeciwnym wypadku: echo 'Wystąpił błąd podczas wysyłania wiadomości!'; }
plik contact.css:
html, body { border: 0; margin: 0; padding: 0; } body { font: 14px 'Open Sans', Arial, sans-serif; min-width: 100%; min-height: 100%; color: #888888; background:#f5f5f5; font-weight: 300; } #contact p, label, legend { font: 13px 'Open Sans', Arial, sans-serif; font-weight: 300;} #contact h1 { margin: 10px 0 10px; font-size: 24px; color: #333333; font-weight: 300; } #contact { display: block; width: 650px; margin: 50px auto; padding: 35px; background-color: #FFF; -webkit-border-radius:5px; } #contact label { display: inline-block; float: left; height:36px; line-height: 36px; width: 155px; font-size: 13px; } #contact input, textarea, select { width: 400px; margin: 0; padding: 10px; color: #666; background: #fff; border: 1px solid #E5E5E5; margin: 5px; box-shadow: rgba(0, 0, 0, 0.1) 0px 0px 8px; -moz-box-shadow: rgba(0, 0, 0, 0.1) 0px 0px 8px; -webkit-box-shadow: rgba(0, 0, 0, 0.1) 0px 0px 8px; border-radius: 4px; -moz-border-radius: 4px; -webkit-border-radius: 4px; } #contact input:focus, textarea:focus, select:focus {background-color: #fff; color:#333;} #contact input.submit { width: 160px; cursor: pointer; background:#99cd45; color:#fff; } #contact input.submit:hover { background:#81a842; } #contact input[type="submit"][disabled] { background:#99cd45; } #contact fieldset {border-style: none; padding-left: 0px;} #contact legend { padding-bottom: 10px; font-weight:bold; color:#000; } #contact span.required{ font-size: 13px; color: #ff0000; } #message { margin: 10px 0; padding: 0; } .error_message { display: block; height: 22px; line-height: 22px; background: #FBE3E4 url('../assets/error.gif') no-repeat 10px center; padding: 3px 10px 3px 35px; color:#8a1f11;-webkit-border-radius:5px; } .loader { padding: 0 10px; } #contact #success_page h1 { background: url('../assets/success.gif') left no-repeat; padding-left:22px; } acronym { border-bottom:1px dotted #ccc; }
PACZKA DO POBRANIA:
form.zip 4,2 KB
22 Ilość pobrań
DEMO: http://web-talk.pl/demos/form/