ფორმა zvorotny zv'yazok modx evo style. ჩამოაყალიბეთ ზარი დახმარებისთვის FormIt. გადამისამართებულია წარმატებული ვიკონანის მხარეს

გოლოვნა / მუშაობის ოპტიმიზაცია

ჩვენ ერთზე მეტი მხარე დავკარგეთ, მაგრამ მათ ჯერ არ დაუმუშავებიათ თასი. ფასის მხარე კონტაქტები. აქ გვექნება ფორმა საკონტაქტო ინფორმაციისთვის zvorotny zv'azku. MODx-ში არის სპეციალური სნიპეტი ასეთი ფორმის შესაქმნელად - eForm. მოდით შევხედოთ დასაწყისში, თუ რა შეიძლება შექმნას უკანა ბმულის ფორმა.

1. Nasamfored, იგივე ფორმა შეყვანის ველებით მე კი, საფოსტო მისამართი, საცნობარო თემებიდა უმეტესობა რჩევა. სპამისგან თავის დასაცავად, დაამატეთ captcha - ფორმა გენერირებული სურათის კოდის შესაყვანად. ასევე აუცილებელია ჩართოთ შეყვანილი ინფორმაციის სისწორის გადამოწმება.

2. ინფორმაცია შეტყობინების სიძლიერის შესახებ.

3. გაგზავნილი შეტყობინების ფორმა, ფოსტაში მისვლისთანავე.

მოდით შევქმნათ ნაჭერი შაბლონიდან, რათა ჩამოვაყალიბოთ სამაუწყებლო ბმული

მოდით, ჯერ შევქმნათ ნაჭერი შაბლონიდან ბმულის შესაქმნელად, ვნახოთ კოდი, რომელიც აღწერს ფორმას ჩვენს შაბლონში. გახსენით Notepad++ ფაილში contact.htmlრომელიც არის საქაღალდეში C:/xampp/htdocs/site/www/assets/templates/templatemo_250_chess/. იქნება რიგები 135 on 159 ინკლუზიური. იაკ ბაჩიმო, კონტეინერი id = "კონტაქტის_ფორმა", რომელშიც ჩვენი ფორმა ცნობილია. აიღეთ მთელი კოდი საფუძვლად, ჩვენ ვქმნით ახალ ნაწილს ფორმა-tplდა დაამატეთ ჩვენ გვჭირდება ჩანაცვლების ველები:

ზვოროტნი ზვააზოკი


[+validationmessage+]



ელ:email:1" />




შეიყვანეთ თქვენი კოდი:





დე [+validationmessage+]- vodpovidaє vivendennya voіdomlenya-სთვის zapovnennya pіd საათის nadsilannya ფორმების შეწყალების შესახებ.
action="[~[*id*]~]- მიუთითეთ, რომ ფორმა იქნება იმ მხარეში, ფრაგმენტის გამოძახებით. ჩაანაცვლეთ [~[*id*]~] MODX გაგზავნეთ ნაკადის დოკუმენტის URL.
მიუთითეთ ფორმის იდენტიფიკატორი, რომელიც შეგვიძლია მივუთითოთ ფრაგმენტის კომენტარის საათი.
ეტიკეტზე წვდომის გასაღები- დააინსტალირეთ წვდომა ფორმის ელემენტებზე დამატებითი ცხელი ღილაკებისთვის.
eform="ელფოსტის მისამართები:email:1"- აღწერეთ საფოსტო მისამართის შეყვანის ველი, მიუთითეთ შესაყვანი მონაცემების ტიპი და დარწმუნდით, რომ ველი შეკრულია ჩანაწერისთვის. და ბოლოს, შეურაცხმყოფელი პარამეტრის შევსების შაბლონი: eform="[ველის აღწერა]:[შესაყვანი მონაცემების ტიპი]:[შესაყვანი მონაცემთა ველის ტიპი]:[ინფორმაცია ჩანაწერის შეწყალების შესახებ]:[გადაწერის წესი შესასვლელი]" . ალე, ჩვენ გვაქვს სამზე მეტი მნიშვნელობა. ანალოგიურად, eform="Im'ya::1" ივსება th პარამეტრამდე.
[+verimageurl+]გარანტია captcha-სთვის.

