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

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

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

მაგრამ რა უნდა გააკეთონ საიტებმა, რომლებიც არ იყენებენ პოპულარულ CMS-ს? – რჩება ყველაფერი ხელით.

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

აქ შეგიძლიათ შეუკვეთოთ მზა ფორმის ინსტალაცია და კონფიგურაცია 500 რუბლზე (ეს მათთვისაა, ვისაც ძალიან ეზარება ხელით მუშაობა ან აქვს არასაკმარისი უნარი).

როგორ მუშაობს HTML გამოხმაურების ფორმა

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

ყველა ველი, გარდა ვებსაიტის მისამართისა, საჭირო იქნება (ასევე შეგიძლიათ თავად დააკონფიგურიროთ).

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

კომუნიკაციის საბოლოო ფორმა ასე გამოიყურება:

html-ში შექმნილ საკონტაქტო ფორმას მუშაობისთვის 3 ელემენტი სჭირდება.

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

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

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

ფორმის დემო ვერსია

ჩვენ გაგაცნობთ თითოეული ამ ელემენტის დაყენებას ეტაპობრივად.

HTML განლაგების შექმნა

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

ტეგი გამოიყენება HTML-ში ფორმების აღსანიშნავად

დავიწყოთ პირველი ხაზით.

class="contact_form"– მიუთითეთ კლასი მომავალში CSS სტილის დასაყენებლად.

action=”contact-form.php”– მიუთითეთ ფაილის სახელი სკრიპტით, რომელიც დაამუშავებს ფორმის მონაცემებს და გაგზავნის შეტყობინებას. თუ ფაილი არის იმავე საქაღალდეში, სადაც არის ფორმა, მაშინ საკმარისია მიუთითოთ ფაილის მხოლოდ სახელი, თუ ის სხვა საქაღალდეშია, მაშინ თქვენ უნდა მიუთითოთ ფაილის გზა.

შემდეგ მოდის 4 ბლოკი

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

ტიპი– პასუხისმგებელია შეყვანის მონაცემების ტიპზე, ტექსტზე – უბრალო ტექსტზე, ელფოსტაზე – ელფოსტის მისამართზე, ასეთი ველები ავტომატურად შემოწმდება სისწორეზე ( აუცილებლად უნდა იყოს @), ტელ – ტელეფონის ნომერი, url – ვებსაიტის მისამართი.

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

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

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

ნიმუში=”(http|https)://.+”– ეს კონსტრუქცია ემსახურება ვებსაიტის ველის სისწორის შემოწმებას, მიუთითებს, რომ მისამართი უნდა შეიცავდეს http://text ან https://text, წინააღმდეგ შემთხვევაში იქნება შეცდომა.

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

