Logo Facebook8    Logo Youtube12     Logo twitter

Formular Contact PHP HTML

Formular contact html php

In acest articol iti voi explica pas cu pas cum se creeaza un formular de contact. Vom crea doua formulare identice din punct de vedere al designului, doar ca primul formular va transmite informațiile introduse în el la o adresa de e-mail specificata în cod, iar al doilea formular va transmite informațiile către o pagina separata a site-ului.

Vei alege formularul potrivit în funcție de nevoile personale. In spatele acestui formular se afla un cod scris in HTML, PHP și CSS. Este recomandat sa stapanesti limbajul PHP si HTML pentru o intelegere optima a functionarii formularului.
Iata aici 3 cursuri gratuite pentru a-ți reimprospata memoria cu privire la limbajele de mai sus: HTML, PHP, CSS.

Acest formular contine scripturi php ce pot fi vizualizate doar cu ajutorul unui host local. In cazul in car nu stii ce este si cum se foloseste un host local apasa click aici!

Voi incerca sa explic codurile din spatele formularului pentru a le intelege chiar daca nu stapanesti foarte bine limbajele de mai sus.
La finalul paginii vei gasi codurile complete ale celor doua formulare. Pentru a copia codurile de la finalul paginii trebuie sa apesi click dreapta pe butonul "Copiere COD" de la fiecare formular.

Vom crea formularul in trei etape si anume: etapa 1 - HTML, etapa 2 - CSS, etapa 3 - PHP.
Etapa 1 - HTML
In aceasta etapa vom crea pagina propriu zisa și formularul standard. Pentru a face acest lucru trebuie sa deschidem un editor de text (notepad++) in care vom scrie urmatorul cod salvandu-l cu numele "formular" avand extensia ".php" (formular.php):


<html>
<head>
<title>Formular</title>
</head>
<body>
Formular contact
<form>
Numele tau
<input type="text" name="nume" placeholder="Nume">
<input type="text" name="prenume" placeholder="Prenume">
<br />
Email
<input type="text" name="email" placeholder="Email">
<br />
Subiect
    <select name="subiect">
      <option name="subiect" value="Altceva">Altceva</option>
      <option name="subiect" value="Subiect1">Subiect 1</option>
      <option name="subiect" value="Subiect2">Subiect 2 </option>
    </select>
<div>
Mesaj
</div>
<div>
<textarea name="mesaj" placeholder="Mesaj.."></textarea>
</div>
<input type="submit" value="Trimite">
</form> 
</div>
</body>
</html>

form html css

Nu te ingrijora cu privire la aspectul formularului. Dupa ce vom termina etapa 2 acesta va arata impecabil.
Acum sa explicam pas cu pas codul:
Prin folosirea etichetei "<form>" am initializat un formular.
Formularul contine trei "<input type="text">". Primele doua "<input type="text">" vor furniza numele si prenumele persoanei, iar ultimul va furniza email-ul.
In continuarea codului urmeaza eticheta "<select>". Aceasta eticheta permite alegerea unei optiuni dintr-o lista predefinita. Optiunile se creaza cu ajutorul tagului "<option>" care se scrie intre etichetele "<select> </select>".
Urmatorul element al formularului este eticheta "<textarea>". Aceasta eticheta creaza un spatiu in care utilizatorul poate scrie un text / mesaj mai lung.
Ultimul element al formularului este eticheta "<imput type="submit">". Aceasta eticheta creaza un buton care are rolul de a trimite toate datele completate in formular la o adresa specificata.

Fiecare eticheta enumerata pana acum mai contine un atribut si anume "name". Acest atribut ne va ajuta ajuta sa distingem datele de la formular prin intermediul codului PHP.
Elementele formularului in care utilizatorul poate scrie text mai contin un atribut "placeholder". Acest atribut are rolul de a pune un text ce va disparea cand utizilatorul va incepe sa scrie in elementul respectiv.
Acum ca am lamurit toate codurile din prima etapa, putem trece la etapa 2.

Etapa 2 - CSS
In aceasta etapa vom modifica formularul din punct de vedere al design-ului.
Codurile vor fi aceleasi ca si in prima etapa doar ca le vom mai adauga completari cu ajutorul codului CSS.
La finalul etapei 2 formularul va arata exact ca in imaginea urmatoare:

form CSS HTML PHP

Am colorat completarile cu culoarea mov pentru a le putea distingemai bine:

<html>
<head>
<title>Formular</title>
</head>
<body style="background-size: cover;" background="imagine.jpg">
<div style="margin-top: 100px; margin-left: 100px;">
<h1 style="font-family: Helvetica; color: white;">Formular contact</h1>
<form style="margin-top: 30px;">
<h4 style="font-family: Helvetica; color: white;">
Numele tau
<input style="width: 150px; margin-left: 50px;" type="text" name="nume" placeholder="Nume">
<input style="width: 150px; margin-left: 15px;" type="text" name="prenume" placeholder="Prenume">
<br />
Email
<input style="width: 319px; margin-top: 20px; margin-left: 94px;" type="text" name="email" placeholder="Email">
<br />
Subiect
    <select style="width: 250px; height: 23px; margin-top: 20px; margin-left: 79px;" name="subiect">
      <option name="subiect" value="Altceva">Altceva</option>
      <option name="subiect" value="Subiect1">Subiect 1</option>
      <option name="subiect" value="Subiect2">Subiect 2 </option>
    </select>
