Dodatak za slanje univerzalnog obrasca na E - mail sa verifikacijom sajta

U ovom članku ćemo ponuditi naše iskustvo univerzalnog slanja obrazaca na e-poštu uz provjeru kompletnosti koristeći PHP i Jquery. Dodatak se može lako integrirati u bilo koju web stranicu bez duboke analize koda i arhitekture. U ovom članku ćemo pogledati princip rada dodatka, inicijalizaciju, konfiguraciju i proceduru instalacije.

Preuzmite dodatak

 Prepoznatljive karakteristike i mogućnosti univerzalnog dodatka za podnošenje obrasca:

• Provjera kompletnosti obrazaca uz mogućnost grupiranja elemenata i prikaza savjeta za korisnika
• Mnogo šablona za slanje sa mogućnošću automatskog odabira šablona
• Rad obrasca bez ponovnog učitavanja - AJAX
• Obrada uspješnih i neuspjelih prijava
• Jedinstvena zaglavlja e-pošte
• Slanje fajlova e-poštom

Univerzalni dodatak za slanje obrazaca s verifikacijom e-pošte sastoji se od glavnih dijelova:

• HTML obrazac za popunjavanje
• JQuery skripta za provjeru i slanje AJAX-a
• PHP skripta za automatizaciju obrade podataka poslatih iz obrasca, povezivanje šablona pisma i obradu rezultata slanja
• PHPMailer kao smtp klijent za slanje pisma
• TPL datoteke šablona za slanje e-pošte

Instaliranje primjera dodatka na host web servera i slanje obrasca na e-mail po prvi put

Nakon preuzimanja i raspakivanja dodatka, vidjet ćemo sljedeće stablo datoteka i direktorija:

