Osmi čas – Kontakt forma

Dragan Filipović Korak po korak, Kurs Comments (0)

Kontakt formu ćemo tretirati slično kao i ostale skripte.

Prvi način dodavanja skripti koji smo da sada učili podrazumeva da sve korake uradimo sami.

Drugi način je copy/paste – odnosno preuzimanje kodova skripte sa strane na kojoj skripta već funkcioniše – Demo strana.

Npr Demo strana za kontakt formu je na ovom linku.

1. Pruzmemo fajlove kontakt forma. i prebacimo svaki fajl u svoj odgovarajući folder.

2. Povezivanje fajlova i 3. Izradu html-a nećemo samostalno praviti , već ćemo kopirati kod sa demo strane.

2. Na Demo strani kontakt forme pogledamo kod – Desni klik -View page source, ili Pregled HTML koda, ili Prikaži izvor (u zavisnosti od browser-a)

Iz HEAD dela kopiramo sve što nam je potrebno za skriptu (kodovi za povezivanje css-a i js-a). Tagove koje već imamo ne preuzimamo (Title, Meta isl)

<!-- kontakt skripta -->

<script src="../js/lite_validation.js" type="text/javascript"></script>

<script>
	required.add('Full_Name','NOT_EMPTY','Full Name');
	required.add('Email_Address','EMAIL','Email Address');
	required.add('Your_Message','NOT_EMPTY','Your Message')
</script>

<link rel="stylesheet" type="text/css" href="../css/lite_styles.css" />

<!--kraj  kontakt skripte -->

 Ovaj kod postavimo u HEAD deo naše strane (Kontakt strana – kontakt.html). Nove skripte uvek postavljajte pred kraj HEAD dela

...
<link rel="stylesheet" type="text/css" href="../css/lite_styles.css" />

<!--kraj  kontakt skripte -->
</head>

 3. Sa DEMO strane kopiramo kod iz BODY dela i postavimo na našu stranu. Kod postavljamo na mesto gde želimo da se skripta prikaže. 

U našem slučaju to je desna kolona. Sadržaj desne kolone možemo da obrišemo.

    <div class="desna-kolona">

      
    </div>

 

    <div class="desna-kolona">

<div id="kontakt_forma">
	<form name="contactformlite" method="post" action="../js/lite_process.php" onsubmit="return validate.check(this)">
	<table width="480px" class="cflite">
	<tr>
	 <td colspan="2">
	  <p style="text-align:center">Polja označena sa  <span class="required_star"> * </span> su obavezna </p>
	 </td>
	</tr>
	<tr>
	 <td valign="top" class="cflite_td">
	  <label for="Full_Name" class="required">Ime<span class="required_star"> * </span></label>
	 </td>
	 <td valign="top" class="cflite_td">
	  <input type="text" name="Full_Name" id="Full_Name" maxlength="80" style="width:250px" />
	 </td>
	</tr>
	<tr>
	 <td valign="top" class="cflite_td">
	  <label for="Email_Address" class="required">Email adresa <span class="required_star"> * </span></label>
	 </td>
	 <td valign="top" class="cflite_td">
	  <input type="text" name="Email_Address" id="Email_Address" maxlength="100" style="width:250px" />
	 </td>
	</tr>
	<tr>
	 <td valign="top" class="cflite_td">
	  <label for="Telephone_Number" class="not-required">Broj telefona </label>
	 </td>
	 <td valign="top" class="cflite_td">
	  <input type="text" name="Telephone_Number" id="Telephone_Number" maxlength="100" style="width:250px" />
	 </td>
	</tr>
	<tr>
	 <td valign="top" class="cflite_td">
	  <label for="Your_Message" class="required">Poruka<span class="required_star"> * </span></label>
	 </td>
	 <td valign="top" class="cflite_td">
	  <textarea style="width:250px;height:120px" name="Your_Message" id="Your_Message" maxlength="2000"></textarea>
	 </td>
	</tr>
	<tr>
	 <td colspan="2" style="text-align:center"  class="cflite_td">
	  <input type="submit" value=" Submit Form " />
	 </td>
	</tr>
	</table>
	</form>	
</div>
<!--  kraj .kontakt-forma -->    
    </div>
<!--  kraj .desna-kolona --> 

 4. Aktivacija skripte u ovom slučaju nije potrebna, obzirom da smo kod kopirali sa strane na kojoj skripta već funkcioniše. Odnosno u kodu već postoji deo za aktivaciju.

5. Poslednji korak je Provera putanja (linkova isl.)

Uvek kada kopiramo kod sa drugog sajta moramo da proverimo sve putanje u kodu, da lise imena foldera slažu, odnosno mesta gde se nalaze fajlovi.

 Putanje

