ხმები და მუსიკა 

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

გამარჯობა, ძვირფასო მკითხველებო! ამ სახელმძღვანელოში მე გაჩვენებთ, თუ როგორ შეგვიძლია შევქმნათ HTML5 ელ.ფოსტის გამოწერის ფორმა ელფოსტის დადასტურებით JQuery-ის გამოყენებით. შესამოწმებლად გამოვიყენებთ რეგულარულ გამონათქვამებს და შეყვანილ მისამართს შევინახავთ MySql მონაცემთა ბაზაში. ამრიგად, შენახვისას გამოყენებული იქნება AJAX (ანუ ჩვენ გამოვიძახებთ PHP სკრიპტს გვერდის გადატვირთვის გარეშე). შედეგის ნახვა შეგიძლიათ დემო გვერდზე, ასევე შეგიძლიათ ჩამოტვირთოთ საწყისი კოდი. მოდი დავიწყოთ!

ძირითადი მარკირება

დავიწყოთ ახალი index.html ფაილის შექმნით. და ჩვენ გავაკეთებთ დოკუმენტის მარტივ სტრუქტურას HTML5-ის დაცვით. ჩვენ ასევე დაუყოვნებლივ დავაკავშირებთ CSS სტილებს და ბიბლიოთეკას, ის დაგვჭირდება შეყვანილი ელ. ფოსტის შემოწმებისას:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15





ელ.ფოსტის გამოწერის ფორმა jQuery ვალიდიატორით





ახლა თქვენ მზად ხართ ფორმის შესაქმნელად!

ელ.ფოსტის გამოწერის ფორმა

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

1
2
3
4
5
6
7
8
9



გამოწერა

მოდით, ფორმა გავაფუჭოთ #completeform div ბლოკში, რათა მისამართის შენახვის შემდეგ ფორმა ჩამოიშალოს.

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

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

jQuery ვალიდატორი და AJAX მოთხოვნა

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

მოდით შევხედოთ fullInviteForm() ფუნქციას. იმისათვის, რომ მისამართის შეყვანის ფორმა არ იყოს დამაბნეველი, ჩვენ გამოვიყენებთ fadeOut ეფექტს 400 მილიწამის განმავლობაში. და როგორც გამოძახება, გამოვიძახოთ $.ajax() ფუნქცია, გამოვიყენოთ save.php ფაილის გამოსაძახებლად და შეყვანილი მისამართი მონაცემთა ბაზაში შევინახოთ. ქვემოთ მივცემ save.php ფაილის წყაროს კოდს, მაგრამ ახლა მოდით გადავხედოთ $.ajax() ფუნქციას.

$.ajax - ატვირთავს დისტანციურ გვერდს HTTP მოთხოვნის გამოყენებით. $.ajax() ფუნქცია გადაეცემა ობიექტს, რომელიც შედგება გასაღების/მნიშვნელობის წყვილებისგან, რომლებიც გამოიყენება მოთხოვნის ინიციალიზაციისა და მართვისთვის. ჩვენს შემთხვევაში, ჩვენ გამოვიყენებთ შემდეგ ობიექტებს:

  • type:'POST' - აირჩიეთ ფაილის მოთხოვნის ტიპი, ნაგულისხმევად GET, განსხვავება POST-სა და GET-ს შორის არ არის განსაკუთრებით დიდი, უბრალოდ, GET მოთხოვნით მონაცემები გადაიცემა სათაურში და POST-ით სხეულში. მოთხოვნის შესაბამისად, ასე რომ POST-ის გამოყენებით შეგიძლიათ გადასცეთ მეტი ინფორმაცია;
  • url:'save.php' — გზა შესრულებადი ფაილისკენ;
  • data:'email='+$("#email").val() - მონაცემები, რომლებიც იგზავნება სერვერზე. CSS სელექტორის #email-ის გამოყენებით ჩვენ შევდივართ ელემენტზე id="email"-ით და ვიღებთ მნიშვნელობა ატრიბუტის შიგთავსს, ანუ მომხმარებლის მიერ შეყვანილ ელ.წერილს. და ამ შიგთავსს მივანიჭებთ ელ.ფოსტის ცვლადს, რომელსაც გამოვიყენებთ save.php ფაილში;
  • success: function())( $('#completeform').before ('ყველაფერი მზადაა! თქვენ დამატებული ხართ დაგზავნის სიაში. ');) - წარმატების ფუნქცია გამოიძახება, როდესაც ajax მოთხოვნა წარმატებით დასრულდება. ფუნქცია ასრულებს შემდეგ მოქმედებებს. #completeform div-მდე ჩვენ ვამატებთ კონტენტს, რომელიც აცნობებს მომხმარებელს, რომ მისი ელფოსტა დაემატა დაგზავნის სიას.