</h4>
</div>
<div style="float: left; margin-left: 100px;">
<h4 style=" margin-top: 0px; font-family: Helvetica; color: white;">
Mesaj
</h4>
</div>
<div>
<textarea style="width: 319px; height: 100px; margin-left: 97px;" name="mesaj" placeholder="Mesaj.."></textarea>
</div>
<hr style="width: 458px; margin-top: 20px; margin-left: 100px;">
<input style="border-radius: 6px; background-color: 3070AE; border-color: white; width: 100px; height: 30px; margin-top: 20px; margin-left: 94px;" type="submit" value="Trimite">
</form> 
</div>
</body>
</html>

 Formular contact html php

Acum iti voi explica noile coduri adaugate:
Codurile adaugate sunt scrise in limbajul CSS si nu influenteaza cu absolut nimic modul de functionare al formularului. Singurul lucru pe care il influenteaza codurile CSS este design-ul.
Codurile CSS sunt scrise in eticheta "style".

Primul cod CSS adaugat este aplicat etichetei "<body>" si anume: "style="background-size: cover;" background="imagine.jpg"". Acest cod aplica o imagine de fundal paginii. Atributul "background-size: cover" incadreaza imaginea pe tot ecranul, iar "background=""" sugereaza numele si locatia imaginii.

Urmatorul cod CSS este aplicat etichetei "<div>": "<div style="margin-top: 100px; margin-left: 100px;">"Acesta pozitioneaza formularul la 100 px distanta de marginea de sus si la 100 px distanta de  marginiea din dreapta.

Codurile CSS aplicate etichetelor "<h1>" si "<h4>" au rolul de a formata textul prin schimbarea dimensiunii, formei si a culorii acestuia.
Urmatoarele coduri CSS sunt aplicate etichetelor "<input>" avand rolul de a redimensiona si a pozitiona campurile formularului.
Ultimul cod CSS este aplicat etichetei "<hr>". Eticheta "<hr>" creeaza o linie orizontala de-a lungul paginii iar codul CSS aplicat ecesteia are rolul de a pozitiona si a redimensiona aceasta linie.
Am finalizat si etapa 2!

Etapa 3 - PHP
In aceasta ultima etapa vom seta formularul sa transmita informatiile completate de un utilizator catre o adresa de email sau catre o pagina separata a unui site.

Transmitere informatii catre o adresa de email:
Pentru ca formularul sa transmita informatiile catre o adresa de email trebuie doar sa adaugam atributul "action="mailto: This email address is being protected from spambots. You need JavaScript enabled to view it."" in eticheta "<form>". In locul "This email address is being protected from spambots. You need JavaScript enabled to view it." va trebui sa completezi cu o adresa de email catre care doresti sa se trimita informatiile.

Transmitere informatii catre o pagina separata a unui site:
Pentru a t
ransmitere informatii catre o pagina separata a unui site trebuie sa mai cream un fisier text avand extensia ".php" care sa preia informatiile si sa le afiseze.
Vom numi acest fisier "date.php".
Acum va trebui sa adaugam sa adaugam atributul "action="date.php"" si atributul "method="POST" in eticheta "<form>" din fisierul "formular.php". Aceste doua atribute au
 rolul de a transmite informatiile catre fisierul "date.php" prin metoda "POST".

In fisierul "date.php" vom scrie urmatorul cod:


<?php
$nume = $prenume = $email = $mesaj = $subiect = "";
if($_SERVER["REQUEST_METHOD"] == "POST"){
$nume=$_POST['nume'];
$prenume=$_POST['prenume'];
$email=$_POST['email'];
$mesaj=$_POST['mesaj'];
$subiect=$_POST['subiect'];
}
echo "Nume:", $nume, "<br />";
echo "Prenume:", $prenume, "<br />";
echo "Email:", $email, "<br />";
echo "Mesaj:", $mesaj, "<br />";
echo "Subiect:", $subiect;
?>

Explicatia codului din fisierul "date.php" este urmatoarea:
Am creat cinci variabile (
$nume = $prenume = $email = $mesaj = $subiect = "";pe care le-am egalat cu (""). Egalandu-le cu ("") inseamna ca initial variabilele nu au nicio valoare.
Am initializat functia (if($_SERVER["REQUEST_METHOD"] == "POST")) avand rolul de a prelua prin metoda "POST" informatiile din fisierul "formular.php".
In corpul functiei "if" am apelat cele cinci variabile create si le-am egalat pe fiecare in parte cu "$POST_[' ']". Intre apostrofuri am pus valoarea atributului "name" de la fiecare element al etichetei "form" din fisierul "formular.php".

Dupa ce fiecare variabila a preluat valoarea elementelor din formular am folosit "echo" pentru afisarea acestora pe pagina separata.

Mai jos se regasesc codurile complete ale fiecarui tip de formular.

 

Cod complet formular ce transmite informatii catre o adresa de email:
(Acest formular contine un singur fisier "formular.php")

Cod "formular.php":

 

Cod complet formular ce transmite informatii catre o pagina separata a unui site:
(Acest formular contine doua fisiere "formular2.php respectiv date.php" ce trebuie salvate impreuna intr-un singur folder)

Cod "formular2.php"



Cod "date.php"


Acest site foloseste cookie-uri.

Folosim cookie-uri pentru a vă asigura că aveti cea mai bună experiență pe acest site.

I understand
DESPRE NOI
World-IT este un site care are ca domeniu Tehnologia Informatiei(IT).
Acest site are ca prim scop introducerea persoanelor in acest domeniu. Mai multe informatii aici.

URMARESTE-NE 
Logo Facebook8  Logo Youtube12  Logo twitter