Skocz do zawartości

Zdjęcie
* * * * * 6 głosy

Prosty formularz kontaktowy na każdą stronę

html5 css3 formularz ajax jquery

40 odpowiedzi w tym temacie
  • Zaloguj się, aby dodać odpowiedź
zonic

    WT Elite

  • 2911 postów
    • Czas spędzony online: 133d 19h 57m 16s
472
Znakomita!
  • LocationToruń

Napisano 28 lipiec 2014 - 21:26

#1

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:

Dostepny w zalaczniku

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: Załączony plik  form.zip   4,2 KB   22 Ilość pobrań

DEMO: http://web-talk.pl/demos/form/
 


  • 1

proboszcz

    Użytkownik

  • 84 postów
    • Czas spędzony online: 1d 22h 43m 11s
0
Neutralna
  • LocationŚwiecie

Napisano 29 lipiec 2014 - 10:17

#2
Dzieki za stworzenie poradnika, wszystko udalo sie zrobic jak trzeba.
  • 1

zonic

    WT Elite

  • 2911 postów
    • Czas spędzony online: 133d 19h 57m 16s
472
Znakomita!
  • LocationToruń

Napisano 29 lipiec 2014 - 10:48

#3

Dzieki za stworzenie poradnika, wszystko udalo sie zrobic jak trzeba.

W zasadzie to tylko źródła bez opisu, ale ważne że pomogło :)


  • 0

proboszcz

    Użytkownik

  • 84 postów
    • Czas spędzony online: 1d 22h 43m 11s
0
Neutralna
  • LocationŚwiecie

Napisano 29 lipiec 2014 - 22:11

#4

Doszły pewne komplikację a następnie utworzyłem wszystkie pliki, które są tutaj podane ( lecz nie wiem czy dobrze je wrzuciłem w kod) 
Podsyłam screeny żeby szybciej bez pisania to załatwić. 
1 screen przedstawia co wyszło mi po utworzeniu wszystkich plików.
      Załączony plik  1.jpg   48,91 KB   5 Ilość pobrań

2 screen przedstawia kod źródłowy html, wstawiłem tam kod podany przez zonica czyli ten 1. 

      Załączony plik  2.jpg   81,24 KB   5 Ilość pobrań  

 

3 screen przedstawia  3 pliki contact.php, contact.css, jquery.mail.js. Mam takie wrażenie że plik php jest źle wczytany

 

      Załączony plik  3.jpg   105,89 KB   5 Ilość pobrań

4 screen przedstawia pliki gdzie są umieszczone wszystkie pliki. w css/contact.css w js/jquery.mail.js a contact.php tak jak widziecie
       Załączony plik  4.jpg   37,92 KB   5 Ilość pobrań
 
Więc moje pytanie brzmi gdzie popełniłem błąd moje przypuszczenia są takie, kod html źle wklejony, plik html lub umieszczenie ich w złych folderach. Czekam na  odpowiedź myślę ze nie bedziecie mieć problemów z wyjaśnieniem tego problemu. Jestem dopiero początkującym proszę brać to pod uwagę mogę popełniać banalne błędy. 


  • 0

zonic

    WT Elite

  • 2911 postów
    • Czas spędzony online: 133d 19h 57m 16s
472
Znakomita!
  • LocationToruń

Napisano 29 lipiec 2014 - 22:46

#5

w html masz:

 

<link href="style/contact.css" rel="stylesheet" type="text/css" /> <!-- Style formularza -->

czyli contact.css ma znajdować się w tym przypadku w folderze style, a nie w folderze css


  • 1

wolfdz

    Stary wyjadacz

  • PipPipPip
  • 252 postów
    • Czas spędzony online: 10d 19m 41s
14
Dobra
  • LocationKraśnik

Napisano 14 grudzień 2014 - 17:47

#6

Postanowiłem go edytować i umieścić w projekcie aczkolwiek bo kliknięciu buttona nic się nie dzieje..

Kod 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'];
$subject  = $_POST['subject'];
$comments = $_POST['comments'];
 
// Sprawdzanie wprowadzonych danych:
if(trim($name) == '') {
	echo '<div class="error_message">Uwaga! Prosimy o podanie imienia i nazwiska.</div>';
	exit();
} else if(trim($email) == '') {
	echo '<div class="error_message">Uwaga. Prosimy o podanie poprawnego adresu email.</div>';
	exit();
}
 