ჩვენ ვქმნით ნაწილს შეტყობინებების შესახებ შეტყობინებებიდან

შექმენით ნაწილი მადლობა-tpl

Dyakuyu, scho scurried სახით zvorotnoy zv'yazku ჩვენს საიტზე.

თქვენი შესავალი უმოკლეს ვადაში განიხილება და, ფაქტობრივად, თქვენ მას ენიდან ამოიღებთ.


განახლებული ინფორმაცია:



  • Თქვენი სახელი:[+ავტორი+]

  • Თქვენი ელ. ფოსტა:[+ელფოსტა+]

  • შეტყობინების ტექსტი:[+ტექსტი+]

ჩვენ ვქმნით ნაწილს გაგზავნილი შეტყობინების ფორმით

შექმენით ნაწილი ანგარიში-tplდა იოგაში შემდეგი კოდის გამოყენების ნაცვლად:

ეს შეტყობინება კლერკმა გაუგზავნა მას [+ავტორი+] საპასუხო ზარის დამატებითი ფორმისთვის.






სახელი:[+ავტორი+]
ელფოსტა::[+ელფოსტა+]
შენიშვნები:[+ტექსტი+]

ამ შანსში, ისევე როგორც წინაში, სტენოგრამით შეყვანილი ყველა ინფორმაცია გადაიცემა დამატებითი ჩანაცვლებითი სახით [+ავტორი+]. ამ შემთხვევაში, კანის ჩანაცვლების ადგილის სახელი აღებულია ცვლადის ველის სახელის ატრიბუტის მნიშვნელობიდან დაბრუნების ბმულის სახით ცვლილებაში (სახელი = "ავტორი", სახელი "ელფოსტა" სახელი = "ტექსტი" ).

მოდით შევქმნათ ნაჭერი viklikom-დან მორევის ბმულიდან

შექმენით ნაჭერი im'yam-ისთვის ფორმადა დააყენე კონსტრუქცია იქ:

[! ელექტრონული ფორმა? &formid=`გაგზავნა` &tpl=`form-tpl` &to=` [ელფოსტა დაცულია],[ელფოსტა დაცულია],[ელფოსტა დაცულია]` &mailselector=`otdel` &report=`report-tpl` &thankyou=`thank-tpl` &vericode=`1` &subject=`ანგარიში ჩემს საიტზე`!]

