Nemoguće je zamisliti modernu web stranicu bez forme Povratne informacije. Ovo je sastavni dio koji bi trebao biti prisutan na svakoj web stranici, bez obzira na temu. Kontakt obrazac omogućuje webmasteru potpunu komunikaciju sa svojim posjetiteljima bez javne objave svojih podataka, poput e-maila ili broja telefona.

To vam omogućuje ne samo odgovaranje na pitanja posjetitelja, već čak i obradu prijava ili narudžbi. A evo i otvaranja vašeg email adresa postoji rizik da će uskoro biti preplavljen spamom. Da bi to učinili, roboti za spam pretražuju otvorene prostore danonoćno svjetska mreža u potrazi za novim adresama na koje možete poslati svoje nepotrebne informacije. Kao rezultat nereda poštanska adresa možete jednostavno ne primijetiti važno pismo. I ovdje je dodatak Kontakt obrazac jer stranica uspješno rješava ovaj problem. Korisnik može samo ispuniti posebno polje za filtriranje robota, na primjer, unijeti captcha i poštanski sandučić vlasnik stranice će dobiti samo potrebnu korespondenciju.

Koje zadatke rješava kontakt obrazac na web stranici?

No, bezbrižnost vlasnika weba nije jedini zadatak s kojim se kontakt obrazac uspješno nosi. Ona uspijeva prilično uspješno obavljati još nekoliko funkcija. Najvažniji od njih su:

Održavanje kontakta s publikom stranice. Malo je vjerojatno da će se itko raspravljati s činjenicom da nitko neće samo ispuniti obrazac za povratne informacije. Najvjerojatnije, osoba koja ide na ovo ima neko pitanje koje bi želio osobno postaviti autoru stranice. Kao rezultat toga, vlasnik stranice već prima zainteresiranog korisnika, a možda čak i potencijalni klijent, koji je podijelio svoje podatke za kontakt. Odnosno, od sada će sve ovisiti o vlasniku stranice.

Poziv na akciju. Što je poziv na akciju i kako potiče korisnike da slijede? razne akcije, nema potrebe objašnjavati. No, upravo se to može povezati s kontakt formom na stranici. Na primjer, u zamjenu za kontakt podatke korisnika, možete mu ponuditi zatvoreni newsletter sa korisni materijali, popust na kupnju u online trgovini, sudjelovanje u nagradnoj igri itd. Takve žalbe ne samo da mogu pomoći u prikupljanju baze podataka kontakata za daljnju interakciju, već i privući nove potencijalne klijente.

Oživljavanje stranica pomoću interaktivnih obrazaca. Obrasci za kontakt mogu biti više od statičnosti. Skočni obrasci, iako se mnogim korisnicima web stranica čine nametljivima, mogu prilično “oživjeti” web stranice. Glavna stvar pri stvaranju takvih oblika nije pretjerivati.

Kako doći do kontakt forme?

Nije teško svojoj web stranici osigurati takav obrazac. Kontakt html obrazac, koji ima samo nekoliko polja, potpuno je rješiv zadatak za profesionalne freelancere koji to mogu učiniti za male iznose. Osim toga, šifra obrasca za kontakt može se pronaći neovisno na Internetu. Ali takve metode imaju mnogo nedostataka. Činjenica je da je takva interaktivna forma lice stranice, što znači da mora biti atraktivna. Što učiniti ako vam nešto ne odgovara, pogotovo nakon nekog vremena? Gdje tražiti programera koji je napisao kod obrasca kako bi mogao dodati potrebne promjene? A ako slanje php obrasci nalazi u prostranstvu globalna mreža, a nema vještina programiranja, onda se promjena forme čini potpuno nemogućom.

Osim toga, kontakt forma bi trebala raditi kao sat, jer sve poslane poruke trebaju stići do primatelja, a ne se usput izgubiti. Zamislite da je veliki kupac poslao prijedlog za suradnju putem obrasca za povratne informacije, ali ga autor web stranice ili voditelj online trgovine nije primio? Vjerojatno ne treba posebno objašnjavati da svoju ponudu neće ponovno slati, nego će otići do konkurencije čija kontakt forma radi kako treba. Sve je to prepuno gubitka ne samo novca i klijenata, već i ugleda, što na kraju može biti još gore.

FormDesigner - savršeno rješenje za izradu obrasca za kontakt

