Fluent Forms: Kako izraditi WordPress kontakt formu?
Fluent Forms jedan je od najintuitivnijih i najmoćnijih dodataka za izradu obrazaca u WordPressu – od jednostavnih kontaktnih formi do složenih upitnika.
U ovom tekstu pokazat ćemo vam kako napraviti osnovnu kontaktnu formu, definirati polja te podesiti automatske e-mail poruke , jednu za zahvalu korisniku i drugu kao obavijest vlasniku stranice.
Korak 1: Instalacija i aktivacija Fluent Forms dodatka
- 1. U WordPress administratorskom sučelju idite na Dodaci > Dodaj novi.
- 2. U tražilicu upišite “Fluent Forms”, pronađite dodatak i kliknite Instaliraj sada.
3. Nakon instalacije kliknite Aktiviraj.
Korak 2: Kreiranje kontaktne forme
Nakon aktivacije, u lijevom izborniku pojavit će se Fluent Forms. Kliknite na “Dodaj novu formu” (New form).
Ovdje imamo opciju kreiranja forme od nule (New blank form) kao i opciju odaberi predložak (Choose a Template).
Odaberite predložak “Simple Contact Form” koji će vam učitati već gotovu formu za kontakt.
Korak 3: Dodavanje i definiranje polja
Predložak obično već sadrži polja poput Ime (First Name),prezime (Last Name), E-pošta (Email) i Poruka (Your Message).
Ako želite prilagoditi ili dodati polja:
- S desne strane nalazi se lista dostupnih polja (na primjer tekst, e-mail, broj, broj telefona i sl.).
- Povucite i ispustite polja u formu ili kliknite na postojeće da ih uredite.
Definiranje polja “Ime” (name)
Kliknite na polje Ime u formi. Otvorit će se postavke s desne strane. Evo što možete definirati:
- Oznaka polja (Label): Npr. “Vaše ime” – ovo je tekst koji korisnik vidi iznad polja.
- Naziv polja (Name): Automatski generiran (npr. “Ime”), služi kao identifikator u pozadini.
- Placeholder: Tekst koji se prikazuje unutar polja prije unosa, npr. “Upišite svoje ime”.
- Obavezno polje: Uključite opiju Potrebno (Required) ako korisnik mora popuniti ovo polje.
- Validacija: Možete postaviti pravila, npr. samo tekst, minimalni ili maksimalni broj znakova, samo email adresa i slično.
- Uvjetna logika: Npr. prikaži ovo polje samo ako korisnik odabere određenu opciju u drugom polju.
Nakon prilagodbe kliknite Spremi (Save).
Pregled gotove forme
U gornjem desnom kutu editora forme imate opcije za pregled (Preview & Design), spremanje (Save form) kao i kratak kod koji se koristi za postavljanje forme na stranicu.
Korak 4: Ugrađivanje forme na stranicu
Korištenjem kratkog koda
- Kopirajte kratki kod (shortcode) koji se pojavi (npr. ).
- Idite na Stranice > Dodaj novu ili uredite postojeću stranicu.
- Dodajte blok s imenom Kratki kod (Shortcode) na stranicu i u njega upišite kod koji ste prije kopirali.
Korištenjem Fluent Forms bloka
Između blokova pronađite blok “Fluent Forms” i postavite ga na stranicu (ako koristite Gutenberg).
Iz padajućeg izbornika odaberite formu koju želite postaviti. Ako je ovo jedina forma koju ste izradili onda ćete imati samo jednu opciju.
Objavite stranicu-forma bi trebala biti vidljiva na objavljenoj stranici.
Korak 5: Postavljanje e-mail notifikacije (obavijesti)
Fluent Forms omogućuje slanje dviju vrsta e-pošte: zahvale korisniku i obavijesti vlasniku.
E-pošta zahvale korisniku
- U uređivaču forme idite na Postavke (Settings)>Postavke obavijesti (Notifications Settings).
- Kliknite Dodajte obavijest (Add Notification) i nazovite je npr. “Zahvala korisniku”.
- Postavite sljedeće:
- Poslati na (Send To): Odaberite “Email from Form Field” i izaberite polje “E-mail” iz forme (npr. {inputs.email}).
- Subjekt (Subject): Npr. “Hvala na vašoj poruci!”
- Poruka (Message): Unesite tekst, npr. “Poštovani, zahvaljujemo što ste nas kontaktirali. Uskoro ćemo vam odgovoriti!” Možete koristiti varijable poput {inputs.name} za personalizaciju.
- Sa adrese e-pošte (From Email): Unesite svoju e-mail adresu (npr. “info@vašadomena.com”).
- Kliknite Spremi (Save). Ova poruka šalje se korisniku nakon slanja forme.
E-mail obavijest vlasniku
- Ponovno u Postavke (Settings)>Postavke obavijesti (Notifications Settings) i nazovite je “Obavijest vlasniku”.
- Postavite:
- Poslati na (Send To): Unesite svoju e-mail adresu (npr. “vlasnik@vašadomena.com”).
- Subjekt (Subject): Npr. “Nova poruka s kontaktne forme”.
- Poruka (Message): Npr. “Netko je poslao poruku: Ime: {inputs.name}\n E-mail: {inputs.email}\nPoruka: {inputs.message}”.
- From Email: Može biti ista adresa kao iznad ili korisnikov e-mail iz forme ({inputs.email}).
- Kliknite Spremi (Save). Ova poruka dolazi vama svaki put kad netko popuni formu.
Kao što vidite ovdje koristimo kodove koji se već nalaze u sastavu forme. Ako imate više aktivnih formi i ovi kodovi će se razlikovati.
Korak 6: Testiranje
- Otvorite stranicu s formom na svom web-mjestu.
- Popunite formu i pošaljite je.
- Provjerite jeste li dobili e-mail obavijest i je li korisnik dobio zahvalu.
Poruke o greškama
Fluent Forms omogućuje prilagodbu poruka o greškama na dva glavna načina-putem sučelja za uređivanje forme i putem postavki forme.
Ako želite poruke na nekom drugom jeziku, morate ih ručno prilagoditi za svako polje ili koristiti dodatak za prijevod (npr. Loco Translate) za globalne poruke.
Ako korisnik krivo ispuni formu ili je ona iz nekog razloga nevažeća to će mu biti ispisano kod predaje forme.
Ove poruke možemo promijeniti tako da odemo na Globalne postavke (Global settings)>General>Validacijske poruke (Validation messages).
Analitika ispunjavanja formi
Fluent forme sadrže analitiku o ispunjavanju formi u vizualnom i pisanom obliku.
Pisani oblik sadrži i podatak jeste li već pregledali tko vam je ispunio formu ili ne.
Često postavljana pitanja
Zaključak
Fluent Forme čine izradu kontaktnih formi brzom i jednostavnom zahvaljujući “povuci i ispusti” sučelju i fleksibilnim postavkama.
Definiranjem različitih polja možete kontrolirati sve, od izgleda do funkcionalnosti.
Automatski e-mailovi osiguravaju komunikaciju s korisnicima a vama kao vlasniku šalju poruku kada netko ispuni formu.
Uza sve prethodno navedeno, Fluent forme su besplatne kontakt forme za WordPress a uz to su i jedne od najbržih.
Isprobajte ih i uvjerite se u njihovu moć!
Predloženo za čitanje
Rank Math: 10 savjeta za odličan SEO rezultat