დააკონფიგურიროთ უკუკავშირის ფორმა: როგორ შევქმნათ ინტერნეტით? როგორ გავაკეთოთ ლამაზი pop -up უკუკავშირის ფორმა HTML და PHP ტელეფონით და გაგზავნოთ შეკვეთა e -mail?

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

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

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

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

სურათი 1. რა არის უკუკავშირის ფორმა და რატომ არის ასე აუცილებელი?

რა არის უკუკავშირის ფორმა და რატომ არის ეს აუცილებელი?

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

უკუკავშირის ფორმა არის ცალკეული გვერდი ან ბლოკი (განყოფილება), რომელიც შედგება ტექსტის შეყვანის რამდენიმე ველისა და ღილაკის "გაგზავნის "გან. როგორც წესი, სტანდარტულ ფორმას აქვს შემდეგი ველები:

• Სრული სახელი
• ელ.ფოსტა (ელ.ფოსტის მისამართი)
• Ტელეფონის ნომერი
• თქვენი საიტის მისამართები
• ველი ტექსტური შეტყობინების შესასვლელად

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

სურათი 2. რა არის უკუკავშირის ფორმა და რატომ არის ეს აუცილებელი?

• გარდა ამისა, ზოგი მფლობელი დაამატებს Google ან Yandex ბარათებს უკუკავშირის ფორმას, საიტზე შესვლის ფორმებს სოციალური ქსელების "VKontakte", "Facebook", "Google+" და ა.შ. მაგრამ ჩვენ ვისაუბრებთ უკუკავშირის უმარტივესი ფორმის შექმნაზე, რისთვისაც დაგჭირდებათ ექსკლუზიურად ცოდნა მარკირების ენის საფუძვლების შესახებ HTML და მეტი არაფერი.

როგორ შევქმნათ საიტისთვის უმარტივესი უკუკავშირის ფორმა HTML და PHP?

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

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

HTML კოდის დაწერა უკუკავშირისთვის

• Ნაბიჯი 1. იმისათვის, რომ მიუთითოთ ფორმა HTML Tag გამოიყენება ‹ფორმა› ‹/ფორმა›. მის შიგნით იქნება ზომები, სტილები და ფორმის სხვა სასიცოცხლო თვისებები. თავად ტეგის ჩაწერისას, მას უნდა დააწესოს კლასის მითითება, რაც კიდევ უფრო დაეხმარება ფორმის ინსტალაციას CSS სტილები.

სურათი 1. როგორ შევქმნათ საიტის ყველაზე მარტივი უკუკავშირის ფორმა HTML და PHP?

• ნაბიჯი 2. შემდგომში შევქმნათ ჩვენი ფორმის პირველი ველი ტეგის შიგნით ‹ფორმა› თქვენ უნდა დაწეროთ ბლოკის ტეგა ‹P›რომელიც პასუხისმგებელია ახალი ხაზის შექმნაზე.

სურათი 2. როგორ შევქმნათ საიტისთვის უმარტივესი უკუკავშირის ფორმა HTML და PHP?

• ნაბიჯი 3. შიგნით ‹P› ახალი ხაზიდან ჩვენ შემდეგ ჩანართში შევიტანთ: ‹ეტიკეტი \u003d" სახელი "›სახელი ‹/ეტიკეტი›. იგი პასუხისმგებელია ფორმის მომავალი ველის სახელებზე.

სურათი 3. როგორ შევქმნათ საიტისთვის უმარტივესი უკუკავშირის ფორმა HTML და PHP?

• ნაბიჯი 4. ახალ ხაზზე, ყველაფერი ერთსა და იმავე ჩანართშია ‹P› ჩვენ ვადგენთ ველის შექმნის ტეგს შემდეგი მნიშვნელობებით: ‹შეყვანის ტიპი \u003d" ტექსტი »სახელი \u003d" სახელი "Placeholder \u003d"შეიყვანეთ თქვენი სახელი »საჭიროა \\›. Პარამეტრი " ტიპი \u003d "ტექსტი"" ადგენს ტექსტური ველის ტიპს და პარამეტრს " ადგილსამყოფელი \u003d "შეიყვანეთ თქვენი სახელი «» ადგენს საწყის ტექსტს ამ ტექსტურ ველში. Პარამეტრი " საჭირო»საიტის ვიზიტორს ცხადყოფს, რომ ეს ველი სავალდებულოა შევსებისთვის. შედეგად, თქვენ უნდა მიიღოთ ფორმა ერთი ველით, როგორც ეს მოცემულია ქვემოთ მოცემულ ეკრანზე.