დე &formid=`გაგზავნა- ფორმის იდენტიფიკატორი, რომელიც ჩვენ დავაზუსტეთ form-tpl საგალობლებში
&tpl=`form-tpl`- შაბლონი zvorotny zv'yazka-ს ფორმირებისთვის
&to=` [ელფოსტა დაცულია],[ელფოსტა დაცულია],[ელფოსტა დაცულია]` - ელფოსტის მისამართები დამატებითი ინფორმაციისთვის
&mailselector= `განყოფილება`- დააყენეთ ფორმის ველი, რომელიც გამოიყენება ერთი მისამართის არჩევისას დისტრიბუციების მისამართების სიიდან, რომელსაც (,) პარამეტრის გვერდით &-მდე. ჩვენს გონებას აქვს სია, თუ რა უნდა ნახოთ

[[!+fi.error.name]]
[[!+fi.error.phone]]
[[!+fi.error.email]]
[[!+fi.error.message]]

კოდის გაანალიზებით, მოდით გადავიდეთ მხეცზე ბოლოში:

&ჰუკები - აქ დამატებულია სხვადასხვა კაკვები, მათ შორის თვითნაწერი: ჩვენს ხედს აქვს 2 სტანდარტული: საფოსტო სკრინშოტი. რეშტა ხუკივის შესახებ, მე ვატყობინებ ვიდეოს.

&emailTpl - გვერდის განლაგების ნაწილი, შეიძლება იყოს შემდეგი კოდი:

პირის ტიპი: [[+სახელი]]

ტელეფონი: [[+ტელეფონი]]

ელ. ფოსტა: [[+email]]

შეტყობინებები: [[+ შეტყობინება]]

&emailTo - ელფოსტის მისამართები, სადაც ფორმების ჩანაცვლება ხდება ამ კონკრეტულ ტიპსუბრძანა სისტემური კორექტირება(გასაღები) ++ელფოსტის გამგზავნი

&emailSubject - ფურცლის საგანი, რომელიც ძალაშია

&validate - მორგებული ენის ველები შევსებისთვის და ხშირად ველები სპამისგან დაცვისთვის

&successMessage - შეტყობინება წარმატებული გადაჭარბების შემდეგ

არ გავაანალიზებ ფორმის კოდს, ვის აინტერესებს ვიდეო და წაიკითხავს დოკუმენტაციას: docs.modx.com/extras/revo/formit

ფორმას მიმაგრებული ფაილები

იმისათვის, რომ შეძლოთ დანართის მიმაგრება და რედაქტირება, აუცილებელია ჩაწეროთ ფორმის ტეგი

Enctype = მრავალნაწილიანი / ფორმა-მონაცემები

და აუცილებელია ფაილის მიმაგრების ველების დამატება

[[!+fi.error.upload]]

მუშავდება ჩამრთველი და ვარიანტი

Dekіlka ყალიბდება ერთ მხარეს

უბრალოდ დაწერეთ კანის ფორმის ვიკიში

&submitVar='მე ინგლისურ ფორმაში ვარ'

კანის ფორმას თავისი სახელი აქვს.

სპამის წინააღმდეგ ბრძოლა

არ თქვათ, მაგრამ თქვენ ნამდვილად აწერთ სპამს ეფექტური გზაებრძოლო მას - ასე რომ შენ თვითონ შეგიძლია სცადო.

პრაქტიკულად ყველა კომერციულ საიტზე არის საკონტაქტო გვერდი, რომელზეც განთავსებულია საკონტაქტო ფორმა, რომლის მეშვეობითაც შეგიძლიათ დაწეროთ საიტის ადმინისტრაცია. დღეს ჩვენ განვიხილავთ, თუ როგორ სწრაფად შევქმნათ საკონტაქტო ფორმა. შეასრულეთ პაკეტზე დახმარებისთვის საპასუხო ზარის ფორმა ფორმატიპაკეტის ბმულზე აიაქსის ფორმა, დააინსტალირეთ, თითქოს სუნი არ იყო დაყენებული.

MODX Revo-ზე დაბრუნების ბმულის ფორმის შექმნა პერსონალური მონაცემების დამუშავების ნებართვით ექვემდებარება კანონის No152-FZ „პერსონალური მონაცემების შესახებ“ 27.07.2006წ.

ჯერ შევქმნათ ბლოკი, რომ თავად ფორმა შევინახოთ, არ დავდოთ "კონტაქტ-ფორმა" და ახალ კოდში ჩავდოთ სტანდარტული ფორმა, ძირითადად საიტზე ვმუშაობ bootstrap ვიკიებით, ამიტომ ავიღებ ტროჩების სტანდარტული მომზადება და გამეორება, її სტატიკური კოდი იქნება ასეთი:

კორისტუვალნიცკას რაიონი

შენი ძველი სახეგაგიკვირდებათ, რომ ჩემი ფორმა არის სტილიზებული პროექტისთვის, css სტილებივიკლადატი არა ბაჩუ სენსუ.

ღერძი აქ შეგიძლიათ გადახედოთ სხვა ფორმებს getbootstrap.com/css/#forms

და ახლა ჩვენ შეგვიძლია აღვადგინოთ კოდი დინამიურად გაუმჯობესებული სინტაქსით ფორმატიі აიაქსის ფორმა, ნაბიჯ-ნაბიჯ წაიღე.

[[+fi.error.name]]
[[+fi.error.email]]
[[+fi.error.pfone]]
[[+fi.error.message]]

მე ვაძლევ ნებართვას ჩემი პერსონალური მონაცემების დამუშავებაზე 2006 წლის 27/07/27 კანონის No152-ФЗ „პერსონალური მონაცემების შესახებ“ კანონის შესაბამისად და ვიღებ გონებას.

[[+fi.success:is=`1`:then=`
[[+fi.successMessage]]
`]] [[+fi.validation_error:is=`1`:then=`
[[+fi.validation_error_message]]
`]]

ახლა მოდით შევქმნათ კიდევ ერთი ბლოკი, რაღაც ფორმის ფურცელი, დავარქვათ მას tpl-contact-form შემდეგით:

სახელი: [[+სახელი]]

ელფოსტა: [[+email]]

ტელეფონი: [[+pfone]]

შეტყობინებები: [[+ შეტყობინება]]

ისე, საჭირო გახდა ვისნოვოკის გაზრდა საჭირო ადგილას:

[[!AjaxForm? &snippet=`FormIt` &form=`kontact-form` &emailTpl=`tpl-kontact-form` &hooks=`spam,email` &emailSubject=`საიტის გაფრთხილება [[++site_url]]` &emailTo=` [ელფოსტა დაცულია]` &validate=`name:required,email:required` &validationErrorMessage=`ფორმა ელოდება შეწყალებას!` &successMessage=`შეტყობინება წარმატებით გაიგზავნა!` ]]

არ დაგავიწყდეთ მნიშვნელობის შეცვლა ელფოსტაზეთქვენს ფოსტაზე.

კომპონენტის დოკუმენტაცია:

  1. FormItdocs.modx.com/extras/revo/formit
  2. აიაქსის ფორმაdocs.modx.pro/components/ajaxform

პრინციპის ღერძი და ყველაფერი!

გაკვეთილი, თუ როგორ უნდა შევხედოთ კარიბჭის ფორმირებას CMF-ში MODX Revo lution, გამარჯვებული კომპონენტები, AjaxForm და FormIt.

კომპონენტების მინიჭება FormIt-სა და AjaxForm-ზე

FormIt არის კომპონენტი (ნაწყვეტი) MODX Revolution-ისთვის, სერვერის გვერდითი ფორმის დავალებების დამუშავებისთვის. მანამდე შეგიძლიათ შეცვალოთ ფორმის ველები (დამოწმება). შორეული ბავშვებიდაიცავით საიტი სპამის აღმოფხვრისგან, შეცვალეთ ფორმის მონაცემები ფოსტით, შეინახეთ შევსებული ფორმების ასლი, დააყენეთ გადამისამართება სხვა მხარეს (მაგალითად, ელექტრონული ფოსტით გაგზავნის წარმატებული ფორმის შემდეგ), გამორთეთ ავტომატური გაგზავნის ფუნქცია და სხვა. .

მაგრამ იმისათვის, რომ იმუშაოთ FormIt-თან AJAX-ის საშუალებით, თქვენ უნდა შეცვალოთ დანამატი კომპონენტი ajaxform.

ჯანსაღი რგოლის რობოტული ფორმირების პრინციპი

სანამ MODX Revolution-ის ბმულის შემუშავებაზე გადავალთ, გადავხედოთ მისი მუშაობის ძირითად ალგორითმს.

ფორმასთან საბოლოო გვერდის შეყვანის შემდეგ (ისინი აღებულია AjaxForm სნიპეტის გამოძახების &form პარამეტრში მითითებული ნაწილიდან, როდესაც მხარე იქმნება სერვერზე), შემდეგ გადადით ფინალზე. ატვირთვის დასრულების შემდეგ დააჭირეთ ღილაკს "გაგზავნა" და AjaxForm კომპონენტი ( JavaScript კოდი) გაგზავნეთ სერვერზე AJAX დახმარებისთვის. სერვერზე კომპონენტი აწარმოებს FormIt სნიპეტს და გადასცემს ფორმის მონაცემებს. მონაცემების შეგროვების შემდეგ, FormIt სნიპეტი იქმნება დადასტურების სახით, რადგან ის გადაეცემა კლიენტს AjaxForm კომპონენტის მეშვეობით და ნაჩვენებია გვერდის გვერდზე. Vidpovіd შეიძლება იყოს დადებითი (ეს ნიშნავს, რომ ფორმამ გაიარა ვალიდაცია და, მაგალითად, მონაცემები წარმატებით გაიგზავნა ფოსტაზე) ან უარყოფითი (მაგალითად, როდესაც ფორმა შევსებულია, კორისტუვაჩი შეიწყალა).

შექმნის ფორმა zvorotnyy zvezku

MODX Revolution-ის კარიბჭის ფორმის შესაქმნელად, აუცილებელია შემდეგი ძირითადი ნაბიჯების მიბმა:


მოდით გადავხედოთ მოხსენების მე-2 და მე-4 ნაწილებს.

HTML ფორმის შექმნა Chanzi-ში

გამოძახების ბმულის HTML ფორმის შექმნა შესაძლებელია tpl.AjaxForm.example შაბლონის კოპირებით. მაგალითად, დავამატოთ კოპირებული ნაწილი სახელად tpl.AjaxForm. ეს ნაწილი უკვე მზად არის HTML ფორმის შესაქმნელად, რომელიც შედგება 3 ველისაგან: სახელი, ელფოსტა და შეტყობინება. ძირითადი განყოფილებები, რომლებიც საჭიროებენ ფორმასთან მუშაობას, ძირითადად ახალი კატეგორიების დამატებამდე ან არსებითი კატეგორიების მოცილებამდე მიიღება. კატეგორიის მიხედვით ჩვენ გვესმის ერთმანეთთან დაკავშირებული ელემენტების ჯგუფი: ლეიბლი (ეტიკეტი), ფორმის ელემენტი (შეყვანა, არჩევა, ტექსტური არე) და span ელემენტი (თვალის ჩაკვრა შეწყალების ვალიდაციის ჩვენებისთვის).


ძირითადი პუნქტები:

  • ლეიბლის ტექსტი (ეტიკეტის ელემენტი). დარეკეთ ან ლექსიკონიდან (ბუგატონური საიტებისთვის) ასაღებად ან დამატებითი ტექსტისთვის შუამავლის გარეშე.
  • span ელემენტი პასუხისმგებელია error_name მნიშვნელობის მშობლის კლასის ატრიბუტზე, ამ შემთხვევაში სახელის ფრაზა უნდა შეიცვალოს ფორმის ელემენტის სახელის ატრიბუტის მნიშვნელობით, გარკვეული დახარისხებისთვის.

Respect: placeholder [[+fi.name]], როგორც [[+fi.error.name]] ფორმის ელემენტის მნიშვნელობის ატრიბუტის მნიშვნელობა, რადგან span ელემენტის შინაარსი შესაბამისია მხოლოდ კლასიკური FormIt ნაწარმოებისთვის, ანუ. AJAX-ის გარეშე. სუნი ძლიერდება, რათა შეავსოს ფორმა განმეორებითი ზედმეტად გაძლიერებით, რათა შეინარჩუნოს კორისტუვაჩის შემოღების ღირებულება და გამოიყურებოდეს შეწყალების დადასტურებას.

მაგალითად, დოდამოში HTML ფორმაშეყვანის ველი ტელეფონის ნომერი:

ამ ნაწილის შედეგს აქვს შემდეგი HTML კოდი:

AjaxForm სნიპეტის შურისძიების კოდის შექმნა

Vіdkrivaєmo თარგი, რომელიც vikoristovuvatime რესურსი და შეიყვანეთ კოდი, რომელიც უნდა იყოს ყველა zdіisnyuvati.

[[!AjaxForm? &form=`tpl.AjaxForm` &snippet=`FormIt` &hooks=`FormItSaveForm,ელფოსტა` &emailSubject=`ტესტი შეტყობინება` &emailTo=` [ელფოსტა დაცულია]`&emailFrom=` [ელფოსტა დაცულია]` &emailTpl=`tpl.email` &validate=`name:minLength=^2^,email:email:required,message:minLength=^10^` &validationErrorMessage=`ფორმა ელოდება შეწყალებას!` &successMessage=`შეტყობინება წარმატებით გაიგზავნა` ]]

მოდით შევხედოთ ძირითად პარამეტრებს:

  • &form - პასუხი ნაწილზე ფორმის ამოსაღებად (tpl.AjaxForm).
  • &snippet - ფრაგმენტი, რომელიც ავსებს ფორმას (FormIt).
  • &hooks – კაკვები FormIt ფრაგმენტის შესაერთებლად ფორმის წარმატებული გადაწერის შემდეგ (1 - FormItSaveForm, 2 - ელფოსტა). ჰუკები არის სკრიპტები, რომლებიც იხსნება ფორმის დადასტურების შემდეგ. სუნები ვისი მეშვეობით იკვეთება და თანმიმდევრობით იშვება სათითაოდ. თითქოს ერთში იყო შეწყალება, სხვები არ იწყებენ. ამ გამარჯვებულთა კლასს აქვს 2 კაუჭი. ჩამოკიდეთ FormItSaveForm დავალებები მონაცემთა ბაზაში ფორმების შესანახად. დაამაგრეთ ელ.ფოსტის დავალებები, რათა აიძულოთ მონაცემთა ფორმები ელფოსტაზე.
  • &emailSubject, &emailTo, &emailFrom, &emailTpl - პარამეტრები ელფოსტის თეგის კაუჭისთვის. ისინი განკუთვნილია ჩასართავად ფურცლის თემებით (&emailSubject), რედაქტირების მისამართით (&emailTo), საწყისი სათაურიდან (&emailFrom), ფურცლის შაბლონით (&emailTpl).
  • &validate არის პარამეტრი, რომელიც დამოკიდებულია ფორმის ვალიდაციის მნიშვნელობაზე. პარამეტრის მნიშვნელობა არის ელემენტების სია, რომლებიც იყოფა ერთმანეთში clods-ით. ტყავის ელემენტი შედგება ფორმის ელემენტის სახელწოდებისგან (რომელიც გადასაწერია საჭირო) და წესებისგან (უმეტესად), ერთმანეთისგან გაყოფილი ორმაგი დამატებითი ნიშნისთვის. მაგალითად, სახელი:minLength=^2^ ვალიდატორი ამოწმებს, რომ სახელის ველი იყოს მინიმუმ 2 სიმბოლო. ელფოსტა:email:required validator ამოწმებს, რომ ფოსტის ველი არ ემთხვევა ელფოსტის მისამართს. თქვენ შეგიძლიათ გაეცნოთ ვალიდაატორების შექმნის ძირითად წესებს "FormIt Validators" გვერდზე.
  • &validationErrorMessage - შეწყალების შურისძიება, თითქოს ნაჩვენები იქნება, თითქოს ფორმას ექნება შეწყალება.
  • &successMessage - შეტყობინება, თუ გსურთ ესაუბროთ koristuvach-ს, თუ შეტყობინება წარმატებით გაიგზავნება.

უბრალოდ გამომრჩა tpl.email ბლოკის შექმნა, რაც კარგი შაბლონია ფურცლისთვის.

რჩევა

პირის ტიპი: [[+სახელი]]

ელ. ფოსტა: [[+email]]

ტელეფონი: [[+ტელეფონი]]

შეტყობინებები: [[+ შეტყობინება]]

MODX - Chunk tpl.email

Uvaga: ველების მნიშვნელობის სანახავად, ჩამოაყალიბეთ ვიკორური ჩანაცვლების ველები.

სასტვენის რობოტული ფორმის დემონსტრირება

ასეთი სურათების დასახმარებლად ნაჩვენები იქნება სამუშაოს ძირითადი მომენტები და საათები მბრუნავი რგოლის სახით.


MODX - დაბრუნების ბმულის ფორმა, რომელსაც არ გაუვლია ვალიდაცია



© 2022 androidas.ru - ყველაფერი Android-ის შესახებ