1
2
3
4
5
6
7
8
9
10
11
12

ფუნქცია completeInviteForm() (
setTimeout(function () ( $("#completeform" ) .fadeOut (400 , ფუნქცია () (
$.ajax((
ტიპი: "POST",
url: "save.php" ,
data: "email=" + $("#email" ) .val () ,
წარმატება: ფუნქცია() (
$("#completeform" ) .before ( "თქვენ დაასრულეთ! თქვენ დამატებული ხართ დაგზავნის სიაში." ) ; )
} ) ;
} ) ;
} , 1100 ) ;
}

და setTimeout მეთოდის გამოყენებით, ფორმის დამალვა და ajax მოთხოვნის შესრულება ხდება ასინქრონულად 1100 მილიწამის დაგვიანებით.

ფორმის დამუშავება

გვერდის ელემენტებზე წვდომის გასაადვილებლად, მოდით შევქმნათ რამდენიმე ცვლადი #error და #btnwrap სელექტორებით.

var erdiv = $("#error" ) ;
var btnwrap = $("#btnwrap" );

პირდაპირი ღონისძიების დამმუშავებლის გამოყენებით, ჩვენ თვალს ვადევნებთ ღილაკზე „გამოწერა“ დაწკაპუნებას მისი id=”sendbtn”-ით. მეთოდი e.preventDefault();

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

პირველი if(!isEmail(emailval)) ამოწმებს არის თუ არა isEmail ფუნქცია დაბრუნდა false, ეს ნიშნავს, რომ მომხმარებლის მიერ შეყვანილი ელ.ფოსტის მისამართი არ ემთხვევა რეგულარულ გამონათქვამს, ანუ არასწორია, ჩვენ შეატყობინებთ მომხმარებელს ამის შესახებ შეცდომის ბლოკში. და აჩვენეთ შეტყობინება (თქვენ არ შეიყვანეთ თქვენი ელექტრონული ფოსტის მისამართი სწორად).

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

1
2
3
4
5
6
7
8
9
10
11
12

პროცესის გასაგებად, ჩადეთ შესაბამისი ტექსტი შეცდომის ბლოკში და მოათავსეთ GIF სურათი იმ ბლოკში, სადაც ღილაკი „გამოწერა“ იყო განთავსებული. და ჩვენ ვუწოდებთ fullInviteForm() ფუნქციას, რომელიც ზემოთ განვიხილეთ.
თუ (! არის Email(emailval) ) (
erdiv.html ("თქვენ არასწორად შეიყვანეთ თქვენი ელ.ფოსტის მისამართი" ) ;
}
erdiv.css ("ჩვენება", "ბლოკი");
თუ (isEmail(emailval) ) (
erdiv.css ("ფერი", "#719dc8");
erdiv.html ("დამუშავება...");
}
} ) ;
} ) ;

(completeInviteForm(), 900);

მონაცემთა ბაზა

