Prilagodljivi obrazac za povratne informacije: Kako stvoriti putem interneta? Kako napraviti prekrasan pop -up povratni obrazac HTML i PHP s telefonom i slati narudžbu e -mail?

Upute za stvaranje povratnog obrasca o HTML -u i CSS -u, kao i zbirku pripremnih obrasca i priručnika za njihovu vezu i konfiguraciju.

Danas svaka osoba koja nema ni programijske vještine može lako stvoriti vlastitu web lokaciju preuzimanjem spremnog predloška iz mreže i instaliranjem ga na korišteni motor.

Međutim, nije svaki spreman predložak izrađen u stanju zadovoljiti zahtjeve korisnika. Mnogi od njih su predstavljeni u obliku "sira" i nemaju tako važne odjeljke i funkcije kao, na primjer, oblik povratnih informacija.

Ovaj blok web mjesta izuzetno je važan za vlasnike internetskih trgovina i velikih informativnih portala. U našem članku ćete pronaći informacije o tome kako neovisno stvoriti obrazac za povratne informacije, gdje preuzeti gotov predložak i kako ga instalirati na svoju web stranicu.

Slika 1. Što je obrazac za povratne informacije i zašto je toliko potreban?

Što je obrazac za povratne informacije i zašto je tako potreban?

• Jedna od najvažnijih funkcija bilo kojeg pristojnog web mjesta je obrazac za povratne informacije. Služi za interakciju između posjetitelja i administracije resursa. Dakle, uz njegovu pomoć možete napisati žalbu na tehničku podršku ili poslati potrebne podatke administracijama. Na primjer, detalji plaćanja u mrežnim trgovinama ili naziv naručene robe. Snažno se preporučuje takav oblik na vašem portalu, jer je stalni kontakt s posjetiteljima i kupcima ključ za njegov uspješan razvoj.

Obrazac za povratne informacije je zasebna stranica ili blok (odjel), koji se sastoji od nekoliko ulaznih polja teksta i gumba "Pošalji". U pravilu, standardni obrazac ima sljedeća polja:

• Puno ime
• E-mail (adresa e-pošte)
• Broj mobitela
• Adrese vaše web stranice
• Polje za unos tekstualne poruke

Međutim, polja mogu biti onoliko koliko želite, a mogu se potpisati kako želite. Sve ovisi o vašim potrebama i mašti.

Slika 2. Što je obrazac za povratne informacije i zašto je toliko potreban?

• Pored toga, neki vlasnici dodaju Google ili Yandex kartice u obrascu za povratne informacije, obrasce unosa web stranice koristeći društvene mreže "VKontakte", "Facebook", "Google+" i tako dalje. Ali govorit ćemo o stvaranju najjednostavnijeg oblika povratnih informacija, za koji će vam trebati isključivo znanje o osnovama jezika za označavanje Html I ništa više.

Kako stvoriti najjednostavniji obrazac za povratne informacije za web mjesto na HTML i PHP?

Da ne bismo pretvorili članak u potpuni dosadni udžbenik, nastavit ćemo od činjenice da ste već upoznati s osnovama jezika za označavanje Html I imate opću ideju kako to funkcionira. Ako nemate takve vještine, prije nego što preuzmete stvaranje obrasca, toplo se preporučuje da malo pooštrite svoje znanje o besplatnom resursu htmlbook.ru. Inače, ne samo da možete napustiti ovaj pothvat, već i pokvariti kod vaše web stranice.

Da biste ponovno stvorili radni oblik povratnih informacija, potrebna su vam tri važna elementa, od kojih je jedan odgovoran za označavanje i strukturu oblika ( Html), drugi za njegov vanjski dizajn ( CSS), a treći za obradu i prijenos podataka ( Php). Krenimo u red:

Pisanje HTML koda za povratne informacije

• Korak 1. Kako bi naznačio oblik u Html Koristi se oznaka ‹Obrazac› ‹/Obrazac›. Unutar će biti postavljene veličine, stilove i druga vitalna svojstva oblika. Prilikom snimanja same oznake mora postaviti klasu koja će naznačiti, što će dodatno pomoći u instaliranju za obrazac CSS Stilovi.

Slika 1. Kako stvoriti najjednostavniji obrazac za povratne informacije za web mjesto na HTML i PHP?

• Korak 2. Nadalje za stvaranje prvog polja našeg obrasca unutar oznake \u003cOblik\u003e Morate napisati blok oznaku ‹P›što je odgovorno za stvaranje nove linije.

Slika 2. Kako stvoriti najjednostavniji obrazac za povratne informacije za web mjesto na HTML i PHP?

