Բարև սիրելի բլոգի ընթերցողներ: WordPress-ի հետադարձ կապի ձևերի թեման շարունակվում է. Եվ քանի որ ես խոսել եմ դրանց մասին, այսօր առաջարկում եմ խոսել WP Contact Form 7 plugin-ի մասին: Հաջորդը, ես ձեզ ցույց կտամ հավելվածի քայլ առ քայլ կազմաձևումը, ինչպես նաև հակիրճ նկարագրելու եմ այս հավելվածի հավելումները:

Էջի նավարկություն.

WordPress կոնտակտային ձև 7-ի նկարագրությունը

2) Ակտիվացրեք Կոնտակտային ձև 7 հավելվածը WordPress-ի ադմինիստրատորի տարածքում:

3) Գնացեք նոր ստեղծված ներդիր, ինչպես ցույց է տրված նկարում.

4) Սեղմեք «Ավելացնել նոր» ներդիրը և նշեք ձևի լռելյայն լեզուն կամ ընտրեք անհրաժեշտը

5) Նշեք կոնտակտային ձևի անունը և սեղմեք պահպանել:

6) Այժմ մենք ունենք կարճ կոդ, որը կարող է պատճենվել և տեղադրվել գրառման կամ կողագոտու մեջ՝ ձևը ցուցադրելու համար - contact-form-7 id = "1252" title = "(! LANG: Ձև թիվ 1" (надо взять в !} քառակուսի փակագծերինչպես նկարում):

7) Ահա թե ինչպես է մեր ձևը նման.

Իհարկե, ոչ շատ գեղեցիկ, բայց ոչ ոք չի խանգարում ստեղծել ձեր սեփական ոճերը կամ ստեղծել ձեր սեփական ձևը և ներդիրներ տեղադրել այնտեղ:

Ինչպես ցուցադրել Կոնտակտային ձև 7 կաղապարի ցանկացած վայրում

6-րդ կետում քայլ առ քայլ կարգավորումԵս ձեզ ցույց տվեցի, թե ինչպես կարող եք վերցնել CF7 կարճ կոդը, այնուհետև նկարագրեցի, որ այս կոդը կարող է ցուցադրվել վիջեթում կամ գրառման մեջ կամ էջում: Բացի այդ, ես ուզում եմ ասել, որ դուք կարող եք ցուցադրել Կոնտակտային ձև 7 կաղապարի ցանկացած կետում: Դա անելու համար տեղադրեք հետևյալ պարզ կոդը.

Այսքանը, եթե ամեն ինչ ճիշտ եք արել, դուք կստանաք Կոնտակտային ձև 7-ի արդյունքը WordPress ձևանմուշի կամայական վայրում:

Կոնտակտային ձև 7 մուտքագրման դաշտերի կարգավորում

Նրա շնորհիվ դուք լրացուցիչ կունենաք այնպիսի տուփեր, ինչպիսիք են.

Կազմաձևում է պատասխանի պատասխանը կոնտակտային ձևի համար 7

CF7 plugin-ի 4.4 և ավելի նոր տարբերակում մշակողը խորհուրդ է տալիս մուտքագրել from-ի դաշտը (այստեղ այն ստորև ներկայացված է մաշկի վրա)

ճիշտ հասցեն, որը համապատասխանում է ձեր տիրույթին: Դա երևում է մաշկից, և այս առաջարկությունը խնդիր է ստեղծում.

Ինչպե՞ս պատասխանել օգտատիրոջը փոստարկղից:

Եթե ​​դուք պարզապես սեղմեք reply, ապա մենք կպատասխանենք մեր սեփական նամակին, իրականում մենք կպատասխանենք ինքներս մեզ: Սա շատ անհարմար է, քանի որ մենք պետք է ձեռքով պատճենենք օգտատիրոջ հասցեն, տեղադրենք այն փոստարկղում և հետո միայն պատասխանենք:

Այս խնդրի լուծումը կա և, ինչպես միշտ, պարզ. Ձեզ անհրաժեշտ է դաշտում Լրացուցիչ վերնագրերավելացնել կոդը.

Պատասխանել:

Իհարկե, ձեր էլփոստի-sh-ը պետք է փոխարինվի ձեր սեփական փոստի կարճ կոդով: Տեսեք մաշկը ստորև.

Այժմ, երբ դուք նամակ եք ստանում WordPress-ի հետադարձ կապից, կարող եք սեղմել՝ փոստում պատասխանելու համար, և ձեր պատասխանը կուղարկվի ճիշտ էլ.

Եթե ​​այս քայլերից հետո դուք բախվեք խնդրի հետ, ապա պետք է կարդալ գրառումը՝ սեղմելով հղման վրա: Կոնտակտային ձև 7 հավելվածում նկարագրված են հիմնական խնդիրներն ու անախորժությունների պատճառները:

Այսքանը: Հուսով եմ, որ դուք հասկանում եք, թե ինչպես են տեղադրվում plugin-ը և դրա դասավորությունները:

(Վերջին թարմացում՝ 19.05.2019)

Ողջույններ, սիրելի ընթերցող: Այսօր ես ձեզ ցույց կտամ, թե ինչպես ստեղծել հետադարձ կապի ձև վեբկայքի/բլոգի հեղինակի համար WordPress-ում՝ օգտագործելով հայտնի Կոնտակտային ձև 7 հավելվածը (ավելի քան 5 միլիոն տեղադրում): Ներառված է գրառման մեջ : ճիշտ կարգավորումԿոնտակտային ձև 7, սպամի պաշտպանություն, ինչպես փոխել և կարգավորել տեսքըձևերը. Եվ նաև մատնանշեց հիմնական պատճառները՝ ինչու կոնտակտային ձևը չի աշխատում և նամակներ չի ուղարկում .

կոնտակտային ձևկարևոր միջոց է ձեր ընթերցողների հետ կապի մեջ պահելու և հակառակը: Խզբզեք անձնական նամակ, առաջարկ արեք հեղինակին (որից նա չի կարող հրաժարվել), հարց տվեք, ինչ-որ բան ուղարկեք և շատ ավելին։ Այս ամենը կվերցնի և չի բացահայտի արժեքավոր տեղեկատվություն կողմնակի անձանց, մեր կոնտակտային ձևը WordPress-ի Կոնտակտային ձև 7. Ահա, նման բան: Ես այսպես եմ գրել, ինքս հավանել եմ։

Օ՜, նամակը հասել է: Կոնտակտային ձև 7 լավ է արված

Ես քեզ չեմ ձանձրացնի, սիրելի ընթերցող, ոչ մի խզբզոցով. եկեք գործի անցնենք։ WordPress-ի համար մոդուլի տեղադրում և ճիշտ կազմաձևում՝ կոնտակտային ձև 7.

WordPress կոնտակտային ձև 7 Plugin

Փլագին WP կոնտակտային ձև 7-ի համար

Կոնտակտային ձև 7-ը կարող է կառավարել բազմաթիվ կոնտակտային ձևեր, որտեղ դուք կարող եք ճկուն կերպով հարմարեցնել ձևաթղթերի և փոստի բովանդակությունը բավականին պարզ նշումով: Ձևաթղթերն ունեն ներկառուցված աջակցություն Ajax-ի ներկայացումների, CAPTCHA-ների, Akismet սպամի ֆիլտրի և այլնի համար:

Մենք իրականացնում ենք բոլոր մանիպուլյացիաները WordPress-ի ադմինիստրատորի վահանակում: Փլագին տեղադրելու համար «Մոդուլներ» բաժնում սեղմեք «Ավելացնել նոր»: «Որոնում» պատուհանում մուտքագրեք Կոնտակտային ձև 7, բնականաբար, այն առաջինը կցուցադրվի: Կտտացրեք «Տեղադրեք.

Ինչպես տեղադրել plugin-ը

Կոնտակտային ձև թիվ 1 լռելյայն

Նկարից երևում է, որ լռելյայն կոնտակտային ձևի ստանդարտ տարբերակը և պատրաստի կարճ կոդը՝ նոր էջում, գրառման կամ նոր էջում տեղադրելու համար։ կողային վահանակ(տեքստային վիդջեթի միջոցով): Կոնտակտային ձև 7 լռելյայն տեսք, տեղադրված է կայքի առանձին էջում.

Արտաքին տեսք. Ստանդարտ կոնտակտային ձև WordPress կայքում

Եթե ​​ցանկանում եք պարզապես դիտել, ստուգել կամ փոխել, այսինքն՝ ավելացնել լրացուցիչ դաշտեր դրան, ապա սեղմել «Փոխել» կետը: Էկրանը վերևում է:

Բացվում է «Խմբագրել կոնտակտային ձևը» էջը: Փլագինը ռուսերեն է, և, հետևաբար, ձեզ համար շատ հեշտ կլինի պարզել, թե ինչն է: Ձևի ձևանմուշ ներդիր: Դուք կարող եք փոխել ձևանմուշը՝ ձեր կարիքներին համապատասխան:

Օրինակ, ֆայլի վերբեռնման պիտակի վրա դաշտ ավելացնելու համար ձևանմուշի ձևանմուշը պետք է. մկնիկի օգնությամբ նշեք թեգը տեղադրելու տեղը (լավագույնը հաղորդագրությունից հետո) և սեղմեք համապատասխան «ֆայլ» ներդիրը: Այս հատկանիշի միջոցով դուք կարող եք թույլ տալ օգտվողներին վերբեռնել իրենց ֆայլերը ձեր ձևի միջոցով, այնուհետև ձեզ կուղարկվի նամակ ֆայլերի հավելվածներով.

Խմբագրել կոնտակտային ձևը: Ֆայլի ներդիր

Կբացվի պատուհան - Form Tag Generator. file:

Փոստին վերբեռնված ֆայլը կցելու համար անհրաժեշտ է տեղադրել պիտակ ()

Կոնտակտային ձև 7-ը կիրառում է ֆայլի տեսակի և ֆայլի չափի լռելյայն սահմանափակումներ: Երբ դուք չեք սահմանում ձեր ընտրանքները, ֆայլերի լռելյայն ընդարձակումներն են՝ jpg, jpeg, png, gif, pdf, doc, docx, ppt, pptx, odt, avi, ogg, m4a, mov, mp3, mp4, mpg, wav: և wmv. Իսկ ֆայլի թույլատրելի չափը 1 ՄԲ է (1,048,576 բայթ): Մենք սեղմում ենք «Տեղադրել պիտակ» կոճակը.

Ֆայլի պիտակը տեղադրվել է ձևանմուշի մեջ

Այնտեղ, որտեղ դուք նշել եք մկնիկի կուրսորը, և կհայտնվի լրացուցիչ պիտակ: Եթե ​​տեղադրվել է սխալ տեղում, ապա պարզապես պատճենեք այն և տեղադրեք այն ճիշտ տեղում: Նույն ձևով ավելացրեք անհրաժեշտ պիտակները ձեր ձևին: Համոզվեք, որ սեղմեք կապույտ «Պահպանել» կոճակը լրացուցիչ պիտակներ ավելացնելուց հետո: Եվ այսպես կլինի էլ.փոստին ֆայլ կցելու կոճակը՝ հաղորդագրության դաշտից հետո.

Կոճակ Ընտրեք ֆայլ կոնտակտային ձևում

Եթե ​​ամեն ինչ ճիշտ եք անում, ապա լրացուցիչ դաշտերի հետ կապված խնդիրներ չեք ունենա։

Նաև ստուգեք էլփոստի, Ձևաթղթերի ներկայացման ծանուցումներ և Ընդլայնված կարգավորումներ ներդիրները: Իմ կարծիքով, պետք չէ ինչ-որ բան փոխել։ Եթե ​​միայն Ընդլայնված կարգավորումներում կարող եք նշել պարամետրը՝ միայն բաժանորդների համար - subscribers_only՝ true: Լրացուցիչ տեղեկությունների համար կլինի հղում դեպի առաջադեմ պարամետրերի կարգավորումների էջ:

Եվ հիմա, ընկերներ, մենք պետք է տեղադրենք պատրաստի կոնտակտային ձևը վեբ ռեսուրսի առանձին, նոր էջում կամ կողագոտում: Դա արվում է հեշտությամբ:

Մենք տեղադրում ենք կոնտակտային ձևը կայքի / բլոգի առանձին էջում

Բոլոր կարգավորումներից և ձևը պահպանելուց հետո պատճենեք կարճ կոդը Կոնտակտային ձևեր կամ Խմբագրել կոնտակտային ձևը էջում: Դրանից հետո ստեղծեք նոր էջ՝ Էջեր բաժինը - Ավելացնել նոր։ Մուտքագրեք էջի անունը, օրինակ՝ «Կոնտակտներ»: Հաղորդագրությունների խմբագրիչը միացրեք «Տեքստ» ռեժիմի և տեղադրեք կարճ կոդը հաղորդագրության դաշտում.

Նոր էջ կոնտակտային ձևով

Եթե ​​դուք ունեք նոր էջինքնաբերաբար ավելացվում է մենյու, այնուհետև մենք սահմանում ենք «Պատվեր» 1, 2 կամ 3 (որը կա ցանկի մեջ, կցուցադրվի Կոնտակտային էջը): Սեղմեք «Հրապարակել» կոճակը: Ամեն ինչ. Պատրաստ. Դուք կարող եք նաև ձեռքով էջ ավելացնել ցանկի մեջ: Այժմ դուք ունեք բլոգի հեղինակի հետ կապ հաստատելու ձև / տեղադրվել է կայքը:

Օգտագործելով նույն մեթոդը, կոնտակտային ձևը ավելացվում է կողագոտում, ստորոտում կամ հոդվածի տեքստին: Պատճենեք կարճ կոդը և տեղադրեք այն ձեր գրառումների կամ տեքստային վիդջեթի բովանդակության մեջ: Ուշադիր եղեք, որ ցանկացած պահի կարող եք խմբագրել ձևը կամ ստեղծել նորը տարբեր պիտակներով / դաշտերով:

Ստանո՞ւմ եք սպամ կոնտակտային ձև 7-ի միջոցով:

Կա պաշտպանություն. Սպամերներն ազդում են ամեն ինչի վրա, ձեր կոնտակտային ձևերը բացառություն չեն: Նախքան սպամ ստանալը, պաշտպանեք ձեր կոնտակտային ձևերը Կոնտակտային ձև 7-ի հզոր հակասպամի գործառույթներով:

Կոնտակտային ձև 7-ն աջակցում է սպամի զտմանը Akismet-ի միջոցով: Խելացի reCAPTCHA-ն արգելափակում է նյարդայնացնող սպամբոթերը: Օգտագործելով մեկնաբանությունների սև ցուցակը, կարող եք նաև արգելափակել որոշակի պարունակող հաղորդագրությունները հիմնաբառերկամ ուղարկվել է հատուկ IP հասցեներից:

Սեղմեք «Ինտեգրում»: Google reCAPTCHA-ն պաշտպանում է ձեզ սպամից և այլ ավտոմատ չարաշահումից: Կոնտակտային ձևի 7 reCAPTCHA ինտեգրման մոդուլի միջոցով դուք կարող եք արգելափակել ձևի ուղարկումը սպամ բոտերի կողմից:

Google reCAPTCHA v3 ինտեգրում. պաշտպանություն սպամից

Պլագինի ինտեգրումը այլ recaptcha ծառայությունների հետ

Trample Setup Integration-ը, այնուհետև հետևեք հղմանը ReCaptcha API ստեղները ստանալու համար.

reCAPTCHA-ն է Google ծառայություն

ReCAPTCHA-ն օգտագործելու համար նախ անհրաժեշտ է գրանցել ձեր WordPress կայքը: reCAPTCHA-ն Google-ի ծառայություն է, ուստի այն օգտագործելու համար ձեզ անհրաժեշտ է google հաշիվ... Մուտք գործեք Google՝ օգտագործելով հաշիվ, և հետևեք հղմանը https://www.google.com/recaptcha/admin... Դուք կտեսնեք գրանցման պարզ ձև, ինչպիսին է.

Գրանցեք WordPress կայք: Goodle reCAPTCHA

Խնդրում ենք մուտքագրել վերնագիր: Ընտրեք reCAPTCHA v3 (reCAPTCHA v3-ը չի պահանջում CAPTCHA վիջեթ (ես ռոբոտ չեմ, որն օգտագործվում է reCAPTCHA v2)) և մուտքագրեք կայքի տիրույթը Domains դաշտում: Կայք գրանցելուց հետո դուք կստանաք կայքի բանալին և գաղտնի բանալի: Մուտքագրեք դրանք (վերևում գտնվող սքրինշոթը) և պահպանեք կարգավորումները: Այսքանը: Ձեր կոնտակտային ձևն այժմ օգտագործում է reCAPTCHA հաշիվը՝ ստուգելու՝ հաղորդագրությունն ուղարկվել է մարդու՞ց, թե՞ սպամ-բոտից:

Եթե ​​որոշել եք տեղադրել Կոնտակտային ձև 7, ապա խորհուրդ եմ տալիս, բացի դրան, տեղադրել Կոնտակտային ձև 7 Style հավելումը։ Այն թույլ կտա խմբագրել ձեր ձևի տեսքը: Դուք կարող եք ոչ միայն ընտրել պատրաստի կաղապարներից մեկը, այլ նաև ստեղծել ձեր ուրույն դիզայնը։ Ցանկանու՞մ եք փոխել ձեր տեսքը: Ապա շարունակությունը հատուկ ձեզ համար է, գեղեցկության գիտակներ։

Կոնտակտային ձևի տեսք - Կոնտակտային ձև 7 Style

Կոնտակտային ձևերի ոճեր 7

Կոնտակտային ձև 7 Style Plugin-ը Կոնտակտային ձև 7 հավելում է, որը պետք է տեղադրվի ձեր WordPress կայքում: Աջակցում է հարմարեցված ոճերին, որոնք հեշտությամբ կարելի է կառավարել ադմինիստրատորի վահանակի միջոցով: Կան նաև նախապես սահմանված ձևանմուշներ, որոնք կարող են ակտիվացվել կոնտակտային ձևի կարգավորումներում 7: Հիմնական plugin-ի կարգավորումներում կհայտնվի նոր ներդիր- Կոնտակտային ձև 7 Style Կաղապար: Արտաքին տեսքի հարմարեցում.

