Këshilla, këshilla, sekrete. Këshilla, hakime, sekrete CSS e gatshme për formularin e kontaktit 7

Pas instalimit të shtojcës së Formularit të Kontaktit 7 dhe shfaqjes së formularit në faqe, duket diçka si kjo.

Dakord, jo shumë ekspresive. Por pamja e saj mund të korrigjohet lehtësisht.

Nëse jeni të kënaqur të ndryshoni/shtoni stile CSS, ndoshta do të dëshironi të filloni me stilimi në terren.

Hyrja Wpcf7, hyrja .wpcf7, zona e tekstit .wpcf7 ( /* stilet këtu: ngjyra, sfondi, fonti, madhësia, kufijtë, etj. */ )

Më pas mund t'i ndryshoni stilet për të përmirësuar më tej përshtatjen me temën tuaj. për të gjithë formën.

Wpcf7 ( /* stilet këtu: ngjyra, sfondi, fonti, madhësia, kufijtë, etj. */ )

Si të vendosni një stil vetëm për një fushë specifike? Le të themi se dëshironi të ndryshoni stilet për një fushë opsionale ' Subjekti', e cila është e pranishme në formë si parazgjedhje pas aktivizimit të shtojcës.

Thjesht duhet të shtoni ID-në për fushën e dëshiruar në shabllonin e formularit.

Subjekti [ teksti juaj-subject id:fb-subject ]

Pastaj mund të shtoni stilet tuaja CSS.

#fb-subject ( /* stilet këtu: ngjyra, sfondi, fonti, madhësia, kufijtë, etj. */ )

Ju nuk keni nevojë të jeni një programues ueb ose një ekspert kompjuteri për të krijuar një dizajn të thjeshtë por të bukur të formularit të komenteve. Ju mund të gjeni lehtësisht të gjitha informacionet e nevojshme në internet, së bashku me shembuj dhe shpjegime.

Këtu është një shtesë tjetër Stilet e formularit për formularin e kontaktit 7 me stile të paracaktuara të thjeshta por të lezetshme.

Forma e thjeshtë dhe e pastër e kontaktit - Formulari i kontaktit i pastër dhe i thjeshtë— me shënjimin e Bootstrap, Google captcha dhe filtrat e spamit. Nga rruga, ju lutemi vini re, kjo është një shtojcë mjaft e njohur.

Nëse kërkoni vetë në internet, jam i sigurt se do të gjeni modele dhe stile të shumta për Formularin e Kontaktit 7.

Por nëse shpenzoni pak kohë për stilimin, mund të krijoni një pamje unike për formularin tuaj të kontaktit për të cilin jo vetëm do të jeni krenarë, por gjithashtu do të merrni shumë mesazhe nga audienca juaj sepse ata do të kënaqen duke shkruar në të dhe duke ju dërguar email. . 🙂

Shtojca popullore e formës së kontaktit 7 nuk është veçanërisht e bukur në formën e saj standarde, kështu që për shumë përdorues lind pyetja se si të ndryshojnë pamjen. Kjo është pikërisht ajo që ne do të bëjmë tani, unë do të përpiqem t'ju jap një opsion universal që është i përshtatshëm për çdo sit.

Unë kam folur tashmë për këtë më parë, por le të mos flasim për këtë tani, por le të kalojmë drejtpërdrejt në ndryshimet e nevojshme të dizajnit.

Së pari, na duhet një skedar style.css, ai mund të gjendet në skedën "Dukja" / "Redaktori". Si parazgjedhje, skedari që ju nevojitet do të hapet. Unë rekomandoj hapjen e disa skedave në shfletuesin tuaj:

1. Skeda e Formularit të Kontaktit 7 për modifikimin e formularit.
2. Një faqe në faqen e internetit me një formular reagimi.
3. Një redaktues me një skedar të hapur CSS.

Skedat janë të hapura, le të fillojmë të bëjmë ndryshime, së pari do të shkulim pak formën tonë.

Shtimi i klasave në Formularin e Kontaktit 7.

Kur hapim formularin për redaktim, do të shohim diçka si fotografia e mëposhtme:

Ky formular i komenteve do të duket diçka si kjo:

Është e mërzitshme, jashtë proporcionit dhe sinqerisht, jo e bukur.

Për të ndryshuar pamjen e formularit, duhet të bëjmë pak stilim, por së pari do të shtojmë disa klasa në shabllonin e formularit. Për ta bërë këtë, hapni formularin për redaktim (si në foton e mësipërme) dhe shtoni klasat e mëposhtme:

Ka pak për të shkruar, kështu që është e vështirë të bësh gabime. Ju ndoshta keni gjetur këshilla në internet pa përdorur ose shtuar klasa. Puna është se pa shtuar klasa mund të lindin disa probleme. Për shembull, ju dëshironi të shtoni disa forma në sit në të njëjtën kohë, të gjithë do të marrin një formë identike, dhe kjo nuk është gjithmonë e përshtatshme, kështu që duhet të përdorni opsionin që propozova.

