Savjeti, hakovi, tajne. Savjeti, hakovi, tajne Spreman css za kontakt obrazac 7

Nakon instaliranja dodatka Kontakt Form 7 i prikaza obrasca na stranici, to izgleda otprilike ovako.

Slažem se, nije baš izražajno. Ali njegov izgled se lako može ispraviti.

Ako vam je prijatno da menjate/dodajete CSS stilove, verovatno ćete želeti da počnete sa terenski stajling.

Wpcf7 ulaz, .wpcf7 unos, .wpcf7 textarea ( /* stilovi ovdje: boja, pozadina, font, veličina, ivice, itd. */ )

Zatim možete podesiti stilove kako biste dodatno poboljšali uklapanje s vašom temom. za ceo obrazac.

Wpcf7 ( /* stilovi ovdje: boja, pozadina, font, veličina, ivice, itd. */ )

Kako postaviti stil samo za određeno polje? Recimo da želite promijeniti stilove za opcionalno polje ' Predmet‘, koji je po defaultu prisutan u obrascu nakon aktivacije dodatka.

Vi samo trebate dodati ID za željeno polje u obrazac obrasca.

Predmet [ tekst vašeg subjekta id:fb-subject ]

Zatim možete dodati vlastite CSS stilove.

#fb-subject ( /* stilovi ovdje: boja, pozadina, font, veličina, ivice, itd. */ )

Ne morate biti web programer ili kompjuterski štreber da biste kreirali jednostavan, ali lijep dizajn obrasca za povratne informacije. Sve potrebne informacije možete lako pronaći na internetu, uz primjere i objašnjenja.

Evo još jednog dodatka Stilovi obrasca za kontakt obrazac 7 s jednostavnim, ali slatkim unaprijed postavljenim stilovima.

Jednostavan i čist kontakt obrazac - Kontakt obrazac čist i jednostavan— s Bootstrap markiranjem, Google captcha i filterima za neželjenu poštu. Usput, imajte na umu da je ovo prilično popularan dodatak.

Ako sami pretražujete na mreži, siguran sam da ćete pronaći brojne šablone i stilove za Kontakt obrazac 7.

Ali ako potrošite malo vremena na stajling, možete kreirati jedinstven izgled za svoju kontakt formu na koji nećete samo biti ponosni, već ćete i dobiti puno poruka od svoje publike jer će uživati ​​pisati u njemu i slati vam e-mailove. . 🙂

Popularni dodatak Contact form 7 nije posebno lijep u svom standardnom obliku, pa se mnogim korisnicima postavlja pitanje kako promijeniti izgled. Upravo to ćemo sada učiniti, pokušat ću vam dati univerzalnu opciju koja je prikladna za bilo koju stranicu.

O tome sam već govorio ranije, ali hajde da ne pričamo o tome sada, već da pređemo direktno na neophodne promene dizajna.

Prvo, trebamo datoteku style.css, može se naći na kartici "Izgled" / "Editor". Podrazumevano će se otvoriti datoteka koja vam je potrebna. Preporučujem otvaranje nekoliko kartica u vašem pretraživaču:

1. Kontakt obrazac 7 kartica za uređivanje obrasca.
2. Stranica na web stranici sa obrascem za povratne informacije.
3. Editor sa otvorenim CSS fajlom.

Kartice su otvorene, krenimo s promjenama, prvo ćemo malo dotjerati formu.

Dodavanje časova u Kontakt obrazac 7.

Kada otvorimo obrazac za uređivanje, vidjet ćemo nešto poput sljedeće slike:

Ovaj obrazac za povratne informacije će izgledati otprilike ovako:

Dosadno je, nerazmjerno i iskreno, nije lijepo.

Da bismo promijenili izgled obrasca, trebamo malo poraditi na oblikovanju, ali prvo ćemo dodati nekoliko klasa šablonu obrasca. Da biste to učinili, otvorite obrazac za uređivanje (kao na slici iznad) i dodajte sljedeće klase:

Malo je za napisati, pa je teško pogriješiti. Vjerovatno ste pronašli savjete na internetu bez korištenja ili dodavanja časova. Stvar je u tome da bez dodavanja klasa može nastati nekoliko problema. Na primjer, želite da dodate nekoliko obrazaca na stranicu odjednom, svi će poprimiti identičan oblik, a to nije uvijek zgodno, pa biste trebali koristiti opciju koju sam predložio.