/css/style.css              // Fajl osnovnih stilova
/css/font-awesome.css       // Fajl stilova za font FontAwesome
/fonts/*                    // Fajlovi fonta
/js/script.js               // JQuery skript za proveru i AJAX slanje forme
/mail-tpl/*                 // Katalog fajlova šablona
/php/phpmailer/*            // Katalog fajlova PHPMailer
/php/config.php             // Konfiguracija SMTP povezivanja
/php/function-send-form.php // Funkcija obrade i univerzalnog slanja na e-mail
index.html                  // HTML forma za slanje

Za dalje prvo iskustvo slanja demo obrasca, potrebno je da konfigurišemo /php/config.php fajl :

$__smtp = array(
"host" => 'smtp.host.ru',
"debug" => 0,
"auth" => true,
"port" => '465',
"username" => 'mail@E-mail.ru',
"password" => '123456',
"addreply" => 'mail@E-mail.ru',
"replyto" => 'mail@E-mail.ru',
"secure" => 'ssl'
);

Nećemo  se detaljno zadržavati na proceduri za konfigurisanje datoteke config.php . Detaljnije informacije o konfiguraciji PHPMailer SMTP klijenta možete pronaći ovdje!

Nakon uspješnog i ispravnog uređivanja konfiguracijskog fajla, moramo arhivske datoteke postaviti na bilo koji web server. Ova skripta neće raditi u načinu pregledača za pregled lokalnih datoteka. Otpremite sav sadržaj u bilo koju mapu na hostu web servera i otvorite vezu kroz adresnu traku preglednika:

http(https)://domen.domen/path/to/dir/index.html

Ako otvorimo prezentacijsku stranicu sa opisom i formom, sve je urađeno kako treba. Zatim popunjavamo obrazac i čekamo dugme „Pošalji“. Ako je obrazac uspješno poslan, prikazat ćemo odgovarajuću poruku. U slučaju grešaka tokom slanja, bit će prikazane informacije o grešci. Nećemo razmatrati ni PHPMailer proceduru otklanjanja grešaka.

Instalacija i integracija dodatka za slanje univerzalnog obrasca e-poštom na web stranicu

Da biste instalirali dodatak na postojeću stranicu, potrebno vam je:

1. Kopirajte sljedeću listu datoteka i direktorija:

/js/script.js               // JQuery skript za proveru i AJAX slanje forme
/mail-tpl/*                 // Katalog fajlova šablona
/php/phpmailer/*            // Katalog fajlova PHPMailer
/php/config.php             // Konfiguracija SMTP povezivanja
/php/function-send-form.php // Funkcija obrade i univerzalnog slanja na e-mail

2. Kreirajte novi ili uredite postojeći obrazac koristeći sljedeći primjer:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="js/script.js"></script>

<form name="request" method="POST" action="php/function-send-form.php" class="sendler">
  <h2>POVRATNE INFORMACIJE</h2>
  <input name="name" title="Unesite ime" type="text" placeholder="Ime" class="Y-required" tabindex="1" confirminfo=".response">
  <input name="E-mail" title="Popunite E-mail" type="text" class="Y-required" placeholder="e-mail" tabindex="2" confirminfo=".response">
  <textarea name="message" title="Popunite poruku" class="Y-required" placeholder="Poruka" tabindex="3" confirminfo=".response"></textarea>
  <input type="radio" id="radio1" class="Y-required" name="radio">
  <label for="radio1">radio 1</label>
  <input type="radio" id="radio2" class="Y-required" name="radio">
  <label for="radio2">radio 2</label>
  <input type="radio" id="radio3" class="Y-required" name="radio">
  <label for="radio3">radio 3</label>
  <input type="checkbox" class="checkbox Y-required" title="Neophodna je saglasnost sa pravilima" id="checkbox" tabindex="4" confirminfo=".response">
  <label for="checkbox">Pročitao/la sam i slažem se sa pravilima</label>

  <button class="btn btn-contact" type="submit" name="submitbtn" tabindex="5" value="Pošalji">Pošalji</button>
  <div class="response"></div>
</form>

Opis i dodjela ključnih atributa obrasca za ispravan rad skripte. Opcioni parametri skripte su u kurzivu:

2.1. oznaka obrasca:

name - Definira ime tpl šablona prilikom obrade primljenog POST niza skriptom function-send-form.php. Ime predloška slova mora odgovarati vrijednosti atributa name i formira se pomoću maske " <nameAttr_value>.tpl "

metoda - vrijednost atributa je uvijek POST. U suprotnom, funkcija obrade PHP obrasca neće raditi. Podrazumevano, skripta za obradu podataka function-send-form.php je fokusirana samo na parametre POST obrasca.

akcija - veza do servera AJAX rukovatelja zahtjeva. Ako je putanja vašeg AJAX poslužitelja zahtjeva drugačija, trebate urediti vrijednost atributa

class - atribut može sadržavati bilo koji broj klasa, ali da bi JQuery skripta ispravno radila, klasa pošiljatelja mora biti prisutna. Ovaj razred prati događaj podnošenja obrasca na vašoj web lokaciji.

2.2. Polja koja se popunjavaju unutar obrasca mogu sadržavati sljedeće atribute:

name - definira ime POST parametra

tip - za ispravan rad obrasca i prepoznavanje tipova elemenata obrasca, atribut se preporučuje za obaveznu upotrebu

title - prikazuje nagovještaj u tag-u koji je specificiran od strane klasa u atributu confirminfo trenutne oznake

klasa - sva polja koja se moraju popuniti i provjeriti moraju sadržavati klasu " Y-potrebno ", " group000_Y-potrebno "u vrijednosti atributa. group000_Y-required - grupiše potrebne elemente u grupe da provjeri da li je jedan od elemenata grupe pun. Radio ne mora biti grupisan, grupisanje se dešava na atributu name, kako su to zamislili programeri tipa

confirminfo - vrijednost atributa određuje klasu oznake u kojoj se prikazuje upozorenje o praznom elementu obrasca

2.3. Oznaka sa klasom odgovora je podrazumevano definisana kao klasa za prikaz sistemskih poruka o rezultatima rada obrasca, prikazivanje poruka u modu za otklanjanje grešaka dodataka i upozorenja o netačno popunjenim elementima obrasca.

Stilizacija ovog oblika može se uzeti iz primjera, ili možete razviti vlastiti.

3. Kao rezultat uređivanja ili kreiranja obrasca, JQuery mora obraditi obrazac sa AJAX funkcijom. Rezultat obrasca treba vratiti u oznaku sa klasom "response". Ako vam nešto ne radi kako treba, pogledajte primjer priložen kao arhivu ovog članka.

Princip rada univerzalnog dodatka za slanje obrasca na e-poštu sa verifikacijom

Dodatak za slanje obrasca na e-mail radi u nekoliko faza i po sljedećem principu:

1. Aktivira se događaj podnošenja obrasca s klasom pošiljatelja.
2. Događaj podnošenja obrasca presreće JQuery skriptu i započinje proces provjere ispravnosti obrasca.
3. U slučaju kršenja pravila popunjavanja formulara, skripta dodaje pogrešnu klasu u obavezna polja i, ako su prisutni potrebni atributi title i confirminfo, prikazuje poruke sa nagoveštajima za popunjavanje.
4. Ako je provjera valjanosti obrasca uspješna, funkcija slanja AJAX obrasca se pokreće sa zahtjevom rukovaocu (linku) navedenom u atributu akcije.
5. Rukovatelj servera prima potrebne parametre AJAX zahtjeva, povezuje traženi predložak slova (na osnovu atributa name forme - parametar POST šablona). Zatim se inicijalizira klasa PHPMailer, formira se tijelo pisma, zaglavlja i procedura za slanje pisma na e-mail.
6. U slučaju uspješnog ili neuspješnog slanja pisma, rukovalac servera će vratiti odgovarajuću poruku na stranicu u JQuery skripti

Pravila za kreiranje i uređivanje šablona tpl pisma

Nećemo razmatrati pravila za raspored html slova. Pogledajmo potrebne tpl parametre šablona pisma i princip kreiranja šablona za skriptu za univerzalno slanje obrasca na e-poštu.

Pogledajmo primjer iz arhive:

<?php
// include header pisma. Praktično za mnoge šablone gde header pisma ostaje nepromenjen
include "header.tpl";
// Tema pisma. Parametar je neophodan za proceduru slanja pisma preko PHPMailer-a
$subject = "Forma za povratnu informaciju";
// Poruka koju vraća server-side handler function-send-form.php
$return_msg = "Vaš zahtev je uspešno poslat!";
?>

<h1>Naručen poziv od: <?php echo $name; ?></h1>

<p style="font-size: 16px;">Podaci za kontakt: <?php echo $email; ?></p>

<p style="font-size: 16px;">Vreme poziva: <?php $time = date("F j, Y, g:i a"); echo $time; ?></p>

<p style="font-size: 16px;">Tekst poruke: <?php echo $message; ?></p>

// include footer pisma, slično header-u
<?php include "footer.tpl"; ?>

Kao što možete zamijeniti, vrijednosti atributa imena oznaka obrasca identične su imenima varijabli u predlošku slova tpl. Tako je, tako je! Sve novokreirane šablone stavljamo u mail-tpl direktorij sa ekstenzijom datoteke .tpl . 

Naziv tpl dokumenta mora odgovarati vrijednosti atributa name obrasca za podnošenje na web lokaciji.

Završetak

Možda su ovo sve potrebne informacije za efektivno korištenje univerzalnog dodatka za slanje obrazaca na e-mail sa verifikacijom. Hvala svima na pažnji!