Klasat janë shtuar, asgjë nuk ka ndryshuar ende, hapi tjetër është përcaktimi i ID-së së formularit.

Përcaktoni ID-në e formularit në faqe.

Së pari ju duhet të kuptoni se e njëjta formë do të ketë ID të ndryshme në faqe të ndryshme të faqes, kështu është projektuar shtojca, ai shton një parametër shtesë sa herë që thirret formulari. Tani le të hedhim një vështrim më të afërt.

Për të modifikuar formularin, duhet ta shtoni atë në faqe ose ta postoni në vendin e kërkuar, domethënë të vendosni kodin e shkurtër. Pas kësaj, shkoni në këtë faqe dhe klikoni me të djathtën në formular dhe zgjidhni "Shiko kodin" ky është për shfletuesin Chrome, nëse keni një tjetër, atëherë ka përafërsisht të njëjtin tekst.

Në kodin që hapet, ne kërkojmë fillimin e formës sonë, duket kështu:

Ky do të jetë id i formularit. Duke u kthyer prapa, do t'ju tregoj se çfarë id ka e njëjta formë në një faqe tjetër.

Siç mund ta shihni, identifikuesi ndryshon vetëm në disa shifra. Prandaj, së pari duhet të vendosni se në cilën faqe do të vendoset formulari dhe vetëm atëherë të filloni të redaktoni stilet.

Epo, hapi tjetër është bërë, ne kemi përcaktuar ID-në, kemi regjistruar klasat tona, tani le të vazhdojmë drejtpërdrejt me ndryshimin e pamjes.

Stilimi i formularit të kontaktit 7, duke punuar me skedarin style.css

Duke parë përpara, do të them se opsioni që propozova nuk ka gjasa të duket ideal për ju. Fakti është se kushdo që lexon këto rreshta dëshiron të shohë formën e tyre pikërisht ashtu siç e imagjinon. Unë nuk jam telepat dhe nuk do të jem në gjendje t'i kënaq të gjithë, por do të përpiqem t'ju jap një këshillë se ku dhe ku të kërkoni informacione dhe çfarë të ndryshoni. Ndaj më falni menjëherë për zhgënjimin e mundshëm, nuk ka ilaç, do të duhet të punoni pak.

Ndryshoni ngjyrën e sfondit, dhëmbëzimin dhe fontin e formularit.

Pasi të ketë përfunduar puna, kalojmë te stilet. Së pari, le të ndryshojmë (nëse është e nevojshme) ngjyrën e sfondit të formularit, të rregullojmë indencat tona, të zgjedhim fontin e kërkuar dhe ngjyrën e tekstit. Ne do t'i kryejmë të gjitha këto cilësime duke ditur paraprakisht ID-në. Ne diskutuam se si ta njohim atë më lart.

Së pari, le të shkojmë te skedari style.css, shtojmë rregullat e para për ID-në e formularit (duhet ta shtoni në fund të skedarit), në rastin tim është wpcf7-f172-p34-o1, ju duhet të zëvendësoni ID-në tuaj:

#wpcf7-f172-p34-o1 (
diferenca: 5 px;
mbushje: 10 px;
sfond: #B3AFAF;
font-familja: Georgia, “Times New Roman”, Times, serif;
ngjyra: #000;
}

Tani le të shohim gjithçka në më shumë detaje:

1. Fillimisht, le të merremi me dhëmbëzat. Mbushje e jashtme (nga buza në fillim të formularit) - diferencë: 5 px, mbushje e brendshme (nga fillimi i formularit deri te elementët e brendshëm) - mbushje: 10 px.
2. Plotësimi i formularit ose sfondi i tij përcaktohet nga vetia e sfondit: #B3AFAF, ju mund të zgjidhni çdo ngjyrë që ju pëlqen thjesht duke zëvendësuar vlerën.
3. Ne vendosim për familjen e shkronjave; nëse nuk dëshironi ta ndryshoni atë, mund ta kapërceni këtë rregull (font-familja: Georgia, "Times New Roman", Times, serif).
4. Ngjyra e tekstit përcaktohet nga vetia e ngjyrës, e cila aktualisht është vendosur në të zezë (ngjyra: #000).

Ju mund të eksperimentoni vetë me këto parametra, të zgjidhni indencat, ngjyrat dhe shkronjat. Për ta bërë këtë, ju vetëm duhet të ndryshoni vlerën, të ruani opsionin e ri, të rifreskoni faqen dhe të shihni ndryshimet. Mos kini frikë të eksperimentoni, nuk do të mund të prishni asgjë këtu; në raste ekstreme, stilet thjesht nuk do të funksionojnë dhe ju lehtë mund të rregulloni gjithçka ashtu siç ishte.

Ne përcaktojmë indencat midis fushave dhe ndryshojmë kornizën.

Le të kalojmë te fushat tona, të shtojmë dhëmbëzimet:

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

Këto janë dhëmbëza përgjatë skajeve të fushave në mënyrë që teksti dhe blloqet të mos bashkohen në një tërësi.

Faza tjetër do të jenë kornizat, unë do të jap versionin tim dhe ju mund të gjeni shumë opsione në internet që ju pëlqejnë dhe t'i zëvendësoni.

hyrje #wpcf7-f172-p34-o1, tekste (
kufiri: 3px double #000;
}