Պատրաստի ձևանմուշներ ձևի համար

Օրինակ, ես փոխեցի ստանդարտ արտաքինը նման բանի.

Կոնտակտային ձևի տեսքը

Մի մոռացեք, որ դուք կարող եք սահմանել ձեր սեփական ոճի պարամետրերը.

Փլագինը աջակցում է հատուկ ոճերի, որոնք կարելի է կառավարել ադմինիստրատորի վահանակի միջոցով

Եզրափակելով.

Նամակներ ուղարկելը Կոնտակտային ձև 7-ից անխափան աշխատում է մարդկանց մեծամասնության համար: Բայց պարզվում է՝ ոչ բոլորի համար։ Թեև հավելվածն ամեն օր հաջողությամբ ուղարկում է միլիոնավոր նամակներ, կան բազմաթիվ խնդիրներ, որոնք կարող են հետաձգել կամ դադարեցնել նամակներ, և՛ ուղարկող, և՛ ստացող կողմում սովորական էլ.

Ինչու՞ Կոնտակտային ձև 7-ը չի աշխատում (նամակներ չի ուղարկում):

1. Ձեր հոսթինգի խնդիրները: Կարևոր է նշել, որ նամակներ ուղարկելն ու ստանալը մեծապես կախված է ձեր WordPress կայքը հյուրընկալող սերվերից.
2. Համոզվեք, որ օգտագործեք ճիշտ վերադարձի էլփոստի հասցեն;
3. Ձեր էլ.փոստը կարող է համարվել սպամ;
4. Պլագինները կամ թեման հակասում են Կոնտակտային ձև 7-ին;
5. Javascript-ի հակասություններ.

Եթե ​​դուք չեք կարողանում նամակներ ուղարկել այս հավելվածից, ապա հավանական է, որ դուք ընդհանրապես չեք կարող էլ-նամակներ ուղարկել WordPress-ից: Այդ դեպքում, պարոնայք, կարող եք էջում ստանալ հավելյալ հավելվածի մասին հաճախ տրվող հարցերը https://contactform7.com/faq/.

Կամ աջակցության ֆորումումhttps://wordpress.org/support/plugin/contact-form-7/. Անգլերեն Լեզուկապ չունի, սիրելի բրաուզերի թարգմանությամբ ամեն ինչ պարզ կլինի։

Ինձ համար այսքանն է: Կարծես ոչինչ չեմ մոռացել։ Ամենայն բարիք։ Հաջողություն ընկերներ:

P.S. Պարզվում է, որ հին գրառումները խմբագրելը (ընթերցողների համար տեղեկատվությունը միշտ պետք է լինի արդի) նույնքան ժամանակ է պահանջում, որքան գրելը։ նոր հրահանգներ... Սարսափ.