• Korak 3. Unutarnja oznaka ‹P› Iz novog retka unosimo sljedeću oznaku: ‹Oznaka za \u003d" Name "› ›Ime \u003c/Označiti\u003e. Odgovoran je za imena budućeg polja forme.

Slika 3. Kako stvoriti najjednostavniji obrazac za povratne informacije za web mjesto na HTML i PHP?

• Korak 4. Na novom retku sve je u istoj oznaci ‹P› Propisamo oznaku stvaranja polja sa sljedećim vrijednostima: ‹Ulaz type \u003d" text »name \u003d" name "placeholder \u003d"Unesite svoje ime »Potrebno \\›. Parametar " type \u003d "Tekst"" Postavlja vrstu tekstnog polja i parametar " placeholder \u003d "Unesite svoje ime «» Postavlja početni tekst u ovom tekstnom polju. Parametar " potreban»Posjetiteljima web mjesta jasno pokazuje da je ovo polje obvezno za ispunjavanje. Kao rezultat, trebali biste dobiti obrazac s jednim poljem, kao što je prikazano na snimci zaslona u nastavku.

Slika 4. Kako stvoriti najjednostavniji obrazac za povratne informacije za web mjesto na HTML i PHP?

• Korak 5. U gornjem primjeru dodajte preostala polja koja su vam potrebna, svaki put počevši od oznake ‹P›. Da biste instalirali polje s tekstualnom porukom, koristite oznaku ‹TextArea name \u003d" poruka "cols \u003d" 50 ″ redovi \u003d "6 ″ Potrebno› ‹/TextArea›. Opcije " kol"I" redovi»Odgovorni su za širinu i visinu tekstnog polja. Možete postaviti parametre koji vam se više sviđaju. Trebali biste dobiti tako nešto prikazano na snimci zaslona u nastavku.

Slika 5. Kako stvoriti najjednostavniji obrazac za povratne informacije za web mjesto na HTML i PHP?

• Korak 6. Da biste se zaštitili od robota, koji su danas prilično na Internetu, stvorite još jedan redak s oznakom ‹INPUT NAME \u003d" BEZSPAMA "TYPE \u003d" Text "Style \u003d" Display: None "Value \u003d" " /›. Zbog parametra " stil \u003d "zaslon: nema"»Ovo polje neće biti vidljivo pukim smrtnicima, ali botovi će se automatski ispuniti. Stoga uvijek možete razlikovati živu osobu od programa.

Slika 6. Kako stvoriti najjednostavniji obrazac za povratne informacije za web mjesto na HTML i PHP?

• Korak 7. Završna faza označavanja bit će stvaranje gumba za slanje. Oznaka se koristi za ovo \u003cDugme\u003e. Stvorite novi blok ‹P› I unutar njega, unesite kôd gumba sa sljedećim parametrima: ‹Button Class \u003d" Pošaljite "Type \u003d" Pošaljite "› ›Pošalji poruku \u003c/Dugme\u003e. Sličan rezultat trebao bi ispasti, kao što je prikazano na snimci zaslona.

Slika 7. Kako stvoriti najjednostavniji obrazac za povratne informacije za web mjesto na HTML i PHP?

Rad s kaskadnim stilovima (CSS)

• Kao što ste već primijetili u procesu obilježavanja, ispostavili smo se nešto vrlo krivo, nevjerojatno i odvratno. Kako bi se povratni oblik dobio manje ili više uredan izgled, jedan jezik Html Neće biti dovoljno. U tu svrhu, morat ćete pribjeći upotrebi stilova CSS.
• U slučaju da ste iskoristili savjet kako biste pooštrili svoje osnovne vještine na resursu htmlbook.ru, zatim postavite određene dizajnerske parametre za sve dijelove obrasca koristeći CSS Neće vam biti teško. Ako nemate želju ili vremena da se zabrljate sa svim tim, tada ćemo vam pružiti spreman kôd i reći vam kako ga povezati.

Slika 8. Kako stvoriti najjednostavniji obrazac za povratne informacije za web mjesto na HTML i PHP?

Spojite stilove CSS Do Html Možete na dva načina:

• Kopirajte kôd iz naše kaskadne tablice na dno datoteke stil.csskoja je prisutna na hostingu web mjesta
• Pomaknite našu datoteku Styles na hosting i povežite je

