ფორმა 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+]
კოდის გაანალიზებით, მოდით გადავიდეთ მხეცზე ბოლოში:
&ჰუკები - აქ დამატებულია სხვადასხვა კაკვები, მათ შორის თვითნაწერი: ჩვენს ხედს აქვს 2 სტანდარტული: საფოსტო სკრინშოტი. რეშტა ხუკივის შესახებ, მე ვატყობინებ ვიდეოს.
&emailTpl - გვერდის განლაგების ნაწილი, შეიძლება იყოს შემდეგი კოდი:
პირის ტიპი: [[+სახელი]]
ტელეფონი: [[+ტელეფონი]]
ელ. ფოსტა: [[+email]]
შეტყობინებები: [[+ შეტყობინება]]
&emailTo - ელფოსტის მისამართები, სადაც ფორმების ჩანაცვლება ხდება ამ კონკრეტულ ტიპსუბრძანა სისტემური კორექტირება(გასაღები) ++ელფოსტის გამგზავნი
&emailSubject - ფურცლის საგანი, რომელიც ძალაშია
&validate - მორგებული ენის ველები შევსებისთვის და ხშირად ველები სპამისგან დაცვისთვის
&successMessage - შეტყობინება წარმატებული გადაჭარბების შემდეგ
არ გავაანალიზებ ფორმის კოდს, ვის აინტერესებს ვიდეო და წაიკითხავს დოკუმენტაციას: docs.modx.com/extras/revo/formit
ფორმას მიმაგრებული ფაილები
იმისათვის, რომ შეძლოთ დანართის მიმაგრება და რედაქტირება, აუცილებელია ჩაწეროთ ფორმის ტეგი
Enctype = მრავალნაწილიანი / ფორმა-მონაცემები
და აუცილებელია ფაილის მიმაგრების ველების დამატება
მუშავდება ჩამრთველი და ვარიანტი
Dekіlka ყალიბდება ერთ მხარეს
უბრალოდ დაწერეთ კანის ფორმის ვიკიში
&submitVar='მე ინგლისურ ფორმაში ვარ'
კანის ფორმას თავისი სახელი აქვს.
სპამის წინააღმდეგ ბრძოლა
არ თქვათ, მაგრამ თქვენ ნამდვილად აწერთ სპამს ეფექტური გზაებრძოლო მას - ასე რომ შენ თვითონ შეგიძლია სცადო.
პრაქტიკულად ყველა კომერციულ საიტზე არის საკონტაქტო გვერდი, რომელზეც განთავსებულია საკონტაქტო ფორმა, რომლის მეშვეობითაც შეგიძლიათ დაწეროთ საიტის ადმინისტრაცია. დღეს ჩვენ განვიხილავთ, თუ როგორ სწრაფად შევქმნათ საკონტაქტო ფორმა. შეასრულეთ პაკეტზე დახმარებისთვის საპასუხო ზარის ფორმა ფორმატიპაკეტის ბმულზე აიაქსის ფორმა, დააინსტალირეთ, თითქოს სუნი არ იყო დაყენებული.
MODX Revo-ზე დაბრუნების ბმულის ფორმის შექმნა პერსონალური მონაცემების დამუშავების ნებართვით ექვემდებარება კანონის No152-FZ „პერსონალური მონაცემების შესახებ“ 27.07.2006წ.
ჯერ შევქმნათ ბლოკი, რომ თავად ფორმა შევინახოთ, არ დავდოთ "კონტაქტ-ფორმა" და ახალ კოდში ჩავდოთ სტანდარტული ფორმა, ძირითადად საიტზე ვმუშაობ bootstrap ვიკიებით, ამიტომ ავიღებ ტროჩების სტანდარტული მომზადება და გამეორება, її სტატიკური კოდი იქნება ასეთი:
შენი ძველი სახეგაგიკვირდებათ, რომ ჩემი ფორმა არის სტილიზებული პროექტისთვის, css სტილებივიკლადატი არა ბაჩუ სენსუ.
ღერძი აქ შეგიძლიათ გადახედოთ სხვა ფორმებს getbootstrap.com/css/#forms
და ახლა ჩვენ შეგვიძლია აღვადგინოთ კოდი დინამიურად გაუმჯობესებული სინტაქსით ფორმატიі აიაქსის ფორმა, ნაბიჯ-ნაბიჯ წაიღე.
ახლა მოდით შევქმნათ კიდევ ერთი ბლოკი, რაღაც ფორმის ფურცელი, დავარქვათ მას 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=`შეტყობინება წარმატებით გაიგზავნა!` ]]
არ დაგავიწყდეთ მნიშვნელობის შეცვლა ელფოსტაზეთქვენს ფოსტაზე.
კომპონენტის დოკუმენტაცია:
- FormIt — docs.modx.com/extras/revo/formit
- აიაქსის ფორმა — 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.emailUvaga: ველების მნიშვნელობის სანახავად, ჩამოაყალიბეთ ვიკორური ჩანაცვლების ველები.
სასტვენის რობოტული ფორმის დემონსტრირება
ასეთი სურათების დასახმარებლად ნაჩვენები იქნება სამუშაოს ძირითადი მომენტები და საათები მბრუნავი რგოლის სახით.
MODX - დაბრუნების ბმულის ფორმა, რომელსაც არ გაუვლია ვალიდაცია