Forma e kontaktit është një nga gjërat e para që bëjnë fillestarët e PHP. Ka qenë gjëja e parë që kam bërë edhe unë dhe ndihesha shumë i gëzuar atëherë. Megjithëse shumë e thjeshtë për tu krijuar, kam parë shpesh në forume pyetje rreth tyre, prandaj mendova të krijoj një guidë. Mund ta përdorni për të mësuar, por gjithashtu mund ta merrni copy-paste e ta përdorni në faqet tuaja. Nuk më mbetet hatri.

Për ta bërë më interesante guidën mendova ti jap një dozë adrenaline formës me JQuery që të kenë diçka për të mësuar edhe programuesit me eksperiencë në PHP, por jo me JavaScript. JQuery do na ndihmojë të bëjmë validimin nga ana e klientit për një prezantim më dinamik, ndërsa me PHP do bëjmë validimin nga ana e serverit dhe do dërgojmë e-mailin. Arsyeja e vetme që do të përdor 2 lloje validimesh është se validimi me JavaScript mund të kalohet fare thjeshtë duke e çaktivizuar në shfletues.

Si gjithmonë, gjëja e parë që do të bëjmë është krijimi i strukturës HTML. Kodi i plotë paraqitet më poshtë.

<div id="mbajtesi">
     <form id="forma" method="post" action="">
     <div>
          <label for="emri">Emri</label>
          <input type="text" name="emri" id="emri" />
          <span id="gabimEmri"></span>
     </div>
     <div>
          <label for="email">E-Mail</label>
          <input type="text" name="email" id="email" />
          <span id="gabimEmail"></span>
     </div>
     <div>
          <label for="arsyeja">Arsyeja e Kontaktit</label>
          <select name="arsyeja" id="arsyeja">
               <option value="Pyetje e pergjithshme">Pyetje e pergjithshme</option>
               <option value="Lavderim">Lavderim</option>
               <option value="Oferte Pune">Oferte Pune</option>
               <option value="Te kam inat">Te kam inat</option>
          </select>
     </div>
     <div>
          <label for="mesazhi">Mesazhi</label>
          <textarea name="mesazhi" id="mesazhi"></textarea>
     </div>
     <button type="submit" id="butoni">Dergoje Mesazhin</button>
     </form>
</div>

Struktura duhet të jetë standarte për disa fusha hyrëse. Çdo fushë e kam ndarë me një element <div> për të lehtësuar stilimin dhe ndarjen midis tyre. Elementët <label> shërbejnë si tituj për të përshkruar fushën në mënyre semantike dhe gjithashtu si lehtësim i vogël ndaj përdoruesve. Kur klikohet mbi titull, fusha automatikisht merr fokus. Vini re që atributi for i <label> është i njëjtë me ID-në e fushës. Gjëja e fundit që më duhet t’ju tregoj për strukturën HTML është përdorimi i një elementi bosh <span>, të cilin do e përdorim më vonë për të shfaqur mesazhet.

Të gjithëve na pëlqejnë gjërat e bukura dhe forma e kontaktit nuk është përjashtim. Prandaj do shtojmë disa rregulla CSS për të ngjyrosur e pozicionuar elementët.

#mbajtesi{
     width:500px;
     margin:50px auto;
}

#mbajtesi div{
     margin-bottom:10px;
}

#mbajtesi label{
     display:block;
     font-weight:bold;
     cursor:pointer;
}

#gabimEmri, #gabimEmail{
     color:#ca6c6c;
}

#mbajtesi input, #mbajtesi select, #mbajtesi textarea{
     font:13px "Trebuchet MS", Arial, Helvetica, sans-serif;
     color:#666;
     margin-right:15px;
     border:1px solid #bbb;
     padding:5px;
}

#mbajtesi input{
     width:250px;
}

#mbajtesi textarea{
     width:450px;
     height:100px;
}

#mbajtesi button{
     background:#f55415;
     border:1px solid #863718;
     padding:7px;
     color:white;
}

#mbajtesi .gabim{
     border:1px solid #ca6c6c;
     background:#f6d6d6;
}

#mbajtesi .mire{
     border:1px solid #bbb;
     background:white;
}

p.jo{
     border:1px solid #ca6c6c;
     background:#f6d6d6;
     padding:10px;
}

Stilet e mësipërme janë jashtë qëllimit të kësaj guide dhe smund të fokusohemi shumë në to, por jam i sigurt që nuk do lodheni shumë. Rregulla standarte: ngjyra, sfondi, bordura, etj.