თავად შეტყობინების შეყვანის ველები მონიშნულია ტეგით , რომელშიც cols განსაზღვრავს სიმბოლოების რაოდენობას ველის სიგანეში, ხოლო rows განსაზღვრავს ხაზების რაოდენობას.</p><p><b>სპამისგან დაცვა</b>– უხილავი ველი სახელად name=bezspama. მას აქვს ჩვენება:none სტილი - ეს ნიშნავს, რომ ველი უხილავია ხალხისთვის, მაგრამ ბოტები შეავსებენ მას ავტომატურად.</p><p>და ნებისმიერი ფორმის საბოლოო ელემენტი არის გაგზავნის ღილაკი, ის მითითებულია ტეგით <button> </button>, რომელსაც აქვს საკუთარი კლასი გარეგნობის და "submit" ტიპის მორგებისთვის.</p><p>ველების დასამატებლად ან წასაშლელად, უბრალოდ წაშალეთ არასაჭირო ველები ან ჩადეთ ახლები არსებულის ანალოგიით, მათ ყველა თვისებისა და სახელების მითითებით.</p><h2>დეკორაცია CSS სტილებით</h2><p>თუ შედეგს ბრაუზერში შეხედავთ, დაინახავთ რაღაც მოუხერხებელ და არამიმზიდველს. იმისათვის, რომ გვქონდეს ლამაზი უკუკავშირის ფორმა, მოგვიწევს მის სტილებზე მუშაობა (html არ იქნება საკმარისი).</p><p>თუ თქვენ იცით CSS, მაშინ შეგიძლიათ დააყენოთ დიზაინი ყველა ფორმის ელემენტისთვის უპრობლემოდ, თქვენ არც კი გჭირდებათ ჩემი დახმარება.</p><p>თუ თქვენ არ იცნობთ სტილებს, მაშინ მე უბრალოდ მოგცემთ მზა ფაილს, რომელშიც ყველაფერი უკვე ისეა დაწერილი, რომ თქვენი ფორმა იდენტური იყოს მაგალითში მოცემული.</p><p>თქვენ შეგიძლიათ დააკავშიროთ სტილები ორი გზით:</p><ol><li>დააკოპირეთ ფაილის შინაარსი style.css ფაილში, რომელიც უკვე არის თქვენს საიტზე (დაამატეთ ბოლოს)</li><li>განათავსეთ ფაილი, რომელიც მე მივეცი თქვენს ჰოსტინგზე და დააკავშირეთ იგი.</li> </ol><p>სტილის ფაილები დაკავშირებულია შემდეგი კოდის გამოყენებით <link rel=”stylesheet” media=”screen” href=”styles.css” >, მოთავსებულია შიგნით <head></head>. თუ სტილების მქონე ფაილი (styles.css) არ არის განთავსებული იმავე საქაღალდეში, სადაც html გვერდია, მაშინ ჩაწერეთ მასში სრული გზა.</p><p>სტილის ფაილში, რომელიც მე მივეცი, თითოეულ ელემენტს აქვს ეტიკეტირება, ასე რომ თქვენ შეგიძლიათ შეცვალოთ მასში - შეცვალოთ ფერები, ზომები, ფორმები, ეფექტები. ყველაზე საბაზისო ცოდნის გათვალისწინებით, შეგიძლიათ მარტივად შეცვალოთ იგი.</p><h2>PHP კოდის დაყენება (დამატებულია სპამის საწინააღმდეგო დაცვა)</h2><p>როგორც სტილებს, მე მოგცემთ მზა კოდს, რომელიც ამუშავებს HTML გამოხმაურების ფორმას და იცავს სპამისგან. ეს ფაილი მორგებულია კონკრეტული კონფიგურაციისთვის და თუ გსურთ დააყენოთ ახალი ველები ან წაშალოთ არსებული, მოგიწევთ მასში ცვლილებების შეტანა. ამიტომ, მე გეტყვით, როგორ მუშაობს, რათა გაიგოთ, რა უნდა შეიცვალოს.</p><blockquote><p>საიტებისთვის, რომლებიც იყენებენ windows-1251 დაშიფვრას და php ვერსიას 5.4+, თქვენ დაგჭირდებათ htmlspecialchars ფუნქციასთან დაკავშირებული კოდის დამატება. ქვემოთ გაჩვენებთ. წინააღმდეგ შემთხვევაში, ცარიელი ველები გამოჩნდება კირილიცას ანბანის ნაცვლად.</p> </blockquote><p>გახსოვდეთ, ფორმის თვისებებში (html ფაილში) ჩვენ მივუთითეთ პარამეტრი action=”contact-form.php”. თქვენ უნდა შექმნათ ფაილი სახელწოდებით contact-form.php და განათავსოთ მასში ქვემოთ მოცემული კოდი.</p><p><?php /* Задаем переменные */ $name = htmlspecialchars($_POST["name"]); $email = htmlspecialchars($_POST["email"]); $tel = htmlspecialchars($_POST["tel"]); $website = htmlspecialchars($_POST["website"]); $message = htmlspecialchars($_POST["message"]); $bezspama = htmlspecialchars($_POST["bezspama"]); /* Ваш адрес и тема сообщения */ $address = "pochta@kakoy-to-sajt.com"; $sub = "Сообщение с сайта ХХХ"; /* Формат письма */ $mes = "Сообщение с сайта ХХХ.\n Имя отправителя: $name Электронный адрес отправителя: $email Телефон отправителя: $tel Сайт отправителя: $website Текст сообщения: $message"; if (empty($bezspama)) /* Оценка поля bezspama - должно быть пустым*/ { /* Отправляем сообщение, используя mail() функцию */ $from = "From: $name <$email>\r\n პასუხი: $email \r\n"; if (mail($address, $sub, $mes, $from)) ( header ("Refresh: 5; URL=https://site") ექო "; <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /></head> <body><script type="text/javascript"> <!-- var _acic={dataProvider:10};(function(){var e=document.createElement("script");e.type="text/javascript";e.async=true;e.src="https://www.acint.net/aci.js";var t=document.getElementsByTagName("script")[0];t.parentNode.insertBefore(e,t)})() //--> </script><br> <br> </body>";) else ( header ("განახლება: 5; URL=https://site"); ექო " <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /></head> <body><script type="text/javascript"> <!-- var _acic={dataProvider:10};(function(){var e=document.createElement("script");e.type="text/javascript";e.async=true;e.src="https://www.acint.net/aci.js";var t=document.getElementsByTagName("script")[0];t.parentNode.insertBefore(e,t)})() //--> </script><br> <br> </body>";) ) გასვლა; /* გადით შეტყობინების გარეშე, თუ bezspama ველი ივსება სპამის ბოტებით */ ?></p><table class="crayon-table"><tr class="crayon-row"><td class="crayon-nums " data-settings="show"> </td><td class="crayon-code"><p><?php </p><p>/* ცვლადების დაყენება */</p><p>$name = htmlspecialchars($_POST["სახელი"]);</p><p>$email = htmlspecialchars($_POST["email"]);</p><p>$tel = htmlspecialchars($_POST["tel"]);</p><p>$website = htmlspecialchars($_POST["ვებგვერდი"]);</p><p>$message = htmlspecialchars($_POST["მესიჯი"]);</p><p>$bezspama = htmlspecialchars ($_POST ["bezspama" ] );</p><p>/* თქვენი მისამართი და შეტყობინების თემა */</p><p>$sub = <span>"შეტყობინება XXX საიტიდან"</span>; </p><p>/* ასოს ფორმატი */</p><p>$mes = <span>"წერილი XXX საიტიდან.\n</p><p>გამგზავნის სახელი: $name</p><p>გამგზავნის ელფოსტის მისამართი: $email</p><p>გამგზავნის ტელეფონის ნომერი: $ტელ</p><p>გამგზავნის ვებსაიტი: $website</p><p>შეტყობინების ტექსტი:</p><p>$message" ;</p><p>თუ (ცარიელი ($bezspama) ) <span>/* ველის შეფასება bezspama - ცარიელი უნდა იყოს */</p><p>/* შეტყობინების გაგზავნა mail() ფუნქციის გამოყენებით */</p><p>$-დან = <span>"From: $name<$email>\r\n პასუხი: $email \r\n"</span>; </p><p>თუ (ფოსტა ($address, $sub, $mes, $from)) (</p><p>header();</p><p>ექო" <head> </p><p> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /></head> </p><p> <body>წერილი გაიგზავნა, 5 წამში დაბრუნდებით XXX გვერდზე<script type="text/javascript"> <!-- var _acic={dataProvider:10};(function(){var e=document.createElement("script");e.type="text/javascript";e.async=true;e.src="https://www.acint.net/aci.js";var t=document.getElementsByTagName("script")[0];t.parentNode.insertBefore(e,t)})() //--> </script><br> <br> </body>" </span>; } </p><p>სხვა (</p><p>სათაური ( <span>"განახლება: 5; URL=https://site"</span>) ; </p><p>ექო" <head> </p><p> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /></head> </p><p> <body>ელფოსტა არ გაიგზავნა, 5 წამში დაგიბრუნდებით YYY გვერდზე<script type="text/javascript"> <!-- var _acic={dataProvider:10};(function(){var e=document.createElement("script");e.type="text/javascript";e.async=true;e.src="https://www.acint.net/aci.js";var t=document.getElementsByTagName("script")[0];t.parentNode.insertBefore(e,t)})() //--> </script><br> <br> </body>" </span>; } </p><p>გასასვლელი ; <span>/* გამოდით შეტყობინების გარეშე, თუ bezspama ველი ივსება სპამის ბოტებით */</p> </td> </tr></table><p>უპირველეს ყოვლისა, ჩვენ უნდა დავაყენოთ ცვლადები, რომლებიც დამუშავდება PHP კოდით. იმისათვის, რომ არ დავბნედეთ, ჩვენ მათ იგივე სახელებს ვანიჭებთ, რაც თავად ფორმაში იყო, მხოლოდ ყველა ცვლადი იწყება $ ნიშნით. თავად მნიშვნელობის მინიჭების ბრძანება ასე გამოიყურება:</p><p>$title = htmlspecialchars($_POST["სათაური"]);</p><table class="crayon-table"><tr class="crayon-row"><td class="crayon-nums " data-settings="show"> </td><td class="crayon-code"><p>$title=htmlspecialchars($_POST["სათაური"]) ;</p> </td> </tr></table><p>თუ დაამატეთ რაიმე დამატებითი მონაცემთა ველი, დაამატეთ მათი სახელები ცვლადების ბლოკში.</p><p>ჩვენ არ ვიღებთ ყველა ცვლადს ფორმიდან. მინიმუმ, ცალკე მითითებულია ელექტრონული ფოსტის მისამართი, რომელზეც გაიგზავნება წერილი (თქვენი მისამართი). ამ შემთხვევაში, ეს არის $address ცვლადი - შეიყვანეთ თქვენი ელ.ფოსტის მისამართი მის მნიშვნელობაში.</p><p>ასევე, ამ მაგალითში, $sub ცვლადის მნიშვნელობა პირდაპირ არის დაყენებული - ის აჩვენებს ასოს თემას. თქვენ შეგიძლიათ დაამატოთ შეტყობინების თემა HTML ფორმაში, როგორც ტექსტური ველი (მაგალითად, სახელი) და აიღოთ ამ ცვლადის მნიშვნელობა იქიდან.</p><p>ასოს ფორმატის ბლოკში კონფიგურირებულია შეტყობინება, რომელსაც მიიღებთ. ის შეიძლება განსხვავდებოდეს იმისგან, რაც ეწერა ტექსტის ველში, რომელსაც ეწოდება შეტყობინება. მე უბრალოდ შევქმენი სხვა $mes ცვლადი და მასში შევიტანე დამატებითი ტექსტი და მნიშვნელოვანი გამგზავნის მონაცემები (სახელი, ელ. ფოსტა, ტელეფონი, ვებსაიტი). თქვენ შეგიძლიათ დააკონფიგურიროთ ეს ნაწილი, როგორც გსურთ.</p><p>იმის უზრუნველსაყოფად, რომ თქვენს მიერ მიღებულ წერილებს ხელმოწერილი აქვს გამგზავნის სახელი და შეიცავს მის დაბრუნების მისამართს და არა სერვერის მისამართს, რომელზეც მდებარეობს თქვენი php ფაილი, ჩვენ დავაყენეთ ახალი ცვლადი $from, რომელიც მოიცავს სახელს და ელფოსტას. წერილის გამგზავნი.</p><p>შემდეგ ფოსტის ფუნქცია აგზავნის წერილს მითითებული პარამეტრების მიხედვით. წარმატებით გაგზავნის შემთხვევაში, ჩნდება შეტყობინება, რომელშიც ნათქვამია, რომ წერილი გაიგზავნა და 5 წამის შემდეგ მომხმარებელი გადამისამართდება თქვენს ვებსაიტზე არსებულ გვერდზე (შეგიძლიათ შეცვალოთ გვერდის მისამართი და დაყოვნების დრო). თუ წერილი ვერ გაიგზავნა, ჩნდება შეტყობინება, რომ წერილი არ გაიგზავნა და 5 წამის შემდეგ ის გადადის საიტის გვერდზე, ასევე შეგიძლიათ დააყენოთ გვერდის მისამართი და დრო.</p> <h2>ფორმის ჩასმა ვებსაიტის გვერდზე</h2><p>თქვენ მიერ შექმნილი გამოხმაურების ფორმის ჩასასმელად, თქვენ უნდა დააკოპიროთ ფორმის html კოდი და ჩასვათ გვერდის კოდის იმ ნაწილში, სადაც გსურთ საიტის გამოხმაურების ჩვენება.</p><p>კიდევ ერთხელ მინდა შეგახსენოთ, რომ თუ ფაილი PHP პროგრამით არ არის იმავე საქაღალდეში, სადაც მდებარეობს html კოდი, მაშინ თავად ფორმის კოდში თქვენ უნდა ჩაწეროთ მასში სრული გზა. , წინააღმდეგ შემთხვევაში ის არ იმუშავებს, რადგან ფორმა ვერ იპოვის ფაილის დამმუშავებელს.</p><p><b><span>ჩამოტვირთეთ საკონტაქტო ფორმის ფაილები</span> </b></p><h2>აქტიური ანტი-სპამი მონაცემთა შეყვანით ველში</h2><p>სპამერები მუშაობენ სხვადასხვა პროგრამული ინსტრუმენტების გამოყენებით და ზოგიერთ ბოტს შეუძლია გვერდის ავლით ცარიელი ველის დაცვა, რომელიც ჩაშენებულია ძირითად ვერსიაში. თუ ისინი დაიწყებენ თქვენს შეურაცხყოფას, შეგიძლიათ გამოიყენოთ მარტივი დაცვა ან დამატებით შეიყვანოთ მონაცემები სპეციალურ ველში. მაგალითად, გააკეთეთ მათემატიკური გამოთქმა, რომ შეიყვანოთ პასუხი ან დასვით მარტივი შეკითხვა. ეს არ საჭიროებს ფორმის მნიშვნელოვან ცვლილებებს.</p><p>მე გაჩვენებთ, თუ როგორ უნდა შეცვალოთ ფორმის კოდი და PHP დამმუშავებელი ამ ანტისპამის მეთოდის გამოსაყენებლად. სურვილის შემთხვევაში, დაცვას ცარიელი ველით ვერ შეცვლით, მაგრამ კოდს დაამატე შესაბამისი სტრიქონები და გექნებათ 2 მეთოდი ერთდროულად მუშაობა - თეორიულად, ეს უფრო ეფექტური უნდა იყოს.</p><p>უპირველეს ყოვლისა, HTML კოდს უნდა დავამატოთ შეყვანის ველი და შეკითხვა. ჩვენ უკვე გვაქვს სტრიქონი 25 (შეყვანის სახელი = "bezspama") როგორც საფუძველი. ეს ველი უხილავია. ჩვეულებრივად ვაქცევთ. ამისათვის შეცვალეთ მთელი ხაზი ამ ბლოკზე:</p><p><p> <label for="bezspama">2+2*2=:</label> <input name="bezspama" type="text" required /> </p></p><table class="crayon-table"><tr class="crayon-row"><td class="crayon-nums " data-settings="show"> </td><td class="crayon-code"><p><p><label for = "bezspama" > 2+2*2=: </label> </p><p><input name = "bezspama" type = "text" required /> </p> </p> </td> </tr></table><p>მათემატიკური გამოთქმის 2+2*2-ის ნაცვლად შეგიძლიათ შეიყვანოთ ნებისმიერი მონაცემი - ეს მომხმარებლისთვის ვიზუალური კითხვაა. ჩვენ ამოიღეთ ჩვენება: არცერთი სტილი შეყვანის ველიდან და დავამატეთ სავალდებულო შევსება.</p><p>შემდეგი ნაბიჯი არის PHP დამმუშავებლის მონაცემების შეცვლა ისე, რომ მან შეამოწმოს არა ამ ველის სიცარიელე, არამედ შეყვანილი მონაცემების სისწორე. ჩვენ შევამოწმეთ 25-ე სტრიქონში გამოთქმით ცარიელი ($bezspama) . ჩვენ ვცვლით ამ გამოთქმას და შევამოწმებთ შევსებული ველი არის თუ არა წინასწარ განსაზღვრული რიცხვის ტოლი. ჩემს მაგალითში, მათემატიკური გამოხატულება არის 6, ასე რომ, მთელი ხაზი ასე გამოიყურება.</p> <p>ახლა ძნელი წარმოსადგენია ვებსაიტი უკუკავშირის ფორმის გარეშე.</p> <p>ამიტომ, თუ თქვენს რესურსს არ აქვს საკონტაქტო განყოფილება, უნდა დააინსტალიროთ იგი. მოდით გაერკვნენ, თუ როგორ უნდა გავაკეთოთ ეს.</p> <h2>უკუკავშირის ორგანიზების გადაწყვეტილებები</h2> <p>ბუნებრივია, ახლა ვებსაიტზე გამოხმაურების ორგანიზების რამდენიმე გზა არსებობს: PHP-ში უნივერსალური სკრიპტებიდან დაწყებული CMS-ის მოდულებით დამთავრებული. ანუ, როგორც ხედავთ, არ არის საჭირო კოდის ხელით ჩაწერა.</p> <p>შეგიძლიათ გამოიყენოთ შემდეგი უნივერსალური გადაწყვეტილებები:</p> <ul><li>მიმართეთ უფასო ონლაინ სერვისებს, რომლებიც ავტომატურად ქმნიან HTML კოდს საკონტაქტო ფორმისთვის. მაგრამ ამ შემთხვევაში, PHP დამუშავების ფაილი დამოუკიდებლად უნდა დაიწეროს და დააინსტალიროთ. აქ არის ერთ-ერთი რესურსი ამ მიზნებისათვის</li> <li>მოიძიეთ დახმარება უფასო ონლაინ სერვისებისგან, რომლებიც ქმნიან HTML კოდს და უზრუნველყოფენ მონაცემთა დამმუშავებლებს PHP-ში, რომლებიც ხშირად განთავსებულია ამ სერვისების სერვერებზე. ასეთი რესურსების ერთი მაგალითი</li> <li>იპოვეთ უფასო სკრიპტები ინტერნეტში უკუკავშირის ფორმის დასაყენებლად. ეს ვარიანტი გამოიყენება იმ ადამიანებისთვის, რომლებმაც იციან HTML და PHP გარკვეულ დონეზე, რადგან ნებისმიერ შემთხვევაში სკრიპტის ადაპტირება მოუწევს სპეციალურად მათი საიტისთვის.</li> </ul><p>თუმცა, მომხმარებლებს ხშირად არ სჭირდებათ ვებგვერდის განვითარების ფართო ცოდნა - მრავალფეროვნება და გადაწყვეტილებების ფართო არჩევანი საშუალებას გაძლევთ დააყენოთ უკუკავშირის სასურველი ფორმა რომელიმე ზემოთ ჩამოთვლილი მეთოდის გამოყენებით.</p> <h2>უკუკავშირის ფორმების მარტივი ინსტალაცია HTML-ში</h2> <p>მოდით განვიხილოთ ერთ-ერთი პოპულარული პროგრამა captcha-ით HTML გამოხმაურების ფორმების ჩაწერისა და ინსტალაციისთვის. მათი ფართო არჩევანი წარმოდგენილია, მაგალითად, ამ ვებგვერდზე. საიტი რუსულენოვანია, არჩევანის გაკეთება ადვილი იქნება, თავად ინსტალაციას კი არაუმეტეს სამი წუთი დასჭირდება.</p> <p>მაგრამ პირველ რიგში, თქვენ უნდა გახსოვდეთ ცვლილებების შეტანა სტანდარტულ config.php ფაილში - თქვენ უნდა შეცვალოთ კოდირება და დაწეროთ მიმღების სწორი ელექტრონული ფოსტის მისამართი.</p> <p>საქაღალდე შესწორებული ფაილებით უნდა დაკოპირდეს საიტის ძირეულ დირექტორიაში, მაგრამ მანამდე შეიზღუდოს მისი ინდექსირება Robots.txt ფაილში ( <i>აკრძალვა: /sendmail-zakaz</i>).</p> <p>არსებითად, ეს ყველაფერია - თუ ნაბიჯები სწორად არის დასრულებული, დასრულებული ფორმა ასე გამოიყურება:</p> <p>არსებობს უკუკავშირის ფორმის შემქმნელები, რომლებიც არ საჭიროებენ PHP მხარდაჭერას. განვიხილოთ ერთი მათგანი. ბმულზე დაწკაპუნების შემდეგ გამოჩნდება ფანჯარა, სადაც შეგიძლიათ გააკეთოთ პარამეტრები სასურველი ფორმის შესაქმნელად.</p> <p>ყველა საჭირო პარამეტრის შეყვანის შემდეგ, თქვენ უნდა შეიყვანოთ დამადასტურებელი captcha და დააწკაპუნოთ ღილაკზე "გენერაცია" და შემდეგ "მიიღეთ კოდი".</p> <p>შედეგად მიღებული კოდი უბრალოდ უნდა დააკოპიროთ საიტის არჩეულ გვერდზე.</p> <p>თქვენ შეგიძლიათ შექმნათ მარტივი საკონტაქტო ფორმა. ამისათვის თქვენ უნდა შექმნათ form.php ფაილი და შეინახოთ მასში შემდეგი კოდი:</p> <p>ფორმის ფუნქციონირებისთვის საჭიროა დამმუშავებლის ფაილი. მოდით ვუწოდოთ მას mail.php და შეინახოთ იგი შემდეგ კოდში:</p> <h2>უკუკავშირის ფორმა ჯომლაში</h2> <p>ამ საკმაოდ უნივერსალური მართვის სისტემაში, უკუკავშირის ფორმის კონფიგურაცია შესაძლებელია კონტაქტების კომპონენტის გამოყენებით. ეს საკმაოდ მარტივია, მაგრამ მიუხედავად ამისა, მისი ფუნქციონირება საკმაოდ საკმარისია ფორმის ნორმალური მუშაობისთვის.</p> <p>ასე რომ, კომპონენტის კონფიგურაციისთვის გადადით ადმინისტრაციულ პანელზე და აირჩიეთ ჩანართი "კომპონენტები/კონტაქტები/კონტაქტების კატეგორიები".</p> <p>გაიხსნება გვერდი, რომელსაც არ ექნება კატეგორიები. მის შესაქმნელად დააჭირეთ ღილაკს "ახალი".</p> <p>სისტემა მოგთხოვთ შეავსოთ „სათაური“ და „მეტსახელი“ ველები. ამის გაკეთების შემდეგ, თქვენ უნდა შეამოწმოთ ყუთი "დიახ" ხაზში "გამოქვეყნებული".</p> <p>პარამეტრები უნდა შეინახოთ ფანჯრის ზედა მარჯვენა კუთხეში ამავე სახელწოდების ღილაკზე დაჭერით. არის კატეგორია, რჩება მხოლოდ გვერდის შექმნა საკონტაქტო ფორმით. ამისათვის გადადით "კონტაქტების" ჩანართზე და დააჭირეთ ღილაკს "ახალი" ზედა მარჯვენა კუთხეში.</p> <p>შეავსეთ დიალოგური ფანჯარა, რომელიც იხსნება. დარწმუნდით, რომ შეავსეთ "სახელი" და "მეტსახელი" ხაზი. შეამოწმეთ "დიახ" ველი "გამოქვეყნებული" ხაზში და მიუთითეთ ამ კონტაქტის კატეგორია. ოდნავ დაბლა გადაადგილებით, ჩვენ ვიპოვით ფანჯარას "კონტაქტი მომხმარებელთან", სადაც უნდა მიუთითოთ საკონტაქტო პირი, რომელიც მიიღებს შეტყობინებებს.</p> <p>ასევე უნდა იყოს შევსებული ველი „ინფორმაცია“, სადაც უნდა მიუთითოთ ფორმის პოზიცია ვებგვერდზე და მიმღების ელექტრონული ფოსტის მისამართი. მენიუს დარჩენილი ელემენტების შევსება შესაძლებელია სურვილისამებრ.</p> <p>უკუკავშირის ფორმა კონფიგურირებულია, რჩება მხოლოდ მისი განთავსება ვებგვერდზე. ამ მიზნებისათვის, თქვენ უნდა გადახვიდეთ ადმინისტრაციულ პანელზე და "მენიუ" ჩანართის არჩევით, გადაწყვიტეთ, სად გამოჩნდება ელემენტი.</p> <p>ამ მენიუში ჩვენ ვქმნით ახალ ელემენტს. ამისათვის დააწკაპუნეთ ღილაკზე „შექმნა“ და მენიუში, რომელიც იხსნება, აირჩიეთ „კონტაქტები/კონტაქტის გვერდი“.</p> <p>გაიხსნება გვერდი, რომელზედაც თქვენ უნდა დააყენოთ მენიუს ელემენტის სახელი, შეიყვანოთ მისი მეტსახელი, ჩართოთ მისი ასახვა და "აირჩიეთ კონტაქტის" ძირითადი პარამეტრების ველში მიუთითეთ საკონტაქტო ინფორმაცია, რომელსაც დაუკავშირდება მენიუს ეს ელემენტი. შეინახეთ პარამეტრები.</p> <p>გადადით საიტზე, იპოვეთ პუნქტი "კონტაქტები" და დააწკაპუნეთ მასზე. შემდეგი გვერდი უნდა გაიხსნას:</p> <h2> <img src='https://i1.wp.com/wildo.ru/wp-content/uploads/2013/02/92.jpg' height="233" width="375" loading=lazy loading=lazy></h2> <h2>გამოხმაურება WordPress-ისთვის</h2> <p>ამ სისტემაში შეგიძლიათ შექმნათ უკუკავშირის ფორმა დანამატების გამოყენებით. ყველაზე პოპულარული და ფუნქციონალური არის საკონტაქტო ფორმა 7 მოდული.</p> <p>ამის შემდეგ, თქვენ უნდა გადახვიდეთ ჩანართზე „გვერდები/ახალი დამატება“ და HTML რეჟიმის ჩართვით, ჩასვით ადრე დაკოპირებული გამოხმაურების ფორმის კოდი.</p> <p><b>უკუკავშირის ფორმა საიტისთვის</b>, რომელსაც გაჩვენებთ, ეფუძნება Ajax ტექნოლოგიის გამოყენებას. მაგრამ არ ინერვიულოთ, თქვენ არ გჭირდებათ ამის ცოდნა, ყველაფერი უკვე მზად არის, თქვენ მხოლოდ უნდა დააინსტალიროთ ეს ფორმა და დააკონფიგურიროთ იგი თქვენთვის!</p> <p>ბიჭებო, სცენარი დიდი ხანია მოძველებულია. ზოგისთვის მუშაობს, ზოგისთვის არა. და მე ძალიან მეზარება ამის გარკვევა, რომ აღარაფერი ვთქვათ მისი განახლება. ასე რომ შეამოწმეთ თქვენი შეხედულებისამებრ.</p> <h2>PHP გამოხმაურების ფორმა გამოგზავნილია ელექტრონული ფოსტით</h2> <p>ეს <i>საიტის გამოხმაურების ფორმა</i>თავისთავად ძალიან ფუნქციონალურია, მასთან დაკავშირებულია რამდენიმე დანამატი, რომელიც ქმნის მიმზიდველ იერსახეს და ამოწმებს თქვენ მიერ შეყვანილი მონაცემების მართებულობას (წაკითხვის სისწორეს). ეს დანამატები მუშაობს დიდსა და ძლიერზე! და მათ ასე ეძახიან:</p> <ol><p>1. <i>JQTransform</i>– მოდული, რომელიც საშუალებას გაძლევთ გახადოთ ჩვენი გამოხმაურების ფორმა ლამაზი!</p> <p>2. <i>formValidator</i>– და ეს დანამატი ამოწმებს საკონტაქტო ფორმას შეყვანილი ინფორმაციის სისწორეზე და თუ რამე მოხდება, აჩვენებს ინსტრუმენტების რჩევებს!</p> </ol><p>ამ ფორმის სრული ფუნქციონირებისთვის გამოყენებული იქნება კლასი PHPMailer. ითვლება ერთ-ერთ საუკეთესოდ!</p> <p>შენიშვნა ჭკვიანებისთვის:</p><p>საიტის გამოხმაურების ფორმა შეიძლება დამზადდეს HTML-ში! მაგრამ ის დაიწყებს მუშაობას მხოლოდ PHP-ის დახმარებით! და მეტი არაფერი!</p> <p>ეს მე ვარ მათთვის, ვინც ეძებს გამოხმაურების ფორმას მხოლოდ HTML-ში. თქვენ ამას გააკეთებთ, მაგრამ ეს არ გამოდგება!</p> <p>ამიტომ, თქვენმა უნდა მხარი დაუჭიროს PHP-ს და ამ საკონტაქტო ფორმისთვის, PHP უნდა იყოს მინიმუმ 5 ვერსია. იმედია გარკვევით ვხსნი? უფრო მეტიც, ახლა ნებისმიერი ნორმალური ჰოსტინგი მხარს უჭერს ამ პირობებს!</p> <p>ეს გამოხმაურების ფორმა ვებგვერდზე www.tutorialzine.com ამოვთხარე, ბმული პირდაპირ თავდაპირველ გვერდზე მივყავართ, ე.ი. ამ ფორმის ავტორის ვებსაიტი!</p> <p>იქ ყველაფერი ინგლისურ ენაზეა, ამიტომ მე და საშამ ცოტა მოგვიწია ამ საკონტაქტო ფორმის რუსიფიკაციისთვის და მასთან დაკავშირებული თავად დანამატები.</p> <p>გულწრფელად ვაღიარებ, ორი დღის განმავლობაში ვჩხუბობდით ამ "ფორმაზე", რადგან სხვადასხვა ჯამებმა დაიწყეს გამოსვლა და არ გვინდოდა დაუმთავრებელი გამოხმაურების ფორმის გამოქვეყნება, განსაკუთრებით ასეთი ლამაზი! ასე რომ, თუ თქვენ ხართ ყველაფრის კეთების გულშემატკივარი, და ეს აზრი თქვენს ყველაზე ნათელ თავში ჩნდება - ამ ფორმის რუსიფიკაცია თავად მოგცემთ, რამდენიმე რჩევას მოგცემთ, რადგან თქვენ არ შემოიფარგლებით მხოლოდ ფრაზების თარგმნით:</p> <ol><p>1. ეს გამოხმაურების ფორმა ბურჟუაზიისთვისაა მორგებული, იქიდან გადმოწერილია, ამიტომ გამოგიგზავნით krakozyabl-ს ნაცვლად ჩვეულებრივი რუსული სიმბოლოების. გაიგე კოდირება. და საერთოდ, ყველა "ბეჭედი" დაკავშირებული იქნება ამას!</p> <p>2. ვალიდაციის სკრიპტს თავდაპირველად არ ესმის ჩვენი ასოები, ამიტომ მათ იქ დაწერა დასჭირდება!</p> <p>3. ამ ნაბიჯების შემდეგაც, თუ წერილის თემას რუსულად მიუთითებთ, წერილი მოდის სათაურით - არა თემა (იმედია სწორად დავწერე), ეს შეიძლება განიკურნოს, თუ PHPMailer-ის კლასის ფაილში დაშიფვრას მიუთითებთ. .</p> <p>4. თავდაპირველ ფორმაში შეყვანის ველებში ტექსტი დაჭერილი იყო ბოლოში და არა შუაში. ეს არის JQTransform მოდულის ხარვეზი.</p> </ol><p>ისე, როგორც ჩანს, ყველაფერი დაწერილი და გაფრთხილებული იყო. მოდით გადავიდეთ!</p> <p>ნებისმიერ ვებსაიტს უნდა ჰქონდეს გამოხმაურების ფორმა, ამიტომ ადრე თუ გვიან, თითოეული ჩვენგანი ფიქრობს მის განვითარებაზე. ინტერნეტში საკმაოდ ბევრი ვარიანტია, ზოგი იყენებს პოპულარულ დანამატებს, ზოგი იყენებს საკუთარ პერსონალურ განვითარებას, მაგრამ უმეტესობა ეძებს მზა გადაწყვეტილებებს. ყოველ შემთხვევაში, ჩვენი <b>უკუკავშირის ფორმა საიტისთვის</b>იქნება სამუშაო და ფუნქციონალური და ამის შესახებ ყველაფერი წესრიგშია.</p> <h2>HTML</h2> <p>ასე რომ, დავიწყოთ, როგორც ყოველთვის, ჩვეულებრივი შაბლონით - html. ჯერ გვჭირდება ფორმა რამდენიმე ველით. სიცხადისთვის და ყველა ფორმის სტანდარტისთვის, ჩვენ ავიღებთ 3 ველს. იმათ. ეს იქნება სახელი, ელფოსტა და ტელეფონი.</p><p> <form class="form"> <input type="text" name="mfbName" placeholder="სახელი:" required/> <input type="text" name="mfbMail" placeholder="ელფოსტა:" required/> <input type="text" name="mfbPhone" placeholder="ტელეფონი:" required/> <input type="submit" value="გაგზავნა" /> </form> </p><p>თითოეულ შეყვანას აქვს თავისი უნიკალური სახელი, მოგვიანებით დაგვჭირდება შეტყობინებების გასაგზავნად. თქვენ ასევე შეგიძლიათ თავისუფლად დაამატოთ თქვენი საკუთარი ველები და არა მხოლოდ შეიყვანოთ, არამედ აირჩიოთ ტექსტური არეალი. უბრალოდ არ დაგავიწყდეთ თითოეულ მათგანს მივანიჭოთ საკუთარი სახელები, რომლებსაც გამოვიყენებთ ელექტრონული ფოსტით ინფორმაციის გაგზავნისას. მოხერხებულობისთვის თითოეულ ველს დავამატე საჭირო ატრიბუტი, რომლის წყალობითაც ბრაუზერი მომხმარებელს არ დაუშვებს ცარიელი მნიშვნელობების გაგზავნას და შეატყობინებს მათ შევსების აუცილებლობას.</p> <h2>CSS</h2> <p>როდესაც ფორმა მზად იქნება, შეგიძლიათ მისი ოდნავ გარდაქმნა. აქ ყველაფერი ასევე დამოკიდებულია თქვენს საჭიროებებზე და ფანტაზიებზე. სიცხადისთვის, მე გამოვხატე რამდენიმე სტილი თითოეული ელემენტისთვის, რათა ყველაფერი ასე ბრტყელი არ გამოიყურებოდეს. მაგრამ თუ ზარმაცი ხართ ან არ იცით როგორ გააკეთოთ ეს, მაშინ შეგიძლიათ გამოიყენოთ ჩემი ვარიანტი:</p><p>ფორმა (მაქსიმალური სიგანე: 400 პიქსელი; სიგანე: 100%; ზღვარი: 0 ავტომატური; ) შეყვანა ( ყუთის ზომა: სასაზღვრო ყუთი; ჩვენება: ბლოკი; საზღვარი: არცერთი; ყუთი-ჩრდილი: ჩასმული 0px 0px 4px 1px rgba(0, 0, 0, padding: 10px 0, text-transition: 0px 2px 0 1px შავი;</p><h2>კლიენტის ნაწილი</h2> <p>აქ ღირს უფრო დეტალურად გაგება, უფრო სწორად, თქვენთვის შესაფერისი ვარიანტის არჩევა. ელ.ფოსტით შეტყობინებების გასაგზავნად დაგვჭირდება php ენის გამოყენება, ე.ი. შექმენით ცალკე ფაილი, რომელშიც გადავიტანთ ყველა ამ მონაცემს. მაგრამ ჩვენ არ განვიხილავთ ამ მეთოდს აქ, რადგან ეს ბევრად უფრო ლამაზია, როდესაც ყველაფერი ხდება გვერდის გადატვირთვის გარეშე. ასე რომ, ჩვენ გადავხედავთ მონაცემთა გაგზავნას ajax-ის საშუალებით.</p> <p>თუ გსურთ ყველაფერი გააკეთოთ ძველებურად, მაშინ მოგიწევთ ოდნავ შეცვალოთ ზედა html და დააყენოთ ფორმის მეთოდის ატრიბუტის მნიშვნელობა (post ან get). ეს ყველაფერი დამოკიდებულია იმაზე, თუ როგორ გსურთ გადაიტანოთ მონაცემები ფორმიდან. ასევე არ დაგავიწყდეთ დაწეროთ მოქმედება, რომელიც მიუთითებს php ფაილის გზაზე.</p> <p>და ჩვენ გამოვიყენებთ უფრო მოწინავე მეთოდს და გავაგზავნით მონაცემებს გვერდის გადატვირთვის გარეშე, ხოლო სერვერიდან პასუხის მიღებისას მომხმარებელს მივცემთ შეტყობინებას წარმატებული ოპერაციის ან შეცდომის შესახებ. თუმცა 2 ფაილიც დაგვჭირდება, ვთქვათ <b>contact.php</b>და <b>საბაჟო.js</b>.</p> <p>პირველ რიგში, არ დაგავიწყდეთ ბიბლიოთეკის ჩართვა <b>Jquery</b>, მისი დახმარებით ჩვენ რამდენჯერმე შევამცირებთ კოდს და ადვილად შევძლებთ ნებისმიერი მოქმედების შესრულებას მზა გადაწყვეტილებების გამოყენებით.</p><p>$(".form").submit(function() ( var str = $(this).serialize(); $.ajax((type: "POST", url: "contact.php", data: str, წარმატება : function(msg) ( if(msg == "ok") ( alert("მესიჯი გაიგზავნა"); ) else ( alert("შეცდომა! შეიძლება არასწორად შეავსოთ ველები."); ) ) ) );</p><p>ახლა მოდით გავიგოთ სამოქმედო გეგმა და რატომ გვჭირდება ყველა ეს ბიბლიოთეკა და ფაილი. როდესაც მომხმარებელი დააჭერს გაგზავნის ღილაკს, გვაქვს გაგზავნის ღონისძიება, რომელსაც დავწერთ custom.js-ში და რომლის საფუძველზეც მივიღებთ ფორმიდან ყველა მონაცემს და გადავცემთ contact.php ფაილს. აქ კიდევ ერთხელ ვამოწმებთ არის თუ არა ჩვენი ველები ცარიელი (რათა თავიდან ავიცილოთ სპამის სხვა შესაძლებლობა), ვაგზავნით შეტყობინებას ელექტრონული ფოსტით და ვაცნობებთ მომხმარებელს შედეგების შესახებ, რომლებიც იგზავნება custom.js-ზე პასუხად.</p><p>If (trim($_POST["mfbPhone"]) == "") (echo "false"; ) else ($txtname = trim($_POST["mfbName"]); $txtemail = trim($_POST["mfbMail" "]); $txtphone = მორთვა ($_POST["mfbPhone"]); // ვისგანაც $fromMail = "test@test.ru"; // შეიყვანეთ თქვენი ელფოსტა აქ $emailTo = "admin@mail.ru"; $subject = "გამოხმაურება"; $subject = "=?utf-8?b?"<$fromMail>\n"; $headers .= "შინაარსის ტიპი: ტექსტი/უბრალო; charset="utf-8"\r\n"; $headers .= "MIME-ვერსია: 1.0\r\n"; $headers .= "თარიღი: ". date("D, d M Y h:i:s O") ."\r\n"; // ასოს ტექსტი $body = "მიღებულია წერილი საიტიდან ".$site." \n\nსახელი: ".$txtname."\nტელეფონი: ".$txtphone."\ne-mail: ".$txtemail."\nშეტყობინება: ".$txtmessage; ფოსტა($emailTo, $subject, $body, $headers);</p><p>ეს არის ყველაზე ძირითადი მაგალითი იმისა, თუ როგორ მუშაობს საკონტაქტო ფორმა. არსებობს მრავალი ვარიანტი, თუ როგორ უნდა შეცვალოთ შემოწმების ფაილი PHP-ში, შექმნათ თქვენი საკუთარი კლასები და ა.შ. მაგრამ ჩვენი ამოცანა იყო შეგვექმნა მარტივი და სამუშაო მაგალითი, რომელიც შეგიძლიათ გამოიყენოთ თქვენს ვებსაიტზე.</p> <p>დემო</p> <p>ფაილები</p> <h2>მზა დანამატები</h2> <p>ვინაიდან WordPress-ის ბლოგზე ხართ, ალბათ მზად ხართ და გსურთ გამოიყენოთ ყველა სახის დანამატი, განსაკუთრებით, თუ პროგრამირებასა და განლაგებაში სრული ლამერი ხართ. და მე არ გადანაშაულებ ამაში და შემიძლია ერთი მათგანიც კი წარმოგიდგინოთ თქვენს ყურადღებას სიცხადისთვის. ამ პუნქტის მიზანი არ არის რეკომენდაცია, არამედ მხოლოდ მაგალითი, რადგან მე გამოვიყენე დანამატი <b>საკონტაქტო ფორმა 7</b>რამდენიმე პროექტში.</p> <p>მისი კონფიგურაცია ძალიან მარტივია და თითქმის ყოველთვის მუშაობს უნაკლოდ. თუ თქვენ გჭირდებათ საკუთარი უნიკალური დიზაინის შექმნა, შეგიძლიათ ამის გაკეთება. თქვენ უბრალოდ უნდა დაამატოთ საჭირო ველები კონსტრუქტორში, გადათარგმნოთ და შეცვალოთ შეცდომის და წარმატებული გაგზავნის შეტყობინებების საკუთარი გზით და დასრულებულია. შემდეგ დააკოპირეთ მოკლე კოდი და ჩასვით ფორმაში სასურველ ადგილას.</p> <p><br><img src='https://i2.wp.com/myfreelanceblog.net/wp-content/uploads/2017/05/form7.jpg' align="center" width="100%" loading=lazy loading=lazy></p> <p>მე არასოდეს მქონია პრობლემა დანამატთან და თუ გჭირდებათ სწრაფი და მზა გამოსავალი, მაშინ ეს არის ის. თუ თქვენ გაქვთ საკუთარი მოთხოვნები ფორმის მიმართ ფუნქციონალურობისა და დიზაინის თვალსაზრისით, მაშინ უმჯობესია გამოიყენოთ პირველი ვარიანტი, რომელიც მოითხოვს ცოდნას ამ ინდუსტრიაში.</p> <p>მოგესალმებით, ძვირფასო მკითხველო, დღეს მე მოვამზადე თქვენთვის უგემრიელესი html გამოხმაურების ფორმა, რომელიც მუშაობს გვერდის გადატვირთვის გარეშე Ajax ტექნოლოგიის გამოყენებით + ძლიერი ტრიგერი, რომელიც თქვენს ვიზიტორებს მოტივაციას გაუწევს გამოიყენონ ფორმა. ჩემი ბლოგის მკითხველებმა ძალიან აქტიურად განიხილეს ჩემი წინა სტატია Landing Page-ზე, ახლა ჩვენ ვაფასებთ და ვათვალიერებთ დასრულებულ ახალ ფორმას. ყველა საჭირო <i><span>სტატიაში თანდართული წყარო კოდი და დემო ვერსია</span> </i>, ასევე გავაანალიზებთ მუშაობის სტრუქტურას და შეერთებას.</p> <p><b>UPD:</b>დაფიქსირდა შეცდომა სათაურის ველში სახელის კოდირებით. ახლა ყველაფერი სწორად არის ნაჩვენები. მადლობას ვუხდით მკითხველს (ეკატერინა კარაჩევა)</p> <p>თავად ფორმის ფორმატში ასევე შედის handler ფაილი PHP-ში, სამუშაოსთვის დაგჭირდებათ jquery ბიბლიოთეკა და სკრიპტები, მაგრამ ჯერ არ ჩავტვირთავ მას დიდხანს - გადავიდეთ მიმოხილვაზე; ჩვენი გამოხმაურების ანალიზი.</p> <h3>HTML გამოხმაურების ფორმა - სამუშაო სტრუქტურა</h3> <p>ჩვენი ფორმა ასე გამოიყურება:</p> <p>რა აზრი აქვს აქ? მარჯვენა მხარეს არის ასეთი ფორმა, მაგრამ მარცხენა მხარეს გავაკეთე სპეციალური ბლოკი, რომელიც წაახალისებს თქვენს ვიზიტორს დაუყოვნებლივ შეიყვანოს მათი საკონტაქტო ინფორმაცია! საიდუმლო მარტივია: ხედავთ თარიღს და დროს მარცხენა ბლოკში? დღევანდელი თარიღი ყოველთვის იქნება ნაჩვენები, დროთა განმავლობაში ამ ორი საათის დიაპაზონი გამოითვლება დღევანდელი საათიდან, ვთქვათ, თუ თქვენი დრო ახლა არის 13:14, მაშინ საათის დიაპაზონი იქნება: 12-დან 14-მდე. ნახეთ, როგორ მუშაობს )))</p> <p>სტუმარი ნახავს: ვაიმე, დღეს ფასდაკლებაა და დროზე ვიყავი, ასევე არის ფასდაკლება! სასწრაფოდ უნდა მიიღოთ! - ეს არის ჩვენი გამომწვევი.</p> <p><img src='https://i1.wp.com/vpluce.ru/wp-content/uploads/2015/01/demo.png' height="50" width="136" loading=lazy loading=lazy><img src='https://i0.wp.com/vpluce.ru/wp-content/uploads/2015/01/skachat-ishodniki.png' height="50" width="272" loading=lazy loading=lazy></p> <p>მე გადმოვწერე html გამოხმაურების ფორმის წყაროს კოდი, გადავხედე დემო - ვფიქრობ, საკმარისად ვითამაშე)) ახლა ყველაზე მნიშვნელოვანი რამ, მუშაობის პრინციპი:</p> <p><img src='https://i2.wp.com/vpluce.ru/wp-content/uploads/2015/06/shema-rabotu-formu.jpg' align="center" height="600" width="406" loading=lazy loading=lazy></p> <p>შეყვანის ფორმაში ველების დადასტურება ხდება დამმუშავებლის ფაილში <b>contact.php</b>ქვემოთ მოცემული პროგრამის კოდის ჩამონათვალში შეგიძლიათ იხილოთ შეტყობინება შეცდომებისა და წერილის წარმატებული გაგზავნის შესახებ თავად ფორმაში, ასე გამოიყურება გაგზავნის შემდეგ:</p> <p><img src='https://i0.wp.com/vpluce.ru/wp-content/uploads/2015/06/forma-otpravleno1.jpg' align="center" height="218" width="374" loading=lazy loading=lazy></p> <h3>ფორმის დამმუშავებლის საწყისი კოდი</h3> <p>ჩასვით რიგში <b>52 </b>თქვენი ელფოსტა, ასე რომ ყველა წერილი გაიგზავნება მითითებულ ელ.ფოსტაზე.</p> <table><tr><td class="line_numbers"> 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 </td><td class="code"> <?php $post = (!empty($_POST)) ? true: false; if($post) { $email = trim($_POST["email"]); $name = htmlspecialchars($_POST["name"]); $email = htmlspecialchars($_POST["email"]); $message = htmlspecialchars($_POST["message"]); $tel = htmlspecialchars($_POST["tel"]); $error = ""; if(!$name) { $error .= "Пожалуйста введите ваше имя.<br /><br /><br /> < 1) { $error .= "Введите ваше сообщение.<br /> <".$tel."> <div class="notification_error">".$error."</div>"; } } ?> </td> </tr></table><p><?php $post = (!empty($_POST)) ? true: false; if($post) { $email = trim($_POST["email"]); $name = htmlspecialchars($_POST["name"]); $email = htmlspecialchars($_POST["email"]); $message = htmlspecialchars($_POST["message"]); $tel = htmlspecialchars($_POST["tel"]); $error = ""; if(!$name) { $error .= "Пожалуйста введите ваше имя.<br />"; ) // ტელეფონის დადასტურების ფუნქცია ValidateTel($valueTel) ($regexTel = "/^(7,12)$/"; if($valueTel == "") ( return false; ) else ( $string = preg_replace( $regexTel, "", $valueTel დაბრუნება ცარიელი ($string) ?, თუ (!$tel) <br />"; ) if($tel && !ValidateTel($tel)) ($error .= "შეიყვანეთ სწორი ტელეფონის ნომერი. <br />"; ) if(!$error) // შეამოწმეთ შეტყობინება (სიგრძე) if(!$message || strlen($message)< 1) { $error .= "Введите ваше сообщение.<br />";// ეს ხაზი ადგენს მინიმალურ შეზღუდვას ასოების წერაზე. ) if(!?utf-8?b?". base64_encode($name) ."?="; $message ="\n\nსახელი: " .$ name."\n\nტელეფონის ნომერი: " .$tel."\n\nშეტყობინება: ".$message."\n\n" $mail = mail("your_email@gmail.com", $subject, $message , "From: ".$name_tema."<".$tel.">"."Reply-To: ".$email." "." X-Mailer: PHP/" . phpversion()); if($mail) (echo "OK";) ) else (echo " <div class="notification_error">".$error."</div>"; } } ?></p> <h3>ფორმის შესრულება</h3> <p>თქვენს საფოსტო ყუთში წერილების მისაღებად შეცვალეთ ზემოთ ნახსენები ხაზი. გირჩევთ გამოიყენოთ gmail.com ფოსტა, არ არის შეფერხებები ან შეფერხებები ფორმიდან გენერირებული წერილის მიღებისას. მე გაგაფრთხილე, რადგან... მკითხველს ბევრი კითხვა ჰქონდა (წერილები mail.ru-ზე არ მოდის). ფრთხილად იყავით ამაზე.</p> <p>ჩვენ ვავსებთ ყველა ველს, გთხოვთ, გაითვალისწინოთ, რომ ტელეფონის ნომერი შეყვანილია 8-ით - მე კონკრეტულად დავწერე ნომერი რვათი "89251122333" ინსტრუმენტების მინიშნებაში. პერსონაჟის შეყვანისას <b>«+» </b>გამოჩნდება შეცდომის შეტყობინება. თუ ვინმეს სჭირდება, ადვილია ამის დამატება დამმუშავებელზე <b>«+» </b>.</p> <p><i>შევსებული ფორმა ტესტის მონაცემებით</i> </p> <p><img src='https://i1.wp.com/vpluce.ru/wp-content/uploads/2015/06/proverka-formu.jpg' align="center" height="414" width="369" loading=lazy loading=lazy></p> <p><i>წერილი საფოსტო ყუთში</i> </p> <p>როგორც ხედავთ, მივიღეთ წერილი სამივე ველით, რომელიც შევსებული და გაგზავნილია. ასოს „მოთხოვნა საიტიდან“ სათაური იცვლება დამმუშავებელში <b>contact.php</b></p> <p><img src='https://i2.wp.com/vpluce.ru/wp-content/uploads/2015/06/mail2.jpg' align="center" width="100%" loading=lazy loading=lazy></p> <p>ყველაფერი კარგად მუშაობს, სასიამოვნო იქნება თქვენი გამოხმაურების (კონსტრუქციული კრიტიკის) მოსმენა კომენტარებში, თუ რაიმე სირთულე გაქვთ და რაიმეს ვერ უმკლავდებით, თავისუფლად მომწერეთ VK-ზე (ამას იპოვით საკონტაქტო დეტალებში ). ვიმედოვნებ, რომ მოგეწონათ ამ სიმბიოზის დიზაინი და ფუნქციონირება უკუკავშირის ფორმის (შეკვეთის სერვისები, აპლიკაცია) და მოქმედების მოწოდების გამომწვევი. წარმატებებს გისურვებთ ყველას თქვენს საქმიანობაში და პოზიტიურ განწყობაზე, ნახვამდის))</p> <p><b>მომზადებულია მხარდაჭერით</b></p> <script type="text/javascript"> <!-- var _acic={dataProvider:10};(function(){var e=document.createElement("script");e.type="text/javascript";e.async=true;e.src="https://www.acint.net/aci.js";var t=document.getElementsByTagName("script")[0];t.parentNode.insertBefore(e,t)})() //--> </script><br> <br> <script>document.write("<img style='display:none;' src='//counter.yadro.ru/hit;artfast_after?t44.1;r"+ escape(document.referrer)+((typeof(screen)=="undefined")?"": ";s"+screen.width+"*"+screen.height+"*"+(screen.colorDepth? screen.colorDepth:screen.pixelDepth))+";u"+escape(document.URL)+";h"+escape(document.title.substring(0,150))+ ";"+Math.random()+ "border='0' width='1' height='1' loading=lazy loading=lazy>");</script> </div> </div> </article> </div> </div> <div id="secondary"> <aside id="search-2" class="widget widget_search clearfix"> <form action="/" class="search-form searchform clearfix" method="get"> <div class="search-wrap"> <input type="text" placeholder="ძიება" class="s field" name="s"> <button class="search-icon" type="submit"></button> </div> </form> </aside> <aside id="recent-posts-2" class="widget widget_recent_entries clearfix"> <h3 class="widget-title"><span>უახლესი პოსტები</span></h3> <ul> <li> <a href="https://olegshein.ru/ka/download/luchshie-hdmi-adaptery-dlya-televizora-besprovodnoi-wifi-adapter-dlya-televizora/">უკაბელო WiFi ადაპტერი ტელევიზორისთვის</a> </li> <li> <a href="https://olegshein.ru/ka/oshibki-i-devajjsov/kak-vosstanovit-vatsap-soobshcheniya-perepisku-chaty-esli-udalil/">როგორ გავიგოთ, რომ მომხმარებელმა წაშალა WhatsApp მისი ტელეფონიდან?</a> </li> <li> <a href="https://olegshein.ru/ka/reviews/gde-nakleit-plenku-na-smartfon-kak-st-klyshko-kak-samomu-nakleit-zashchitnuyu/">სად უნდა დადოთ ფილმი თქვენს სმარტფონზე</a> </li> <li> <a href="https://olegshein.ru/ka/error-itunes/ed-soshial-nakrutka-golosov-v-oprose-vk-nakrutka-oprosov/">VKontakte გამოკითხვების მოტყუება</a> </li> <li> <a href="https://olegshein.ru/ka/malfunction/mozhno-li-vosstanovit-dannye-s-sd-karty-vosstanovlenie-dannyh/">მონაცემების აღდგენა დაზიანებული ან არ მუშაობს მეხსიერების ბარათიდან</a> </li> <li> <a href="https://olegshein.ru/ka/apps-and-books/zvonim-s-ipad-na-telefony-mozhno-li-zvonit-s-ipad-mini-i-drugih-aipadov/">შესაძლებელია თუ არა დარეკვა iPad mini-დან და სხვა iPad-ებიდან, ჩვენ ვიყენებთ საუკეთესო აპლიკაციებს?</a> </li> <li> <a href="https://olegshein.ru/ka/applied/kak-poyavilsya-vertep-chto-simvoliziruet-karamelnaya-trost-i-drugie/">"Candy Cane", უჩვეულო კანფეტის ზოლიანი ისტორია ეს საინტერესოა!</a> </li> <li> <a href="https://olegshein.ru/ka/battery-and-power-consumption/zaryadit-akkumulyator-telefona-napryamuyu-shema-zaryazhaem/">დატენეთ თქვენი ტელეფონის ბატარეა ტელეფონის გარეშე</a> </li> </ul> </aside> <aside id="text-5" class="widget widget_text clearfix"> <div class="textwidget"> <script type="text/javascript" src="//vk.com/js/api/openapi.js?144"></script> <div id="vk_groups"></div> </div> </aside> <aside id="text-4" class="widget widget_text clearfix"> <div class="textwidget"> </div> </aside> <aside id="text-3" class="widget widget_text clearfix"> <div class="textwidget"> </div> </aside> </div> </div> </div> <footer id="colophon" class="clearfix"> <div class="footer-socket-wrapper clearfix"> <div class="inner-wrap"> <div class="footer-socket-area"> <div class="footer-socket-right-section"> </div> <div class="footer-socket-left-sectoin"> <div class="copyright">2024 წელი <a href="https://olegshein.ru/ka/" title="olegshein.ru"><span>olegshein.ru</span></a>. ოლეგ შეინის კომპიუტერული კლუბი. <br></div> </div> </div> </div> </div> </footer> <a href="#masthead" id="scroll-up"><i class="fa fa-chevron-up"></i></a> </div> <script type="text/javascript"> var q2w3_sidebar_options = new Array(); q2w3_sidebar_options[0] = { "sidebar": "colormag_right_sidebar", "margin_top": 10, "margin_bottom": 0, "stop_id": "", "screen_max_width": 0, "screen_max_height": 0, "width_inherit": false, "refresh_interval": 1500, "window_load_hook": false, "disable_mo_api": false, "widgets": ['text-3'] }; </script> <script type="text/javascript"> (function(w, doc) { if (!w.__utlWdgt) { w.__utlWdgt = true; var d = doc, s = d.createElement('script'), g = 'getElementsByTagName'; s.type = 'text/javascript'; s.charset = 'UTF-8'; s.async = true; s.src = ('https:' == w.location.protocol ? 'https' : 'http') + '://w.uptolike.com/widgets/v1/uptolike.js'; var h = d[g]('body')[0]; h.appendChild(s); } })(window, document); </script> <div style="text-align:left;" data-lang="ru" data-url="/global-blue-vozvrat-tax-free-v-minske/" data-background-alpha="0.0" data-buttons-color="#FFFFFF" data-counter-background-color="#ffffff" data-share-counter-size="12" data-top-button="false" data-share-counter-type="common" data-share-style="1" data-mode="share" data-like-text-enable="false" data-mobile-view="true" data-icon-color="#ffffff" data-orientation="fixed-left" data-text-color="#000000" data-share-shape="round-rectangle" data-sn-ids="fb.vk.tw.ok.gp.ps.mr.ln." data-share-size="30" data-background-color="#ffffff" data-preview-mobile="false" data-mobile-sn-ids="fb.vk.ok.wh.vb." data-pid="cmsvpolshuby" data-counter-background-alpha="1.0" data-following-enable="false" data-exclude-show-more="true" data-selection-enable="true" class="uptolike-buttons"></div> <script type='text/javascript' src='https://olegshein.ru/wp-content/plugins/pwebcontact/media/bootstrap-2.3.2/js/bootstrap.min.js?ver=2.3.2'></script> <script type='text/javascript' src='https://olegshein.ru/wp-content/plugins/pwebcontact/media/js/jquery.validate.min.js?ver=1.15.0'></script> <script type='text/javascript'> /* <![CDATA[ */ var pwebcontact_l10n = pwebcontact_l10n || {}; pwebcontact_l10n.form = { "INIT": "Initializing form...", "SENDING": "Sending...", "SEND_ERR": "Wait a few seconds before sending next message", "REQUEST_ERR": "Request error: ", "COOKIES_ERR": "Enable cookies and refresh page to use this form" }; /* ]]> */ </script> <script type='text/javascript' src='https://olegshein.ru/wp-content/plugins/pwebcontact/media/js/jquery.pwebcontact.min.js?ver=2.3.0'></script> <script type='text/javascript' src='https://olegshein.ru/wp-content/plugins/simple-tooltips/zebra_tooltips.js?ver=4.4.13'></script> <script type='text/javascript' src='https://olegshein.ru/wp-content/plugins/contact-form-7/includes/js/jquery.form.min.js?ver=3.51.0-2014.06.20'></script> <script type='text/javascript' src='https://olegshein.ru/wp-content/plugins/contact-form-7/includes/js/scripts.js?ver=4.5.1'></script> <script type='text/javascript'> /* <![CDATA[ */ var tocplus = { "visibility_show": "\u043f\u043e\u043a\u0430\u0437\u0430\u0442\u044c", "visibility_hide": "\u0441\u043a\u0440\u044b\u0442\u044c", "width": "Auto" }; /* ]]> */ </script> <script type='text/javascript' src='https://olegshein.ru/wp-content/plugins/table-of-contents-plus/front.min.js?ver=1509'></script> <script type='text/javascript' src='https://olegshein.ru/wp-content/plugins/wp-cloudy/js/wp-cloudy-ajax.js?ver=4.4.13'></script> <script type='text/javascript' src='https://olegshein.ru/wp-content/plugins/mistape/assets/js/modernizr.custom.js?ver=1.3.3'></script> <script type='text/javascript' src='https://olegshein.ru/wp-content/plugins/mistape/assets/js/mistape-front.js?ver=1.3.3'></script> <script type='text/javascript' src='https://olegshein.ru/wp-content/themes/colormag/js/jquery.bxslider.min.js?ver=4.1.2'></script> <script type='text/javascript' src='https://olegshein.ru/wp-content/themes/colormag/js/colormag-slider-setting.js?ver=4.4.13'></script> <script type='text/javascript' src='https://olegshein.ru/wp-content/themes/colormag/js/navigation.js?ver=4.4.13'></script> <script type='text/javascript' src='https://olegshein.ru/wp-content/themes/colormag/js/fitvids/jquery.fitvids.js?ver=20150311'></script> <script type='text/javascript' src='https://olegshein.ru/wp-content/themes/colormag/js/fitvids/fitvids-setting.js?ver=20150311'></script> <script type='text/javascript' src='https://olegshein.ru/wp-content/plugins/q2w3-fixed-widget/js/q2w3-fixed-widget.min.js?ver=5.0.4'></script> <script type='text/javascript' src='/wp-includes/js/wp-embed.min.js?ver=4.4.13'></script> <script type='text/javascript' src='https://olegshein.ru/wp-content/plugins/easy-fancybox/fancybox/jquery.fancybox-1.3.8.min.js?ver=1.6.2'></script> <script type='text/javascript' src='https://olegshein.ru/wp-content/plugins/easy-fancybox/js/jquery.easing.min.js?ver=1.4.0'></script> <script type='text/javascript' src='https://olegshein.ru/wp-content/plugins/easy-fancybox/js/jquery.mousewheel.min.js?ver=3.1.13'></script> <div id="pwebcontact1" class="pwebcontact pweb-bottom pweb-offset-right pweb-slidebox pweb-theme-free pweb-labels-above pweb-horizontal" dir="ltr"> <div id="pwebcontact1_toggler" class="pwebcontact1_toggler pwebcontact_toggler pweb-closed pweb-theme-free"> <span class="pweb-text">რაიმე შეკითხვა?</span> <span class="pweb-icon"></span> </div> <div id="pwebcontact1_box" class="pwebcontact-box pweb-slidebox pweb-theme-free pweb-labels-above pweb-horizontal pweb-init" dir="ltr"> <div class="pwebcontact-container-outset"> <div id="pwebcontact1_container" class="pwebcontact-container"> <div class="pwebcontact-container-inset"> <form name="pwebcontact1_form" id="pwebcontact1_form" class="pwebcontact-form" action="/" method="post" accept-charset="utf-8"> <div class="pweb-fields"> <div class="pweb-row"> <div> <div class="pweb-field-container pweb-field-name pweb-field-name"> <div class="pweb-label"> <label id="pwebcontact1_field-name-lbl" for="pwebcontact1_field-name">სახელი</label> </div> <div class="pweb-field"> <div class="pweb-field-shadow"> <input type="text" name="fields[name]" id="pwebcontact1_field-name" autocomplete="on" class="pweb-input" value="" data-role="none"> </div> </div> </div> </div> </div> <div class="pweb-row"> <div> <div class="pweb-field-container pweb-field-email pweb-field-email"> <div class="pweb-label"> <label id="pwebcontact1_field-email-lbl" for="pwebcontact1_field-email">ელფოსტა <span class="pweb-asterisk">*</span> </label> </div> <div class="pweb-field"> <div class="pweb-field-shadow"> <input type="email" name="fields[email]" id="pwebcontact1_field-email" autocomplete="on" class="pweb-input required" value="" data-role="none"> </div> </div> </div> </div> </div> <div class="pweb-row"> <div> <div class="pweb-field-container pweb-field-textarea pweb-field-message"> <div class="pweb-label"> <label id="pwebcontact1_field-message-lbl" for="pwebcontact1_field-message">შეტყობინება <span class="pweb-asterisk">*</span> </label> </div> <div class="pweb-field"> <div class="pweb-field-shadow"> <textarea name="fields[message]" id="pwebcontact1_field-message" cols="50" rows="5" class="required" data-role="none">