Korištenjem online dizajnera obrazaca FormDesigner, stvaranje vašeg interaktivnog obrasca za povratne informacije nikada nije bilo lakše. Prvo, brzo je, samo nekoliko klikova i obrazac je spreman za postavljanje na stranicu. Drugo, rad s dizajnerom je nevjerojatno jednostavan; ne morate biti programer niti imati posebne vještine ili znanje. Oblik slanje e-pošte zahvaljujući dizajneru izradit će čak i webmaster početnik zahvaljujući razumljivom i jednostavno sučelje. Treće, uvijek se mogu napraviti izmjene na već izrađenom obrascu u skladu s novim željama ili potrebama. Uređivanje obrasca jednako je jednostavno kao i stvaranje novog, a zahvaljujući online prikazu promjena možete odmah vidjeti sve promjene koje su napravljene na obrascu. Osim toga, stranica pruža druge pogodnosti korisniku, uključujući:

• Izrada kontakt obrazaca s mogućnošću slanja datoteke vlasniku stranice;
• Poruke o pogrešci prilikom izrade obrazaca;
• Sposobnost izrade višejezičnih obrazaca;
• Vizualni dizajner kreiranih formi;
• Detaljna statistika za sve zahtjeve i još mnogo toga.

Rad sa servisom FormDesigner

Kako biste započeli rad s praktičnim dizajnerom, morate proći jednostavnu proceduru registracije. Nakon toga možete izravno nastaviti s izradom obrasca za kontakt koji vam je potreban. Usput, možete se registrirati jednostavnom prijavom pomoću račun na društvenoj mreži.

Prvi odjeljak dizajnera omogućuje vam da konfigurirate kako će pisma poslana putem obrasca za povratne informacije izgledati, postavite zaštitu od robota i također odaberete radnju koja će se dogoditi kada pismo bude uspješno poslano.

Drugi odjeljak “Elementi” je neophodan kako biste mogli dodavati, brisati ili jednostavno uređivati ​​polja za popunjavanje. Mogu se izraditi ne samo tekstualno, već i digitalno, pa čak i sa slikama. Ovaj vam odjeljak također omogućuje postavljanje gumba društvenih medija.

Nakon toga preostaje samo primiti kod vlastite pripremljene komunikacijske forme i instalirati je na svoju web stranicu.

Tako vam online dizajner obrazaca omogućuje izradu i uređivanje kontakt obrazaca za bilo koje web mjesto u skladu sa željama i potrebama njihovih vlasnika u samo nekoliko minuta. Svaki korisnik može brzo urediti svoje obrasce, dodati im nova polja ili ih izbrisati nepotrebnih elemenata, kreirajte vlastite poruke o pogrešci kada koristite obrazac. A napredne korisnike sigurno će zanimati mogućnost rada s dizajnom prilagođavanjem CSS svojstava stvoreni oblik po vašem ukusu tako da odgovara dizajnu web stranice.

Također je vrijedno napomenuti da ako se tijekom rada s uslugom pojave bilo kakva pitanja, možete se sigurno obratiti tehničkoj podršci koja će vam pomoći u rješavanju problema koji nastaju. Možete početi koristiti online konstruktor potpuno besplatno, dok dobivate pristup svemu najvišem važne funkcije online dizajner. Korištenjem usluge FormDesigner izrada vlastitih web obrazaca za web mjesto postaje nevjerojatno jednostavna i brza.

Video upute za izradu kontakt forme na web stranici

U ovom ćete članku naučiti kako izraditi obrazac za kontakt koji šalje podatke pomoću AJAX-a. Koristit ćemo jQuery i jednostavnu PHP skriptu za e-poštu za slanje podataka obrasca putem e-pošte.

Izrada HTML obrasca

Naš prvi zadatak je postaviti HTML obrazac. Postavite ID elementa na ajax-contact, postavite njegov atribut metode na post značenje, a za atribut akcije - vrijednost mailer.php .

Ime: Email: Poruka: Pošalji

Napravili smo formu s poljima za unos korisničkog imena, adrese E-mail i poruke. Imajte na umu da svako polje obrasca sadrži obavezni atribut. U preglednicima koji podržavaju HTML5 provjeru valjanosti obrazaca, njegova upotreba neće dopustiti slanje podataka ako su polja ostavljena prazna.
Zatim morate kreirati poruku koja će se koristiti za prikaz poruka o pogrešci ili uspješnom slanju. Postavite ovaj element iznad oznake i dodijelite mu ID obrazaca.

Sada trebate preuzeti primjere koda i kopirati datoteku style.css u direktorij vašeg projekta. Također morate dodati element koji govori pregledniku da učita CSS datoteku.

Morate izraditi dva elementa koji referenciraju jQuery biblioteka i datoteku app.js. Dodajte ih prije završne oznake.

Važno je prvo preuzeti datoteku jquery-2.1.0.min.js jer skripta app.js zahtijeva jQuery.
Ovo je sav HTML kod koji će vam trebati. Sada pogledajmo JavaScript.

