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/
Rozwiązany
![[HTML5/CSS] Naniesienie na responsywny obraz o dużej powierzchni punktów "klikalnych" - ostatni post przez DobryKarol](http://web-talk.pl/uploads/profile/photo-thumb-3240.jpg?_r=1440507313)