(ֆունկցիա (w, d, n, s, t) (w [n] = w [n] ||; w [n] .push (function () (Ya.Context.AdvManager.render ((blockId: «RA -292864-4 ", renderTo:" yandex_rtb_R-A-292864-4", async: true));)); t = d.getElementsByTagName («սկրիպտ»); s = d.createElement («սկրիպտ»); s .type = "text / javascript"; s.src = "//an.yandex.ru/system/context.js"; s.async = ճշմարիտ; t.parentNode.insertBefore (s, t);)) (սա , this.document, "yandexContextAsyncCallbacks");

Կոնտակտային ձևը շատ կայքերի կարևոր հատկանիշն է: Ահա թե ինչու WordPress-ի գրացուցակում այդքան շատ պլագիններ կան կոնտակտային ձևեր... Ամենահայտնիներից մեկը Կոնտակտային ձև 7-ն է: Փլագինը թույլ է տալիս ստեղծել ցանկացած տեսակի ձևեր. շատ ճկուն և հեշտ հարմարեցվող; զարգանում է երկար տարիներ և պարունակում է բազմաթիվ զարգացումներ։

Ստեղծեք և ցուցադրեք կոնտակտային ձևեր

Ադմինիստրատորի տարածքում ձևաթղթերի ստեղծում

Փլագինը տեղադրելուց հետո կհայտնվի «Contact Form 7» ցանկի տարրը, որի միջոցով կարող եք ստեղծել և ջնջել ձևաթղթեր։

Նկարում պատկերված ձևը ստեղծվում է ավտոմատ կերպով, երբ plugin-ն ակտիվանում է:

Եկեք օգտագործենք լռելյայն ձևը՝ ստեղծելով «Կապ ինձ հետ» էջ և այնտեղ տեղադրելով ձևի կարճ կոդը:

Կայքի ճակատային մասը

Այժմ եկեք պահպանենք հոդվածը և տեսնենք, թե ինչ տեսք ունի մեր ձևը (օգտագործելով Քսան տասնվեց թեման).

Նկարում ներկայացված է ձևաթուղթը ուղարկված նամակից հետո (սա նշվում է ձևի ներքևի ծանուցմամբ):

Ձևերի հարմարեցում (բարդ ձևերի ստեղծում)

Վերևի օրինակը ցույց է տալիս, թե ինչպես տեղադրել պատրաստի և շատ պարզ ձևկոնտակտներ. Այժմ եկեք տեսնենք, թե ինչպես ստեղծել ավելի բարդ ձև: Դա անելու համար վերադարձեք ադմինիստրատորի վահանակ, ձևի կառավարիչ և անցեք լռելյայն ձևի խմբագրմանը:

Վերին դաշտում - ձևի անվանումը (տեսանելի է միայն ադմինիստրատորի վահանակում), մենք նշում ենք մեզ համար հասկանալի անուն, օրինակ. « և այլն։

Վերնագրի տակ կարճ ծածկագիր է: Մենք օգտագործում ենք այն գրառումներում՝ ձևը ցուցադրելու համար:

Եվ ներքևում կան չորս ներդիր.

1. Ձևի ձևանմուշ
2. Նամակ
3. Լրացուցիչ կարգավորումներ

Եկեք դիտարկենք յուրաքանչյուր ներդիր առանձին:

Ձևի ձևանմուշ

Այս ներդիրում կարող եք հարմարեցնել դաշտերը և ձևի տեսքը: Աշխատանքային տարածքն է HTML խմբագիր WP. Միայն սովորական կոճակների փոխարեն մենք տեսնում ենք տարբեր ձևերի դաշտեր տեղադրելու կոճակներ։

Ձևի դասավորություն

Դասավորության համար կարող եք օգտագործել html պիտակներ և պլագինների կարճ կոդեր: Կարճ կոդերն ավելացնում են ձևի դաշտեր, իսկ html թեգերը թույլ են տալիս ստեղծել կամայական HTML կառուցվածք: Օրինակ, մեր լռելյայն ձևն ունի հետևյալ տեսքը.

Ձեր անունը (պարտադիր է) Ձեր էլ. փոստը (պարտադիր է) Թեմա Հաղորդագրություն

Եվ երբ ցուցադրվի գրառման մեջ, այն կվերածվի այս HTML-ի.

Կարճ կոդի շարահյուսություն

Եկեք սեղմենք «Տեքստ» կոճակը: Բացվում է պատուհան, որտեղ մենք կարող ենք նշել տեքստային դաշտի ատրիբուտները: Նշեք և սեղմեք «Տեղադրեք պիտակ»:

Պիտակը հետագայում կվերածվի տեքստային դաշտի՝ html կոդով.

Կարճ կոդերը կարող են հարմար կերպով ստեղծվել կարճ կոդերի ստեղծողի միջոցով:

Բայց կոնստրուկտորը թույլ չի տալիս փոխել կարճ կոդը (միայն այնտեղ կարող եք ստեղծել կարճ կոդը): Կարճ կոդը փոխելու երկու եղանակ կա.

1. ջնջել և ստեղծել նորը` օգտագործելով կոնստրուկտորը:
2. սովորեք շարահյուսությունը և ձեռքով ուղղեք դաշտի կարճ կոդը:

Կոնստրուկտորով դուք ինքներդ կհասկանաք դա:

Եվ այստեղ մենք կվերլուծենք կարճ կոդի շարահյուսությունը։

Օրինակ, հաշվի առեք պիտակը տեքստային տուփլրացուցիչ ընտրանքներով.

Տեքստ (պարտադիր)Դաշտի տեսակը՝ տեքստ, ընտրություն, գաղտնաբառ, համար և այլն: (ընդ այս դեպքումտեքստային դաշտ): Որոշում է, թե որ ձևի տարրի մեջ կվերածվի մեր պիտակը, ինչը նշանակում է, թե ինչպիսի տվյալներ կստանա այն: * Աստղանիշը դաշտը դարձնում է պարտադիր (ձևը չի ներկայացվի և կցուցադրվի ծանուցում, որ դաշտը պետք է լրացվի): հաճախորդի անունը (պարտադիր)Դաշտի անվանումը օգտագործվում է որպես անվան հատկանիշ մուտքագրման մեջ և օգտագործվում է նաև ելքային տառի ձևանմուշ ձևավորելիս: id: my-id Մուտքի id հատկանիշը my-id արժեքով: Օգտագործվում է զարդարման համար։ class՝ my-class Դասի հատկանիշը my-class արժեքով մուտքագրման վրա: Օգտագործվում է զարդարման համար։ տեղապահ «(! LANG. Մուտքագրեք անունը" Использовать текст "Введите имя" как placeholder. !}

Դիտարկեք պիտակի ատրիբուտների հերթականությունը. սկզբում գալիս է դաշտի տեսակը, այնուհետև անունը, և միայն դրանից հետո լրացուցիչ ընտրանքներ:

Դաշտի տեսակները

• Տեքստային դաշտեր՝ տեքստ, էլ. փոստ, հեռ., url, textarea
• Թվային դաշտեր՝ թիվ, տիրույթ
• Ամսաթվի դաշտեր. ամսաթիվ
• Վանդակներ, ռադիո, ցուցակներ. վանդակ, ռադիո, ընտր
• Ֆայլի վերբեռնման դաշտ՝ ֆայլ
• CAPTCHA: captchac և captchar
• Հարցումներ՝ վիկտորինա
• Ընդունել դաշտ՝ ընդունելություն
• Ներկայացնել կոճակ՝ ներկայացնել
• Դաշտի կամայական տեսակ

Նամակի ձևանմուշ

Երկրորդ ներդրման մեջ դուք կարող եք ճշգրտել ուղարկված նամակի ձևանմուշը (դասավորությունը) և հատկությունները: Այս ներդիրի դաշտերում կարող եք օգտագործել ձևի դաշտերի հատուկ պիտակներ. դա հնարավորություն է տալիս փոխանցել նամակում նշված ձևի մեջ նշված տվյալները:

Թեգերը կազմված են ձևի ձևանմուշի դաշտերի անուններից: Օրինակ՝ մենք ստեղծել ենք տեքստային տուփ՝ անունով: Այժմ դուք կարող եք օգտագործել պիտակը ձեր էլփոստի ձևանմուշում: Նամակում այս թեգի փոխարեն կփոխարինվի օգտատիրոջ մուտքագրած դաշտի արժեքը (լրիվ անուն):

Էլփոստի վերնագրեր.

Ում - էլորտեղ կուղարկվի նամակը։ Դուք կարող եք նշել այնքան տուփ, որքան ցանկանում եք՝ բաժանված ստորակետերով:

Ումից՝ անունն ու էլ. հասցեն, ումից է նամակը եկել: Սովորաբար այստեղ նշվում է սերվերի փոստը (օրինակ [էլփոստը պաշտպանված է]).

Դուք կարող եք նշել ցանկացած փոստ, բայց եթե փոստի տիրույթը տարբերվում է կայքի տիրույթից, ձևը չի տարբերվում փորձարկվելու էև «կհայհոյի» այս պարամետրով, թեև նամակներ դեռ կուղարկվեն։

Թեմա - Նամակի թեման: Թե որ ձևից են ուղարկվել տվյալները, պարզ կլինի։ Օրինակ, թեմայի տողն է՝ «Կայքում սխալ», «Հետ զանգի պատվեր» և այլն: Ընտրեք վերնագիր, որը կհեշտացնի ձեր ստացած տառերի հետ աշխատելը:

• Լրացուցիչ վերնագրեր - Լռելյայնորեն, այստեղ գրված է Reply-To: «Պատասխանել-դեպի» վերնագիրը մեզ ասում է, որ այս նամակին կարելի է պատասխանել՝ սեղմելով «Պատասխանել» կոճակը փոստի ծրագիրիսկ ձևի պիտակը կաղապարի դաշտի անունն է: Այս պիտակի փոխարեն կտեղադրվի օգտատիրոջ կողմից նշված էլ. Դուք ստանում եք Reply-to-ին նման մի բան. [էլփոստը պաշտպանված է].

Նամակի մարմինը

Սա հաջորդն է հիմնական մասըայս ներդիրից: Այստեղ նշված է հենց նամակի տեքստը։ Տեքստում մենք օգտագործում ենք բոլոր նույն ձևի պիտակները (դաշտերի անունները ձևի ձևանմուշից):

Եկեք վերլուծենք լռելյայն տառը.

From:<>Թեմա՝ Հաղորդագրություն՝ - ուղարկված է կայքից Մենք ուսումնասիրում ենք կոնտակտային ձև 7 հավելվածը (http://test-wp.ru)

Մենք ունեինք 4 դաշտ, որոնք օգտատերը լրացրեց։ Նամակն ուղարկելուց հետո պիտակները կվերածվեն արժեքների և մենք կստանանք հետևյալ նամակը.

From: Դմիտրի Թեմա՝ Հարց կոնտակտային ձև 7-ի վերաբերյալ Հաղորդագրություն՝ Բարև: Ես հարց ունեմ Կոնտակտային ձև 7 հավելվածի վերաբերյալ: Ինչպե՞ս կարող եմ այն ​​կարգավորել: - Ներկայացված է կայքից Մենք ուսումնասիրում ենք կոնտակտային ձև 7 հավելվածը (http://test-wp.ru)

Ընտրովի դաշտեր էլփոստի տեքստում

Եթե ​​օգտատերը չի լրացնում դաշտը, բայց այն օգտագործվում է տառի մարմնում, ապա տառի տեքստը թերի կլինի։ Օրինակ, մարմնի վրա գրված է Man from the city, բայց օգտատերը չի լրացրել դաշտը, ինչը նշանակում է, որ նամակում մենք կստանանք Մարդ քաղաքից... Նամակում նման տողն ավելորդ է։ Այս տողը հաղորդագրությունից հեռացնելու համար նշեք «Բացառել հաղորդագրությունների դատարկ պիտակներով տողերի թողարկումը» վանդակը: Նկատի ունեցեք, որ սա կաշխատի միայն այն դեպքում, երբ դաշտի տեքստը և կարճ կոդը գտնվում են նույն տողում:

Տարբերակ «Օգտագործեք HTML փոստի ձևաչափը»: Թույլ է տալիս օգտագործել HTML պիտակներ հաղորդագրության մեջ: Այս դեպքում կարող եք օգտագործել սահմանափակ ցանկ HTML պիտակներքանի որ ոչ բոլորը փոստի հաճախորդներկամ ծառայությունները կարող են ճիշտ կարգավորել բարդ HTML նշումները: Կարող եք օգտագործել՝ սեղաններ, կետավոր ցուցակներ, համարձակություն, պարբերություններ և այլն։ Լրացուցիչ մանրամասների համար փնտրեք ցանցում:

Կոնտակտային ձև 7-ը թույլ է տալիս նամակ ուղարկել երկու հասցեով, և յուրաքանչյուր նամակի կարգավորումները տարբեր են: Սա կարող է օգտակար լինել, երբ անհրաժեշտ է նամակ ուղարկել կայքի ադմինիստրատորին ամբողջական տեղեկություններով և կրկնօրինակով կառավարչին, որը պարունակում է միայն պատվերի տվյալները:

Ձևաթղթերի ներկայացման ծանուցումներ

Այս ներդիրում դուք կարող եք խմբագրել հաղորդագրությունները, որոնք ձևը ցուցադրում է որոշակի իրավիճակում՝ նամակի հաջող կամ անհաջող ուղարկման կամ սխալների դեպքում:

Էլփոստի կաղապարի պիտակները չեն աշխատում այս դաշտերում:

Լրացուցիչ կարգավորումներ

Այս ներդիրը նախատեսված է առաջադեմ օգտվողների համար և թույլ է տալիս ընդլայնել ձևի հնարավորությունները՝ օգտագործելով JS կոդը: Օրինակ, իրադարձությունների տեղադրում վերլուծության համար:

Ես ձեզ կպատմեմ այս ֆունկցիոնալության օգտագործման մասին առանձին հոդվածում:

Կոնտակտային ձև 7 հավելվածը կօգնի կազմակերպել հետադարձ կապը ձեր կայքում:

Դուք կարող եք ներբեռնել Կոնտակտային ձև 7 հավելվածը WordPress-ի պաշտոնական կայքում

Դուք կարող եք ներբեռնել Really Simple CAPTCHA plugin-ը WordPress-ի պաշտոնական կայքում

Մենք ուսումնասիրեցինք, թե ինչպես տեղադրել և միացնել այս փլագինը «» դասում, այժմ մենք կզբաղվենք լրացուցիչ գործառույթներ plugin Կոնտակտային ձև 7. Ձևը ճիշտ է աշխատում մոնիտորների, պլանշետների, հեռախոսների և նոթբուքերի վրա: Ի դեպ, եթե ձեր նոութբուքը փչացել է, ուրեմն կա ծառայություն, որտեղ վերանորոգվում են HP նոթբուքերը։

Հավելվածը ներբեռնելուց և ակտիվացնելուց հետո անցեք plugin-ի կարգավորումներ՝ անցնելով դեպի նոր բաժինկառավարման վահանակ «Կոնտակտներ»:

Մկնիկը դրեք ձևի անվան վրա և ընտրեք «Խմբագրել»

Կբացվի ձևի պարամետրերը փոխելու պատուհան:

Քանի որ կայքը կարող է օգտագործել ոչ թե մեկ, այլ մի քանի ձև (հաղորդագրություն ուղարկելու ձև, զանգ պատվիրելու ձև, անձնական տվյալներով ձևաթղթեր), որպեսզի շփոթություն չառաջանա, թե որ ձևն ինչի համար է պատասխանատու, դուք պետք է. փոխել ձևի անվանումը. Դա անելու համար սեղմեք 1 ձևի անվան վրա:

Բլոկ 2-ը ցույց է տալիս այն, ինչ կցուցադրվի էջում ձևով: Այս դաշտի կոդից հետո սկզբում գալիս է տեքստը, դաշտի անվանումը։ Դուք կարող եք փոխել տեքստը, ինչ ուզում եք:

Ձևաթղթում նոր դաշտեր ավելացնելու համար սեղմեք բացվող ցանկի վրա # 3 - «Ստեղծել պիտակ» և բացվող ցանկից ընտրեք անհրաժեշտ տարրը:

• Տեքստային դաշտ
• Էլ
• Հեռախոսահամար
• Համար (spinbox)
• Համար (սահիկ)
• Տեքստային դաշտ
• Բացվող ընտրացանկ
• Նշման տուփեր
• Ռադիո կոճակներ
• Ընդունում
• Հարց
• CAPTCHA
• Ֆայլի վերբեռնում
• Ներկայացնել կոճակը

Լռելյայնորեն, գործիքի հուշումները և ձևի դաշտերը գտնվում են հետևյալ կերպ՝ գործիքի հուշման վերևում, տարրի ներքևում: Եթե ​​ցանկանում եք տեղադրել նկարագրությունը և տարրը մեկ տողի վրա, տեքստից հետո հեռացրեք պիտակը

... Ամբողջ բլոկը նկարագրությամբ և տարրերով պետք է լինի մեկ տողի վրա և լինի պիտակի ներսում

Տեքստային դաշտ

Բացվող ցանկից ընտրեք «Տեքստային դաշտ» տարրը

Եթե ​​որևէ գործառույթ, որը դուք ավելացնում եք, պահանջվում է, նշեք 1 վանդակը և մի մոռացեք գրել դրա մասին նկարագրության մեջ:

Դուք կարող եք ավելացնել մուտքագրման դաշտում Լրացուցիչ տեղեկությունձևը լրացնելն ավելի հեշտ դարձնելու համար: Նշեք վանդակ 2 «Օգտագործե՞լ որպես տեղապահ»: իսկ կողքին ակնարկ գրիր դաշտում։ Երբ այս դաշտը լրացվում է ձևի վրա, գործիքի հուշման տեքստը կվերանա: Այնուհետև հետևեք plugin-ի հրահանգներին: Արդյունքում ստացված ձևով ստանում եք հետևյալ դաշտը.

Համոզվեք, որ կպցրեք կոդը էլփոստի ձևանմուշում, հակառակ դեպքում այս դաշտի տվյալները փոստին չեն ուղարկվի: Սա վերաբերում է ոչ միայն տեքստային դաշտերին, այլ նաև ցանկացած այլ տարրերի:

Էլ

Օգտագործվում է հասցեի ձևին անցնելու համար փոստարկղուղարկող

URL

Թույլ է տալիս ձևին ավելացնել կայքի հասցեն:

Հեռախոսահամար

Այս դաշտում կարող են մուտքագրվել միայն թվեր:

Համար (spinbox)

Դաշտ, որտեղ դուք կարող եք սահմանել ինչ-որ բանի քանակը, օրինակ՝ նյութը: Համարը սահմանվում է վեր/ներքև սլաքներով:

ամսաթիվը

Ձևաթղթի մեջ տեղադրում է ամսաթվերով ընտրվող օրացույց: Օրինակ, այն օգտագործվում է հյուրանոցների ամրագրման համար։ Ժամանման ամսաթիվը, մեկնման ամսաթիվը:

Տեքստային դաշտ

Այո, մի զարմացեք 🙂 Մեկ այլ տեքստային դաշտ։ Այս անգամ այս դաշտն ունի մեծ չափսերև թույլ է տալիս դրա մեջ շատ տեքստ գրել: Օրինակ՝ ակնարկներ, մեկնաբանություններ։

Բացվող ընտրացանկ

Երբ ինչ-որ բանի համար շատ տարբերակներ կան, և դուք պետք է ընտրեք որևէ ապրանք մեծ ցուցակից, օրինակ՝ քաղաքների, փողոցների, ապրանքների ցանկ:

Ցանկը պետք է տեղադրվի Ընտրություն դաշտում, յուրաքանչյուր տարր նոր տողում:

Նշման տուփեր

Նշավանդակը, կամ մշակողի ժարգոնում, վանդակը, մի տարր է, որը ստեղծում է վանդակ: Այս դաշտն ունի երկու վիճակ՝ ստուգված է, թե ոչ: Հնարավոր է բազմակի ընտրություն։ Դասավորվում է միայն անընդմեջ, եթե նշեք «Դարձնե՞լ վանդակները փոխադարձաբար բացառող» վանդակը: ապա կարելի է ընտրել միայն մեկ պարամետր:

Ռադիո կոճակներ

Անջատիչներ (ժարգ. Ռադիո կոճակներ) օգտագործվում են, երբ անհրաժեշտ է ընտրել մեկ տարբերակ առաջարկվող մի քանի տարբերակներից: Նշելով «Նախ դրե՞լ պիտակ, հետո՞ վանդակ» վանդակը: պիտակի գտնվելու վայրը և ընտրության դաշտը փոխվում է, ըստ նախնականի, սկզբում ընտրությունը, ապա պիտակը:

Ընդունում

Ինչ-որ բանի հաստատում. Ենթադրենք վերը նկարագրված պայմանների ընդունման համաձայնությունը։

Հարց

Սա սպամի դեմ պաշտպանության առաջին գիծն է, ամենահիմնականը: Պարամետրում գրեք հարց, այն կարող է լինել թվերով, այն կարող է լինել տառերով, կամ այսպես և այնպես, և նշեք ճիշտ պատասխանը: Եթե ​​ձևը լրացնելու ժամանակ պատասխանը ճիշտ է, ապա ձևը կուղարկվի: Կանաչը ցույց է տալիս, թե այս բանաձևի որ մասը կցուցադրվի կայքում՝ պատասխանի մուտքագրման դաշտի դիմաց, կարմիրը՝ պատասխանը: Բանաձևում ճիշտ պատասխանը գրվում է |-ից հետո (ուղղահայաց բար)

Ձևին ավելացնում է սպամի պաշտպանություն:

Այս գործառույթն աշխատելու համար անհրաժեշտ է ևս մեկ պլագին: Ներբեռնեք, տեղադրեք, ակտիվացրեք plugin-ը:

Կարգավորումները կարող եք թողնել անփոփոխ, ուղարկել կոճակի դիմաց պատճենել և տեղադրել 2 տող։

Ֆայլի վերբեռնում

Հաղորդագրության ուղարկման ձևին կարող եք կցել ֆայլ: Կարգավորումներում դուք կարող եք նշել առավելագույն չափը բայթերով և վերբեռնման համար թույլատրված ձևաչափերը, օրինակ՝ jpg .tiff .doc

Ներկայացնել կոճակը

Ձևաթղթի ներկայացում. «Պիտակ» բաժնում կարգավորումներում կարող եք տալ կոճակի անունը (Ուղարկել, պատասխանել, ուղարկել 🙂)

Կոնտակտային ձև 7-ի արտաքին տեսքի հարմարեցում

Քանի որ պլագիններն ունեն թարմացման հատկություն, մենք փոփոխություններ կկատարենք ձևի տեսքի մեջ կայքի թեմայի style.css ոճի ֆայլում:

Հետևյալ կոդը պատասխանատու է ձևի, դրա դաշտերի և այլ տարրերի ցուցադրման համար.

Wpcf7 (ֆոնի գույնը՝ #ddd;) / * ձևի ֆոնի գույնը * / .wpcf7 մուտքագրում, .wpcf7 տեքստային տարածք (լիցք՝ 5px; գույն՝ # 1D1D1D; տառատեսակ՝ ընտանիք՝ Arial, Helvetica, sans-serif; տառաչափ՝ 16px; գծի բարձրություն՝ 20px; եզրագիծ՝ 1px պինդ # C7C7C7; տուփ-ստվեր՝ ներդիր 2px 2px 8px # F9F9F9; -webkit-transition՝ բոլորը 0.2 վրկ հեշտություն; -moz-անցում. բոլորը 0.2 վրկ հեշտություն; -o-անցում բոլորը 0.2 վրկ. հեշտություն; անցում. բոլորը 0.2 վ մուտքագրում (սահման՝ ոչ մեկը, լիցք՝ ձախ՝ 0, լուսանցք՝ ձախ՝ 0;) .wpcf7 ընտրել (ուրվագիծը՝ ոչ մեկը, տառաչափը՝ 16 px; տառատեսակ՝ ընտանիք՝ Arial, Helvetica, sans-serif;) .wpcf7 մուտքագրում: սավառնել, .wpcf7 մուտքագրում` ֆոկուս, .wpcf7 մուտքագրում` ակտիվ, .wpcf7 տեքստային տարածք` սավառնում, .wpcf7 տեքստային տարածք` ֆոկուս, .wpcf7 տեքստային տարածք` ակտիվ (ֆոն` #FDFDFD; ուրվագիծ` ոչ մեկը;)

Ինչ կա, ինչ.

.wpcf7 մուտքագրում, .wpcf7 տեքստային տարածք - մուտքագրման դաշտի ոճը (տեքստային դաշտ)

1. լիցքավորում- սահմանում է նահանջը բովանդակությունից մինչև տարրի սահմանը: Ահա դաշտում մուտքագրված տեքստից դեպի դաշտի եզրագիծը նահանջը: Սահմանեք արժեքը պիքսելներով Xpx, որտեղ X-ը պիքսելների թիվն է: Օրինակ՝ լիցք՝ 5px 3px 6px 8px;
2. գույն- տեքստի գույնը:
3. տառատեսակ-ընտանիք- մուտքագրման դաշտերի տառատեսակը:
4. տառաչափ- տառաչափը
5. գիծ-բարձրություն- գծի բարձրությունը
6. սահման- եզրագիծ մուտքագրման դաշտի շուրջ
7. տուփ-ստվեր- արգելափակել ստվերը: ներդիրցույց է տալիս, որ ստվերը ներքին է: Եթե ​​Ձեզ անհրաժեշտ է արտաքին ստվեր, բաց թողեք այս արժեքը: Երկրորդ և երրորդ արժեքները 2px 2px ցույց են տալիս ստվերի միաձուլումը համապատասխանաբար հորիզոնական և ուղղահայաց: Չորրորդ արժեքը՝ 8px, սահմանում է ստվերի մշուշման շառավիղը: Հինգերորդ - # F9F9F9 - ստվերի գույն:

Անհատականացնելով Կոնտակտային ձև 7 կոճակը

.buttons_form (լրացում՝ 0px; բարձրություն՝ 30px; լայնություն՝ 150px! կարևոր; եզրագիծ՝ ոչ մեկը! կարևոր; կուրսորը՝ ցուցիչ; գույնը՝ #fff; -webkit-border-radius՝ .5em; -moz-border-radius:. 5em; եզրագծի շառավիղ՝ .5em; գույն՝ #faddde; եզրագիծ՝ ամուր 1px # 980c10; ֆոն՝ # d81b21; ֆոն՝ -webkit-գրադիենտ (գծային, ձախ վերև, ձախ ներքև, (# ed1c24), մինչև (# aa1317)); ֆոն՝ -moz-linear-gradient (վերև, # ed1c24, # aa1317); զտիչ՝ progid՝ DXImageTransform.Microsoft.gradient (startColorstr = «# ed1c24», endColorstr = «# aa1317»);

Կոնտակտային ձև 7 Ծանուցման ոճ

Նա պատասխանատու է սխալ հաղորդագրությունների կամ հաջող ներկայացումների համար:

Wpcf7 .wpcf7-validation-errors (սահմանը՝ ոչ մեկը; ֆոնի գույնը՝ # 246416; գույնը՝ #fff; լուսանցք՝ 0; լիցք՝ 20 px; -webkit-border-radius՝ 10px; -moz-border-radius՝ 10p; եզրագծի շառավիղ՝ 10px;) .wpcf7 .wpcf7-mail-sent-ok (սահմանագիծը՝ ոչ մեկը; ֆոնի գույնը՝ # 7ad33f; լուսանցք՝ 0; լիցք՝ 20 px; -webkit-border-radius՝ 10px; -moz-border -շառավիղը՝ 10px; եզրագծի շառավիղը՝ 10px;) .wpcf7 .wpcf7-mail-sent-ng (սահմանը՝ ոչ մեկը; ֆոնի գույնը՝ # 349622; լուսանցք՝ 0; լիցք՝ 20 px; -webkit-border-radius: 1 ; -moz-border-radius. 10px; border-radius. ձախ՝ 5px; լիցք-աջ՝ 5px; եզրագծի շառավիղը՝ 10px; լայնությունը՝ 290px; գույնը՝ սպիտակ; / * 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); box-shadow՝ 3px 3px 3px rgba (0,0,0,0,3);)

Եվ հիմա, հարմարության համար, ամբողջ ծածկագիրը մեկնաբանություններով.

Wpcf7 (ֆոնի գույնը՝ #ddd;) / * ձևի ֆոնի գույնը * / .wpcf7 մուտքագրում, .wpcf7 textarea (/ * Կոդի այս մասը պատասխանատու է մուտքագրման դաշտերի ոճի, տեքստի տարածքների համար * / լիցքավորումը՝ 5px ; / * Սահմանում է դաշտերի տարրից նահանջը դրա բովանդակությունից առաջ, կարող եք տեղադրել ցանկացած արժեք, օրինակ՝ 10px * / գույնը՝ # 1D1D1D; / * Տեքստի գույնը մուտքագրման դաշտերում * / տառատեսակ-ընտանիք՝ Arial, Helvetica, sans- serif; / * Տեքստի տառատեսակը մուտքագրման դաշտերում * / տառատեսակի չափը` 16px; / * Տեքստի չափը մուտքագրման դաշտերում * / տողի բարձրությունը` 20px; / * Տողի բարձրությունը մուտքագրման դաշտերում * / եզրագիծ՝ 1px կոշտ # C7C7C7; / * Դաշտերի շուրջ եզրագիծը: Առաջին արժեքը պիքսելներով լայնությունն է, երկրորդը՝ եզրագծի ոճը, երրորդը՝ դրա գույնը * / տուփ-ստվերը՝ ներդիր 2px 2px 8px # F9F9F9; / * Ստվեր մուտքագրման դաշտերից: 2px - տեղաշարժ x առանցքի երկայնքով, 2px - տեղաշարժ y առանցքի երկայնքով, 8px - ստվերի մշուշման շառավիղ, # F9F9F9 - ստվերի գույն * / -webkit-անցում. բոլորը 0,2 վրկ հեշտություն; -moz- անցում. բոլորը 0.2 վրկ հեշտություն; -o-անցում. բոլորը 0.2 վրկ հեշտություն; անցում. բոլորը 0.2 վրկ հեշտություն;) 25px;) .w pcf7 .wpcf7-list-item մուտքագրում (սահման՝ none; padding-ձախ՝ 0; լուսանցք-ձախ՝ 0; ) .wpcf7 ընտրել (ուրվագիծը՝ ոչ մեկը, տառաչափը՝ 16px; տառատեսակի ընտանիք՝ Arial, Helvetica, sans-serif;) սավառնել, .wpcf7 տեքստային տարածք՝ ֆոկուս, .wpcf7 տեքստային տարածք՝ ակտիվ (/ * Այս մասը պատասխանատու է մուտքագրման դաշտերի ոճի համար, երբ մկնիկի ցուցիչը գտնվում է դրանց վրա * / ֆոն՝ #FDFDFD; / * Մուտքի դաշտի ֆոնը, երբ մկնիկի ցուցիչը դրա վրա է * / ուրվագիծը. ոչ մեկը, / * Տեքստի մուտքագրման դաշտի արտաքին եզրագիծը * /) .wpcf7 input.wpcf7-submit (/ * Կոդի այս մասը պատասխանատու է Ներկայացնել կոճակի ոճի համար: ձև * / -webkit-անցում` 0; -moz-անցում` 0; - o-անցում` 0; անցում` 0; եզրագիծ` ոչ մեկը; / * Կոճակի շուրջ եզրագիծ * / դիրքը` հարաբերական; գույնը` #fff; / * Տեքստի գույնը * / text-transform՝ մեծատառ; / * Տեքստի փոխակերպում (մեծատառ նշանակում է, որ կոճակի տեքստը կցուցադրվի մեծատառերով) * / / * Կլոր կոճակի անկյուններ: Հետևյալ երեք հատկությունների արժեքները պետք է լինեն նույնը, քանի որ դրանք նույնն են, միայն տարբեր բրաուզերների համար * / -webkit-border-radius: 6px; / * Chrome-ի համար կլորացված անկյուններ * / -moz-border-radius՝ 6px; / * Mozilla FireFox-ի համար կլորացված անկյուններ * / սահմանային շառավիղ՝ 6px; / * Կլորացնելով անկյունները բոլոր մյուս բրաուզերների համար, ներառյալ շարժականները * / տառաչափը՝ 14px; / * Կոճակի տեքստի չափը * / տառատեսակի քաշը՝ թավ; / * Տեքստի ոճը (bold նշանակում է թավ) * / padding-top՝ 11px; / * Վերին լիցք տարրի եզրից մինչև դրա պարունակությունը * / padding-bottom՝ 10px; / * Լիցքավորում տարրի եզրից ներքևից մինչև դրա պարունակությունը * / padding-left: 35px; / * Լիցքավորում տարրի եզրից ձախ դեպի դրա բովանդակությունը * / padding-right՝ 35px; / * Նահանջ տարրի եզրից աջից մինչև դրա բովանդակությունը * / / * Գրադիենտ ֆոն - կոճակի գրադիենտ ֆոն * / ֆոնի գույնը՝ # 000000; / * Կոճակի ֆոնի գույնը, եթե գրադիենտը չի աջակցվում բրաուզերի կողմից * / / * Հետևյալ հատկություններում գույները պետք է նշվեն նույնը, քանի որ դրանք նույնն են, միայն տարբեր բրաուզերների համար: Եկեք նայենք առաջին գույքին: (# 676767), մինչև (# 3B3B3B) հատվածը նշանակում է, որ դուք պետք է ցուցադրեք գրադիենտը, որտեղ անցումը # 676767 գույնից) անցնում է # 3B3B3B * / ֆոն․ -webkit-գրադիենտ (գծային, ձախ վերևում, ձախ ներքևից, (# 676767), մինչև (# 3B3B3B)); ֆոն. -moz-linear-gradient (վերև, # 349622, # 246416); զտիչ՝ progid՝ DXImageTransform.Microsoft.gradient (startColorstr = «# 349622», endColorstr = «# 246416»); -ms-ֆիլտր. "progid: DXImageTransform.Microsoft.gradient (startColorstr = # 349622, endColorstr = # 246416)"; / * Drop Shadow - Կոճակի ստվերը: Ստվերի գույնը նշված է 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); տուփ-ստվեր՝ 0 2px 5px rgba (0,0,0,0.3); ) / * Հովերի վրա - Հովերի վրա կոճակի ոճը: Ամեն ինչ գրեթե նույնն է, ինչ նախորդ բլոկում * / .wpcf7 input.wpcf7-submit: սավառնել (կուրսորը՝ ցուցիչ; տեքստի ձևավորում՝ ոչ մեկը; ֆոնի գույնը՝ # 000000; ֆոնը՝ -webkit-գրադիենտ (գծային, ձախ վերևում , ձախ ներքևից, (# 246416), մինչև (# 349622)); ֆոն. ", endColorstr =" # 349622 "); -ms-filter:" progid: DXImageTransform.Microsoft.gradient (startColorstr = # 246416, endColorstr = # 349622) ";) / * Սեղմելով - կոճակի ոճը, երբ սեղմում եք դրա վրա Գրեթե նույնը, ինչ նախորդ բլոկում * / .wpcf7 input.wpcf7-submit: ակտիվ (վերևում` 1px; գույնը` # d8c6e2; / * Կոճակի տեքստի գույնը, երբ սեղմում եք դրա վրա * / ֆոնի գույնը` # 000000; ֆոն : -webkit-gradient (գծային, ձախ վերև, ձախ ներքև, (# FF0000), մինչև (# 246416)); ֆոն՝ -moz-linear-gradient (վերև, # FF0000, # 246416); զտիչ՝ progid՝ DXImageTransform Microsoft.gradient (startColorstr = "# FF0000", endColorstr = "# 246416"); -ms-filter: "progid: DXImag" eTransform.Microsoft.gradient (startColorstr = # FF0000, endColorstr = # 246416) "; -webkit-box-shadow՝ ոչ մեկը; -moz-box-shadow՝ ոչ մեկը; տուփ-ստվեր՝ ոչ մի; ) / * CF7 Messages - Հաղորդագրությունների ոճը հաջող ուղարկման, սխալների և այլնի մասին: * / .wpcf7 .wpcf7-validation-errors (/ * Հաղորդագրությունների ոճը վավերացման սխալների համար * / եզրագիծը՝ ոչ մեկը; / * Հաղորդագրության բլոկի շրջանակը * / ֆոնի գույնը՝ # 246416; / * Ֆոնային * / գույնը՝ #fff ; / * Տեքստի գույնը * / լուսանցք: 0; / * Արտաքին լիցք * / լիցքավորում: 20 px; / * Լիցքավորում * / / * Կլորացնելով անկյունները տարբեր բրաուզերների համար - հետևյալ 3 հատկությունները * / -webkit-border-radius: 10px; - moz-border -radius՝ 10px; border-radius՝ 10px;) .wpcf7 .wpcf7-mail-sent-ok (/ * Հաղորդագրությունների ոճը հաջող ուղարկելու մասին * / եզրագիծը՝ ոչ մեկը; / * Հաղորդագրության բլոկի շրջանակ * / ֆոն -գույն՝ # 7ad33f; / * Ֆոնային * / լուսանցք՝ 0; / * Արտաքին լցոնում * / լիցքավորում՝ 20 px; / * Լիցքավորում * // * Տարբեր բրաուզերների համար կլորացված անկյուններ - հետևյալ 3 հատկությունները * / -webkit-border-radius 10px; -moz- border-radius՝ 10px; border-radius՝ 10px;) .wpcf7 .wpcf7-mail-sent-ng (սահման՝ none; ֆոնի գույնը՝ # 349622; լուսանցք՝ 0; padding՝ 20px; - webkit-border-radius՝ 10px; -moz-border-radius՝ 10px; border-radius՝ 10px; գույնը՝ սպիտակ;) .wpcf7 span.wpcf7-not-valid-tip (սահման՝ none; backgrou nd-գույն՝ # 349622; լիցք՝ 5px; padding-ձախ՝ 5px; padding-աջ՝ 5px; սահման-շառավիղ՝ 10px; լայնությունը՝ 290px; գույնը `սպիտակ; / * 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); տուփ-ստվեր՝ 3px 3px 3px rgba (0,0,0,0.3); ) .wpcf7-form .fleft (float: ձախ;) .wpcf7-form .mright20 (լուսանցք-աջ՝ 20px;) .wpcf7-form .mright40 (լուսանցք-աջ՝ 40px;) .wpcf7-form .clear (clear: երկուսն էլ;)

WordPress կայքի համար հետադարձ կապի պլագինի տեղադրման, կազմաձևման և օգտագործման մանրամասն հրահանգներ: Կոնտակտային ձև 7 հավելվածը միացված է այս պահինլավագույնն է իր կատեգորիայում:

Այն փաստը, որ նույնիսկ վճարովի պլագինների մեջ ակնհայտ այլընտրանք չկա, կարելի է դատել նրանով, թե որքան հաճախ է օգտագործվում Կոնտակտային ձև 7 հավելվածը: Այս գրելու պահին այս փլագինը ներբեռնվել է ավելի քան 28,800,000 անգամ միայն պաշտոնական WordPress կայքից: իսկ միջին գնահատականը 5-ից 4,5 է։ Սա իսկապես մեծ հաջողության ցուցանիշ է։ Բացի այդ, եթե նայեք պրեմիում պրեմիում WP-ի ամենավաճառվող թեմաներին, կգտնեք Կոնտակտային ձև 7 հավելվածը, ինչպես խորհուրդ է տրվում կամ տեղադրված է լռելյայն դրանցից գրեթե բոլորում:

Կոնտակտային ձև 7 հավելվածը «կենդանի է», թարմացվում է հեղինակի կողմից յուրաքանչյուրի հետ նոր տարբերակ WordPress. Սխալներն ու սխալները արագ վերացվում են: Առավել հաճախ օգտագործվող պլագինների հետ ակնհայտ հակասություններ չեն հայտնաբերվել:
Կոնտակտային ձև 7 հավելվածը լիովին անվճար է, ներառյալ. համար կոմերցիոն օգտագործում... Պլագինը կարգավորումների վահանակում տեղադրելուց հետո դուք կգտնեք հեղինակի «նվիրատվության» խնդրանքը:

Կոնտակտային ձև 7 հավելվածի տեղադրում

Դուք կարող եք ներբեռնել Կոնտակտային ձև 7 հավելվածը պաշտոնական WordPress կայքից (վերևի հղումը) կամ ուղղակիորեն ներդիրի միջոցով "Plugins"> "Add new"> Line "Search plugins"> drive in "Contact Form 7"... Մի մոռացեք ակտիվացնել plugin-ը նախքան սկսելը. «Մոդուլներ»> «Տեղադրված»> գտեք հավելվածի Կոնտակտային ձև 7> սեղմեք «Ակտիվացնել»... Ձեր կայքի կողային ադմինիստրատորի վահանակում կհայտնվի նոր տարր՝ «Կոնտակտային ձև 7»:

Կոնտակտային ձև 7 հավելվածի կարգավորում

Հաճելին այն է, որ կոնտակտային ձև 7 հավելվածը լռելյայն բազմալեզու է: Եթե ​​WordPress-ի ձեր տարբերակը ռուսերեն է, ապա plugin-ը նույնպես ամբողջությամբ ռուսերեն կլինի, և դուք կարող եք ստեղծել հետադարձ կապի ձև ցանկացած լեզվով։ Յուրաքանչյուր ձևի ստեղծման ժամանակ նշվում է ձևի լեզուն: Կարգավորումների համար առանձին բաժին չկա, բոլոր կարգավորումները անհատական ​​են յուրաքանչյուր առանձին ձևի համար:

Հետադարձ կապի ձև ավելացնելու օրինակ

1. Ընտրեք ադմինիստրատորի վահանակում «Կոնտակտային ձև 7»> «Ձևեր»> կոճակը «Ավելացնել նոր» էջի վրա.

2. Ձեզ կառաջարկվի ընտրել ձևի լեզու: Նախնականը «ռուսերեն» է: Մենք սեղմում ենք «Ավելացնել նոր» կոճակը
3. Ձեր առջև բացվել է պատուհան, որտեղ կարող եք ստեղծել ձեր ձևը ձեր կարգավորումներով։

Հնարավորությունները լայն են, բայց ես ուզում եմ անմիջապես նշել մի քանի առանձնահատկություններ: Պատուհանը, որում այն ​​բացվել է, պարունակում է մի քանի ներդիր՝ «Ձևի ձևանմուշ», «Նամակ», «Ծանուցումներ ձևաթղթի ներկայացման ժամանակ», «Լրացուցիչ կարգավորումներ»։ Վերջին ներդիրըդա ձեզ պետք չէ, դա ավելի շատ հարմարեցում է առաջադեմ օգտատերերի և ծրագրավորողների համար: Եկեք մանրամասն նայենք մնացածին:

«Ձևերի ներկայացման ծանուցումներ»- սրանք այն հաղորդագրություններն են, որոնք ձեր կայքի այցելուն կտեսնի ձևը ներկայացնելիս: Պարունակում է հաղորդագրությունների տարբերակներ ինչպես հաջողված, այնպես էլ սխալներով ու ձախողումներով: Դուք կարող եք փոխել այս համակարգի հաղորդագրությունները ձեր հայեցողությամբ:

«Ձևի ձևանմուշ»- այս բաժնում դուք կստեղծեք Tags, որոնք պատասխանատու են ձևում անհրաժեշտ դաշտերի առկայության համար:

«Նամակ»- սա նամակի տեսքն ու բովանդակությունն է, որը դուք կստանաք այցելուի ձևը լրացնելուց հետո:

ՈՒՇԱԴՐՈՒԹՅՈՒՆ.հիմա մենք կվերլուծենք, թե ինչ են պիտակները և ինչ դաշտեր են ստեղծում։ Այս բոլոր թեգերը մուտքագրվում են «Ձևի ձևանմուշ» ներդիրում, բայց եթե «պատասխանի պիտակները» ձեռքով չմտցնեք (!) «Նամակ» ներդիրում, ապա լրացված ձևերն ամբողջությամբ չեն գա ձեր փոստ։

4. «Ձևի ձևանմուշ» ներդիրում պիտակների ընտրանքներ:

- տեքստ:ավելացնում է տեքստային տուփ (կարճ):
- էլ.էլփոստի համար նախատեսված դաշտ:
- URL:դաշտ՝ կայքի հասցեն կամ որևէ հղում նշելու համար:
- հեռ.կոնտակտային հեռախոսի դաշտ
- թիվ:դաշտ, որտեղ կարելի է մուտքագրել միայն թվային արժեք
- ամսաթիվ:ամսաթվի ձևաչափի դաշտ
- տեքստային տարածք.ավելացնում է տեքստային տուփ (երկար):
- բացվող ընտրացանկ.բացվող ցուցակ: Դաշտն ունի լրացուցիչ պարամետրեր... Ցանկը, որը դուրս կգա, նշված է «Ընտրանքներ» դաշտում: Ավելին, ցուցակի մեկ տարրը մեկ տողում (ստորակետներով չբաժանված): Եթե ​​«Թույլատրել մի քանի ընտրություն» նշված է, օգտվողը կկարողանա ընտրել մեկից ավելի տարբերակներ ձեր ցանկից: Եթե ​​«Տեղադրեք դատարկ տարրը որպես առաջին տարբերակ» կողքին նշան կա, ապա վերևում լռելյայն կավելացվի դատարկ դաշտ, որը նույնպես կարող է ընտրել օգտատերը:

- վանդակներ.Նշման տուփ (ստուգման նշաններ): Դաշտն ունի մի քանի կարգավորում։ «Ընտրանքներ» դաշտում նշված է վանդակների ցանկը: Եվ մեկ տողի վրա մեկ վանդակ (ստորակետներով չբաժանված): Եթե ​​«Put a label first, a checkbox last» կողքին կա վանդակ, ըստ կանխադրման վանդակը կլինի առաջին վանդակում: Եթե ​​«Դարձնել վանդակները բացառիկ» կետը նշված է, ապա օգտվողը կկարողանա նշել վանդակներից միայն մեկը:

- ռադիո կոճակներ.ռադիո կոճակներ: Ռադիո կոճակները միշտ թույլ են տալիս ցանկից ընտրել միայն մեկ տարր: Ցանկ մուտքագրելը նման է սյունակի վանդակներին: Կարգավորումներից կարող եք միացնել «Նախ դրեք պիտակը, վերջում՝ վանդակը», այնուհետև ցուցակից առաջին ռադիոկոճակը կընտրվի լռելյայն:

- ընդունում:վանդակը, առանց նշելու այն վանդակը, որին հաղորդագրությունը չի ուղարկվի: Իրականում սա հնարավորություն է օգտատիրոջ անվերապահ համաձայնությունն ինչ-որ բանի վրա վերցնելու, հակառակ դեպքում նամակը չի ուղարկվի։ Օրինակ՝ «Դուք համաձայնում եք, որ ձեր տրամադրած տեղեկատվությունը կմշակվի մեր օպերատորների կողմից»:

- վիկտորինան: plugin նորարարություն. Այս դաշտը թույլ է տալիս ստեղծել հարց և դրա պատասխանը: Իդեալական է սպամի պաշտպանության համար: Տեսեք հարց ու պատասխանի ձևաչափումը պիտակների ստեղծման ձևում:

Ցանկացած դաշտ կարող է պարտադիր լինել (սովորաբար նման դաշտերը նշված են *-ով), դրա համար անհրաժեշտ է նշել վանդակը Դաշտի տեսակը> Պարտադիր դաշտ. Ուշադրություն.Մի մոռացեք տեքստում օգտվողներին նշել, որ դաշտը պետք է լրացվի:

- CAPTCHA: captcha-ն տեղադրվում է միայն որպես լրացուցիչ հավելում: Բայց սկզբունքորեն, վիկտորինայի պիտակի դեպքում կաթիլների կարիքը շատ ավելի քիչ է:

- ֆայլ:դաշտը ստեղծում է պիտակ, որը թույլ է տալիս օգտվողին ֆայլ կցել հաղորդագրությանը: Հատկորոշիչների կարգավորումներում կարող եք նշել կցված ֆայլի «Ֆայլի չափի սահմանաչափը (բայթ)» առավելագույն չափը, ֆայլի թույլատրելի տեսակները (ընդարձակումներ՝ առանձնացված ստորակետերով): Ուշադրություն, եթե չեք նշում կցված ֆայլի առավելագույն չափը, ապա լռելյայն այն որոշվում է ձեր սերվերի հնարավորություններով։ Սահմանափակումների մասին ստույգ տեղեկությունը կարող եք ստանալ հոսթինգ ընկերությունից։ Սովորաբար առավելագույն չափը սահմանափակվում է 10 ՄԲ-ով:

submint. թեգը ավելացնում է «Ներկայացնել» կոճակը (անունը կարող է փոխվել):
Սա էկրան է իմ ստեղծած բոլոր պիտակներով, իսկ ներքևում ներկայացված է կայքի ձևի էկրանը: Խնդրում ենք նկատի ունենալ, որ «Ձևի ձևանմուշը» աջակցում է HTML պիտակներին, ուստի ես օգտագործում եմ հետևյալ բացատրությունները օգտվողների համար: օգտագործելով HTMLպիտակներ.

5. «Նամակ» ներդիրը:

Այժմ եկեք գնանք նամակի ստեղծման ձևին, որը կուղարկվի ձեզ և ավելացնենք այն պիտակները, որոնք մենք օգտագործել ենք «ձևի ձևանմուշում»: Ուշադրություն դարձրեք էկրանին. Նամակի մարմնում չներառված դաշտերը ցուցադրվում են ներդիրի վերևում սև գույնով, իսկ տառի մարմնում առկա դաշտերը մոխրագույն են:

Մենք դրանք ավելացնում ենք հաղորդագրության հիմնական մասում («Հաղորդագրության տեքստ» դաշտ). պարզապես պատճենեք սևով ընդգծված պիտակները և տեղադրեք դրանք հաղորդագրության մարմնի ձևի մեջ: Խնդրում ենք նկատի ունենալ, որ պիտակներում նշված թվերը համընկնում են եզակի դաշտերի համարների հետ, որոնք ավելացրել եք ձևանմուշում: Այսպիսով, դուք կարող եք բացահայտել, թե որ դաշտը ինչին է վերաբերում և ստորագրել դրանք անմիջապես նամակի տեքստում, որպեսզի հետո չշփոթվեք։
Մենք պահպանում ենք փոփոխությունները:

6. Ձևաթղթի տեղադրում կայքում։

Ձև ստեղծելու էջից պատճենեք կարճ կոդը (սովորաբար այն ընդգծվում է կապույտ կամ շագանակագույնով) և տեղադրեք այն ցանկացած էջի կամ գրառման մեջ։

Կողմերն ու թերությունները մի խոսքով

կողմ
+ մեծ թվովդաշտերի տեսակները
+ բազմալեզու աջակցություն
+ օգտագործման հեշտություն
+ անվճար
+ հուսալի
+ չի հակասում այլ պլագինների հետ
+ Կոնտակտային ձև 7 հավելվածը մշակվում է

Մինուսները:
- մենք չպետք է մոռանանք գեներացված տառին ավելացնել լրացուցիչ պիտակներ
- Ձևի և տառի ձևավորումը պահանջում է HTML-ի նվազագույն իմացություն

Եզրակացություն:հաստատ հիանալի խմբագիր, եթե ոչ լավագույնը: Գոհ է ճկունությունից, հուսալիությունից և կայունությունից: Եթե ​​վճարվեր, ապա դեռ կգնեն, քանի որ դրան մոտ այլ որակ չկա: Ես խորհուրդ եմ տալիս Կոնտակտային ձև 7 հավելվածը: