Forum gratuit: forum de suport al utilizatorilor
Doriți să reacționați la acest mesaj? Creați un cont în câteva clickuri sau conectați-vă pentru a continua.

Propriul formular de contact

Vezi subiectul anterior Vezi subiectul urmator In jos

Tutorial Propriul formular de contact

Mesaj Scris de Luky Mier Mar 04, 2009 1:12 pm

Propriul formular de contact

Acest tutorial va va arata cum sa creați, pe o pagina HTML distincta, un formular in care oricine poate scrie un mesaj ce va fi trimis la o adresa de e-mail pe care o alegeți dumnevoastră.

Mai întâi trebuie sa creați o noua pagina HTML asa ca intrați în Panou de administrare => Module => HTML => Administrare pagini HTML. Click pe butonul Propriul formular de contact Noua_p10.

Mai departe alegeți un titlu pentru pagina care urmează sa o creați.Alegeți Da la opțiunea "Doriți sa utilizați partea de sus și de jos a paginii forumului dvs.?" dacă doriți ca noua pagina creata sa păstreze design-ul pe care îl are forumul dumneavoastră. Alegeți Nu dacă doriți sa modificați și alte lucruri cum ar fi Alinierea, culori, efecte pentru text etc.

La opțiunea "Utilizați aceasta pagina ca pagina de start?" alegeți Nu.

In câmpul "Cod HTML" adăugați mai întâi acest cod:
Cod:
<form action="mailto:adresa_dvs_de_e-mail@domeniu.com" method="post" enctype="text/plain">
Înlocuiți adresa_dvs_de_e-mail@domeniu.com cu adresa de e-mail unde doriți ca formularul sa fie trimis.

Acum ca ați adăugat acel cod puteți adăuga oricâte câmpuri doriți în formular iar eu o sa va dau câteva exemple:

Pentru un simplu câmp adăugați acest cod:

Cod:
Numele tau:<br>
<input type="text" name="Nume">
Iar rezultatul va fi acesta :
Propriul formular de contact Numele10

Puteți înlocui Numele Tau cu orice doriți.

Puteți de asemenea sa adaugați și o valoare de origine pentru câmp ceea ce înseamna ca un text predefinit va apărea în câmp. Cei care vor completa formularul însă vor putea sa șteargă acea valoare presetata. Pentru a face asta adăugați acest cod:
Cod:
Numele tau:<br>
<input type="text" value="Scrie numele tau aici" name="Nume">
iar rezultatul va fi acesta:
Propriul formular de contact Scrie_10

Pentru a schimba mesajul predefinit adăugați în locul la Scrie numele tau aici orice alt mesaj.

Formulare de tip Radio

Puteți crea și formulare de tip Radio.Acestea sunt formulare în care o persoana poate alege numai o opțiune din mai multe disponibile. Un simplu cod pentru acest tip ar fi acesta:
Cod:
Sex:<br>
Masculin:<input type="radio" name="Sex" value="Masculin"> <br>
Feminin:<input type="radio" name="Sex" value="Feminin">
rezultatul fiind:Propriul formular de contact Mascul10

Formulare de tip Caseta

Un alt tip de formulare sunt cele de tip caseta. Acestea sunt asemănătoare cu cele de tip radio cu o singura diferență majora: in timp ce în formularele de tip radio puteți alege doar o singura opțiune din mai multe în cele de tip caseta puteți alege mai multe opțiuni în același timp, chiar și pe toate.

Pentru a crea un asemenea formular folosiți acest cod:
Cod:
Care este culoarea dvs preferata?<br>
Imi place rosu<input type="checkbox" name="culoare" value="Rosu"><br>
Imi place albastru<input type="checkbox" name="culoare" value="Albastru"><br>
Imi place galben<input type="checkbox" name="culoare" value="Galben"><br>
Imi place verde<input type="checkbox" name="culoare" value="Verde">
Iar rezultatul va fi:
Propriul formular de contact Imi_pl10

Meniu de selectare

Puteți crea și un meniu de selectare unde membrii vor putea selecta o opțiune dintr-un număr mai mare de opțiuni. Folosiți acest cod:
Cod:
Care este culoarea dvs preferata?
<select name="culoare">
<option value="Rosu">Rosu</option>
<option value="Albastru">Albastru</option>
<option value="Galben">Galben</option>
<option value="Verde">Verde</option>
</select>

Rezultatul va fi:
Propriul formular de contact Meniu10

Câmpuri mari de text

Puteți adăuga și câmpuri mari de text pentru a permite membrilor dumneavoastră sa scrie un comentariu mai amplu sau opinia lor. Pentru acest lucru folosiți acest cod:
Cod:
Comentarii:<br><textarea name="comentarii" rows="6" cols="65"></textarea>

Rezultatul va fi:Propriul formular de contact Coment10

Puteți schimba dimensiunea câmpului modificând valorile rows si cols.

De asemenea puteți sa adăugați toate formularele sau doar unele dintre ele într-un tabel pentru un aspect mai plăcut sau pentru a le separa pe categorii. Pentru a realiza acest lucru folosiți acest cod înainte de a adăuga codul pentru formular:
Cod:
<legend>Informatii Personale</legend>


Prin urmare dacă folosiți următorul cod:
Cod:
<form action="mailto:adresa_dvs_de_e-mail@domeniu.com" method="post" enctype="text/plain">

<legend>Informatii Personale</legend>
Nume:<br>
<input type="text" name="Nume">
<br>
Adresa de e-mail:<br>
<input type="text" name="e-mail">
<br><br>
Care este culoarea dvs preferata?<br>
Imi place rosu<input type="checkbox" name="culoare" value="Rosu"><br>
Imi place albastru<input type="checkbox" name="culoare" value="Albastru"><br>
Imi place galben<input type="checkbox" name="culoare" value="Galben"><br>
Imi place verde<input type="checkbox" name="culoare" value="Verde">
<br><br>Comentarii:<br><textarea name="comentarii" rows="6"
cols="65"></textarea>
</form>
rezultatul va fi:Propriul formular de contact Info_p10

Indiferent de formularul/formularele pe care le veți adăuga, veți avea nevoie de un buton pentru a trimite informațiile care le completează membrii la adresa de e-mail aleasa. Pentru a adăuga un buton folosiți acest cod:
Cod:
<input type="submit" value="Trimite">

Puteți sa adăugați și un buton pentru a reseta la valorile de origine întregul formular. Pentru aceasta adăugați următorul cod:
Cod:
<input type="reset" value="Resetare">
Pentru a functiona corect, codurile se adauga inaintea elementului .

Rezultatul va fi acesta:
Propriul formular de contact Trimit10

Puteți schimba numele Trimite și Resetare modificând value="Trimite" și/sau value="Resetare" cu orice doriți.

Asta este tot! Noroc
Luky

Luky
Membru onorific
Membru onorific

Mesaje : 3467
Varsta : 36
Localizare : Bucuresti
Data înscrierii : 27/12/2007
Mulțumiri : 25
Internet Explorer phpBB3

Luky a fost mulțumit de autorul acestui subiect.

Vezi subiectul anterior Vezi subiectul urmator Sus


Permisiunile acestui forum:
Nu puteti raspunde la subiectele acestui forum