if(trim($subject) == '') {
	echo '<div class="error_message">Uwaga. Prosimy o podanie tematu wiadomości</div>';
	exit();
} else if(trim($comments) == '') {
	echo '<div class="error_message">Uwaga. Prosimy o wpisanie treści wiadomości.</div>';
	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 "<fieldset>";
	echo "<div id='success_page'>";
	echo "<h1>Wiadomość została wysłana pomyślnie.</h1>";
	echo "</div>";
	echo "</fieldset>";
 
} else {
 
    // W przeciwnym wypadku:
    
	echo 'Wystąpił błąd podczas wysyłania wiadomości!';
 
}

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(),
            subject: $('#subject').val(),
			comments: $('#comments').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;
 
	});
});

No i HTML

<form method="post" action="contact.php" name="contactform" id="contactform">
<div class="form-left animated fadeInLeft" data-animation="fadeInLeft">
    <div class="row3">
        <!-- Imię -->
            <input name="name" type="text" id="name" size="30" value="" placeholder="Jan Kowalski" />
        </div>
      <div class="row3">
            <!-- Adres E-Mail -->
             <input name="email" type="text" id="email" size="30" value="" placeholder="[email protected]" />
        </div>
        <div class="row3">
             <!-- Temat wiadomości -->
             <input name="subject" type="text" id="subject" size="30" value="" placeholder="Temat wiadomości" />
        </div>
        <div class="row3">
             <!-- Przycisk wyślij -->
             <input type="submit" class="submit" id="submit" value="Napisz" />
        </div>
    </div>
                    
    <div class="form-right animated fadeInRight" data-animation="fadeInRight">
        <div class="row3">
            <!-- Treść wiadomości -->
             <textarea name="comments" cols="40" rows="3" id="comments" placeholder="Napisz do mnie"></textarea> 
        </div>
    </div>
</form>

Sprawdzałem i name oraz id się zgadzają, obawiam się, że mogłem coś usunąć w .php przez co nie chce działać formularz.


Użytkownik wolfdz edytował ten post 14 grudzień 2014 - 17:48

  • 0

zonic

    WT Elite

  • 2911 postów
    • Czas spędzony online: 133d 19h 57m 16s
472
Znakomita!
  • LocationToruń

Napisano 21 grudzień 2014 - 12:04

#7

Wrzuciłem Gotową paczkę do pobrania. Mam nadzieję, że się przyda ;)


  • 0

CarpeDiem

    Nowy użytkownik

  • 10 postów
    • Czas spędzony online: 30m 57s
1
Neutralna

Napisano 16 luty 2015 - 14:49

#8

Świetny Formularz, naprawdę pełen szacunek :)

Pozdrawiam!!


  • 1

Dum3L

    Nowy użytkownik

  • 1 postów
0
Neutralna

Napisano 28 maj 2015 - 14:30

#9

Witam czemu nie mogę pobrać tej paczki ? a bardzo mi potrzebna :/ 


  • 0

writen

    Stary wyjadacz

  • 458 postów
    • Czas spędzony online: 29d 22h 52m 54s
133
Znakomita!

Napisano 28 maj 2015 - 17:09

#10

Witam czemu nie mogę pobrać tej paczki ? a bardzo mi potrzebna :/ 

Zapewne wymagany jest troszkę dłuższy staż na forum :P


  • 0

logo-green-dark.png


dkkrzysiek
0
Neutralna

Napisano 09 czerwiec 2015 - 20:44

#11

Witam serdecznie.
Skopiowałem kody, stworzyłem pliki, umieściłem i wygląda fajnie. Mam taki problem, że jak chcę wysłać coś z formularza to zamiast wysłać wiadomość pojawia się komunikat "Wystąpił błąd podczas wysyłania wiadomości!"
contact.css umieściłem w katalogu „style”
contact.php umieściłem w katalogu głównym
jquery.mail.js umieściłem w katalogu „js”
index.php umieściłem w katalogu głównym
Czy powinienem coś jeszcze zmienić w kodzie oprócz swojego maila?
 


  • 0

zonic

    WT Elite

  • 2911 postów
    • Czas spędzony online: 133d 19h 57m 16s
472
Znakomita!
  • LocationToruń

Napisano 09 czerwiec 2015 - 21:04