Slanje podataka obrasca pomoću AJAX-a

Stvorite u direktoriju projekta nova datoteka pod nazivom app.js. Sadržat će kod potreban za slanje podataka obrasca pomoću AJAX-a.
Kopirajte sljedeći kod u svoju datoteku app.js.

Napravili smo dvije varijable form i formMessages koje se odnose na odgovarajuće HTML elemente.
Zatim trebate stvoriti slušatelja koji presreće događaj slanja na obrascu. To se može učiniti pomoću metode slanja jQuery.

// Postavite slušatelja za obrazac za kontakt. $(form).submit(function(event) ( // Blokiraj podnošenje podataka obrasca u pregledniku. event.preventDefault(); // TODO ));

Metodi slanja prosljeđujemo funkciju koja će se izvršiti kada korisnik pošalje podatke obrasca. Također smo rekli pregledniku da ne šalje obrazac kao obično pozivanjem metode preventDefault za događaj.
Sada moramo serijalizirati podatke obrasca. Oni će se pretvoriti u niz ključa/vrijednosti koji će se poslati pomoću AJAX zahtjev A. Koristiti jQuery metoda serialize za serijalizaciju podataka obrasca i zatim pohranjivanje rezultata u varijablu formData.

// Serializiraj podatke obrasca. var formData = $(form).serialize();

Sada napišimo kod koji je odgovoran za slanje podataka obrasca poslužitelju i obradu odgovora. Kopirajte sljedeći kod u svoju datoteku app.js.

// Pošalji podatke obrasca pomoću AJAX-a. $.ajax(( tip: "POST", url: $(form).attr("radnja"), podaci: formData ))

Za izradu novog AJAX zahtjeva koristite jQueryjevu ajax metodu. Objekt smo proslijedili ajax metodi, koja uključuje brojna svojstva koja se koriste za prilagodbu zahtjeva. Svojstvo tipa specificira HTTP metoda, koji će se koristiti za slanje zahtjeva. U našem slučaju to je POST metoda.
Svojstvo url je lokacija skripte koja će obraditi podatke obrasca. Postavljamo vrijednost za ovo svojstvo dohvaćanjem atribut akcije iz forme. Vrijednost data svojstva postavlja se pomoću varijable formData koju smo ranije stvorili.
Zatim trebate obraditi uspješan odgovor primljen od poslužitelja. Kopirajte sljedeći kod neposredno nakon završne zagrade ajax poziva. Imajte na umu da sam namjerno izostavio točku i zarez.

Done(function(response) ( // Provjerite sadrži li formMessages div klasu "success". $(formMessages).removeClass("error"); $(formMessages).addClass("success"); // Postavite tekst poruke. $(formeMessages).text(response); // Obriši obrazac.$("#email").val ("");

Metoda done bit će pozvana ako se zahtjev uspješno završi. Prvo provjeravamo da element formMessage sadrži klasu uspjeha. Zatim postavljamo tekstualni sadržaj elementa pomoću podataka koje vraća skripta pošte. Zatim brišemo vrijednosti svakog polja obrasca.
U posljednjem fragmentu JavaScript kod moramo napisati što bi se trebalo dogoditi ako se dogodi greška. Kopirajte sljedeći kod u svoju datoteku app.js.

Fail(function(data) ( // Provjerite sadrži li formMessages div klasu "error". $(formMessages).removeClass("success"); $(formMessages).addClass("error"); // Postavite tekst poruke. if (data.responseText !== "") ( $(formMessages).text(data.responseText); ) else ( $(formMessages).text("Ups! Došlo je do pogreške i vaša poruka nije mogla biti poslana "); ) ));

Fail metoda se poziva ako skripta pošte vrati pogrešku. Prvo, provjerimo sadrži li element formMessages klasu pogreške. Zatim provjeravamo vraća li AJAX zahtjev responseText. Ako je tako, upotrijebite tekst za postavljanje sadržaja elementa formMessages. Inače se koristi standardna poruka o grešci.
Ovo je sav HTML i JavaScript kod potreban za izradu AJAX obrasca za kontakt. U sljedećem odjeljku izradit ćemo skriptu koja je odgovorna za obradu podataka obrasca i slanje e-pošte.

Izrada PHP skripte e-pošte

Ova jednostavna skripta odgovorna je za provjeru podataka obrasca i slanje e-pošte. Ako se dogodi pogreška, skripta za poštu će odgovoriti odgovarajućim statusnim kodom za izvršavanje JavaScripta.
Napravite novu datoteku pod nazivom mailer.php i kopirajte sljedeći kod u nju.