ვინაიდან შევარჩიე შეყვანილი მისამართის მონაცემთა ბაზაში შენახვის მეთოდი, მოკლედ ვისაუბრებ თავად მონაცემთა ბაზის და ცხრილის შექმნაზე, ასევე, დაპირებისამებრ, save.php ფაილის კოდს, რომელიც მუშაობს MySql მონაცემთა ბაზასთან.

ამისთვის დაგვჭირდება ლოკალური სერვერი, მე ვიყენებ Denwer-ს. რა თქმა უნდა, ბევრი იყენებს მას, ამიტომ დეტალებში არ შევალ. გადადით phpMyAdmin-ზე და შექმენით ელ.ფოსტის მონაცემთა ბაზა:

აბონენტების მისამართების შესანახად გვჭირდება ერთი ცხრილი ორი ველით, მოდით დავარქვათ მისამართი:

  • ველები იქნება შემდეგი:
  • id — ელ.ფოსტის მისამართის იდენტიფიკატორი (ასევე ცნობილია როგორც ძირითადი გასაღები);

მისამართი - თავად ელ.ფოსტის მისამართი.

ფაილის save.php

1
2
3
4
5
6

პირველ რიგში, ჩვენ ვამოწმებთ, არის თუ არა ელფოსტის ცვლადი გლობალურ POST მასივში, მის მნიშვნელობას ვანიჭებთ ლოკალურ ცვლადს $email . შემდეგი, ჩვენ ვამყარებთ კავშირს სერვერთან mysql_connect() მომხმარებლის root, პაროლის გარეშე. ჩვენ ვირჩევთ ელ.ფოსტის მონაცემთა ბაზას და ვასრულებთ მოთხოვნას მონაცემთა ბაზაში, ჩავსვით ახალი ჩანაწერი მისამართების ცხრილში, სადაც $email ცვლადის მნიშვნელობა იქნება ჩასმული მისამართების ველებში. ესე იგი!

ამით მთავრდება გაკვეთილი. შეგახსენებთ, რომ ეს გამოწერა მუშაობს მხოლოდ სერვერზე (რადგან ჩვენ ვიყენებთ მონაცემთა ბაზას და ).

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

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

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

შენიშვნა! თითოეულ მოქმედებას დეტალურად არ აღვწერ, მაგრამ შემოგთავაზებთ მზა ვერსიას საწყის კოდში. თუ თქვენ გაქვთ რაიმე შეკითხვები, დაწერეთ კომენტარებში. ჩვენ გავარკვევთ :)

დღეს ჩვენ დავიწყებთ არა jQuery, არამედ ღილაკისა და ფორმის განლაგებით. ჩვენ ყველა სკრიპტს დავამატებთ გვერდის ბოლოს.

ღილაკი, რომელზეც დაწკაპუნებისას გაიხსნება მოდალური ფანჯარა:

დატოვე მოთხოვნა

თქვენ შეგიძლიათ დააყენოთ ნებისმიერი კლასი, მაგრამ href-ში ჩაწერეთ #modal - ეს იქნება კონტეინერის ID დაჩრდილვით და საკონტაქტო ფორმით.

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

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

სტილის დამატების შემდეგ ასე გამოიყურებოდა:


მოდალური ფანჯრის შესაქმნელად გამოიყენეს Remodal ბიბლიოთეკა. ეს არის css და js ფაილების ნაკრები, მხოლოდ ანიმაციური მოდალური ფანჯრების შესაქმნელად. შეგიძლიათ გადმოწეროთ სტატიის ბოლოს ბმულიდან ან ჩემი რედაქტირებით.

ჩვენ ვამატებთ სტილებს სათაურ ტეგებს შორის:

და სანამ სხეულის დახურვის ტეგს, დაამატეთ სკრიპტები:

Script.js არის სკრიპტი ფორმის დასამუშავებლად. იგივე Ajax, რომელიც საშუალებას გვაძლევს განვახორციელოთ მთელი პროცედურა გვერდის გადატვირთვის გარეშე:

$(document).ready(function () ( $("form").submit(function () ( // მიიღეთ ფორმის ID var formID = $(this).attr("id"); // ჰეშის დამატება სახელის ID var formNm = $("#" + formID $.ajax((type: "POST", url: "mail.php", data: formNm.serialize(), წარმატება: ფუნქცია (მონაცემები) (); // გაგზავნის შედეგის ტექსტის გამოტანა $(formNm).html(მონაცემების შეცდომა: ფუნქცია (jqXHR, ტექსტი, შეცდომა) ( // გამოგზავნის შეცდომის ტექსტის ჩვენება $(formNm).html(error); ) ) ));

მე არ მოგაწოდებთ css-ისა და js-ის საწყის კოდს მოდალურ ფანჯარასა და ფორმაზე პასუხისმგებელი ფაილებიდან, რადგან ისინი საკმაოდ დიდია. თუ ასეა, გადახედე წყაროს. მაგრამ PHP დამმუშავებელი ძირითადად სტანდარტულია (თუ შემიძლია ასე ვთქვა):

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

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

ბიჭებო, გთხოვთ, გამოსცადოთ ფორმა რეალურ ან ვირტუალურ სერვერზე (ჰოსტინგზე). დარწმუნდით, რომ თქვენს სერვერს აქვს PHP მხარდაჭერა, გაქვთ ფასიანი გეგმა და არა საცდელი პერიოდი. წინააღმდეგ შემთხვევაში, 90% შემთხვევაში ფორმა არ იმუშავებს.

ნუ დაელოდებით წერილს თქვენს შემოსულებში, თუ უბრალოდ გახსენით ინდექსის ფაილი თქვენს ბრაუზერში და დააწკაპუნეთ ღილაკს "გაგზავნა". Php არის სერვერის მხარის ენა!

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

განთავსებულია სტატიის განახლებული ვერსია

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

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

ჩვენ შევხედეთ მაგალითს. ახლა, მოდით დავყოთ ეს ფორმა მის კომპონენტებად, Html-ში საერთო სტრუქტურის შექმნიდან დაწყებული, CSS-ის გამოყენებით განლაგების იერსახის შექმნამდე.

ფორმის HTML კოდი

არაფერია გამორჩეული, ჩვეულებრივი საკონტაქტო ფორმის უმარტივესი შესაძლო ჩარჩო, რომელიც მოთავსებულია ბლოკ div ელემენტში კონკრეტული იდენტიფიკატორით და კლასით, რათა შემდგომ ჩამოაყალიბოს ფორმის გარეგნობა css-ში და ურთიერთქმედება პატარა ჯავასკრიპტთან, რომელიც დაგვჭირდება გავააქტიუროთ და დახურეთ ამომხტარი ფორმა.

დახურვაგამოგვიგზავნეთ შეტყობინება

დახურვაგამოგვიგზავნეთ შეტყობინება გთხოვთ შეიყვანოთ თქვენი შეტყობინება აქ..

ასევე, pop-up ფორმის გააქტიურებისას ჩვენ უნდა შევქმნათ ჩაბნელებული ფენა ზოგადი ფონისთვის. ეს დავალება შეიძლება შესრულდეს სხვადასხვა გზით, მაგრამ ჩვენ არ ვიქნებით ძალიან ჭკვიანები და დავამატებთ კიდევ ერთ div-ს, მივანიჭებთ მას იდენტიფიკატორს: id="fade" და class: class="black-overlay" . თქვენ შეგიძლიათ განათავსოთ იგი ფორმის გვერდით, რათა საჭიროების შემთხვევაში დიდხანს არ მოგიწიოთ ძებნა.

კავშირი

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

ეს ყველაფერია, ახლა მოდით გადავხედოთ გვერდის სრულ HTML კოდს, რომელიც შეიცავს გამოხმაურების გამოსახულებას:

Pop-up საკონტაქტო ფორმა გამოხმაურებადახურვაგამოგვიგზავნეთ შეტყობინება გთხოვთ შეიყვანოთ თქვენი შეტყობინება აქ..

Pop-up საკონტაქტო ფორმა გამოხმაურებადახურვაგამოგვიგზავნეთ შეტყობინება გთხოვთ შეიყვანოთ თქვენი შეტყობინება აქ..

სანამ სახალისო ნაწილზე გადავალთ, CSS-ის გამოყენებით ჩვენი საკონტაქტო ფორმის სტილს, ცოტას უკან დავიხევ. ყველაზე ყურადღებიანმა ადამიანებმა ალბათ შეამჩნიეს, რომ ფორმის გახსნისა და დახურვის ღილაკები დანერგილია ბმულების სახით "jammer" href="javascript:void(0)" . ეს კარგია თუ ცუდი, ჩემთვის ზუსტი პასუხი არასდროს მიპოვია, ჩვევის გამო ვიყენებ ამ მეთოდს. თუმცა იმ ელემენტებზე, რომლებზეც onclick მოვლენა მუშავდება სკრიპტით, ვფიქრობ, უფრო ლოგიკური და სწორია გამოყენება, ან . თუ გსურთ, ამის გაკეთება ყოველთვის შეგიძლიათ ამ მაგალითის ღილაკებით.

CSS-ის მაგია

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

და აქ არის თავად CSS კოდი, ჩვენი შესანიშნავი ფორმის, რამდენიმე კომენტარით, სიცხადისთვის და ზედმეტი კითხვების თავიდან ასაცილებლად:

/* დააყენეთ ფონის გამუქების ფენა, ** განსაზღვრეთ ჩაბნელების პოზიციები, ფერი და ინტენსივობა */ .black-overlay( ჩვენება: არცერთი; პოზიცია: აბსოლუტური; ზედა: 0%; მარცხნივ: 0%; სიგანე: 100%; სიმაღლე: 100% ფონური ფერი: შავი; 1001; სიმაღლე : 340 px : url (images/envelope.png ) center no-repeat : 1002 : 10% auto ; ფორმა */ .close-btn (სიგანე: 31 პიქსელი; სიმაღლე: 31 პიქს; ჩვენება: ბლოკი; კურსორი: მაჩვენებელი; /* სხვა შემთხვევებისთვის, გარდა ტეგები */ ფონი : url (images/close.png ) ; Glow (Color=#bfa8b2bc, Strength=5) progid:DXImageTransform.Microsoft.dropshadow(OffX = 0, OffY = 1, Color = #80ffffff, Positive = true)"; ფილტრი: progid: DXImageTransform.Microsoft.Glow=Microsoft. #bfa8b2bc , Strength= 5 ) progid: DXImageTransform.Microsoft .dropshadow(OffX = 0, OffY = 1, ფერი = #80ffffff, პოზიტიური = true) ) .თქვენი შეტყობინება ( font-family : "Tame, MS" , sans-color: rgb (255, 255 px) სიმაღლე: 182 px; moz-box-shadow: 0px 1px 0px rgba (255, 255, 255, 0.5), ჩასმული 0px 1px 2px 0px rgba (0 , 0 , 0 , 0.2 ) -pxx0- ; 255 , 255 , 255 , 0.5 ) , ჩასმული 0px 1px 0px rgba (0 , 0 , 0 , 0.2 ) 0px 1px 0px 0px rgba (255, 25x .px . x rgba (0, 0 , 0, 0.2); 5), ჩასმული 0px 1px 3px rgb (97, 108, 122); Microsoft .dropshadow(OffX = 0, OffY = 1, ფერი = #80ffffff, Positive = true);

/* დააყენეთ ფონის გამუქების ფენა, ** განსაზღვრეთ ჩაბნელების პოზიცია, ფერი და ინტენსივობა */ .black-overlay( ჩვენება: არცერთი; პოზიცია: აბსოლუტური; ზედა: 0%; მარცხნივ: 0%; სიგანე: 100%; სიმაღლე: 100% ფონური ფერი: z-ინდექსი: 0.70; სიმაღლე: 340px: url(images/envelope.png) centre no-repeat:1002 position: 10% auto ; ფორმა */ .close-btn ( სიგანე: 31px; სიმაღლე: 31px; ჩვენება: ბლოკი; კურსორი: მაჩვენებელი;/* გამოყენების შემთხვევაში, გარდა ტეგები */ ფონი: url(images/close.png); 5) ,ჩასმული 0px 1px 2px 0px rgba(0,0,0,0.2); 5) ,ჩასმული 0px 1px 3px rgb(97,108,122);

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

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

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

განახლებულია 05/21/2017
მე დავამატე "mail" საქაღალდე წყაროს არქივში, რომელშიც ნახავთ მარტივ PHP დამმუშავებელს ფორმისთვის და კონფიგურაციის ფაილს კონფიგურაციისთვის. დამმუშავებელი არის მიბმული ამ ფორმასთან, მცირე ინსტრუქცია და კომენტარები დაწერილი უშუალოდ დამმუშავებლის ფაილების კოდში, იმედი მაქვს, დაგეხმარება იმის გარკვევაში, თუ რა, სად და რატომ.

პატივისცემით, ანდრეი

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

სტატიის სტრუქტურა

თუ თქვენ ქმნით ვებსაიტს ძრავზე, მაგალითად, Joomla ან WordPress, მაშინ, რა თქმა უნდა, შეგიძლიათ გამოიყენოთ სხვადასხვა მზა გადაწყვეტილებები ფორმებისთვის, მათ შორის დიზაინერებისთვის. მაგრამ რა მოხდება, თუ თქვენ უბრალოდ ქმნით სუფთა HTML-ში და მომხმარებელს სთხოვს ფორმების „აღორძინება“ ისე, რომ ისინი იმუშაონ. ეს არის ის, სადაც ეს ფორმა გამოდგება.

UPD. 08/02/2018
სტატია გადაწერილია იმის გათვალისწინებით, რომ ფორმა გამოქვეყნდა GitHub-ზე

მაშ ასე, დავიწყოთ. უპირველეს ყოვლისა, ჩამოტვირთეთ ფორმის წყაროები ჩემი GitHub საცავიდან.

მე ავაწყე ეს ასამბლეა Gulp ამოცანების მენეჯერის გამოყენებით. მე დავწერე როგორ ვიმუშაო მასთან, აუცილებლად წაიკითხე.

ფორმის დაკავშირება საიტთან

ამოალაგეთ არქივი ფორმასთან ერთად. შემდეგი, დააკოპირეთ ყველა შიგთავსი dist საქაღალდედან ფორმების საქაღალდეში (მაგალითად, ajax-form) თქვენი საიტის შაბლონში. შემდეგი, ჩვენ ვაკავშირებთ რესურსებს - სტილებს და სკრიპტებს. css და js საქაღალდეებში არის ორი ვერსია - შეკუმშული და რეგულარული. თუ სამომავლოდ გეგმავთ კოდში ცვლილებების შეტანას, ჯობია შეუკუმშული ვერსიების დაკავშირება.

თუ თქვენს საიტზე უკვე ჩართულია jQuery ბიბლიოთეკა, თქვენ არ გჭირდებათ მისი დაკავშირება. გთხოვთ გაითვალისწინოთ.

ფორმის ინიცირება

ნება მომეცით დაუყოვნებლივ აღვნიშნო, რომ ველის დადასტურება ორგანიზებულია HTML5-ის გამოყენებით.

ფორმა გამოიძახება .simpleSendForm() მეთოდით, მაგალითად:

$("#idForm").simpleSendForm();

#idForm-ის ნაცვლად ჩვენ ვაზუსტებთ ფორმის იდენტიფიკატორს. ზოგადად, შეგიძლიათ იპოვოთ ფორმის ინიციალიზაციის კოდი scripts.js ფაილში. მოდულის გამოძახების კოდი შეიძლება ამოიჭრას იქიდან და ჩაიწეროს . არ დაივიწყოთ jQuery.(document).ready() .

ფორმას შეუძლია მიიღოს რამდენიმე ვარიანტი.

ოფციები
  • successTitle (სტრიქონი) — მადლობის წერილის სათაური ფორმის გაგზავნისას. ნაგულისხმევი არის "გმადლობთ, რომ გვირჩიეთ!"
  • successText (სტრიქონი) - ტექსტი მადლობის წერილის სათაურის ქვეშ. ნაგულისხმევი არის "ჩვენ დაგიკავშირდებით მალე."
  • errorTitle (სტრიქონი) — ფორმის წარდგენის შეცდომის შეტყობინების სათაური. ნაგულისხმევი არის "შეტყობინება არ გაიგზავნა!".
  • errorSubmit (სტრიქონი) — ფორმის წარდგენის შეცდომის შეტყობინების ტექსტი. ნაგულისხმევი არის "შეცდომა ფორმის გაგზავნისას!".
  • errorNocaptcha (სტრიქონი) — შეცდომის ტექსტი, თუ captcha არ იყო შევსებული.
  • errorCaptcha (სტრიქონი) — შეცდომის ტექსტი, თუ შემოწმება ვერ მოხერხდა.
  • mailUrl (სტრიქონი) — გზა დამმუშავებლის ფაილამდე. ნაგულისხმევი არის "../form-submit/submit.php". თქვენ უნდა შეცვალოთ და მიუთითოთ სრული გზა, თუ თქვენი საქაღალდე „ფორმა-გაგზავნა“ არ არის საიტის ძირში.
  • autoClose (ლოგიკური) - ავტომატურად ხურავს ფანჯარას ფორმის წარმატებული წარდგენის შემდეგ (ფორმებისთვის მოდალურ ფანჯარაში). ფორმის ფანჯარა იხურება, მადლობის შეტყობინებას აჩვენებს 5 წამის შემდეგ. ამ დროის გადალახვა შეიძლება.
  • autoCloseDelay (რიცხვი) - მადლობის გზავნილის ჩვენების ხანგრძლივობა (მილიწამებში), რის შემდეგაც ის დაიხურება. ნაგულისხმევი არის 5000 (5 წამი).
  • გამართვა (ლოგიკური) - ნაგულისხმევად false. ჩართეთ გამართვა, თუ ფორმასთან დაკავშირებული პრობლემებია. იხილეთ შეცდომის შეტყობინებები კონსოლში.
  • captcha (ლოგიკური) - ნაგულისხმევად false. ჩართეთ ან გამორთეთ Recaptcha 2.0.
  • captchaPublicKey (სტრიქონი) — recaptcha საჯარო გასაღები.
ფორმა მოდალურ ფანჯარაში

ჩვენი ფორმა ასევე შეიძლება ნაჩვენები იყოს მოდალურ ფანჯარაში. მოდალს გამოაჩენს ბიბლიოთეკა.

HTML კოდი

ღილაკის კოდი

მოითხოვეთ ზარი

ფორმის კოდი

მოდალური ფანჯრისა და ფორმის ინიცირება. მოდით, ფანჯარა ავტომატურად დაიხუროს 3 წამის შემდეგ. ფორმის წარმატებით წარდგენის შემდეგ. თქვენ ასევე შეგიძლიათ იპოვოთ Magnific Popup ზარის კოდი scripts.js ფაილში.

ფორმის გამოძახება მოდალური ფანჯრით // ======= Init Magnific Popup ======= $(".modal-popup").magnificPopup(( type: "inline", fixedContentPos: false, fixedBgPos : true , overflowY: "auto", closeBtnInside: true, preloader: false, midClick: true, removeDelay: 300, mainClass: "mfp-top-up" )); // ===== მოდალური ფორმის დაწყება ==== $("#idForm").simpleSendForm (( successTitle: "თქვენი განაცხადი მიღებულია!", successText: "ჩვენი თანამშრომელი დაგიკავშირდებათ რაც შეიძლება მალე." , autoClose : true, autoCloseDelay: 3000 )); როგორ ჩართოთ Recaptcha?

თუ გსურთ ჩართოთ recaptcha ფორმაში, მაშინ უნდა დაამატოთ ცარიელი ბლოკი recaptcha კლასით ფორმის html კოდში იმ ადგილას, სადაც გსურთ მისი ჩვენება. შემდეგი, ფორმის მოდულის გამოძახების კოდში, ჩვენ გადავცემთ captcha ოფციას true მნიშვნელობით და თქვენს recaptcha საჯარო გასაღებს გადავცემთ captchaPublicKey ოფციას. შეგიძლიათ მიიღოთ საჯარო და პირადი გასაღებები.

// ===== ჩაწერეთ captcha ფორმაში ==== $("#idForm").simpleSendForm(( successTitle: "თქვენი განაცხადი მიღებულია!", successText: "ჩვენი თანამშრომელი დაგიკავშირდებათ რაც შეიძლება მალე ." , autoClose: true, autoCloseDelay: 3000, captcha: true, captchaPublicKey: "6LeIxAcTAAAAAJcZVRqyHh71UMIEGNQ_MXjiZKhI" ));

შემდეგი, გახსენით ფორმა დამმუშავებლის ფაილი submit.php ფორმა-submit დირექტორიადან. ჩვენ ვეძებთ recaptchaOn ცვლადს (დაახლოებით მე-7 სტრიქონი) და ვაყენებთ მას true-ზე. შემდეგი, მოძებნეთ $secret ცვლადი (დაახლოებით ხაზი 89) და შეცვალეთ პირადი გასაღები საკუთარი.

ძირითადად ყველაფერი. ამ მანიპულაციების შემდეგ, თქვენ უნდა ნახოთ captcha.

გთხოვთ გაითვალისწინოთ, რომ დემო საიტზე captcha მუშაობს სატესტო რეჟიმში, რადგან მითითებულია Google-ის სატესტო კლავიშები.

ახლა მოდით შევხედოთ ფორმის დამმუშავებლის ფაილს (submit.php) და გავიაროთ კოდის ძირითადი ნაწილები. დამმუშავებელი მუშაობს PHP-ში, ასე რომ, თუ გსურთ ფორმის ტესტირება, უნდა გამოიყენოთ .

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

ნახეთ, სწორად არის თუ არა მითითებული გზა დამმუშავებლის ფაილამდე ფორმის ინიციალიზაციაში:

mailUrl: — გზა დამმუშავებლის ფაილამდე

ასევე შეამოწმეთ, რომ recaptcha ჩართულია სწორად. ანუ, თუ გამორთულია, მაშინ recaptcha ოფციები ინიციალიზაციის კოდში და $recptchaOn დამმუშავებლის ფაილში უნდა იყოს დაყენებული false ან true, თუ recaptcha ჩართულია.

Google Recaptcha არ არის ნაჩვენები ფორმაში

შეამოწმეთ არის თუ არა გადაცემული recaptcha (recaptcha ზარი) და $recaptchaOn (მმუშავებლის ფაილი) მნიშვნელობები - მართალია. ასევე შეამოწმეთ, სწორად მიუთითეთ თუ არა გასაღებები - საჯარო და პირადი.

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

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

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

სულ ესაა. გმადლობთ ყურადღებისთვის. შევხვდებით შემდეგ პოსტებში!



რაიმე შეკითხვა?

შეატყობინეთ შეცდომას

ტექსტი, რომელიც გაეგზავნება ჩვენს რედაქტორებს:

გაგზავნა