Si thoni të kalojmë në pjesën interesante? Po e nisim me kodin JavaScript, të cilin e kam komentuar me detaje, por po ju them disa fjalë për t’ju shpjeguar idenë e funksionalitetit. Kam ndërtuar 3 funksione për të kontrolluar nëse fushat janë më të gjata se një vlerë e caktuar apo nëse emaili është i vlefshëm dhe nëse nuk plotësohet i shtoj një klasë CSS fushës me një funksion të JQuery që quhet addClass(). Në fund ja ngjisim këto funksione eventeve blur() dhe keyup() në mënyrë që validimi të ndodhë në kohë reale. Shumë e thjeshtë apo jo? Për disa po, për disa jo, prandaj studioni kodin!

/*
Presim qe te gjithe elementet html te jene ngarkuar
ne menyre qe te kemi akses ti manipulojme.
*/
$(document).ready(function(){
     /*
     Deklarojme variablat e formes, fushave input dhe textarea
     dhe elementet span ku do shfaqim mesazhet e gabimit.
     $('#id') eshte forma e shkurtuar e JQuery per:
     document.getElementById('id').
     */
     var forma = $('#forma');
     var emri = $('#emri');
     var email = $('#email');
     var mesazhi = $('#mesazhi');

     var gabimEmri = $('#gabimEmri');
     var gabimEmail = $('#gabimEmail');

     /*
     Krijojme nje funksion te dedikuar per te kontrolluar
     nese emri eshte me i gjate se 5 karaktere. Funksioni
     kthen TRUE nese validimi eshte i rregullt dhe FALSE
     nese kushtet nuk plotesohen.
     */
     function kontrolloEmrin(){
           /*
           Nese emri eshte me i shkurter se 5 karaktere
           */
           if(emri.val().length < 5){
                /*
                I shtojme fushes se emrit nje klase "gabim" te percaktuar
                ne rregullat CSS. Metoda addClass() ofrohet nga JQuery
                per ti shtuar nje klase elementeve ne menyre dinamike.
                */
                emri.addClass('gabim');
                /*
                I shtojme tekst elementit span per te treguar cfare gabimi
                ka ndodhur. Metoda html() eshte menyra e JQuery per innerHTML().
                */
                gabimEmri.html('Emrat e shkurter si pelqejme.');
                return false;
           } else{
                /*
                Ne kete rast validimi eshte i rregullt, prandaj ja heqim fushes
                klasen e vene me siper me removeClass().
                */
                emri.removeClass('gabim');
                gabimEmri.html('');
                return true;
           }
      }

     /*
     Krijojme nje funksion te dedikuar per te kontrolluar
     nese emaili eshte i vlefshem.
     */
     function kontrolloEmailin(){
          /*
          Funksion .match() kontrollon nese teksti permban nje pattern te caktuar regular
          expressions. Ne kete rast, pattern-i kontrollon per nje forme standarte emaili
          e tipit: email@domain.com.
          */
          if(!email.val().match(/^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,4}$/)){
               email.addClass('gabim');
               gabimEmail.html('Emaili eshte dukshem i pa vlefshem!');
               return false;
          } else{
               email.removeClass('gabim');
               gabimEmail.html('');
               return true;
          }
     }

     /*
     Krijojme nje funksion te dedikuar per te kontrolluar
     nese mesazhi eshte me i gjate se 10 karaktere.
     */
     function kontrolloMesazhin(){
          if(mesazhi.val().length < 10){
               mesazhi.addClass('gabim');
               return false;
          } else{
               mesazhi.removeClass('gabim');
               return true;
          }
     }

     /*
     Eventi blur() egzekutohet kur elementi humb fokusin, pra kur
     largohemi nga elementi. Ja ngjisim kete event te tre fushave
     qe validojme ne menyre qe te kontrollohet validiteti i tyre.
     */
     emri.blur(kontrolloEmrin);
     email.blur(kontrolloEmailin);
     mesazhi.blur(kontrolloMesazhin);

     /*
     Eventi keyup() egzekutohet kur ne fushe shtypet nje taste e
     tastjeres. Ja ngjisim edhe kete event te treja fushave qe
     validimi te behet ne kohe reale.
     */
     emri.keyup(kontrolloEmrin);
     email.keyup(kontrolloEmailin);
     mesazhi.keyup(kontrolloMesazhin);

     /*
     Shtojme nje event handler (mbajtes eventesh) per formen qe
     te kontrollojme me JS nese forma eshte bere submit.
     */
     forma.submit(function(){
          /*
          Nese te treja funksionet e validimit kthejne true, atehere
          forma behet submit qe te kryhet me pas validimi me PHP.
          */
          if(kontrolloEmrin() && kontrolloEmailin() && kontrolloMesazhin()){
               return true;
          } else{
          <code>Nese validimi nuk eshte kryer, atehere therrasim te tjera  funksionet
          e validimit (qe ti shfaqim te gjitha gabimet) dhe bllokojme  berjen
          submit te formes.
          */
          } else{
               kontrolloEmrin();
               kontrolloEmailin();
               kontrolloMesazhin();
               return false;</code>
          }
     });
});

Si ju thashë më parë, JavaScript kujdeset për validimin nga ana e klientit por s’mund të mbështetemi vetëm tek ai. Nëse vizitori e çaktivizon, forma jonë mbetet totalisht e ekspozuar. Këtu hyn në lojë PHP, me të cilën bëjmë validimin nga ana e serverit. Logjika e kodit PHP që kam shkruar është fare e thjeshtë sepse vetë ajo që po realizojmë është e thjeshtë. Ju thashë, forma e kontaktit është një nga gjërat e para që programuesit fillestarë bëjnë

<?php
/*
Nese njera nga variablat POST eshte krijuar, atehere forma
eshte bere submit.
*/
if(isset($_POST['emri'])){
     /*
     Heqim hapesirat me trim() dhe i pastrojme variablat POST nga karakteret
     HTML me strip_tags().
     */
     $emri = trim(strip_tags($_POST['emri']));
     $email = trim(strip_tags($_POST['email']));
     $arsyeja = trim(strip_tags($_POST['arsyeja']));
     $mesazhi = trim(strip_tags($_POST['mesazhi']));

     //Krijojme nje vektor bosh te cilin do e perdorim me poshte.
     $gabime = array();

     /*
     Nese emri eshte me pak se 5 karaktere i shtojme nje rresht gabimit.
     Funksioni strlen() kthen numrin e karaktereve te tekstit.
     */
     if(strlen($emri) < 5){
          $gabime[] = 'Emri smund te jete bosh.';
     }
     /*
     Kontrollojme nese emaili eshte i vlefshem duke e krahasuar ndaj nje
     regular expression dhe i shtojme nje rresht gabimit nese nuk eshte.
     */
     if(!preg_match("/^([a-zA-Z0-9])+([a-zA-Z0-9\._-])*@([a-zA-Z0-9_-])+([a-zA-Z0-9\._-]+)+$/", $email)){
          $gabime[] = 'E-Maili eshte i gabuar.';
     }
     //Nese mesazhi eshte me pak se 5 karaktere i shtojme nje rresht tjeter gabimit.
     if(strlen($mesazhi) < 10){
          $gabime[] = 'Mesazhi smund te jete bosh.';
     }

     /*
     Kontrollojme nese vektori gabim eshte bosh. Funksioni count() numeron
     elementet e vektorit. Nese nuk ka asnje element do te thote qe nuk eshte
     gjeneruar asnje gabim.
     */
     if(count($gabime) == 0){
          //Emaili i marresit. Ky duhet te jete emaili juaj personal.
          $marresi = 'emaili_jot@domain.com';
          /*
          Kokat per te ndertuar nje email te vlefshem. Ky eshte rasti me i thjeshte
          ku kam percaktuar Derguesin, Adresen e Pergjigjes dhe Menyren e Krijimit te Emailit.
          */
          $kokat = 'From: ' . $email . "\r\n" .
                   'Reply-To: ' . $email . "\r\n" .
                   'X-Mailer: PHP/' . phpversion();
          /*
          Perfundimisht dergojme mesazhin duke plotesuar Marresin,
          Subjektin, Mesazhin dhe Kokat (Headers).
          */
          mail($marresi, $arsyeja, $mesazhi, $kokat);
          echo '<p>Mesazhi u dergua me sukses. Faleminderit.</p>';
     } else{
          /*
          Shfletojme elementet e vektorit per te shfaqur te gjitha
          gabimet qe ndodhen ne te.
          */
          echo '<p>';
          foreach($gabime as $gb){
               echo '- ' . $gb . '<br />';
          }
          echo '</p>';
     }
}
?>

Pak fjalë e shumë kod. Këto janë guidat që më pëlqejnë . Seriozisht, fjalët ndonjëherë janë të tepërta dhe për këtë guidë nuk do kishte nevojë për shpjegime të hollësishme. Komentet në kod dhe ato 2 fjalë që ju thashë duhet t’ju përgatisin të bëni format tuaja të kontaktit. Jepini një mundësi.

Mësim të mbarë.