Klase su dodate, ništa se još nije promijenilo, sljedeći korak je određivanje id obrasca.

Odredite ID obrasca na stranici.

Prvo morate shvatiti da će isti obrazac imati različite ID-ove na različitim stranicama stranice, ovako je dizajniran dodatak, dodaje dodatni parametar svaki put kada se obrazac pozove. Pogledajmo izbliza.

Da biste uredili obrazac, potrebno ga je dodati na stranicu ili objaviti na traženom mjestu, odnosno umetnuti kratki kod. Nakon toga idite na ovu stranicu i kliknite desnim tasterom miša na obrazac i odaberite "Prikaži kod" ovo je za Chrome pretraživač, ako imate drugi, onda je otprilike isti tekst.

U kodu koji se otvori tražimo početak našeg obrasca, to izgleda ovako:

Ovo će biti id obrasca. Vraćajući se, pokazat ću vam koji ID ima isti obrazac na drugoj stranici.

Kao što vidite, identifikator se razlikuje u samo nekoliko cifara. Stoga prvo morate odlučiti na kojoj stranici će se obrazac nalaziti, a tek onda početi uređivati ​​stilove.

Pa, sledeći korak je napravljen, definisali smo id, registrovali naše klase, sada idemo direktno na promenu izgleda.

Styling Kontakt obrazac 7, rad sa style.css fajlom

Gledajući unaprijed, reći ću da vam opcija koju sam predložio vjerojatno neće izgledati idealno. Činjenica je da svako ko čita ove redove želi da vidi svoju formu upravo onako kako je zamišlja. Nisam telepata i neću moći svima da udovoljim, ali pokušaću da vam dam savet gde i gde da tražite informacije i šta da promenite. Tako da odmah oprostite na eventualnom razočarenju, nema lijeka, morat ćete se malo potruditi.

Promijenite boju pozadine, uvlake i font obrasca.

Nakon što je posao obavljen, prelazimo na stilove. Prvo promijenimo (ako je potrebno) boju pozadine obrasca, prilagodimo uvlake, odaberemo željeni font i boju teksta. Sva ova podešavanja ćemo izvršiti znajući ID unapred. Gore smo razgovarali o tome kako ga prepoznati.

Prvo, idemo na datoteku style.css, dodamo prva pravila za ID obrasca (morate ga dodati na samom dnu datoteke), u mom slučaju to je wpcf7-f172-p34-o1, potrebno je zamijenite svoj ID:

#wpcf7-f172-p34-o1 (
margina: 5px;
padding: 10px;
pozadina: #B3AFAF;
porodica fontova: Georgia, “Times New Roman”, Times, serif;
boja: #000;
}

Sada pogledajmo sve detaljnije:

1. Prvo se pozabavimo uvlakama. Eksterni padding (od ivice do početka forme) - margina: 5px, unutrašnji padding (od početka forme do unutrašnjih elemenata) - padding: 10px.
2. Ispuna obrasca ili njegova pozadina je određena svojstvom pozadine: #B3AFAF, možete odabrati bilo koju boju koja vam se sviđa jednostavnom zamjenom vrijednosti.
3. Mi odlučujemo o porodici fontova; ako ne želite da je mijenjate, možete preskočiti ovo pravilo (familija fontova: Georgia, “Times New Roman”, Times, serif).
4. Boja teksta je određena svojstvom boje, koje je trenutno postavljeno na crnu (boja: #000).

Možete sami eksperimentirati s ovim parametrima, odabrati uvlake, boje i fontove. Da biste to učinili, trebate samo promijeniti vrijednost, sačuvati novu opciju, osvježiti stranicu i vidjeti promjene. Ne bojte se eksperimentirati, ovdje nećete moći ništa slomiti; u ekstremnim slučajevima, stilovi jednostavno neće raditi i lako možete popraviti sve kako je bilo.

Određujemo uvlake između polja i mijenjamo okvir.

Idemo dalje na naša polja, dodajmo uvlake:

#wpcf7-f172-p34-o1 p(
margin:5px;
}

To su uvlake duž rubova polja kako se tekst i blokovi ne spajaju u jednu cjelinu.

Sljedeća faza će biti okviri, ja ću dati svoju verziju, a na internetu možete pronaći mnoge opcije koje vam se sviđaju i zamijeniti ih.