Pak më shumë rreth kornizës. Një vlerë prej 3 px është gjerësia e kornizës, dyfishi përdoret dy herë (nëse nuk nevojitet, mund ta hiqni këtë fjalë), #000 ngjyra e kornizës, mund të zgjidhni edhe tuajën.

Ndryshoni gjerësinë e fushave dhe vendndodhjen e tyre.

Emri-cf (
float:majtas;
mbushje: 2 px;
}
Hyrja .name-cf (
gjerësia: 270 px;
}
Hyrja .thems-cf (
gjerësia: 100%;
}
. qartë-cf (
qartë: të dyja;
}
.text-cf textarea (
gjerësia: 100%;
}

Tani le të shohim gjithçka në më shumë detaje:

1. Klasa e parë që do t'i drejtohemi emri-krh i përket fushave me emër dhe email. Për ta kemi vendosur një diferencë prej 2 px ( mbushje: 2 px) dhe rrjedhin ( noton: majtas) për të rreshtuar dy fusha në një rresht.
2. Më pas, ne do të rregullojmë gjerësinë e fushave duke i vendosur ato në madhësinë optimale (për shabllonin tim) prej 270 px ( Hyrja .name-cf ( gjerësia: 270 px; )). Nëse kufijtë tuaj janë ende një rresht ose madhësia është shumë e vogël, zgjidhni opsionin tuaj.
3. Ne do të bëjmë që fusha me emrin e temës të mbushë të gjithë gjerësinë e formularit, pasi mund të ketë më shumë tekst atje (.thems-cf input (gjerësia: 100%;)). Nëse doni tuajën, ju lutemi tregoni vlerën e saktë në pixel.
4. Blloku tjetër që kemi shtuar në formular është krijuar për të anuluar rrjedhën ( Hyrja .thems-cf (gjerësia: 100%; )).
5. Ashtu si në rastin e mëparshëm, ne e bëjmë fushën me tekstin e mesazhit me gjerësi të plotë ( text-cf textarea (gjerësia: 100%;)).

Mund të përditësoni skedarin e stilit dhe të shikoni ndryshimet, nëse është e nevojshme, të rregulloni madhësitë për t'iu përshtatur nevojave tuaja.

Lidhni butonin "Dërgo" në qendër, ndryshoni sfondin dhe gjerësinë.

Le të shkojmë te butoni ynë, ta rreshtojmë në qendër dhe të shtojmë një sfond:

Paraqisni-kf (
gjerësia: 200 px; /*gjerësia e bllokut*/
lartësia: 25 px; /*lartësia*/
marzhi: 0 auto; /* Mbushje majtas dhe djathtas */
}
.submit-cf input (
gjerësia: 200 px;
sfond:#96B195;
}

Tradicionalisht, unë shpjegoj se çfarë është:

