Kontakt forma

Dragan Filipović Kurs, Treći deo - Skripta Comments (0)

Kontakt formu ćemo posmatrati kao JS skriptu. Jedini dodatak je PHP fajl radi slanje podataka na mail. PHP je takođe programski jezik poput JavaScript-a, sa nešto više mogućnosti i malo drugačijim poljem delovanja.

Tako da pri preuzimanju skripte za kontakt formu, pored JS, CSS i HTML dela treba da preuzmete i PHP deo.

Koraci:

1. Preuzmite potrebne fajlove i stavite ih u odgovarajuće foldere (php fajlove možete staviti u JS folder, a možete i napraviti novi folder npr PHP)

lite_validation.js, lite_styles.css, lite_process.php i lite_settings.php

Fajlovi se nalaze u folderu kontakt_forma u okviru foldera dokumenti.

2. Kopirajte kod za povezivanje fajlova u HEAD vaše strane za kontakt (Prethodno napravite stranu za kontakt, npr. u vašoj index.html strani obrišite sve iz desne kolone (mesto gde će se nalaziti kontakt forma), obrišite i nepotrebne kodove iz HEAD dela (ukoliko ste imali neke kodove koji su bili vezani za deo u desnoj koloni, pa vam sada više ne trebaju). Snimite kao kontakt.html.

<!-- 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 -->

3. Kopirajte HTML kod u BODY deo vaše strane na mesto gde želite galeriju (u deo desne kolone).

<form name="contactformlite" method="post" action="../js/lite_process.php" onsubmit="return validate.check(this)">
<table width="480px">
<tr>
<td colspan="2">
<p style="text-align:center">Polja označena sa <span> * </span> su obavezna </p>
</td>
</tr>
<tr>
<td valign="top">
<label for="Full_Name">Ime<span> * </span></label>
</td>
<td valign="top">
<input type="text" name="Full_Name" id="Full_Name" maxlength="80" style="width:250px" />
</td>
</tr>
<tr>
<td valign="top">
<label for="Email_Address">Email adresa <span> * </span></label>
</td>
<td valign="top">
<input type="text" name="Email_Address" id="Email_Address" maxlength="100" style="width:250px" />
</td>
</tr>
<tr>
<td valign="top">
<label for="Telephone_Number">Broj telefona </label>
</td>
<td valign="top">
<input type="text" name="Telephone_Number" id="Telephone_Number" maxlength="100" style="width:250px" />
</td>
</tr>
<tr>
<td valign="top">
<label for="Your_Message">Poruka<span> * </span></label>
</td>
<td valign="top">
<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">
<input type="submit" value=" Submit Form " />
</td>
</tr>
</table>
</form>

4. Doterivanje linkova.

U HEAD delu promenite putanju za .js i .css fajlove:

U BODY delu promenite putanju za PHP fajl. Možete primetiti da se jedan PHP fajl (lite_settings.php) ne nalazi u ovim kodovima, on je povezan preko fajla lite_process.php.

5. Podešavanje parametara. U PHP fajlovima možete da podesite parametre za e-mail adresu, naslov poruke, ThankYou page kao i druge parametre. ThankYou page je strana koja se otvara nakon uspešno poslate poruke.

Ubacite vaš tekst u HTML deo, uglavnom je sve što preuzmete sa interneta na engleskom, pa je uvek potrebno prevesti tekst.

6. Formatiranje kontakt forme. Ubacite formu u jedan div. Napravite CSS stil i dodajte format vašoj kontakt formi (npr font, pozadina, centriranje isl.)

Comments (0) Trackback from your site.

Dragan Filipović

Predavač na Kursu Web Dizajna - Web edukator.

Ostavi komentar

Morate biti prijavljeni da biste dodali komentar.