Kada kreirate lokalni link (link od jedne stranice ka drugoj stranici unutar istog sajta), generalno ne morate da specificirate ceo URL fajla na koji linkujete. Umesto toga, samo je potrebno da postavite relativnu putanju, a to je putanja od aktuelnog fajla do linkovanog fajla. Na primer ako biste linkovali od stranice o_nama.html do stranice kontakt.html, a obe ove stranice se nalaze u Root folderu, tada bi kod za lokalni link izgledao ovako: 

<a href=“kontakt.html“>Kontakt</a>

 Postoje tri tipa putanja kod linkovanja:

Apsolutne putanje – Apsolutna putanja je ceo URL do linkovanog fajla kao u sledećem kodu http://www.mojsajt.com/galerija/nove_slike.html. Ova vrsta putanja se mora koristiti kada se linkuju fajlovi koji se nalaze na drugim serverima, kao na primer link sa vašeg sajta ka vašoj facebook stranici..

Putanje relativne u odnosu na dokument – Ovaj tip linka specificira putanju i ime dokumenta na koji se linkuje, kao na primer kontakt.html ili galerija/nove_slike.html. 

 Ako biste želeli da na stranici nove_slike.html postavite link koji će voditi ka stanici index.html, dodaćete dve tačke i slash (../) ispred imena fajla ../index.html. Ove dve tačke označavaju izlazak iz foldera – korak nazad.

Sledeća tabela prikazuje različita scenarija i može vam pomoći da malo bolje razumete strukturu putanja.

Folderi i fajlovi su sledeći:

folderi linkova

Putanja Link
Od index.html do index_test.html index_test.html
Od index_test.html do nove_slike.html galerija/nove_slike.html
Od nove_slike.html do stare_slike.html stare_slike.html
Od nove_slike.html do index_test.html ../index_test.html
Od nove_slike.html do trece_slike.html treci_folder/trece_slike.html
Od index_test.html do trece_slike.html galerija/treci_folder/trece_slike.html
Od trece_slike.html do index_test.html ../../index_test.html

3.Putanje relativne u odnosu na Root folder – počinje kosom crtom -slash, i označava putanju od Root foldera, bez obzira u kom fajlu radimo.

 /kontakt.html ili  /galerija/nove_slike.html.

 

 Vratimo se na izmenu putanja za Kontakt skriptu.

Prgledamo kod koji smo kopirali (i HEAD i BODY deo). Uočićete tri pogrešne putanje

<script src="../js/lite_validation.js" type="text/javascript"></script>

<script>
	required.add('Full_Name','NOT_EMPTY','Full Name');
	required.add('Email_Address','EMAIL','Email Address');
	required.add('Your_Message','NOT_EMPTY','Your Message')
</script>

<link rel="stylesheet" type="text/css" href="../css/lite_styles.css" />

 i

<div id="kontakt_forma">
	<form name="contactformlite" method="post" action="../js/lite_process.php" onsubmit="return validate.check(this)">

 Ovde su putanje

src="../js/lite_validation.js", href="../css/lite_styles.css" i action="../js/lite_process.php"

Ispravna putanja od kontakt.html (fajl u kome radimo) do fajla lite_validation.js je src="js/lite_validation.js",

slično kao i za ostale putanje.  Popravimo sve putanje i snimimo fajl. 

Pogledajte stranu Kontakt

6. Konfiguracija skripte. Potrebno je da ukucamo adresu na koju će stići mailovi. Takođe je potrebno napraviti i stranu koja će se otvoriti kada se klikne na dugme Send (Pošalji). Na toj strani treba da postoji informacija o uspešno poslatoj poruci, tzv. Thank you page.

Ovu stranu ćemo napraviti dupliranjem kontakt strane. File -save as – i damo ime strane, npr. hvala.html

Na strani Hvala treba upisati poruku – Uspešno poslata poruka, ili Hval što ste nas kontaktirali isl.

Pogledajte stranu Hvala

Konfiguracija skripte se radi u fajlu lite_settings.php

<?php

$email_to = "adresa@domen.rs"; // your email address
$email_subject = "Naslov poruke"; // email subject line
$thankyou = "putanja do strane hvala.html"; // thank you page

?>

 Obzirom da je fajl lite_settings.php u folderu JS, putanja do strane hvala.html je ../hvala.html, odnosno moramo izaći iz foldera JS kako bi došli do strane hvala.html.

<?php

$email_to = "moja-email-adresa@yahoo.com"; // your email address
$email_subject = "Kontakt forma web kurs"; // email subject line
$thankyou = "../hvala.html"; // thank you page

?>

  

Comments (0) Trackback from your site.

Dragan Filipović

Predavač na Kursu Web Dizajna - Web edukator.

Ostavi komentar

Morate biti prijavljeni da biste dodali komentar.