სურათი 4. როგორ შევქმნათ საიტისთვის უმარტივესი უკუკავშირის ფორმა HTML და PHP?

• ნაბიჯი 5. ზემოთ მოყვანილი მაგალითით, დაამატეთ დარჩენილი ველები, რომლებიც გჭირდებათ, ყოველ ჯერზე ტეგიდან დაწყებული ‹P›. ველის ტექსტური შეტყობინებით დაყენების მიზნით, გამოიყენეთ ტეგა ‹Textarea Name \u003d" შეტყობინება "cols \u003d" 50 ″ მწკრივები \u003d "6 ″ საჭირო› ‹/Textarea›. Პარამეტრები " cLOS"და" რიგები»პასუხისმგებელნი არიან ტექსტური ველის სიგანეზე და სიმაღლეზე. შეგიძლიათ დააყენოთ ის პარამეტრები, რომლებიც უფრო მოგწონთ. თქვენ უნდა მიიღოთ მსგავსი რამ, რაც ნაჩვენებია ქვემოთ მოცემულ ეკრანზე.

სურათი 5. როგორ შევქმნათ საიტის ყველაზე მარტივი უკუკავშირის ფორმა HTML და PHP?

• ნაბიჯი 6. დაიცვათ თავი ბოტებისგან, რომლებიც დღეს საკმაოდ ბევრია ინტერნეტში, შექმენით სხვა ხაზი ტეგით ‹შეყვანის სახელი \u003d" bezspama "ტიპი \u003d" ტექსტი »სტილი \u003d" ჩვენება: არცერთი "მნიშვნელობა \u003d" " /›. პარამეტრის გამო " სტილი \u003d "ჩვენება: არცერთი"»ეს ველი არ ჩანს უბრალო მოკვდავებით, მაგრამ ბოტები ავტომატურად ივსება. ამრიგად, თქვენ ყოველთვის შეგიძლიათ განასხვავოთ ცოცხალი ადამიანი პროგრამისგან.

სურათი 6. როგორ შევქმნათ საიტის ყველაზე მარტივი უკუკავშირის ფორმა HTML და PHP?

• ნაბიჯი 7. მარკირების ბოლო ეტაპი იქნება გაგზავნის ღილაკის შექმნა. Tag გამოიყენება ამისათვის ‹ღილაკი›. შექმენით ახალი ბლოკი ‹P› და მის შიგნით, შეიყვანეთ ღილაკის კოდი შემდეგი პარამეტრებით: ‹ღილაკის კლასი \u003d" წარდგენა "ტიპი \u003d" წარდგენა "›გააგზავნე შეტყობინება ‹/ღილაკი›. ანალოგიური შედეგი უნდა აღმოჩნდეს, როგორც ეს ნაჩვენებია ეკრანზე.

სურათი 7. როგორ შევქმნათ საიტისთვის უმარტივესი უკუკავშირის ფორმა HTML და PHP?

კასკადური სტილის (CSS) მუშაობა

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

სურათი 8. როგორ შევქმნათ საიტისთვის უმარტივესი უკუკავშირის ფორმა HTML და PHP?

დააკავშირეთ სტილები CSS -მდე HTML შეგიძლიათ ორი გზა:

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