1. Rregulli i parë është të përcaktoni gjerësinë dhe lartësinë e bllokut në të cilin do të vendoset butoni dhe ta vendosni atë në qendër të formularit.
2. Rregulli i dytë është të vendosni ngjyrën e sfondit të butonit ( sfond:#96B195, nëse nuk e specifikoni do të jetë me të njëjtën ngjyrë si të gjitha fushat e tjera), vendosni gjerësinë e butonit ( gjerësia: 200 px, është e dëshirueshme që të jetë e njëjtë me gjerësinë e bllokut, në mënyrë që butoni të mos lëvizë anash).

Ne ruajmë cilësimet tona dhe shohim se çfarë kemi marrë:

Jam dakord që nuk është aspak elegancë, por në përgjithësi duket adekuate, më poshtë është forma e paracaktuar, mendoj se efekti është i dukshëm. Gjithsesi mësuam ndryshoni pamjen e Formularit të Kontaktit 7.

Shpresoj se artikulli ishte i dobishëm për ju, por nëse diçka nuk shkon ose keni ndonjë problem, lini një koment dhe unë do të përpiqem të përgjigjem (korrekt).

Ky material do të përshkruajë në detaje konfigurimin e Formularit të Kontaktit 7, një shtojcë për një platformë kaq të njohur për krijimin dhe promovimin e sajteve në World Wide Web si WordPress. Ky mjet softuerësh ju lejon të krijoni dhe konfiguroni formularët e komenteve.

Pak për WordPress

Një nga mjetet më të njohura dhe më të përhapura për zhvillimin dhe plotësimin e burimeve të informacionit është WordPress. Fillimisht, ky produkt softuer u fokusua në krijimin e blogjeve të thjeshta. Por më pas specialistë të specializuar plotësuan funksionalitetin e tij, gjë që bëri të mundur krijimin e burimeve të tjera të Internetit duke përdorur këtë sistem të menaxhimit të përmbajtjes.

Pikat e forta dhe të dobëta të kësaj platforme për krijimin dhe promovimin e faqeve të internetit

Përparësitë e kësaj platforme softuerike janë:

Thjeshtësia dhe kodi me burim të hapur.

Një sasi mbresëlënëse informacioni referimi.

Aftësia për të zhvilluar çdo burim tematik në internet në kohën më të shkurtër të mundshme.

Performancë e lartë pa shtesa softuerike (shtojca shtesë).

Por disavantazhet në këtë rast janë si më poshtë:

Faqet e internetit të ndërtuara në WordPress nuk do të jenë në gjendje të përballojnë ngarkesa të rënda.

Ka një rënie në shpejtësinë e burimit të Internetit kur instaloni mini-programe shtesë ose, siç quhen gjithashtu, shtojca.

dhe pse u duhen faqet e bazuara në platformën WordPress?

Funksionaliteti bazë i një sistemi të menaxhimit të përmbajtjes si WordPress është shumë modest. Mjafton vetëm të zhvilloni blogjet dhe faqet e internetit më të thjeshta. Për të përmirësuar disi situatën me funksionalitetin e platformës softuerike dhe për të shtuar fleksibilitet në të, zhvilluesit duhet të instalojnë mini-programe speciale, të cilat në zhargonin profesional quhen shtojca. Një prej tyre është Formulari i Kontaktit 7. Vendosja e shtojcës ju lejon të krijoni një formular reagimi me një nivel të zgjeruar funksionaliteti në një faqe specifike të sistemit të menaxhimit të përmbajtjes.

Specializimi "Formularët e Kontaktit 7"

Siç u përmend më herët, krijimi i reagimeve midis vizitorit dhe administratorit të një burimi interneti bazuar në platformën WordPress është detyra kryesore e Formularit të Kontaktit 7. Vendosja e postës, redaktimi i një shablloni, dërgimi i skedarëve të ndryshëm nuk është një listë e plotë e aftësive që kjo ofron mini-program. Në këtë rast, ngarkesa në burimet e harduerit të faqes do të jetë relativisht e vogël dhe prania e saj nuk do të çojë në një rënie të konsiderueshme të performancës së faqes ose blogut.

Procedura e instalimit të shtojcave

Ekzistojnë tre mënyra për të instaluar shtojca në platformën WordPress:

Duke shkarkuar një arkiv ZIP nga World Wide Web dhe duke e "ngarkuar" atë në drejtorinë e duhur të burimit të Internetit.

Përdorimi i llojeve të ndryshme të klientëve FTP.

Më e sigurta nga tre opsionet për instalimin e shtojcave është ajo e fundit. Në këtë rast, kodi i programit shkarkohet nga faqja zyrtare e internetit dhe definitivisht nuk përmban lloje të ndryshme të fragmenteve me qëllim të keq, të rrezikshëm. Procedura për instalimin e shtojcës në këtë rast është si më poshtë:

Shkoni te paneli i administratorit të WordPress.

Pastaj duhet të kaloni në seksionin "Plugins".

Në dritaren që hapet, zgjidhni "Shto të re".

Në shiritin e kërkimit, futni emrin e shtojcës - Forma e Kontaktit 7 - dhe më pas lëvizni treguesin e miut mbi butonin "Kërko" dhe klikoni një herë. Pas kësaj, operacioni i kërkimit për softuerin e kërkuar do të fillojë.

Pas përfundimit, do të shfaqet një listë e shtojcave të gjetura. Në këtë listë gjejmë atë që na nevojitet dhe klikojmë në butonin e emërtuar "Instalo", i cili ndodhet përballë tij.

Pas kësaj, sistemi i menaxhimit të përmbajtjes do të shkarkojë dhe instalojë automatikisht këtë shtojcë.

Hapi tjetër është aktivizimi i softuerit të instaluar. Për ta bërë këtë, shkoni te skedari "Plugins" dhe gjeni në listë Formularin e Kontaktit 7. Pranë tij është mbishkrimi: "Aktivizo", klikoni mbi të një herë me miun.

Ne përditësojmë panelin administrativ të sistemit të menaxhimit të përmbajtjes dhe gjejmë Formularin e Kontaktit7 midis artikujve të tij. Ky është kushti për instalimin e suksesshëm të kësaj shtojce popullore dhe funksionale.



Algoritmi i konfigurimit për "Formularët e Kontaktit 7"

Vendosja e Formularit të Kontaktit 7 përbëhet nga artikujt e mëposhtëm:

Krijimi i një forme të re ose redaktimi i një të vjetër që u krijua gjatë instalimit të shtojcës. Përvoja tregon se në shumicën e rasteve është më mirë të përdoret opsioni për të krijuar një formë të re.

Në fazën tjetër, zgjidhni gjuhën e formularit dhe vendosni emrin e saj.

Pastaj ju duhet të rikonfiguroni shabllonin e tij nëse është e nevojshme.

Ruani ndryshimet e bëra.

Ne krijojmë një faqe të re me kodin e marrë më parë.

Në fazën përfundimtare, duhet të shkoni në faqen e internetit dhe të kontrolloni funksionimin e saktë të elementit të krijuar të ndërfaqes së burimit të Internetit.

Krijo një formë të re

Menjëherë pas aktivizimit, kjo shtojcë krijon një formë të paracaktuar për të bërë pyetje nga vizitorët e faqes ose blogut. Sigurisht, mund të modifikohet dhe personalizohet sipas nevojës. Por do të jetë shumë më e lehtë për ta fshirë këtë dhe për të krijuar një të re me një grup të plotë të të gjithë funksionaliteteve të nevojshme. Për ta bërë këtë ju duhet të bëni sa më poshtë:

Shkoni te menyja e kësaj shtojce dhe zgjidhni "Forms".

Në dritaren që hapet pas kësaj, duhet të kontrolloni kutinë pranë artikullit "Formulari i Kontaktit1".

Pastaj, mbi të, në listën rënëse "Veprimet", zgjidhni "Fshi".

Si përgjigje, do të shfaqet një pyetje për të konfirmuar veprimet që po kryhen. Ju duhet të konfirmoni fshirjen e formularit dhe të klikoni në butonin "Po".

Tjetra, zgjidhni artikullin e menysë: "Krijo të re" në panelin administrativ "Wordpress" "Formulari i kontaktit 7".

Në dritaren që hapet, në listën rënëse, zgjidhni gjuhën e ndërfaqes së formularit të ardhshëm - "Rusisht". Pastaj klikoni në butonin "Krijo".

Pas kësaj, kodi fillestar për formularin e ri të komenteve për WordPress do të gjenerohet si parazgjedhje. Pas kësaj, do t'ju duhet të kryeni operacione të tilla si konfigurimi i Formularit të Kontaktit 7.

Vendosni emrin e formularit

Pas përfundimit të të gjithë hapave të mëparshëm, do të shfaqet një dritare për futjen e emrit të formularit të ri në Formularin e Kontaktit 7 Style. Vendosja e kësaj fillon me këtë operacion të thjeshtë nga njëra anë. Por është më mirë të jepni emrin e formularit bazuar në optimizimin e motorit të kërkimit. Prandaj, opsioni më optimal në këtë rast do të ishte, për shembull, "Formulari i komenteve" ose "Bëni një pyetje administratorit të faqes". Pasi të kemi vendosur për emrin e këtij elementi ndërfaqe, futeni atë në fushën përkatëse të dritares së kërkesës.



Redaktimi i shabllonit "Formularët e Kontaktit 7".

Në të njëjtën dritare me emrin e formularit të krijuar ka 4 skeda. E para është "Model". Si parazgjedhje, këtu formohen vetëm 5 elementë:

Vendi për të shtypur emrin e vizitorit në burimin e Internetit.

Fusha për të futur adresën e emailit të vizitorit që bëri pyetjen.

Një fushë tjetër ju lejon të futni temën e pyetjes.

Elementi i fundit i formularit si parazgjedhje është një buton i emërtuar "Dërgo".

Nëse është e nevojshme, teksti në këtë fushë mund të modifikohet dhe mund të shtohen elementë të tjerë të ndërfaqes. Për ta bërë këtë, thjesht zgjidhni kodin e çdo elementi teksti (për shembull, atë pjesë të kodit ku tregohet tema e mesazhit dhe kopjoni atë duke përdorur menynë e kontekstit në të njëjtën fushë në një vend tjetër. Në të djathtë ka parametra (do të diskutohet në detaje në paragrafin tjetër) në të cilin zgjidhni elementin që na intereson. Pas kësaj, kodi i nevojshëm do të shfaqet pranë listës rënëse. Më pas, kopjoni këtë kod dhe ngjisni atë në vend të mesazhit kodi i lëndës. Zgjidhni emrin e elementit sipas gjykimit tuaj.

Vendosja e gjatësisë së fushave dhe më shumë

Në të njëjtin vend mund të ndryshoni hyrjen në formularin e kontaktit 7. Rregullimi i gjerësisë së çdo fushe teksti bëhet si më poshtë:

Për shembull, është e nevojshme të rritet numri i karaktereve në emër të një vizitori në një burim në internet në 55. Si parazgjedhje ka 40.

Për ta bërë këtë, shtoni numrat 60/55 në fund të kodit. Rezultati do të jetë kodi. Pas ruajtjes së ndryshimeve, gjatësia e kësaj fushe do të jetë 60, dhe numri maksimal i karaktereve që mund të futen në të do të jetë 55.

Ju mund të ndryshoni madhësinë e fushës së tekstit të mesazhit në të njëjtën mënyrë. Vetëm në këtë rast është e nevojshme të ndryshohet kodi i këtij elementi si më poshtë. Në këtë rast, 40 është numri i shkronjave në një rresht dhe 30 është numri i përgjithshëm i termave në këtë element ndërfaqe në Formularin e Kontaktit 7. Vendosja e pamjes së vetë formularit bëhet pikërisht duke zgjedhur vlerat e parametrave të secilit element individual. Prandaj, rekomandohet të specifikoni vlera specifike për çdo parametër të dhënë në këtë seksion në kodin e secilit element.



Skeda të tjera të formave

Siç u përmend, skeda e parë quhet "Form Model". Tjetra në këtë dritare është "Letra". Ai specifikon parametrat e vendndodhjes në të cilën do të dërgohet posta nga ky burim i Internetit. Në skedën "Njoftimi", krijohet teksti i mesazhit, i cili do të shfaqet nëse letra dërgohet me sukses. Ekziston gjithashtu mundësia për të përgatitur një mesazh në rast se nuk jeni në gjendje të kontaktoni administratorin e faqes duke përdorur mjete. Skeda e fundit në Formularin e Kontaktit 7 është "Cilësimet e Avancuara". Ai përmban ato parametra që përdoren shumë, shumë rrallë në praktikë. Për shembull, mund ta përdorni për të vendosur gjurmimin e tekstit të futur nga përdoruesi duke përdorur metrikat Yandex.

Fushat që mund të shtohen duke përdorur këtë shtojcë në këtë formë

Vendosja e Formularit të Kontaktit 7 për Wordpress ju lejon të shtoni elementët e mëposhtëm të ndërfaqes në formularin e komenteve:

• Një fushë testimi është një element universal i ndërfaqes në të cilin mund të futni çdo grup karakteresh.

  E-Mail - vendi për të futur emrin e kutisë postare elektronike.

  URL - fushë për futjen e adresës së një faqe interneti.

  Numri i telefonit—ju lejon të futni një numër telefoni në format ndërkombëtar.

  Elementi "Numri (spinbox)" ju lejon të krijoni një fushë hyrëse për çdo vlerë të plotë (për shembull, mosha e vizitorit).

  Elementi "Numër (Rrëshqitës)" shton një rrëshqitës në formular që ju lejon të zgjidhni një vlerë numerike nga një gamë e caktuar.

  Artikulli "Data" krijon një fushë të veçantë të hyrjes në të cilën mund të specifikoni datën e kërkuar. Kur aktivizoni këtë element ndërfaqe, në fund shfaqet një kalendar, në të cilin mund të zgjidhni menjëherë datën e kërkuar.

  Nga ana tjetër, artikulli i menusë rënëse "Fusha e tekstit" është menduar për të shtypur pjesën e tekstit të emailit.

  Artikulli tjetër - "Menyja rënëse" - ju lejon të zgjidhni parametrin e kërkuar nga një listë fikse.

  Por "Checkboxes" ka për qëllim zgjedhjen e një ose më shumë vlerave nga një listë e caktuar.

  Elementi i ndërfaqes "Butonat e radios" është pothuajse identik me atë të mëparshëm. I vetmi ndryshim është se në këtë rast ju mund të zgjidhni vetëm një opsion të saktë, ndërsa "Checkboxes" mund të ketë disa vlera të sakta.

  Artikulli "Pranimi" ju lejon të shtoni vetëm një kuti kontrolli në formularin e krijuar. Si rregull, përdoret për t'u njohur me çdo kusht dhe pa i pranuar ato, nuk do të jetë e mundur të dërgoni një email në të ardhmen.

  Artikulli "Menu" ju lejon të krijoni një seksion të veçantë në ndërfaqen që do të mbrojë kutinë tuaj postare nga spam. Në këtë rast, do t'ju duhet të jepni përgjigjen e saktë të pyetjes përpara se ta dërgoni.

  Opsioni i dytë i sigurisë është CAPTCHA. Kur e zgjidhni, formularit do t'i shtohet një seksion i veçantë, i cili do të shfaqë një foto me simbole dhe një fushë shtesë për futjen e tyre.

  Artikulli tjetër është "Dërgimi i një skedari". Ju lejon të shtoni një skedar me lloje të ndryshme shpjegimesh dhe komentesh në tekstin e letrës për administratorin e burimit.

  Artikulli i fundit - "Butoni Dërgo" - ju lejon të shtoni një element përkatës të ndërfaqes.

Ruani ndryshimet e bëra

Pasi të vendosen vlerat e kërkuara dhe forma të jetë konfiguruar siç duhet, duhet t'i ruani të gjitha. Për ta bërë këtë, në dritaren e redaktimit të shtojcave, shkoni në pjesën e sipërme të saj. Këtu duhet të ketë një buton "Ruaj". Drejtojeni treguesin drejt tij dhe klikoni mbi të një herë. Si përgjigje, do të shfaqet kodi i formës, të cilin e zgjedhim duke përdorur të njëjtin tregues të miut dhe kopjojmë. Tjetra, kaloni te artikulli "Faqet" në panelin administrativ të sistemit të menaxhimit të përmbajtjes. Pastaj ne krijojmë një faqe të re me emrin e kërkuar (për shembull, "refedback", "Kontakte" ose "Bëjini një pyetje administratorit të burimit"). Më pas e zhvendosim kursorin e telefonimit në fushën e hyrjes për kodin e tij. Në këtë rast, duhet të kaloni mënyrën e shtypjes së kodit në "Tekst" në panelin e parametrave. Pas kësaj, futni kodin e formularit të marrë më parë. Më pas, në anën e djathtë të ndërfaqes, gjeni butonin "Publish" dhe vendoseni miun mbi të. Në fazën tjetër, klikoni butonin e majtë të miut një herë në këtë element të ndërfaqes së sistemit të menaxhimit të përmbajtjes.



Kontrollimi i rezultatit

Pas kryerjes së manipulimeve të treguara më parë, duhet të shtohet një faqe e re në ndërfaqen e burimit të Internetit, në të cilën do të shfaqen elementët e specifikuar në Formularin e Kontaktit 7. Konfigurimi i ndërfaqes, në parim, është përfunduar. Thjesht duhet të kontrolloni nëse softueri është konfiguruar saktë. Për ta bërë këtë, duhet të shkoni në faqen kryesore të faqes, blogut ose portalit. Më pas në listën e faqeve gjejmë atë në të cilën është vendosur formulari i komenteve. Ne shkojmë tek ajo, futim parametrat e duhur në të gjitha fushat menjëherë dhe dërgojmë një letër testimi për veten tonë. Si përgjigje, duhet të shfaqet një mesazh informacioni që tregon përfundimin me sukses të këtij operacioni. Pastaj përpiqemi të dërgojmë një letër tjetër me fusha bosh. Pas kësaj, duhet të shfaqet një mesazh që thotë se duhet të vendosni të gjithë parametrat e formularit të zgjedhur. Nëse në të dyja rastet janë marrë rezultatet e treguara më herët, atëherë forma e krijuar reagime funksionon saktë.

Të mirat dhe të këqijat e shtojcës. Opsionet alternative

Një zgjidhje e shkëlqyer për një zhvillues fillestar për të krijuar një formular reagimi është mini-programi i Formularit të Kontaktit 7. Vendosja e dërgimit të postës, krijimi i elementeve të ndërfaqes dhe elementëve të tjerë të rëndësishëm të ndërfaqes në këtë rast është kryesisht i automatizuar dhe kërkon njohuri minimale të përdoruesit. Prandaj, për një burim të thjeshtë interneti të nivelit fillestar me një administrator fillestar, kjo është një zgjidhje e shkëlqyer. Por çdo shtojcë është një ngarkesë shtesë në burimet e faqes në internet, gjë që zvogëlon performancën. Si rezultat, përdoruesit më të avancuar rekomandojnë të largohen nga një mënyrë kaq e thjeshtë për të krijuar një formular reagimi. Mund ta krijoni edhe vetë duke përdorur HTML, CSS dhe JS, megjithëse me një nivel më të ulët funksionaliteti. Kjo do të zvogëlojë nevojën për burime kompjuterike në sit dhe do të rrisë ndjeshëm nivelin e performancës.



Rezultatet

Ky artikull përshkruan hap pas hapi se si të konfiguroni Formularin e Kontaktit 7. Kjo shtojcë ka vërtet një nivel të lartë funksionaliteti; ju mund ta përdorni atë për të krijuar çdo formular reagimi. Nga ana tjetër, përdorimi i një shtojce shtesë si pjesë e një sistemi të menaxhimit të përmbajtjes rrit ngarkesën në harduerin e faqes. Prandaj, administratorët fillestarë të faqes bazuar në këtë sistem të menaxhimit të përmbajtjes rekomandohen të përdorin këtë shtojcë për qëllime të tilla. Epo, përdoruesit më të avancuar mund të bëjnë pa Formularin e Kontaktit 7. Në këtë rast, vendosja e shtojcës definitivisht nuk është e nevojshme.

Më duhej të merrja një formë të bukur për një shtojcë, formularët e nevojshëm dje, por është mjaft e vështirë të ulesh dhe të shkruash stile me dorë, dhe për shumë projekte thjesht nuk është brenda buxhetit. Prandaj, unë shkova në kërkim të shtojcave interesante për vendosjen e shpejtë të formave të kontaktit CSS.

Të gjithë njëzëri (kjo vlen për motorët e kërkimit) rekomanduan - thanë njerëzit e mençur - modifikoni css-në dhe mos mashtroni askënd, merrni Notepad dhe shkoni përpara. Duke parë përpara, njerëzit e mençur kishin të drejtë.

Megjithatë, kurioziteti mbizotëroi dhe u vendos që të testohet më në detaje shtojca, e kisha provuar tashmë më parë, por më dukej jashtëzakonisht e mërzitshme dhe e papërshtatshme. Shtojca nuk është përditësuar për 11 muaj, gjë që është e trishtueshme. Pak më shumë se 6K webmaster rrezikuan t'i besonin formularët e tyre, që gjithashtu nuk është një numër i madh (nga të cilat e kam shkarkuar katër ose pesë herë).

Pas instalimit, ai krijon një seksion "Stili i kontaktit" në rrënjën e menysë së administratorit. Në këtë seksion ka dy artikuj që përmbajnë shabllone për Ditën e Shën Valentinit dhe Krishtlindjet dhe "Stil i personalizuar" ku mund të personalizoni plotësisht daljen e formularit. Në fakt, seksioni "Stili i personalizuar" është ajo që ju intereson më shumë; më shumë detaje rreth cilësimeve të disponueshme:

"CILËSIMET E PËRGJITHSHME" - mund të përcaktoni ngjyrën e sfondit, gjerësinë e formës (të vendosur në px, % nuk ​​e kanë provuar), trashësinë e kufirit, formën (me pika, të forta, etj.), ngjyrën, rrumbullakimin.

"VENDIMET DHE KUFIZIMET E ETETEVE" - sfondi i fushave të hyrjes, ngjyra e fontit të hyrjes, fonti (lista nuk është e madhe dhe nuk ka pothuajse asgjë në cirilik) dhe madhësinë e tij. Ngjyra e kufirit të fushës, stili (vijë e ngurtë me pika, etj.), trashësia, rrumbullakimi. Shkronja e hyrjes dhe madhësia e tij. Parametrat e marzhit në px - lartësia/gjerësia, mbushja. Shkronja e etiketës, stili, madhësia, ngjyra.

“Submit BUTON SETTINGS” – cilësimet për butonin e paraqitjes së formularit. Cilësimet e disponueshme janë madhësia e butonit, rrumbullakimi, ngjyra, lloji i kufirit dhe ngjyra e kufirit.

Probleme në përdorim.

Pas rishikimit të cilësimeve, mund të arrini në përfundimin se gjithçka është shumë mirë - praktika ka treguar të kundërtën. Me të vërtetë ka shumë cilësime, por ato nuk janë të mjaftueshme - nuk ka cilësime të dhëmbëzimit brenda formularit, kështu që të gjitha blloqet mblidhen në kufirin e majtë afër skajit të formularit. Cilësimet e çuditshme "të parazgjedhura" - ku fusha e hyrjes është 100*100 px. Nëse i vendosni saktë madhësitë e fushave, kjo nuk do të ndikojë në listën rënëse dhe do të marrë stilin e temës kryesore. Nuk ishte e mundur të rivendosesh në cilësimet origjinale përpara se të çinstalosh shtesën...

Deri tani, përveç ndryshimit manual të stileve, nuk ka funksionuar pak a shumë denjësisht... Nuk ka ndodhur një mrekulli.

Shënim i rëndësishëm! Shtojca u përditësua kohët e fundit dhe diçka ndryshoi në cilësime mjaft të konsiderueshme, kështu që ju duhet të shikoni dhe provoni.

Shtojca e Formularit të Kontaktit 7 do të ndihmojë në organizimin e reagimeve në faqen tuaj të internetit.

Mund të shkarkoni shtojcën e Formularit të Kontaktit 7 në faqen zyrtare të WordPress

Mund të shkarkoni shtojcën Really Simple CAPTCHA në faqen zyrtare të WordPress

Ne diskutuam se si ta instalojmë dhe lidhim këtë shtojcë në mësimin "", tani do të shikojmë funksionet shtesë të shtojcës së Formularit të Kontaktit 7. Formulari funksionon si duhet në monitorë, tableta, telefona dhe laptopë. Nga rruga, nëse laptopi juaj është i prishur, ekziston një shërbim që riparon laptopët HP.

Pasi të keni shkarkuar dhe aktivizuar shtesën, shkoni te cilësimet e shtojcës duke shkuar te seksioni i ri i panelit të kontrollit "Kontaktet".

Zhvendosni miun mbi emrin e formularit dhe zgjidhni "Ndrysho"

Do të hapet një dritare për ndryshimin e parametrave të formularit.

Meqenëse faqja mund të përdorë jo një, por disa forma (një formular për dërgimin e një mesazhi, një formular për porositjen e një telefonate, një formular me të dhëna personale), në mënyrë që të mos ketë konfuzion se cila formë është përgjegjëse për çfarë, ju duhet të ndryshoni emrin e formularit. Për ta bërë këtë, klikoni në emrin e formularit 1.

Blloku nr. 2 shfaq atë që do të shfaqet në faqe në formular. Fillimisht vjen teksti, emri i fushës, pastaj kodi i kësaj fushe. Ju mund ta ndryshoni tekstin në çdo gjë që ju nevojitet.

Për të shtuar fusha të reja në formular, klikoni në listën rënëse nr. 3 - “Generate tag” dhe zgjidhni elementin e kërkuar nga lista rënëse.

• Fusha e tekstit
• Email
• Numri i telefonit
• Numri (spinbox)
• Numri (rrëshqitësi)
• Fusha e tekstit
• Menyja rënëse
• Kutitë e kontrollit
• Butonat e radios
• Pranimi
• Pyetje
• CAPTCHA
• Dërgimi i një skedari
• Butoni i dorëzimit

Këshillat e veglave dhe fushat e formularit janë rregulluar si më poshtë si parazgjedhje: këshilla e veglave në krye, elementi në fund. Nëse dëshironi të vendosni përshkrimin dhe elementin në një rresht, hiqni etiketën pas tekstit

. I gjithë blloku me përshkrime dhe elementë duhet të jetë në një rresht dhe të vendosur brenda etiketës

Fusha e tekstit