Datoteka stil.css Povezuje se unutar oznake ‹Glava› ‹/Glava› Korištenje skripte ‹Link rel \u003d" StyleSheet "Media \u003d" zaslon "href \u003d" stil.css "› ›. U slučaju da datoteka sa stilovima ne leži u istoj mapi kao glavna HTML datoteka, tada morate odrediti put do nje. U našoj datoteci sa stilovima svaki element ima oznaku. Ako želite, možete sami promijeniti parametre, vođeni samo osnovnim programskim vještinama.

PHP datoteka veza i postavljanje je

Kao što je spomenuto ranije, Script Php odgovoran je za izvršavanje obrasca za povratne informacije. Međutim, kako bi se više ili manje razumjeli načelo jezičnog rada Php, Morate pročitati veliku količinu literature i provesti pristojan broj sati za praksu. Stoga, kao u slučaju CSS, pružit ćemo vam gotovu datoteku s PHP skriptom koja ostaje samo za priključak na dokument s obrascem.

Za razliku od datoteke stil.css, datoteka s PHP skriptom priložena je u svojstvima samog obrasca. Krenimo u red:

• Korak 1. Otvorite prethodno pisani kôd i pronađite redak s oznakom otvorenog obrasca. Dodajte svojstva u njega " action \u003d "kontakt-form.php""I" metoda \u003d "Post"". Pogledajte primjer na snimci zaslona.

Slika 9. Kako stvoriti najjednostavniji obrazac za povratne informacije za web mjesto na HTML i PHP?

• Korak 2. Preuzmite našu PHP datoteku i stavite je na hosting u istu mapu u kojoj se nalazi HTML dokument. Dakle, PHP i HTML datoteke će međusobno komunicirati.

Slika 10. Kako stvoriti najjednostavniji obrazac za povratne informacije za web mjesto na HTML i PHP?

• Korak 3. Zatim morate konfigurirati skriptu za sebe. Otvorite datoteku i postavite varijable, dodjeljujući im ista imena kao u HTML skripti. Ako ste u obrazac dodali dodatna polja, dodajte ih u PHP skriptu točno onako kako je prikazano na snimci zaslona.

Slika 11. Kako stvoriti najjednostavniji obrazac za povratne informacije za web mjesto na HTML i PHP?

• Korak 4. Zatim morate dodati još dvije varijable s adresom vaše e -pošte i temom pisma koje će se prikazati na vašem okviru. U retku s varijablom " $ Adresa"Navedite e-mail i u liniji" $ sub»Tema slova prikazana je na snimci zaslona.

Slika 12. Kako stvoriti najjednostavniji obrazac za povratne informacije za web mjesto na HTML i PHP?

• Korak 5. U retku s varijablom " $ MS»Konfiguriran je format pisma koje ćete primiti poštom. Možete ga prepisati nepromijenjeno ili urediti vlastiti ukus.

Slika 13 Kako stvoriti najjednostavniji obrazac za povratne informacije za web mjesto na HTML i PHP?

• Korak 6. Svi ostali redovi odgovorni su za slanje poruke i sadrže postavke zaštite od botova, tako da ih moraju ostaviti nepromijenjene. Kao rezultat, cijeli kôd trebao bi izgledati nešto slično prikazano na snimci zaslona u nastavku.

Slika 14. Kako stvoriti najjednostavniji obrazac za povratne informacije za web mjesto na HTML i PHP?

Preuzmite CSS i PHP datoteke za povratne informacije

Nakon obavljanja svih radnji na izlazu, dobit ćete tako jednostavan obrazac za povratne informacije

Slika 15. Kako stvoriti najjednostavniji obrazac za povratne informacije za web mjesto na HTML i PHP?

Izbor prekrasnih oblika oblika povratnih informacija o HTML -u i CSS -u u različite svrhe

• Na temelju gore navedenih uputa, možete lako "nacrtati" obrazac za povratne informacije prema vlastitom ukusu. Međutim, ako nemate vremena ili želje da samostalno stvorite obrazac ispočetka, na internetu možete pronaći pripremljene obrasce za dizajn i imati osnovne vještine Html Uredite ih za sebe.

Slika 1. Izbor prekrasnih oblika dizajna povratnih informacija o HTML -u i CSS -u u različite svrhe

• Nakon što smo malo pretražili, zatekli smo vam izbor 35 prekrasni pop -up dizajnerski oblici povratnih informacija, koji su napisani na Html I CSS. Ovi su oblici prikladni za motore poput Wordpress I JoomlaImaju jednostavnu i jednostavnu postavku s upravljačke ploče, a savršeni su i za web mjesta bez motora.

Preuzmite izbor dizajnerskih oblika povratnih informacija za web stranice

Video: ReadPress Refled Reock Povratne informacije Povratne informacije