#12

Witam serdecznie.
Skopiowałem kody, stworzyłem pliki, umieściłem i wygląda fajnie. Mam taki problem, że jak chcę wysłać coś z formularza to zamiast wysłać wiadomość pojawia się komunikat "Wystąpił błąd podczas wysyłania wiadomości!"
contact.css umieściłem w katalogu „style”
contact.php umieściłem w katalogu głównym
jquery.mail.js umieściłem w katalogu „js”
index.php umieściłem w katalogu głównym
Czy powinienem coś jeszcze zmienić w kodzie oprócz swojego maila?
 

Hmmm. Niczego poza adresem nie musisz zmieniać. Testujesz lokalnie czy na serwerze? Jak na serwerze, to możesz link podesłać.


  • 0

dkkrzysiek
0
Neutralna

Napisano 09 czerwiec 2015 - 21:24

#13

http://www.zs1.zagan.pl/bip/index1.php


Hmmm. Niczego poza adresem nie musisz zmieniać. Testujesz lokalnie czy na serwerze? Jak na serwerze, to możesz link podesłać.

http://www.zs1.zagan.pl/bip/index1.php


  • 0

zonic

    WT Elite

  • 2911 postów
    • Czas spędzony online: 133d 19h 57m 16s
472
Znakomita!
  • LocationToruń

Napisano 09 czerwiec 2015 - 21:36

#14

Hmm. Wygląda ok. Może serwer nie obsługuje funkcji mail() ?


  • 0

dkkrzysiek
0
Neutralna

Napisano 09 czerwiec 2015 - 22:18

#15

Hmm. Wygląda ok. Może serwer nie obsługuje funkcji mail() ?

Tak. Serwer nie obsługuje funkcji mail(). Spędziłem nad tym kilka godzin a na to nie wpadłem. Strona jest postawiona na Sewerze Home.pl. Czyli mogę zapomnieć o formulażu kontaktowym.


  • 0

zonic

    WT Elite

  • 2911 postów
    • Czas spędzony online: 133d 19h 57m 16s
472
Znakomita!
  • LocationToruń

Napisano 09 czerwiec 2015 - 22:46

#16

Tak. Serwer nie obsługuje funkcji mail(). Spędziłem nad tym kilka godzin a na to nie wpadłem. Strona jest postawiona na Sewerze Home.pl. Czyli mogę zapomnieć o formulażu kontaktowym.

Nie no, nie jest tak tragicznie :) 

Poczytaj: https://pomoc.home.p...pocztowych-2-2/

w razie problemów, bądź wątpliwości pisz.


  • 0

unbreak

    WT Elite

  • 1936 postów
    • Czas spędzony online: 27d 8h 38m 23s
506
Znakomita!
  • Location/home/unbreak

Napisano 10 czerwiec 2015 - 07:50

#17

Ludzie, tak na prawdę to (imo) nie powinno się korzystać z funkcji mail(). Jedyne słuszne rozwiązanie to PHPMailer i wysyłka za pomocą SMTP :)


  • 0

webDeveloper


zonic

    WT Elite

  • 2911 postów
    • Czas spędzony online: 133d 19h 57m 16s
472
Znakomita!
  • LocationToruń

Napisano 10 czerwiec 2015 - 08:23

#18

Ludzie, tak na prawdę to (imo) nie powinno się korzystać z funkcji mail(). Jedyne słuszne rozwiązanie to PHPMailer i wysyłka za pomocą SMTP :)

To czekamy na poradnik dla poczatkujacych by unbreak :)


  • 0

unbreak

    WT Elite

  • 1936 postów
    • Czas spędzony online: 27d 8h 38m 23s
506
Znakomita!
  • Location/home/unbreak

Napisano 10 czerwiec 2015 - 09:04

#19
czemakny

 

Hm, huh? :P


  • 0

webDeveloper


zonic

    WT Elite

  • 2911 postów
    • Czas spędzony online: 133d 19h 57m 16s
472
Znakomita!
  • LocationToruń

Napisano 10 czerwiec 2015 - 09:06

#20

Hm, huh? :P

Nie wiem o czym mowisz :) Czekamy na poradnik :) 


  • 0





Podone tematy Collapse


Użytkownicy przeglądający ten temat: 0

0 użytkowników, 0 gości, 0 anonimowych