Cum sa faci un formular de contact cu PHP si Ajax – prima parte

Buna tuturor! In acest articol va voi arata cum sa faceti un formular de contact folosind PHP, Ajax si JQuery. Acest tutorial e unu simplu, iar daca aveti cunostinte minime de HTML, PHP si JQuery il veti intelege.

Pentru inceput,vom creea 4 fisiere,si anume index.html, validare.php, ajax.js si style.css.

Sa incepem cu primul fisier index.html. In tagul HTML <head> vom adauga fisierele necesare formularului:

<script src=”//ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js”></script> <!– libraria necesara pentru AJAX –>
<script src=”ajax.js”></script> <!– scriptul JQuery –>
<link rel=”stylesheet” type=”text/css” href=”style.css”>

In tagul <body> vom creea un formular cu urmatorii parametri : action=”validare.php” ( prin acest parametru se specifica scriptul care va procesa datele trimise din formular ) si method=”POST” ( prin acest parametru se specifica transmiterea datelor fara a fi vizibile catre utilizator ).

Formularul va avea trei casute de tip input in care utilizatorul va introduce numele, adresa de email, subiectul si o casuta de tip textarea care va contine textul mesajului.Dupa aceste patru casute urmeaza butonul de submit ( <input type=”submit” name=”btn_submit” id=”btn_submit” value=”Trimite”> ) care va trimite datele din formular catre fisierul specificat prin parametrul action al tagului HTML <form> ce le va procesa.

Codul HTML pentru formular este urmatorul:

<form id="contact-form" method="POST" action="validare.php" >
	<p id="grup-nume" class="grup-formular">
		<label for="nume">Numele</label><br>
		<input type="text" name="nume" id="nume" placeholder="Numele tau">
	</p>

	<p id="grup-email" class="grup-formular">
		<label for="email">Adresa de email</label><br>
		<input type="text" name="email" id="email" placeholder="cineva@adresa.email">
	</p>

	<p id="grup-subiect" class="grup-formular">
		<label for="subiect">Subiect</label><br>
		<input type="text" name="subiect" id="subiect" placeholder="Subiectul emailului">
	</p>

	<p id="grup-mesaj" class="grup-formular">
		<label for="mesaj">Mesaj</label><br>
		<textarea name="mesaj" id="mesaj" placeholder="Scrie mesajul tau aici"></textarea>
	</p>

	<p>
		<input type="submit" name="btn_submit" id="btn_submit" value="Trimite">
	</p>
</form>

Validarea datelor

Mai departe vom creea fisierul validare.php care va prelua datele din formular si le va procesa. Prima data vom defini variabilele ce vor afisa erorile, ce vor prelua din formular datele (numele, adresa de email, subiect si textul mesajului) si care vor valida adresa de email introdusa:

$eroare         = array();  	
$data 		= array(); 	

$to = "admin@yahoo.com"; // adresa de email caruia ii vei trimite mesajul 
$nume = $_POST['nume'];
$email = $_POST['email'];
$subiect = $_POST['subiect'];
$mesaj = $_POST['mesaj'];

//Functia necesara pt validarea adresei de email
function validateEmail($email){
	return filter_var($email, FILTER_VALIDATE_EMAIL);
}

Dupa ce am preluat datele din formular,le vom valida prin instructiunea if (empty($variabila)). Fiecarei casute din formular ii este atribuita o variabila. Inainte de a trimite mailul verificam daca fiecare din aceste casute au fost completate si in caz ca sunt goale,va afisa un mesaj de eroare.

if (empty($nume)){
	$eroare['nume'] = 'Numele este obligatoriu!';
}

if (empty($email)){
	$eroare['email'] = 'Adresa de email este obligatorie!';
}else if (!validateEmail($email)){
	$eroare['email'] = 'Adresa de email nu este valida!';
}

if (empty($mesaj)){
	$eroare['mesaj'] = 'Nu ai scris niciun mesaj!';
}

Trimiterea mesajului

Daca casutele au fost completate si nu exista nicio eroare, mesajul va fi trimis catre adresa de email definita in variabila $to. Ultima linie de cod echo json_encode($data); e folosita pentru a parsa datele in format JSon pentru stringul data din JQuery.

if ( ! empty($eroare)) {

		$data['success'] = false;
		$data['eroare']  = $eroare;

	} else {

		$header = "From: $nume <$email>";
		$ok = mail($to,$subiect,$mesaj,$header);

		if ($ok){

			$data['success'] = true;
			$data['message'] = 'Emailul a fost trimis!';

		}else{

			if (!$ok){
				$eroare['ok'] = 'Emailul nu s-a trimis! Mai incearca';
			}

			$data['success'] = false;
			$data['eroare']  = $eroare;

		}	
	}

echo json_encode($data);

Cam asta a fost prima parte a articolului.Cea de-a doua parte este aici

5 comentarii

  • Hi! Someone in my Myspace group shared this website with us so I came to look it over. I’m definitely loving the information. I’m bookmarking and will be tweeting this to my followers! Great blog and terrific design and style.

  • I simply want to say I am all new to weblog and actually savored your website. More than likely I’m likely to bookmark your site . You definitely have great article content. Thanks for revealing your webpage.

  • Hey cool site!! Man .. Excellent .. Amazing .. Ill bookmark your online site and make feeds alsoI am happy to find countless useful info through the post, we require work out more strategies in this regard, thanks for sharing. . . . . .

  • I simply want to say I am just all new to weblog and absolutely savored your website. Almost certainly I’m planning to bookmark your site . You really come with awesome articles. Bless you for revealing your web page.

Lasa un comentariu