#wpcf7-f172-p34-o1 unos,textarea (
granica: 3px dupla #000;
}

Još malo o okviru. Vrijednost od 3px je širina okvira, duplo se koristi dva puta (ako nije potrebno, možete ukloniti ovu riječ), #000 boja okvira, možete odabrati i svoju.

Promijenite širinu polja i njihovu lokaciju.

Ime-cf (
float:left;
padding: 2px;
}
.name-cf ulaz (
širina: 270px;
}
.thems-cf ulaz (
širina: 100%;
}
.clear-cf (
jasno: oba;
}
.text-cf textarea (
širina: 100%;
}

Sada pogledajmo sve detaljnije:

1. Prva klasa kojoj ćemo se obratiti ime-cf pripada poljima sa imenom i emailom. Za njih postavljamo marginu od 2px ( padding: 2px) i protok ( float:levo) da poravnate dva polja u jednom redu.
2. Zatim ćemo podesiti širinu polja tako što ćemo ih postaviti na optimalnu (za moj predložak) veličinu od 270px ( .name-cf ulaz (širina: 270px; )). Ako su vaše margine i dalje jedna linija ili je premala, odaberite vlastitu opciju.
3. Napravićemo da polje sa nazivom teme popuni celu širinu obrasca, jer tamo može biti više teksta (.thems-cf input (širina: 100%;)). Ako želite svoj, navedite tačnu vrijednost u pikselima.
4. Sljedeći blok koji smo dodali u obrazac je dizajniran da poništi tok ( .thems-cf ulaz (širina: 100%; )).
5. Kao iu prethodnom slučaju, pravimo polje sa tekstom poruke pune širine ( text-cf textarea (širina: 100%;)).

Možete ažurirati datoteku stila i pogledati promjene, ako je potrebno, prilagoditi veličine svojim potrebama.

Poravnajte dugme “Pošalji” u sredinu, promijenite pozadinu i širinu.

Idemo na naše dugme, poravnajte ga sa središtem i dodajte pozadinu:

Pošalji-cf (
širina: 200px; /*širina bloka*/
visina: 25px; /*visina*/
margina: 0 auto; /* Lijevi i desni padding */
}
.submit-cf ulaz (
širina: 200px;
background:#96B195;
}

Tradicionalno, objašnjavam šta je šta:

