Laba diena, mieli tinklaraščio skaitytojai. Tęsiame temą apie atsiliepimų formas apie WordPress. Ir kadangi mes kalbame apie juos, šiandien siūlau pakalbėti apie WP Contact Form 7 įskiepį. Toliau papasakosiu žingsnis po žingsnio įskiepio sąranką, taip pat trumpai apibūdinsiu šio įskiepio priedus.
Puslapio naršymas:
„WordPress“ kontaktinės formos 7 aprašymas
2) Suaktyvinkite „Contact Form 7“ papildinį „WordPress“ administratoriuje.
3) Eikite į naujai sukurtą skirtuką, kaip parodyta paveikslėlyje:
4) Spustelėkite skirtuką „Pridėti naują“ ir nurodykite numatytąją formos kalbą arba pasirinkite norimą
5) Nurodykite kontaktinės formos pavadinimą ir spustelėkite išsaugoti.
6) Dabar turime trumpąjį kodą, kurį jau galima nukopijuoti ir įklijuoti į įrašą arba šoninę juostą, kad būtų rodoma forma - contact-form-7 id="1252" title="(!LANG:Form number 1" (надо взять в квадратные скобки как на рисунке).!}
7) Štai kaip atrodo mūsų forma:
Žinoma, tai nėra labai gražu, bet niekas nesivargina kurti savo stilių ar pasidaryti savo formą ir ten įterpti intarpų.
Kaip parodyti 7 kontaktinę formą pasirinktoje šablono vietoje
6 žingsnis po žingsnio sąrankos parodžiau, kaip galite paimti CF7 kodo trumpąjį kodą ir toliau aprašiau, kad šis kodas gali būti rodomas valdiklyje arba įraše, puslapyje. Be to, noriu pasakyti, kad bet kurioje šablono vietoje galite rodyti 7 kontaktinę formą. Norėdami tai padaryti, įveskite šį paprastą kodą:
Tai viskas, jei viską padarėte teisingai, 7 kontaktinės formos išvestį gausite savavališkoje „WordPress“ šablono vietoje.
7 kontaktinės formos įvesties laukų tinkinimas
Jo dėka papildomai turėsite tokias dėžutes kaip:
7 kontaktinės formos atsakymo į atsakymą konfigūravimas
Naujoje papildinio CF7 4.4 ir naujesnės versijos versijoje kūrėjas rekomenduoja įvesti lauką iš (čia jis yra ant odos žemiau)
teisingas adresas, atitinkantis jūsų domeną. Žiūrint iš odos, ši rekomendacija sukelia problemą:
Kaip atsakyti vartotojui iš laiško?
Jei tik spustelėsite atsakyti, mes atsakysime į savo paštą, iš tikrųjų atsakysime patys. Tai labai nepatogu, nes reikia rankiniu būdu nukopijuoti vartotojo adresą į pašto dėžutę ir tik tada atsakyti.
Šios problemos sprendimas, kaip visada, paprastas. tau reikia lauke Papildomos antraštės pridėti kodą:
Atsakinėti į:
Žinoma, jūsų el. pašto adresas turi būti pakeistas jūsų pašto trumpuoju kodu. Žiūrėkite odą žemiau:
Dabar, gavę „WordPress“ atsiliepimo laišką, galite spustelėti laiške, kad atsakytumėte ir jūsų atsakymas bus išsiųstas teisingu el.
Jei atlikę šiuos veiksmus susiduriate su problema, turėtumėte perskaityti įrašą spustelėję nuorodą. Pagrindinės problemos ir gedimų priežastys yra aprašytos kontaktinės formos 7 papildinyje.
Tai viskas. Tikiuosi, kad suprantate, kaip sukonfigūruotas papildinys ir jo išdėstymai.
Sveiki visi. Šiaip ar taip, turiu per daug energijos ir šiandien nusprendžiau parašyti dar vieną straipsnį, kuris bus skirtas vienam iš WordPress įskiepių. Gan įdomus ir funkcionalus įskiepis, 100% susidoroja su savo pareigomis ir dar neradau geresnio atsiliepimo.
Nenoriu jūsų ilgai kankinti, manau, kad jūs jau supratote, kas bus aptarta straipsnyje. Taigi, šiandien mes suprasime ir sukonfigūruosime 7 papildinio kontaktinė forma, skirta „WordPress“., būtent sukurti atsiliepimo formą.
Ilgai sėdėjau ir galvojau, kokie yra įskiepio trūkumai ir niekas neatėjo į galvą, bet šis kūrinys turi daug pliusų.
7 kontaktinės formos papildinio privalumai.
- Aiškumas ir sąrankos paprastumas. Asmuo, pirmą kartą susidūręs su šiuo papildiniu, galės tai išsiaiškinti be jokių problemų.
- Daugelio skirtingų formų kūrimas ir integravimas į svetainę.
- Forma įterpiama naudojant trumpąjį kodą puslapyje ir bet kurioje svetainės vietoje. Tai labai patogu.
- Rusų ir kitų kalbų palaikymas.
- „Ajax“ užklausų palaikymas.
- Apsauga nuo šlamšto su tekstiniu klausimu arba „captcha“. Norėdami naudoti „captcha“, turėsite papildomai įdiegti „Really Simple CAPTCHA“.
- Formos išvaizdos pritaikymas naudojant css stilius.
- Integracija su Akismet paslauga, apsauganti nuo šiukšlių.
Mūsų svetainėje galite pamatyti ir naudoti tokią formą, jei paspausite meniu punktą „Susisiekite su mumis“, atsiras langas, kuriame pamatysite gerą pavyzdį.
Pradėkime!
Pirmiausia turime atsisiųsti šį papildinį. Galite iš mūsų serverio čia yra nuoroda -\u003e arba iš oficialios svetainės čia yra nuoroda -\u003e Atsisiųsti iš oficialios svetainės .
Atsisiuntę turite jį įdiegti . Neapibūdinsiu, kaip įdiegti, manau, turėtumėte žinoti šį procesą nuo A iki Z. Atsisiuntėme, įdiegėme, dabar patys einame tiesiai į jį, kad išsiaiškintume ir sukonfigūruotume.
7 kontaktinės formos papildinio nustatymas ir atsiliepimų formos kūrimas.
Atsisiuntę ir įdiegę viską, ko reikia, eikite į „WordPress“ administratoriaus skydelį ir raskite elementą Susisiekimo forma 7, spustelėkite jį ir pateksime į naujos formos pridėjimo puslapį.
Formos kūrimas.
Norėdami sukurti naują formą, turite spustelėti „ Pridėti naują“, tada pasirinkite kalbą (pagal numatytuosius nustatymus rusų) ir spustelėkite „Pridėti naują“. Po visų atliktų veiksmų turėtumėte turėti šį paveikslėlį:
Forma sukurta, dabar ją pritaikysime pagal Jūsų poreikius, o pradžiai suteiksime pavadinimą. Mano atveju aš paskambinsiu " Bandymo forma“, pavadinkite jį taip, kaip norite, tada spustelėkite „Išsaugoti“. Dabar galite pamatyti trumpąjį kodą, kurį reikės įterpti į svetainės, kurioje bus rodoma ši forma, kodą.
Kodo mums prireiks šiek tiek vėliau, nes pirmiausia turėsime nustatyti formą. Eikite į formos šabloną ir tinkinkite jį.
Išskleidžiamasis sąrašas dešinėje Sukurti žymą“, jei ją atidarysite, pamatysite daug laukų, kurie pridedami prie formos.
Generuoti žymos lauką Kairėje galite matyti laukus, kurie jau buvo įtraukti į formą.
Pavyzdžiui, sukurkime paprastą formą, kurioje bus vardas, el. pašto adresas, telefonas, tekstinis klausimas, skirtas apsaugoti nuo šiukšlių, pranešimas ir pateikimo mygtukas.
Prasideda.
Vardo teksto lauko sudarymas. Išskleidžiamajame sąraše „Generuoti žymą“ pasirinkite „ Teksto laukas“. Pažymime reikiamą lauką, mano atveju suteikiame jam pavadinimą „NAME“ ir priskiriame id, kad lauką būtų galima stilizuoti naudojant css stilius. Gavau id="vardas". Žemiau galite pamatyti tekstą " Nukopijuokite šį kodą ir įklijuokite jį į formos šabloną kairėje“. Mes paimame šį kodą ir nukopijuojame jį į formos šabloną, kaip parodyta paveikslėlyje:
Paštui (el. paštui) darome tą patį, telefonui iš sąrašo pasirinkite „Generuoti žymą“, laukelį „ Telefono numeris“ ir taip pat pagal analogiją darome.
Norėdami tinkinti pranešimą, pasirinkite " Teksto laukas“ ir mes darome tą patį pagal analogiją su viskuo, kas aprašyta aukščiau.
Dabar pridėkite lauką Klausimas“. Norėdami tai padaryti, pasirinkite " Klausimas“, duokite jam pavadinimą. Lauke Klausimas|Atsakymas galite užduoti įvairius klausimus ir atsakymus, po lauku yra loginio klausimo pavyzdys, galite nustatyti tekstinį, pvz., „3-as metų mėnuo?| kovas“ ir kt. Įklijuokite kodą kaip anksčiau.
laukas "Klausimas" Ir paskutinis dalykas, kurio mums reikia, yra mygtukas " siųsti“, galite palikti tą, kuris yra šablone arba sąraše „Generuoti žymą“, pasirinkti mygtuką „Pateikti“. Šablonas paruoštas, paspauskite mygtuką " Sutaupyti”.
Patikrinkime, ką gavome, nukopijuokime trumpąjį kodą ir, kur reikia, įklijuokite jį puslapyje arba bet kurioje kodo dalyje. Įklijuosiu į bandomąjį puslapį.
Štai ką aš padariau:
Turite turėti kažką panašaus.
Formos ir pranešimo paskirties pritaikymas
Nusileidžiame šiek tiek žemiau formos šablono ir matome adresato nustatymus.
- Paskirties laukas. Įveskite paštą, iš kurio bus siunčiami laiškai lankytojams, kurie užpildys formą.
- Siuntėjo laukas. Vietoj<>, pakeičiame savo trumpuosius kodus (pavadinimus, kurie buvo suteikti laukams). Juos galite pamatyti aukščiau. Mano atveju taip bus<>.
- Temos laukas. Visada rašau atsiliepimų formą ir nurodysiu svetainę.
- Laiško šablono laukas. Čia galite rodyti viską, ko geidžia jūsų širdis. Mūsų pavyzdyje aš darau lauką Nuo:<>ir detaliau Telefonas: , Žinutė..
- Likę laukai tušti.
Pabaigoje nepamirškite išsaugoti.
Jei nusileisite dar žemiau, pamatysite pranešimų nustatymus. Čia viskas rusų kalba, todėl galite redaguoti pagal savo poreikius, kaip norite. Čia manau suprasi
Forma paruošta, galite tęsti testavimą ir pažiūrėti, ar pranešimas atkeliauja į jūsų nurodytą paštą.
Man viskas veikia gerai, paspaudus mygtuką "Pateikti" matau pranešimą " Laiškas sėkmingai išsiųstas. Dėkoju. ” Galite išbandyti ir pažiūrėti, kokias klaidas duos forma, jei neteisingai suvesite duomenis.
Kalbant apie css stilius, juos galima įtraukti į pagrindinį css style.css failą. Firebag pagalba galite peržiūrėti laukų ID ir klases bei priskirti jiems tinkamus stilius.
7 papildinio kontaktinė forma, skirta „WordPress“. labai funkcionalus, galite sukurti bet kokio sudėtingumo formą, esu tikras, kad esate tuo įsitikinęs. Tuo aš baigsiu, jei kai kurie punktai nėra visiškai aiškūs, parašykite komentaruose ir pasistengsiu jums padėti tai išsiaiškinti. Dėkoju.
Kontaktinė forma yra esminis daugelio svetainių atributas. Štai kodėl „WordPress“ kataloge yra tiek daug kontaktinės formos papildinių. Viena iš populiariausių yra Kontaktinė forma 7. Įskiepis leidžia kurti bet kokias formas; labai lankstus ir lengvas nustatymas; buvo kuriama daugelį metų ir yra daug naujovių.
Kontaktinių formų kūrimas ir rodymas
Formų kūrimas administracijoje
Įdiegus papildinį atsiras meniu punktas „Kontaktinė forma 7“, per kurį galėsite kurti ir ištrinti formas.
Paveikslėlio forma buvo sukurta automatiškai, kai buvo suaktyvintas papildinys.
Naudojame numatytąją formą, tam sukursime puslapį „Susisiekite su manimi“ ir įterpsime ten trumpąjį formos kodą.
Svetainės priekis
Dabar išsaugokime straipsnį ir pažiūrėkime, kaip atrodo mūsų forma (naudojant „Twenty Sixteen“ temą):
Paveikslėlyje pavaizduota forma po išsiųsto laiško (tai nurodoma anketos apačioje esančiame pranešime).
Formų pritaikymas (sudėtingų formų kūrimas)
Aukščiau pateiktame pavyzdyje parodyta, kaip įterpti paruoštą ir labai paprastą kontaktinę formą. O dabar pažiūrėkime, kaip sukurti sudėtingesnę formą. Norėdami tai padaryti, grįšime į administratoriaus skydelį, į formų tvarkyklę ir pereisime prie numatytosios formos redagavimo.
Viršutiniame lauke - formos pavadinimas (jis matomas tik administratoriaus skydelyje), nurodykite jums aiškų pavadinimą, pvz.: „Atsiliepimai apie svetainę“, „Prašymo į darbą forma“, „Atsiliepimų forma“ ir kt.
Po pavadinimu yra trumpasis kodas. Mes naudojame jį įrašuose, formai rodyti.
Žemiau yra keturi skirtukai:
- Formos šablonas
- Laiškas
- Papildomi nustatymai
Panagrinėkime kiekvieną skirtuką atskirai.
Formos šablonas
Šiame skirtuke galite tinkinti formos laukus ir išvaizdą. Darbo sritis yra WP HTML redaktorius. Tik vietoje įprastų mygtukų matome skirtingų formos laukelių įterpimo mygtukus.
Formos išdėstymas
Išdėstymui galite naudoti html žymas ir papildinių trumpuosius kodus. Trumpieji kodai prideda formos laukų, o HTML žymos leidžia sukurti savavališką HTML struktūrą. Pavyzdžiui, mūsų numatytoji forma atrodo taip:
Ir kai jis bus rodomas įraše, jis pavirs šiuo HTML:
Trumpojo kodo sintaksė
Paspaudžiame mygtuką „Tekstas“. Atsidaro langas, kuriame galime nurodyti teksto lauko atributus. Nurodykite ir spustelėkite „Įterpti žymą“.
Vėliau žyma bus konvertuota į teksto lauką su html kodu:
Trumpuosius kodus galima patogiai sukurti naudojant trumpųjų kodų konstruktorių.
Bet konstruktorius neleidžia keisti trumpojo kodo (ten galite sukurti tik trumpąjį kodą). Yra du būdai, kaip pakeisti trumpąjį kodą:
- ištrinkite ir sukurkite naują naudodami konstruktorių.
- išstudijuokite sintaksę ir pataisykite lauko trumpąjį kodą rankiniu būdu.
Su dizaineriu tai išsiaiškinsite patys.
Ir čia mes analizuosime trumpojo kodo sintaksę.
Pavyzdžiui, apsvarstykite teksto lauko žymą su papildomomis parinktimis:
Tekstas (privaloma) Lauko tipas: tekstas, pasirinkimas, slaptažodis, numeris ir kt. (šiuo atveju teksto laukas). Nustato, į kurį formos elementą mūsų žyma bus konvertuojama, o tai reiškia, kokius duomenis ji priims. * Žvaigždutė daro lauką privalomą (forma nebus pateikta ir bus rodomas pranešimas, kad laukas turi būti užpildytas). Kliento vardas (privaloma) Lauko pavadinimas naudojamas kaip pavadinimo atributas įvestyje, taip pat naudojamas formuojant siunčiamo laiško šabloną. id:my-id ID atributas įvestyje su reikšme my-id. Naudotas dekoravimui. class:my-class Klasės atributas įvestyje su reikšme my-class. Naudotas dekoravimui. rezervuota vieta "(!LANG: Įveskite pavadinimą" Использовать текст "Введите имя" как placeholder. !}
Laikykitės žymos atributų tvarkos: pirmiausia pateikiamas lauko tipas, tada jo pavadinimas ir tik tada papildomos parinktys.
Laukų tipai
- Teksto laukai: tekstas , el. paštas , tel , url , tekstinė sritis
- Skaitiniai laukai: skaičius , diapazonas
- Datos laukai: data
- Žymieji langeliai, radijas, sąrašai: žymės langelis , radijas , pasirinkite
- Failo įkėlimo laukas: failas
- CAPTCHA: captchac ir captchar
- Apklausos: viktorina
- Laukas „Priimti“: priėmimas
- Pateikimo mygtukas: pateikti
- Pasirinktinis lauko tipas
Laiško šablonas
Antrame skirtuke galite tiksliai sureguliuoti išsiųsto laiško šabloną (išdėstymą) ir savybes. Šio skirtuko laukeliuose galite naudoti specialias formos laukų žymas – tai suteikia galimybę laiške siųsti formoje nurodytus duomenis.
Žymos susideda iš laukų pavadinimų iš formos šablono. Pavyzdžiui, sukūrėme teksto lauką pavadinimu: . Dabar galite naudoti žymą el. pašto šablone. Laiške vietoj šios žymos bus pakeista vartotojo įvesto lauko reikšmė (pilnas vardas).
El. laiškų antraštės:
- Papildomos antraštės – Reply-To: čia rašoma pagal numatytuosius nustatymus. Antraštė „Atsakyti“ nurodo, kad į šį el. laišką galima atsakyti laiške spustelėjus mygtuką „Atsakyti“, o formos žyma yra šablono lauko pavadinimas. Vietoj šios žymos bus įterptas vartotojo nurodytas el. pašto adresas. Gaunate kažką panašaus į atsakymą: [apsaugotas el. paštas].
Kam – el. pašto adresas, kuriuo bus išsiųstas el. Galite nurodyti tiek laukelių, kiek norite, atskirdami kableliais.
Nuo – vardas ir el.paštas, iš kurio atėjo laiškas. Paprastai čia nurodomas serverio paštas (pvz [apsaugotas el. paštas]).
Galite nurodyti bet kokį paštą, tačiau jei pašto domenas skiriasi nuo svetainės domeno, forma nebus patikrinta ir „prisieks“ šiuo parametru, nors laiškai vis tiek bus siunčiami.
Tema – el. laiško pavadinimas. Bus aišku, iš kokios formos buvo išsiųsti duomenys. Pavyzdžiui, laiško tema yra „Klaida svetainėje“, „Atskambinimo užsakymas“ ir pan. Pasirinkite pavadinimą, kad būtų lengviau dirbti su gautais laiškais.
Raidės korpusas
Tai kita svarbi šio skirtuko dalis. Štai laiško tekstas. Tekste naudojame visas tas pačias formų žymas (laukų pavadinimus iš formos šablono).
Išanalizuokime numatytąją raidę:
Iš:<>Tema: Pranešimas: – Išsiųstas iš svetainės, kurioje tiriamas 7 kontaktinės formos papildinys (http://test-wp.ru)
Turėjome 4 laukus, kuriuos užpildė vartotojas. Išsiuntus el. laišką, žymos pavirs reikšmėmis ir gausime tokį el. laišką:
Nuo: Dmitrijus
Neprivalomi laukai el. laiško tekste
Jei vartotojas neužpildo lauko, bet jis naudojamas laiško tekste, tada laiško turinys bus neišsamus. Pavyzdžiui, ant kūno rašoma Žmogus iš miesto, tačiau vartotojas neužpildė lauko, vadinasi, laiške gausime Žmogų iš miesto... Tokia eilutė laiške yra perteklinė. Norėdami pašalinti šią eilutę iš el. laiško, pažymėkite langelį „Išskirti eilučių su tuščiomis pranešimų žymomis išvestį“. Atminkite, kad tai veiks tik tada, kai lauko tekstas ir trumpasis kodas yra toje pačioje eilutėje.
Parinktis „Naudoti laiško HTML formatą“. Leidžia naudoti HTML žymas el. laiško tekste. Tokiu atveju galite naudoti ribotą HTML žymų sąrašą, nes ne visos el. pašto programos ar paslaugos gali tinkamai apdoroti sudėtingą HTML žymėjimą. Galite naudoti: lenteles, sąrašus su ženkleliais, paryškinimą, pastraipas ir pan. Daugiau informacijos ieškokite internete.
7 kontaktinė forma leidžia išsiųsti laišką dviem adresais, o kiekvienos raidės nustatymai yra skirtingi. Tai gali būti naudinga, kai reikia išsiųsti laišką svetainės administratoriui su visa informacija ir dublikatą vadybininkui, kuriame yra tik užsakymo duomenys.
Formos pateikimo pranešimai
Šiame skirtuke galite redaguoti pranešimus, kuriuos forma rodo tam tikroje situacijoje: sėkmingai ar nesėkmingai siunčiant laišką arba įvykus klaidoms.
Laiškų šablonų žymos šiuose laukuose neveikia.
Papildomi nustatymai
Šis skirtukas skirtas pažengusiems vartotojams ir leidžia išplėsti formos galimybes naudojant JS kodą. Pavyzdžiui, pakabinkite įvykius analizei.
Apie šios funkcijos naudojimą kalbėsiu atskirame straipsnyje.
7 kontaktinės formos papildinys padės sutvarkyti atsiliepimus apie jūsų svetainę.
Galite atsisiųsti kontaktinės formos 7 papildinį oficialioje „WordPress“ svetainėje
„Really Simple CAPTCHA“ papildinį galite atsisiųsti oficialioje „WordPress“ svetainėje
Kaip įdiegti ir prijungti šį įskiepį aptarėme pamokoje „“, dabar pakalbėsime apie papildomas įskiepio „Contact Form 7“ funkcijas. Forma tinkamai veikia monitoriuose, planšetiniuose kompiuteriuose, telefonuose ir nešiojamuosiuose kompiuteriuose. Beje, jei jūsų nešiojamas kompiuteris sugedo, tada yra servisas, kuriame remontuojami HP nešiojamieji kompiuteriai.
Atsisiuntę ir suaktyvinę papildinį, eikite į papildinio nustatymus, eidami į naują valdymo skydelio skyrių „Kontaktai“.
Užveskite pelės žymeklį ant formos pavadinimo ir pasirinkite „Redaguoti“
Atsidarys formos parametrų keitimo langas.
Kadangi svetainėje galima naudoti ne vieną, o kelias formas (pranešimo siuntimo forma, skambučio užsakymo forma, forma su asmens duomenimis), kad nekiltų painiavos, kuri forma už ką atsakinga, reikia pakeisti pavadinimą formos. Norėdami tai padaryti, spustelėkite formos pavadinimą 1 .
Blokelyje Nr. 2 rodoma, kas bus rodoma formos puslapyje. Pirmiausia po šio lauko kodo pateikiamas tekstas, lauko pavadinimas. Galite pakeisti tekstą į tai, ko norite.
Norėdami į formą įtraukti naujų laukų, spustelėkite išskleidžiamąjį sąrašą Nr. 3 – „Generuoti žymą“ ir išskleidžiamajame sąraše pasirinkite reikiamą elementą.
- Teksto laukas
- El. paštas
- Telefono numeris
- Skaičius (spinbox)
- Skaičius (slankiklis)
- Teksto laukas
- Išskleidžiamasis meniu
- Žymės langeliai
- radijo mygtukai
- Priėmimas
- Klausimas
- CAPTCHA
- Failo siuntimas
- mygtuką pateikti
Pagal numatytuosius nustatymus patarimai ir formos laukai yra išdėstyti taip: viršuje yra užuomina, apačioje - elementas. Jei norite, kad aprašas ir elementas būtų vienoje eilutėje, pašalinkite žymą po tekstu
. Visas blokas su aprašymais ir elementais turi būti vienoje eilutėje ir būti žymos viduje
Teksto laukas
Išskleidžiamajame sąraše pasirinkite elementą „Teksto laukas“
Jei reikalinga kuri nors jūsų pridėta funkcija, pažymėkite 1 laukelį ir nepamirškite to parašyti aprašyme.
Į įvesties lauką galite įtraukti papildomos informacijos, kad formos pildymas būtų suprantamesnis. Pažymėkite 2 laukelį "Naudoti kaip rezervuotąją vietą?" ir šalia jo esančiame laukelyje įveskite užuominą. Kai užpildysite šį formos lauką, patarimo tekstas išnyks. Tada vykdykite papildinio nurodymus. Rezultatas yra toks laukas, kaip šis baigtoje formoje:
Būtinai įdėkite kodą į laiško šabloną, antraip duomenys iš šio lauko į paštą nebus siunčiami! Tai taikoma ne tik teksto laukams, bet ir kitiems elementams.
El. paštas
Naudojamas siuntėjo pašto dėžutės adresui perduoti į formą
URL
Leidžia į formą įtraukti svetainės adresą.
Telefono numeris
Šiame lauke galima įvesti tik skaičius.
Skaičius (spinbox)
Laukas, kuriame galite nustatyti kažko, pvz., produkto, kiekį. Kiekis nustatomas rodyklėmis aukštyn/žemyn.
data
Į formą įterpia kalendorių su galimybe pasirinkti datą. Pavyzdžiui, jis naudojamas rezervuojant kambarius viešbutyje. Atvykimo data, išvykimo data.
Teksto laukas
Taip, nenustebkite 🙂 Dar vienas teksto laukas. Šį kartą šis laukas yra didelis ir leidžia jame rašyti daug teksto. Pavyzdžiui, atsiliepimai, komentarai.
Išskleidžiamasis meniu
Kai yra daug pasirinkimų ir reikia pasirinkti kokį nors elementą iš didelio sąrašo, pavyzdžiui, miestų, gatvių, prekių sąrašo.
Sąrašas turi būti įtrauktas į lauką Pasirinkimas, kiekvienas elementas naujoje eilutėje.
Žymės langeliai
Žymimasis laukelis arba žymimasis laukelis kūrėjo žargonu yra elementas, sukuriantis žymimąjį laukelį. Šis laukas turi dvi būsenas – pažymėta arba ne. Galimas kelias pasirinkimas. Jie yra tik iš eilės, jei pažymėsite langelį "Ar žymimuosius laukelius nesuderinti?" tada galima pasirinkti tik vieną variantą.
radijo mygtukai
Jungikliai (slengas. radijo mygtukai) naudojami, kai reikia pasirinkti vieną vienintelį variantą iš kelių siūlomų. Pažymėdami langelį „Pirmiausia vieta etiketėje, o tada žymimasis langelis? etiketės vieta ir pasirinkimo laukas keičiasi, pagal numatytuosius nustatymus pirmiausia pasirenkamas, tada etiketė.
Priėmimas
kažko patvirtinimas. Sutikite, kad sutiktumėte su aukščiau aprašytomis sąlygomis.
Klausimas
Tai pirmoji gynybos linija nuo šiukšlių, pati elementariausia. Nustatyme parašykite kokį nors klausimą, galite naudoti skaičius, galite naudoti raides arba abu, ir nurodykite teisingą atsakymą. Jei atsakymas pildant formą yra teisingas, forma bus pateikta. Žalia nurodo, kuri šios formulės dalis bus rodoma svetainėje prieš atsakymo įvesties lauką, raudona – atsakymą. Teisingas atsakymas formulėje rašomas po ženklu | (vertikali juosta)
Prideda prie formos apsaugą nuo šiukšlių.
Kad ši funkcija veiktų, reikalingas kitas papildinys. Atsisiųskite, įdiekite, suaktyvinkite papildinį.
Negalite keisti nustatymų, nukopijuoti ir įklijuoti 2 eilutes prieš siuntimo mygtuką.
Failo siuntimas
Prie formos galite pridėti failą žinutei siųsti. Nustatymuose galite nurodyti maksimalų dydį baitais ir leidžiamus įkėlimo formatus, pvz.,jpg .tiff .doc
mygtuką pateikti
Formos pateikimas. Skilties „Spartusis klavišas“ nustatymuose - galite nurodyti mygtuko pavadinimą (Siųsti, atsakyti, siųsti 🙂)
Kontaktinės formos išvaizdos pritaikymas 7
Kadangi papildiniai turi atnaujinimo ypatybes, pakeisime formos išvaizdą svetainės temos stiliaus faile style.css
Kodas yra atsakingas už formos, jos laukų ir kitų elementų atvaizdavimą:
Wpcf7 (fono spalva:#ddd; ) /*formos fono spalva */ .wpcf7 įvestis, .wpcf7 textarea(padding:5px; color:#1D1D1D; font-family:Arial, Helvetica, sans-serif; šrifto dydis: 16 tšk.; linijos aukštis: 20 tšk.; kraštinė: 1 piks. vientisas #C7C7C7; langelio šešėlis: įdėtas 2 piks. 2 piks. 8 piks. #F9F9F9; -Webkit-perėjimas: viskas 0,2 s; -moz-perėjimas: viskas 0,2 s; -o-perėjimas : lengvas visas 0,2 s; perėjimas: visas 0,2 s lengvas įvestis( kraštinė: nėra; užpildymas kairėje: 0; paraštė kairėje: 0; ) .wpcf7 select( kontūras: nėra; šrifto dydis: 16 pikselių; šriftų šeima: Arial, Helvetica, sans-serif; ) .wpcf7 įvestis: užveskite pelės žymeklį, .wpcf7 input:focus, .wpcf7 input:active, .wpcf7 textarea:hover, .wpcf7 textarea:focus, .wpcf7 textarea:active (fonas: #FDFDFD; kontūras: nėra; )
Kas čia yra kas.
.wpcf7 įvestis, .wpcf7 tekstinė sritis - įvesties lauko stilius (teksto laukas)
- kamšalas- nustato įtrauką nuo turinio iki elemento krašto. Čia – įtrauka nuo lauke įvesto teksto iki lauko kraštinės. Vertė pikseliais nustatoma į Xpx, kur X yra pikselių skaičius. Pavyzdys: užpildymas: 5 pikseliai 3 pikseliai 6 pikseliai 8 pikseliai;
- spalva- teksto spalva.
- šrifto šeima- įvesties laukų šriftas.
- šrifto dydis- šrifto dydis
- linijos aukštis- linijos aukštis
- siena- rėmelis aplink įvesties lauką
- dėžutės šešėlis bloko šešėlis. intarpas rodo, kad šešėlis yra vidinis. Jei norite išorinio šešėlio, praleiskite šią reikšmę. Antroji ir trečioji 2 pikselių 2 pikselių reikšmės rodo atitinkamai horizontalų ir vertikalų šešėlio susiliejimą. Ketvirtoji reikšmė, 8 pikseliai, nurodo šešėlio suliejimo spindulį. Penkta – #F9F9F9 – šešėlio spalva.
Kontaktinės formos 7 mygtukas tinkinti
.buttons_form ( užpildymas: 0 tšk.; aukštis: 30 pikselių; plotis: 150 pikselių !svarbu; kraštinė: nėra !svarbu; žymeklis: rodyklė; spalva: #fff; -webkit-border-radius: .5em; -moz-border-radius: . 5 em; kraštinės spindulys: 0,5 em; spalva: #faddde; kraštinė: vientisas 1px #980c10; fonas: #d81b21; fonas: -webkit-gradient (linijinis, kairėje viršuje, kairėje apačioje, nuo (#ed1c24), iki (# aa1317)); fonas: -moz-linear-gradient(viršuje, #ed1c24, #aa1317); filtras: progid:DXImageTransform.Microsoft.gradient(startColorstr="#ed1c24", endColorstr="#aa1317"); )Susisiekimo forma 7 pranešimo stilius
Ji yra atsakinga už pranešimų apie klaidas arba sėkmingus pateikimus.
Wpcf7 .wpcf7-validation-errors(border:none; background-color:#246416; color:#fff; margin:0; padding:20px; -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; ) .wpcf7 .wpcf7-mail-sent-ok( -radius: 10px; border-radius: 10px; ) .wpcf7 .wpcf7-mail-sent-ng( border:none; background-color:# 349622; paraštė: 0; užpildymas: 20 tšk.; ; -moz-border-radius: 10px; kraštinės spindulys: 10 pikselių; spalva: balta; ) .wpcf7 span.wpcf7-not-valid-tip( border:none; background-color :#349622; užpildymas: 5 tšk.; užpildymas - kairėje: 5 piks.; užpildymas dešinėje: 5 piks.; kraštinės spindulys: 10 piks.; plotis: 290 piks.; spalva: balta; /* Krentamas šešėlis */ -webkit-box-shadow: 3px 3px 3px rgba(0,0,0,0.3) ; -moz-box-shadow: 3px 3px 3px rgba(0,0,0,0.3); box-shadow: 3px 3px 3px rgba(0,0,0,0.3); )
O dabar, patogumo dėlei, visas kodas su komentarais:
Wpcf7 ( background-color:#ddd; ) /*formos fono spalva */ .wpcf7 įvestis, .wpcf7 textarea( /* Ši kodo dalis atsakinga už įvesties laukų stilių, teksto sritis */ užpildymas:5px; /* Nustato užpildymą iš laukų elemento prieš jo turinį, galite įdėti bet kokią reikšmę, pvz., 10px */ color:#1D1D1D; /* Teksto spalva įvesties laukuose */ font-family:Arial, Helvetica, sans-serif; /* Teksto šriftas įvesties laukuose */ šrifto dydis: 16 pikselių; /* Teksto dydis įvesties laukuose */ eilutės aukštis: 20 pikselių; /* Linijos aukštis įvesties laukuose */ kraštinė: 1 piks. vientisas #C7C7C7; /* Kraštinė aplink laukus. Pirmoji reikšmė yra plotis pikseliais, antroji - dėžutės stilius, trečioji - jo spalva */box-shadow: inset 2px 2px 8px #F9F9F9; /* Box shadow 2px - x offset, 2px - y offset, 8px - šešėlių suliejimas spindulys, #F9F9F9 - šešėlių spalva */ -webkit-transition: viskas 0,2s lengva; -moz-transition: viskas 0,2s lengva; -o-transition: viskas 0,2s lengva; perėjimas: viskas 0,2s lengva; ) .wpcf7 . wpcf7-list- item (padding-left: 0; margin-left: 0; margin-right: 25px; ) .w pcf7 .wpcf7-list-item input( border: none; paminkštinimas kairėje: 0; paraštė-kairė: 0; ) .wpcf7 select( outline: none; font-size: 16px; font-family:Arial, Helvetica, sans-serif; ) .wpcf7 input:hover, .wpcf7 input:focus, .wpcf7 input:active, .wpcf7 textarea: hover, .wpcf7 textarea:focus, .wpcf7 textarea:active ( /* Ši dalis yra atsakinga už įvesties laukų stilių užvedus pelės žymeklį virš jų */ background: #FDFDFD; /* Įvesties lauko fonas užvedus pelės žymeklį virš jo */ kontūras : nėra; /* Išorinė teksto įvesties lauko kraštinė */ ) o perėjimas: 0; perėjimas: 0; kraštinė: nėra; /* Kraštinė aplink mygtuką */ padėtis: santykinė; spalva: #fff; /* Teksto spalva */ teksto transformacija: didžiosios raidės; /* Teksto transformavimas (didžiosios raidės reiškia, kad tekstas ant mygtuko bus rodomas didžiosiomis raidėmis) */ /* Mygtuko kampų apvalinimas Šių trijų ypatybių reikšmės turi būti vienodos, nes jos yra vienodos, tik skirtingoms naršyklėms */ -webkit-border-radius: 6 piks /* Apvalūs kampai, skirti Chrome */ -moz-border-radius: 6px; /* Apvalūs kampai, skirti Mozilla FireFox */ border-radius: 6px; /* Apvalūs kampai visoms kitoms naršyklėms, įskaitant mobiliąsias */ šrifto dydis: 14 pikselių; /* Mygtuko teksto dydis */ šrifto svoris: paryškintas; /* Teksto stilius (bold reiškia paryškintą) */ padding-top: 11px; /* Viršutinis užpildymas nuo elemento krašto iki jo turinio */ padding-bottom: 10px; /* užpildymas nuo elemento apačios iki jo turinio */ užpildymas kairėje: 35 pikseliai; /* Padding kairėje nuo elemento krašto iki jo turinio */ užpildymas dešinėje: 35 pikseliai; /* Įtrauka į dešinę nuo elemento krašto iki jo turinio */ /* Gradiento fonas – mygtuko gradiento fonas */ background-color: #000000; /* Mygtuko fono spalva, jei gradiento nepalaiko naršyklė */ /* Šiose ypatybėse spalvos turi būti nurodytos vienodai, nes jos yra vienodos, tik skirtingoms naršyklėms. Pažvelkime į pirmąjį turtą. Dalis nuo (#676767), iki (#3B3B3B) reiškia, kad turime rodyti gradientą, kur nuo #676767 spalvos yra perėjimas prie spalvos #3B3B3B */ fonas: -webkit-gradient(linijinis, kairėje viršuje, kairėje apačioje, nuo( #676767), iki(#3B3B3B)); fonas: -moz-linear-gradient(viršus, #349622, #246416); filtras: progid:DXImageTransform.Microsoft.gradient(startColorstr="#349622", endColorstr="#246416"); -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#349622, endColorstr=#246416)"; /* Drop Shadow – mygtuko šešėlis. Šešėlio spalva nurodyta RGBA */ -webkit-box-shadow: 0 2px 5px rgba(0,0,0,0.3); -moz-box-shadow: 0 2px 5px rgba(0,0,0,0.3); langelis-šešėlis: 0 2px 5px rgba(0,0,0,0,3); ) /* Užvedus pelės žymeklį – nustatykite mygtuko stilių, kai užvedate pelės žymeklį. Viskas beveik taip pat, kaip ir ankstesniame bloke */ .wpcf7 input.wpcf7-submit:hover( žymeklis: rodyklė; teksto dekoravimas: nėra; fono spalva: #000000; fonas: -webkit-gradient(linijinis, kairėje viršuje , kairėje apačioje, nuo(#246416), iki(#349622)); fonas: -moz-linear-gradient(top, #246416, #349622); filtras: progid:DXImageTransform.Microsoft.gradient(startColorstr="# 246416" ", endColorstr="#349622"); -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#246416, endColorstr=#349622)"; ) /* Spustelėjus - mygtuko stilius, kai spustelėsite jį beveik toks pat kaip ir ankstesniame bloke */ .wpcf7 input.wpcf7-submit:active( viršuje: 1px; spalva: #d8c6e2; /* Mygtuko teksto spalva spustelėjus */ fono spalva: #000000; fonas : -webkit-gradient( linijinis, kairėje viršuje, kairėje apačioje, nuo(#FF0000), iki(#246416)); fonas: -moz-linear-gradient(top, #FF0000, #246416); filtras: progid:DXImageTransform .Microsoft.gradient(startColorstr ="#FF0000", endColorstr="#246416"); -ms-filter: "progid:DXImag eTransform.Microsoft.gradient(startColorstr=#FF0000, endColorstr=#246416)"; -webkit-box-shadow: nėra; -moz-box-shadow: nėra; langelis-šešėlis: nėra ) /* CF7 pranešimai – pranešimų apie sėkmingą siuntimą, klaidas ir pan. stilius. */ .wpcf7 .wpcf7-validation-errors( /* Patvirtinimo klaidų pranešimo stilius */ border:none; /* Pranešimo bloko kraštinė */ background-color:#246416; /* Fonas */ spalva: #fff; /* Teksto spalva */ paraštė: 0; /* Išorinis užpildymas */ užpildymas: 20 pikselių; /* Vidinis užpildymas */ /* Naršyklės kampų apvalinimas – šios 3 savybės */ -webkit-border-radius: 10px; -moz- border -radius: 10px; border-radius: 10px; ) .wpcf7 .wpcf7-mail-sent-ok( /* Sėkmingo pranešimo stilius */ border:none; /* Pranešimo bloko kraštinė */ background-color:#7ad33f; / * Fonas */ paraštė: 0; /* Išorinis užpildymas */ užpildymas: 20 pikselių; /* Vidinis užpildymas */ /* Naršyklės kampų apvalinimas – šios 3 savybės */ -webkit-border-radius: 10px; -moz- border-radius: 10px; border-radius: 10px; .wpcf7 .wpcf7-mail-sent-ng( border:none; background-color:#349622; margin:0; padding:20px; -webkit-border-radius: 10 taškų nd-color:#349622; pamušalas: 5px; užpildymas kairėje: 5 pikseliai užpildymas dešinėje: 5 pikseliai; kraštinės spindulys: 10 pikselių; plotis: 290px spalva: balta; /* Drop shadow */ -webkit-box-shadow: 3px 3px 3px rgba(0,0,0,0. 3); -moz-box-shadow: 3px 3px 3px rgba(0,0,0,0,3); langelis-šešėlis: 3px 3px 3px rgba(0,0,0,0,3); ) .wpcf7-form .fleft( float: left; ) .wpcf7-form .mright20( margin-right: 20px; ) .wpcf7-form .mright40( margin-right: 40px; ) .wpcf7-form .clear( clear: abu ;)
Naudodami 7 kontaktinę formą galite tvarkyti daugybę kontaktinių formų, kuriose galite lanksčiai tinkinti formų ir laiškų turinį naudodami gana paprastą žymėjimą. Formose yra integruotas Ajax pateikimo, CAPTCHA, Akismet šlamšto filtro ir kt. palaikymas.
Dokumentacija ir pagalba
Ekrano nuotraukos
Montavimas
- Įkelkite visą kontaktinės formos-7 aplanką į /wp-content/plugins/ katalogą.
- Suaktyvinkite papildinį „WordPress“ prietaisų skydelio puslapyje „Papildiniai“.
„WordPress“ prietaisų skydelio meniu rasite skirtuką „Atsiliepimai“.
Norėdami sužinoti, kaip tinkamai naudoti papildinį, galite apsilankyti jo pagrindiniame puslapyje.
Atsiliepimai
Matau, kad daugelis žmonių nekenčia šio papildinio, nes naudoja nepalaikomą versiją, kuri yra įtraukta į temą. Iš savo patirties galiu pasakyti tik tiek, kad po kelerių metų naudojimo daugelyje svetainių esu didelis ačiū. kūrėjams, kurie jį nuolat atnaujina ir visiems nemokamai. Tai labai lengva nustatyti ir tinkinti. Sveikinu!
Nariai ir kūrėjai
„Kontaktinė forma 7“ yra atvirojo kodo projektas. Prie papildinio kūrimo prisidėjo šie bendradarbiai:
NariaiPakeitimų žurnalas
Norėdami gauti daugiau informacijos, žr. leidimus.
5.1.6
- CSS: pašalina stiliaus taisyklę iš stiliaus lapo, kuri buvo nereikalinga ir prieštarauja Twenty Twenty taisyklėms.
- REST API: aiškiai nuskaito kontaktinės formos ID iš maršruto parametrų.
5.1.5
- Konfigūracijos tikrintuvas: naujas unavailable_html_elements klaidos bandomasis elementas.
- Konfigūracijos tikrintuvas: naujas bandomasis elementas, skirtas priedai_overweight klaidai.
5.1.4
- reCAPTCHA: Pristatome WPCF7_RECAPTCHA_SITEKEY ir WPCF7_RECAPTCHA_SECRET konstantas.
- reCAPTCHA: Pristatome wpcf7_recaptcha_sitekey ir wpcf7_recaptcha_secret filtrų kabliukus.
- $status parametro įtraukimas į wpcf7_form_response_output filtrą.
- Sugeneruoja atsitiktinį kodą, kai vartotojas yra registruotas vartotojas.
- Pristatome WPCF7_ContactForm::unit_tag(), viešą metodą, kuris grąžina vieneto žymą.
- reCAPTCHA: jei atsakymo raktas tuščias, šlamšto žurnalui pateikiamas kitoks pranešimas.
- Sutikimo žyma: sutikimo formos žymos parinkties label_first palaikymas.
5.1.3
- Ištaisyta klaida, dėl kurios buvo neįmanoma panaikinti parinkties Pašto skirtuke.
5.1.2
- Nuolatinis kontaktas: įvestas kontaktų sąrašo parinkiklis.
- Nuolatinis kontaktas: buvo įvestas papildomas nustatymas konstanta_kontaktas.
- reCAPTCHA: pristatyti wpcf7_recaptcha_actions ir wpcf7_recaptcha_threshold filtro kabliukai.
5.1.1
- reCAPTCHA: pakeičia atsakymą į tuščius atsakymo žetonus.
5.1
- Pristatytas nuolatinio kontakto integravimo modulis.
- Atnaujintas reCAPTCHA modulis, kad palaikytų reCAPTCHA v3.
- Prideda tamsaus režimo stiliaus taisykles.
5.0.5
- Ištaisyta nesutapimo problema tarp get_data_option() ir get_default_option() WPCF7_FormTag klasėje.
- Nutildo PHP klaidas, atsirandančias unlink() iškvietimų metu.
- Pristatytas wpcf7_is_file_path_in_content_dir(), kad palaikytų konstantą UPLOADS.
5.0.4
- Aiškiai nustato argumentą power_type iškvietime register_post_type(), kad išspręstų neteisėto privilegijų eskalavimo problemą.
- Vietinio failo pridėjimas – draudžiama nurodyti absoliučius kelius į failus, esančius už wp-content katalogo ribų.
- Konfigūracijos tikrintuvas – prideda bandomąjį elementą, kad aptiktų neteisingus priedo failo nustatymus.
- Ištaisyta „JavaScript“ atgalinio suderinamumo funkcijos, skirtos senoms naršyklėms, kurios nepalaiko HTML5 rezervuotos vietos atributo, klaida.
- Sutikimo žymės langelis – išjungia formos žymos nesaugojimo funkciją.
5.0.3
- CSS: taikykite žymeklio stilių „neleidžiama“, kai užveskite pelės žymeklį virš pateikimo mygtukų išjungtoje būsenoje.
- Sutikimo žyma: žymų generatoriaus vartotojo sąsajos peržiūra, siekiant paskatinti naudoti geresnes privatumo apsaugos parinktis.
- Funkcijos wpcf7_anonymize_ip_addr() įgyvendinimas.
- Pristatoma sutikimo_for:storage parinktis visiems formos žymų tipams.
5.0.2
- Prie readme.txt failo pridėta skiltis „Privatumo pranešimai“.
- Atnaujintas informacijos metabloko turinys.
- Vietoj get_locale() naudokite get_user_locale(), kur labiau tinka.
- Sutikimo žymės langelis: iš naujo nustatykite išjungtų pateikimo mygtukų būseną po sėkmingos paraiškos.
5.0.1
- Ištaisytas neteisingas _n() naudojimas.
- Konfigūracijos patikrinimas: ištaisytas neteisingas įspėjimų skaičius skirtuke Išplėstinės parinktys.
- Konfigūracijos patikrinimas: ištaisytas neteisingas specialios [_site_admin_email] el. pašto žymos tvarkymas antraštės lauke „Nuo“.
- Priėmimo vėliavėlė: nurodyti klasės ir ID atributai buvo pritaikyti netinkamam HTML elementui.
- Konfigūracijos patikrinimas: jei pašto dėžutėse, pvz., Cc arba Reply-To, yra pasirenkama pašto antraštė, bet galima tuščia reikšmė, bus grąžinta klaida „Neteisinga pašto dėžutės sintaksė“.
- Aiškiai nurodykite ketvirtąjį parametrą add_action(), kad išvengtumėte nenumatytų parametrų verčių perdavimo.
- Prieš ištrindami patikrinkite, ar tikslinis katalogas yra tuščias.
5.0
- Papildomi nustatymai: on_sent_ok ir on_submit buvo pašalinti.
- Naujas papildomas nustatymas: skip_mail.
- Flamingo: gaunamo kanalo pavadinimas keičiasi kartu su atitinkamos kontaktinės formos pavadinimu.
- DOM renginiai. Visas API atsako objektas pasiekiamas naudojant ypatybę event.detail.apiResponse.
- HTML paštas: prideda su kalba susijusių atributų į HTML antraštę.
- Failo įkėlimas: įkėlimo lauke nustato atributą priimti.
- Pristatyta nauja WPCF7_MailTag klasė.
- Leidžia nutraukti bandymą siųsti laiškus naudojant wpcf7_before_send_mail veiksmų kabliuką. Taip pat galite nustatyti pasirinktinę būseną ir pranešimą naudodami veiksmų perėmėją.
- Priėmimo žymės langelis: leidžia nurodyti sąlygas formos žymos turinio dalyje.
- Priėmimo žymimasis laukelis: palaiko pasirenkamumo parametrą.
- Naujos tinkintos pašto žymos: [_site_title], [_site_description], [_site_url], [_site_admin_email], [_invalid_fields], [_user_login], [_user_email], [_user_url], [_user_first_name], [_user_name], [_user_name, [_us] [_user_display_name].
- Nauji filtro kabliukai: wpcf7_upload_file_name, wpcf7_autop_or_not, wpcf7_posted_data_($type) ir wpcf7_mail_tag_replaced_($type)
- Naujos formos žymų funkcijos: nulinis valdymas – konteineris ir ne paštui