საქაღალდე სტილი. აკავშირებს ტეგის შიგნით ‹ხელმძღვანელი› ‹/ხელმძღვანელი› სკრიპტის გამოყენებით ‹ბმული rel \u003d" stylesheet "media \u003d" ეკრანი "href \u003d" style.css "›. იმ შემთხვევაში, თუ ფაილი სტილის მქონე ფაილი არ არის იმავე საქაღალდეში, როგორც მთავარი HTML ფაილი, მაშინ თქვენ უნდა მიუთითოთ გზა მისკენ. ჩვენს ფაილში სტილით, თითოეულ ელემენტს აქვს აღნიშვნა. თუ გსურთ, შეგიძლიათ შეცვალოთ პარამეტრები საკუთარი თავისთვის, ხელმძღვანელობთ მხოლოდ პროგრამირების ძირითადი უნარებით.

PHP ფაილის კავშირი და მისი დაყენება

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

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

• Ნაბიჯი 1. გახსენით ადრე დაწერილი კოდი და იპოვნეთ ხაზი ღია ფორმის ნიშნით. დაამატეთ თვისებები მასში " მოქმედება \u003d "საკონტაქტო ფორმა. Php""და" მეთოდი \u003d "პოსტი"”. უყურეთ მაგალითს ეკრანზე.

სურათი 9. როგორ შევქმნათ საიტისთვის უმარტივესი უკუკავშირის ფორმა HTML და PHP?

• ნაბიჯი 2. ჩამოტვირთეთ ჩვენი PHP ფაილი და მოათავსეთ იგი ჰოსტინგზე იმავე საქაღალდეში, სადაც მდებარეობს HTML დოკუმენტი. ამრიგად, PHP და HTML ფაილები ურთიერთქმედებენ ერთმანეთთან.

სურათი 10. როგორ შევქმნათ საიტისთვის უმარტივესი უკუკავშირის ფორმა HTML და PHP?

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

სურათი 11. როგორ შევქმნათ საიტისთვის უმარტივესი უკუკავშირის ფორმა HTML და PHP?

• ნაბიჯი 4. შემდეგი, თქვენ უნდა დაამატოთ კიდევ ორი \u200b\u200bცვლადი თქვენი ელ.ფოსტის მისამართით და წერილის თემასთან, რომელიც თქვენს ყუთში იქნება ნაჩვენები. ცვლადის ხაზში " $ მისამართი"მიუთითეთ ელ.ფოსტით და ხაზში" $ ქვე»წერილის თემა ნაჩვენებია ეკრანზე.

სურათი 12. როგორ შევქმნათ საიტისთვის უმარტივესი უკუკავშირის ფორმა HTML და PHP?

• ნაბიჯი 5. ცვლადის ხაზში " $ ms»წერილის ფორმატი, რომელსაც ფოსტით მიიღებთ, კონფიგურებულია. შეგიძლიათ გადაწეროთ იგი უცვლელი ან შეცვალოთ საკუთარი გემოვნება.

სურათი 13 როგორ შევქმნათ საიტისთვის უმარტივესი უკუკავშირის ფორმა HTML და PHP?

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

სურათი 14. როგორ შევქმნათ საიტისთვის უმარტივესი უკუკავშირის ფორმა HTML და PHP?

ჩამოტვირთეთ CSS და PHP ფაილები უკუკავშირისთვის

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

სურათი 15. როგორ შევქმნათ საიტისთვის უმარტივესი უკუკავშირის ფორმა HTML და PHP?

უკუკავშირის ლამაზი დიზაინის ფორმების შერჩევა HTML და CSS სხვადასხვა მიზნით

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

სურათი 1. უკუკავშირის ლამაზი დიზაინის ფორმების შერჩევა HTML და CSS სხვადასხვა მიზნით

• ცოტათი მოძებნეთ, ჩვენ ვიპოვნეთ არჩევანი 35 გამოხმაურების ლამაზი პოპ -პ -ის დიზაინის ფორმები, რომლებიც წერია HTML და CSS. ეს ფორმები შესაფერისია ისეთი ძრავებისთვის, როგორიცაა WordPress და ჯომლამათ აქვთ მარტივი და მსუბუქი პარამეტრები მართვის პანელიდან და ასევე შესანიშნავია საიტებისთვის ძრავის გარეშე.

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

ვიდეო: ReadPress Reframed უკუკავშირის უკუკავშირის უკუკავშირი