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



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 :

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:

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:





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:




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:






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:



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:




Indiferent de formularul/formularele 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 acesta adăugați următorul cod:

Cod:

<input type="reset" value="Resetare">

Rezultatul va fi acesta:




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

Asta este tot.


Scris de Luky

Reproducerea acestui tutorial nu este posibila fara acordul nostru, in conformitate cu articolul L122-1 apartinand ICC.