1. Prvo pravilo je da odredite širinu i visinu bloka u koji će se dugme postaviti i postaviti ga u centar obrasca.
2. Drugo pravilo je da postavite boju pozadine dugmeta ( pozadina:#96B195, ako ne navedete da će biti iste boje kao i sva druga polja), postavite širinu dugmeta ( širina: 200px, poželjno je da bude iste veličine kao i širina bloka, kako se dugme ne bi pomeralo u stranu).

Čuvamo naša podešavanja i vidimo šta smo dobili:

Slažem se da je daleko od šika, ali sveukupno izgleda adekvatno, ispod je zadani oblik, mislim da je efekat očigledan. U svakom slučaju naučili smo promijenite izgled Kontakt obrasca 7.

Nadam se da vam je članak bio koristan, ali ako nešto nije u redu ili imate bilo kakvih problema, ostavite komentar i pokušat ću odgovoriti (ispraviti).

Ovaj materijal će detaljno opisati postavku Kontakt forme 7, dodatka za tako popularnu platformu za kreiranje i promociju web stranica na World Wide Webu kao što je WordPress. Ovaj softverski alat vam omogućava da kreirate i konfigurišete obrasce za povratne informacije.

Malo o WordPressu

Jedan od najpopularnijih i najrasprostranjenijih alata za razvoj i popunjavanje informacijskih resursa je WordPress. U početku je ovaj softverski proizvod bio fokusiran na kreiranje jednostavnih blogova. Ali tada su specijalizirani stručnjaci dopunili njegovu funkcionalnost, što je omogućilo stvaranje drugih internetskih resursa pomoću ovog sistema za upravljanje sadržajem.

Snage i slabosti ove platforme za kreiranje i promociju web stranica

Prednosti ove softverske platforme su:

Jednostavnost i otvoreni izvorni kod.

Impresivna količina referentnih informacija.

Mogućnost razvoja bilo kojeg tematskog resursa na Internetu u najkraćem mogućem roku.

Visoke performanse bez dodatnih softverskih dodataka (dodataka).

Ali nedostaci u ovom slučaju su sljedeći:

Web stranice napravljene na WordPress-u neće moći podnijeti velika opterećenja.

Dolazi do smanjenja brzine internetskog resursa prilikom instaliranja dodatnih mini-programa ili, kako ih još nazivaju, dodataka.

i zašto su oni potrebni sajtovima baziranim na WordPress platformi?

Osnovna funkcionalnost sistema za upravljanje sadržajem kao što je WordPress je vrlo skromna. Dovoljno je samo razviti najjednostavnije blogove i web stranice. Kako bi nekako poboljšali situaciju s funkcionalnošću softverske platforme i dodali joj fleksibilnost, programeri moraju instalirati posebne mini-programe, koji se u profesionalnom žargonu nazivaju dodaci. Jedan od njih je Obrazac za kontakt 7. Postavljanje dodatka vam omogućava da kreirate obrazac za povratne informacije sa proširenim nivoom funkcionalnosti na određenoj stranici sistema za upravljanje sadržajem.

Specijalizacija "Kontakt obrasci 7"

Kao što je ranije napomenuto, kreiranje povratne informacije između posjetitelja i administratora internetskog resursa baziranog na WordPress platformi je glavni zadatak Kontakt obrasca 7. Postavljanje pošte, uređivanje šablona, ​​slanje raznih datoteka nije potpuna lista mogućnosti koje ovo daje mini-program. U ovom slučaju, opterećenje hardverskih resursa web mjesta bit će relativno malo i njegovo prisustvo neće dovesti do značajnog smanjenja performansi stranice ili bloga.

Procedura instalacije dodatka

Postoje tri načina za instaliranje dodataka na WordPress platformu:

Preuzimanjem ZIP arhive sa World Wide Weba i „prebacivanjem“ u odgovarajući direktorij internetskog resursa.

Korištenje različitih tipova FTP klijenata.

Najsigurnija od tri opcije za instaliranje dodataka je posljednja. U ovom slučaju, programski kod se preuzima sa službene web stranice i definitivno ne sadrži razne vrste zlonamjernih, opasnih fragmenata. Procedura za instaliranje dodatka u ovom slučaju je sljedeća:

Idite na WordPress admin panel.

Zatim morate prijeći na odjeljak “Plugins”.

U prozoru koji se otvori odaberite "Dodaj novo".

U traku za pretragu unesite naziv dodatka – Kontakt obrazac 7 – a zatim pomaknite pokazivač miša preko dugmeta „Traži“ i kliknite jednom. Nakon toga će započeti operacija traženja potrebnog softvera.

Po završetku će se prikazati lista pronađenih dodataka. Na ovoj listi nalazimo onaj koji nam je potreban i kliknemo na dugme pod nazivom „Instaliraj“ koje se nalazi nasuprot njemu.

Nakon toga, sistem za upravljanje sadržajem će automatski preuzeti i instalirati ovaj dodatak.

Sljedeći korak je aktiviranje instaliranog softvera. Da biste to učinili, idite na karticu “Plugins” i na listi pronađite obrazac za kontakt7. Pored nje je natpis: "Aktiviraj", kliknite na njega jednom mišem.

Ažuriramo administrativni panel sistema za upravljanje sadržajem i među njegovim stavkama nalazimo Kontakt obrazac7. Ovo je uslov za uspješnu instalaciju ovog popularnog i funkcionalnog dodatka.



Algoritam konfiguracije za “Obrasce za kontakt 7”

Postavljanje Kontakt obrasca 7 sastoji se od sljedećih stavki:

Kreiranje novog obrasca ili uređivanje starog koji je kreiran prilikom instalacije dodatka. Iskustvo pokazuje da je u većini slučajeva bolje koristiti opciju za kreiranje novog obrasca.

U sljedećoj fazi odaberite jezik obrasca i postavite njegovo ime.

Zatim morate ponovo konfigurirati njegov predložak ako je potrebno.

Sačuvajte napravljene promjene.

Kreiramo novu stranicu sa ranije primljenim kodom.

U završnoj fazi morate otići na web stranicu i provjeriti ispravan rad kreiranog elementa sučelja internetskog resursa.

Kreirajte novi obrazac

Odmah nakon aktivacije, ovaj dodatak kreira zadanu formu za postavljanje pitanja posjetitelja stranice ili bloga. Može se, naravno, uređivati ​​i prilagođavati po potrebi. Ali bit će mnogo lakše izbrisati ovaj i stvoriti novi s punim skupom svih potrebnih funkcionalnosti. Da biste to uradili potrebno je da uradite sledeće:

Idite na meni ovog dodatka i odaberite “Forms”.

U prozoru koji se otvori nakon ovoga, morate označiti kućicu pored stavke „Obrazac za kontakt1“.

Zatim, iznad njega, na padajućoj listi „Radnje“ izaberite „Izbriši“.

Kao odgovor, pojavit će se pitanje koje potvrđuje radnje koje se izvode. Morate potvrditi brisanje obrasca i kliknuti na dugme “Da”.

Zatim odaberite stavku menija: “Kreiraj novo” u administrativnom panelu “Wordpress” “Kontakt obrazac7”.

U prozoru koji se otvori, na padajućoj listi odaberite jezik interfejsa budućeg obrasca - „ruski“. Zatim kliknite na dugme „Kreiraj“.

Nakon toga, početni kod za novi obrazac za povratne informacije za WordPress će biti generisan po defaultu. Nakon toga, morat ćete izvršiti operacije kao što je postavljanje Kontakt obrasca 7.

Postavite naziv obrasca

Nakon dovršetka svih prethodnih koraka pojavit će se prozor za unos naziva nove forme u Contact Form 7 Style. Ovo podešavanje počinje ovom jednostavnom operacijom na jednoj strani. Ali bolje je dati naziv obrascu na osnovu optimizacije pretraživača. Stoga bi najoptimalnija opcija u ovom slučaju bila, na primjer, "Obrazac za povratne informacije" ili "Postavite pitanje administratoru stranice". Nakon što smo se odlučili za ime ovog elementa interfejsa, unesite ga u odgovarajuće polje prozora zahtjeva.



Uređivanje šablona „Obrasci za kontakt 7“.

U istom prozoru sa nazivom kreiranog obrasca nalaze se 4 kartice. Prvi je “Šablon”. Podrazumevano se ovdje formira samo 5 elemenata:

Mjesto za upisivanje imena posjetitelja internetskog izvora.

Polje za unos email adrese posjetitelja koji je postavio pitanje.

Drugo polje vam omogućava da unesete temu pitanja.

Posljednji element obrasca prema zadanim postavkama je dugme s oznakom „Pošalji“.

Ako je potrebno, tekst u ovom polju se može urediti i dodati drugi elementi interfejsa. Da biste to učinili, samo odaberite kod bilo kojeg tekstualnog elementa (na primjer, onaj dio koda gdje je naznačen predmet poruke i kopirajte ga pomoću kontekstnog menija u isto polje na drugom mjestu. Desno su parametri (detaljnije će biti riječi u sljedećem pasusu) u kojem biramo element koji nas zanima. Nakon toga će se pored padajuće liste pojaviti potreban kod. Zatim kopirajte ovaj kod i zalijepite ga umjesto poruke šifra predmeta. Izaberite naziv elementa po vlastitom nahođenju.

Podešavanje dužine polja i još mnogo toga

Na istom mjestu možete promijeniti unos u Kontakt formi 7. Podešavanje širine bilo kojeg tekstualnog polja vrši se na sljedeći način:

Na primjer, potrebno je povećati broj znakova u imenu posjetitelja internetskog resursa na 55. Podrazumevano ih ima 40.

Da biste to učinili, dodajte brojeve 60/55 na kraj koda. Rezultat će biti kod. Nakon pohranjivanja izmjena, dužina ovog polja će biti 60, a maksimalan broj znakova koji se u njega može unijeti će biti 55.

Na isti način možete promijeniti veličinu tekstualnog polja poruke. Samo u ovom slučaju potrebno je promijeniti kod ovog elementa na sljedeći način. U ovom slučaju, 40 je broj slova u jednom redu, a 30 je ukupan broj pojmova u ovom elementu interfejsa u Kontakt obrascu 7. Podešavanje izgleda samog obrasca vrši se precizno odabirom vrednosti parametara svakog pojedinačni element. Stoga se preporučuje da se specificiraju određene vrijednosti za svaki parametar dat u ovom odjeljku u kodu svakog elementa.



Druge kartice obrasca

Kao što je napomenuto, prva kartica se zove „Šablon obrasca“. Sljedeće u ovom prozoru je “Pismo”. Određuje parametre lokacije na koju će se slati pošta sa ovog Internet resursa. Na kartici „Obaveštenje“ generiše se tekst poruke, koji će biti prikazan ako je pismo uspešno poslato. Postoji i mogućnost da pripremite poruku u slučaju da ne možete kontaktirati administratora stranice koristeći sredstva. Posljednja kartica u obrascu za kontakt 7 je “Napredne postavke”. Sadrži one parametre koji se u praksi vrlo, vrlo rijetko koriste. Na primjer, možete ga koristiti za postavljanje praćenja teksta koji je unio korisnik koristeći Yandex metriku.

Polja koja se mogu dodati pomoću ovog dodatka u ovaj obrazac

Podešavanje obrasca za kontakt 7 za Wordpress omogućava vam da dodate sljedeće elemente sučelja u obrazac za povratne informacije:

• Testno polje je univerzalni element interfejsa u koji možete unijeti bilo koji skup znakova.

  E-Mail - mjesto za unos naziva elektronske pošte.

  URL - polje za unos adrese internet stranice.

  Broj telefona—omogućava vam da unesete telefonski broj u međunarodnom formatu.

  Element „Broj (spinbox)” vam omogućava da kreirate polje za unos za bilo koju celobrojnu vrednost (na primer, starost posetioca).

  Element “Broj (klizač)” dodaje klizač obrascu koji vam omogućava da odaberete numeričku vrijednost iz određenog raspona.

  Stavka „Datum“ kreira posebno polje za unos u kojem možete odrediti traženi datum. Kada aktivirate ovaj element interfejsa, na dnu se pojavljuje kalendar u kojem možete odmah odabrati željeni datum.

  Zauzvrat, stavka padajućeg menija „Text field“ je namenjena za upisivanje tekstualnog dela e-poruke.

  Sljedeća stavka - "Padajući meni" - omogućava vam da odaberete traženi parametar sa fiksne liste.

  Ali „Potvrdni okviri“ su namijenjeni za odabir jedne ili više vrijednosti sa date liste.

  Element interfejsa “Radio Buttons” je skoro identičan prethodnom. Jedina razlika je u tome što u ovom slučaju možete odabrati samo jednu ispravnu opciju, dok “CheckBoxes” može imati nekoliko ispravnih vrijednosti.

  Stavka “Prihvatanje” vam omogućava da dodate samo jedan okvir za potvrdu kreiranom obrascu. Po pravilu se koristi za upoznavanje sa svim uslovima i bez njihovog prihvatanja, ubuduće neće biti moguće slati e-mail.

  Stavka „Meni“ vam omogućava da kreirate poseban odeljak u interfejsu koji će zaštititi vaše poštansko sanduče od neželjene pošte. U tom slučaju morate dati tačan odgovor na pitanje prije slanja.

  Druga sigurnosna opcija je CAPTCHA. Kada ga odaberete, obrascu će biti dodan poseban odjeljak koji će prikazati sliku sa simbolima i dodatno polje za njihovo unošenje.

  Sljedeća stavka je “Slanje datoteke”. Omogućava vam da dodate datoteku sa raznim vrstama objašnjenja i komentara u tekst pisma za administratora resursa.

  Posljednja stavka - "dugme za slanje" - omogućava vam da dodate odgovarajući element sučelja.

Sačuvajte napravljene promjene

Nakon što su potrebne vrijednosti postavljene i obrazac ispravno konfiguriran, morate sve to spremiti. Da biste to učinili, u prozoru za uređivanje dodataka idite na njegov gornji dio. Ovdje bi trebalo postojati dugme „Sačuvaj“. Usmjerite pokazivač na njega i kliknite na njega jednom. Kao odgovor, pojavit će se kod obrasca koji odabiremo pomoću istog pokazivača miša i kopiramo. Zatim prijeđite na stavku „Stranice“ na administrativnoj ploči sistema za upravljanje sadržajem. Zatim kreiramo novu stranicu sa traženim imenom (na primjer, „povratne informacije“, „Kontakti“ ili „Postavite pitanje administratoru resursa“). Zatim pomeramo kursor za biranje u polje za unos njegovog koda. U tom slučaju morate prebaciti način kucanja koda na “Tekst” na panelu parametara. Nakon toga unesite prethodno primljeni kod obrasca. Zatim, na desnoj strani interfejsa, pronađite dugme „Objavi“ i pređite mišem preko njega. U sljedećoj fazi kliknite jednom lijevom tipkom miša na ovaj element interfejsa sistema za upravljanje sadržajem.



Provjera rezultata

Nakon izvršenih prethodno navedenih manipulacija, treba dodati novu stranicu interfejsu Internet resursa na kojoj će biti prikazani elementi navedeni u Kontakt formi 7. Podešavanje interfejsa je u principu završeno. Samo trebate provjeriti da li je softver ispravno konfigurisan. Da biste to učinili, morate otići na glavnu stranicu web-mjesta, bloga ili portala. Zatim na listi stranica nalazimo onu na kojoj je postavljen obrazac za povratne informacije. Odemo do njega, unesemo ispravne parametre u sva polja odjednom i pošaljemo sebi probno pismo. Kao odgovor, trebala bi se pojaviti informativna poruka koja ukazuje na uspješan završetak ove operacije. Zatim pokušavamo poslati još jedno pismo sa praznim poljima. Nakon toga bi se trebala pojaviti poruka u kojoj piše da morate postaviti sve odabrane parametre obrasca. Ako su u oba slučaja dobijeni ranije navedeni rezultati, tada kreirani obrazac za povratne informacije funkcionira ispravno.

Prednosti i nedostaci dodatka. Alternativne opcije

Odlično rješenje za početnika programera za kreiranje obrasca za povratne informacije je mini-program Contact Form 7. Podešavanje slanja pošte, kreiranje elemenata interfejsa i drugih važnih elemenata interfejsa u ovom slučaju je uglavnom automatizovano i zahteva minimalno znanje korisnika. Stoga, za jednostavan internetski resurs početnog nivoa s početnim administratorom, ovo je odlično rješenje. Ali svaki dodatak dodatno opterećuje resurse web stranice, što smanjuje performanse. Kao rezultat toga, napredniji korisnici preporučuju udaljavanje od tako jednostavnog načina kreiranja obrasca za povratne informacije. Možete ga i sami kreirati koristeći HTML, CSS i JS, ali sa nižim nivoom funkcionalnosti. Ovo će smanjiti potrebu za računarskim resursima na sajtu i značajno povećati nivo performansi.



Rezultati

Ovaj članak opisuje korak po korak kako da konfigurišete obrazac za kontakt 7. Ovaj dodatak zaista ima visok nivo funkcionalnosti, možete ga koristiti da kreirate bilo koji obrazac za povratne informacije. S druge strane, korištenje dodatnog dodatka kao dijela sistema za upravljanje sadržajem povećava opterećenje na hardveru stranice. Stoga se početnicima administratorima sajtova koji se zasnivaju na ovom sistemu za upravljanje sadržajem preporučuje da koriste ovaj dodatak u te svrhe. Pa, napredniji korisnici mogu bez Kontakt forme 7. U ovom slučaju, postavljanje dodatka definitivno nije potrebno.

Trebao sam nabaviti lijepu formu za dodatak, formulare potrebne jučer, ali je prilično teško sjediti i pisati stilove ručno, a za mnoge projekte to jednostavno nije u okviru budžeta. Stoga sam krenuo u potragu za zanimljivim dodacima za brzo postavljanje CSS obrazaca za kontakt.

Svi su jednoglasno (ovo se odnosi na pretraživače) preporučili - rekli su mudri ljudi - uredite css i nemojte nikoga zavaravati, uzmite Notepad i samo naprijed. Gledajući unapred, mudri ljudi su bili u pravu.

Međutim, radoznalost je prevladala i odlučeno je da se plugin detaljnije testira, već sam ga već isprobao, ali mi se činilo krajnje dosadnim i nezgodnim. Dodatak nije ažuriran 11 mjeseci, što je tužno. Nešto više od 6.000 webmastera riskiralo je da mu povjeri svoje formulare, što također nije veliki broj (od kojih sam ga skinuo četiri-pet puta).

Nakon instalacije, kreira odjeljak „Stil kontakta“ u korijenu administratorskog izbornika. U ovom odeljku postoje dve stavke koje sadrže šablone za Dan zaljubljenih i Božić i „Prilagođeni stil“ gde možete u potpunosti prilagoditi izlaz obrasca. Zapravo, odjeljak "Prilagođeni stil" je ono što vas najviše zanima; više detalja o dostupnim postavkama:

“OPŠTE POSTAVKE” - možete definirati boju pozadine, širinu oblika (podešena u px, % nisu isprobani), debljinu ivice, oblik (tačkasta, puna, itd.), boju, zaokruživanje.

“POSTAVKE ULAZA I OZNAKA” - pozadina polja za unos, boja fonta za unos, font (lista nije velika i jedva da ima nešto na ćirilici) i njegova veličina. Boja ivice polja, stil (puna isprekidana linija, itd.), debljina, zaokruživanje. Font unosa i njegova veličina. Parametri margine u px - visina/širina, padding. Font etikete, stil, veličina, boja.

“POSTAVKE DUGOTA ZA PODNOŠENJE” – postavke za dugme za slanje obrasca. Dostupne postavke su veličina gumba, zaokruživanje, boja, vrsta ivice i boja obruba.

Problemi u upotrebi.

Nakon pregleda postavki, možete doći do zaključka da je sve jako dobro - praksa je pokazala suprotno. Postavke ima zaista puno, ali one nisu dovoljne - nema postavki uvlačenja unutar obrasca, tako da se svi blokovi skupljaju na lijevom rubu blizu ruba forme. Čudne "podrazumevane" postavke - gde je polje za unos 100*100 px. Ako pravilno postavite veličine polja, to neće utjecati na padajuću listu i ona će poprimiti stil glavne teme. Nije bilo moguće vratiti na originalne postavke prije deinstaliranja dodatka...

Do sada, osim ručnog mijenjanja stilova, nije prošlo ni manje ni više pristojno... Čudo se nije dogodilo.

Važna napomena! Dodatak je nedavno ažuriran i nešto se značajno promijenilo u postavkama, tako da morate pogledati i testirati.

Dodatak za kontakt obrazac 7 pomoći će vam da organizirate povratne informacije na vašoj web stranici.

Dodatak za kontakt obrazac 7 možete preuzeti na službenoj WordPress web stranici

Možete preuzeti Really Simple CAPTCHA dodatak na službenoj WordPress web stranici

Kako instalirati i povezati ovaj dodatak smo razgovarali u lekciji „“, sada ćemo pogledati dodatne funkcije dodatka Kontakt Form 7. Obrazac ispravno radi na monitorima, tabletima, telefonima i laptopima. Inače, ako vam je laptop pokvaren, postoji servis koji popravlja HP ​​laptopove.

Nakon što ste preuzeli i aktivirali dodatak, idite na postavke dodatka tako što ćete otići na novi odjeljak kontrolne ploče „Kontakti“.

Postavite pokazivač miša preko naziva obrasca i odaberite "Uredi"

Otvara se prozor za promjenu parametara obrasca.

S obzirom na to da stranica može koristiti ne jedan, već više formi (obrazac za slanje poruke, obrazac za naručivanje poziva, formular sa ličnim podacima), tako da ne bude zabune oko toga koji je obrazac za šta odgovoran, potrebno je promijenite naziv obrasca. Da biste to učinili, kliknite na naziv obrasca 1.

Blok br. 2 prikazuje šta će biti prikazano na stranici u obrascu. Prvo dolazi tekst, naziv polja, zatim kod ovog polja. Možete promijeniti tekst u ono što vam je potrebno.

Za dodavanje novih polja u obrazac, kliknite na padajuću listu br. 3 - „Generiraj oznaku“ i sa padajuće liste izaberite željeni element.

• Polje za tekst
• Email
• Telefonski broj
• Broj (spinbox)
• Broj (klizač)
• Polje za tekst
• Padajući meni
• Potvrdni okviri
• Radio dugmad
• Prihvatanje
• Pitanje
• CAPTCHA
• Slanje fajla
• Dugme za slanje

Opisi alata i polja obrasca su raspoređeni na sljedeći način: opis alata na vrhu, element na dnu. Ako želite da opis i element postavite u jedan red, uklonite oznaku iza teksta

. Cijeli blok sa opisima i elementima mora biti u jednom redu i unutar oznake

Polje za tekst