แบบฟอร์มข้อเสนอแนะที่ปรับแต่งได้: วิธีการสร้างออนไลน์? วิธีสร้างแบบฟอร์มข้อเสนอแนะแบบป๊อปอัพที่สวยงาม HTML และ PHP ด้วยโทรศัพท์และส่งคำสั่งซื้อโดย e -mail?

คำแนะนำสำหรับการสร้างแบบฟอร์มข้อเสนอแนะเกี่ยวกับ HTML และ CSS รวมถึงคอลเลกชันของแบบฟอร์มที่พร้อมทำและคู่มือเพื่อเชื่อมต่อและกำหนดค่า

วันนี้บุคคลใดก็ตามที่ไม่มีทักษะการเขียนโปรแกรมสามารถสร้างไซต์ของเขาเองได้อย่างง่ายดายโดยการดาวน์โหลดเทมเพลตที่ทำขึ้นมาจากเครือข่ายและติดตั้งบนเครื่องยนต์ที่ใช้

อย่างไรก็ตามเทมเพลตที่ทำขึ้นมาไม่ได้ทุกอย่างสามารถตอบสนองความต้องการของผู้ใช้ได้ หลายคนแสดงอยู่ในรูปแบบ“ ชีส” และไม่มีส่วนและฟังก์ชั่นที่สำคัญเช่นตัวอย่างเช่นแบบฟอร์มข้อเสนอแนะ

บล็อกไซต์นี้มีความสำคัญอย่างยิ่งสำหรับเจ้าของร้านค้าออนไลน์และพอร์ทัลข้อมูลขนาดใหญ่ ในบทความของเราคุณจะพบข้อมูลเกี่ยวกับวิธีการสร้างแบบฟอร์มข้อเสนอแนะอย่างอิสระที่จะดาวน์โหลดเทมเพลตที่เสร็จแล้วและวิธีการติดตั้งบนเว็บไซต์ของคุณ

รูปที่ 1. แบบฟอร์มข้อเสนอแนะคืออะไรและทำไมจึงจำเป็น?

แบบฟอร์มข้อเสนอแนะคืออะไรและทำไมจึงจำเป็น?

• หนึ่งในฟังก์ชั่นที่สำคัญที่สุดของไซต์ที่เหมาะสมคือแบบฟอร์มข้อเสนอแนะ มันทำหน้าที่สำหรับการมีปฏิสัมพันธ์ระหว่างผู้เข้าชมและการบริหารทรัพยากร ดังนั้นด้วยความช่วยเหลือคุณสามารถเขียนคำอุทธรณ์เพื่อสนับสนุนด้านเทคนิคหรือส่งข้อมูลที่จำเป็นไปยังการบริหาร ตัวอย่างเช่นรายละเอียดการชำระเงินในร้านค้าออนไลน์หรือชื่อสินค้าที่สั่งซื้อ ขอแนะนำอย่างยิ่งให้มีแบบฟอร์มดังกล่าวในพอร์ทัลของคุณเนื่องจากการติดต่ออย่างต่อเนื่องกับผู้เข้าชมและลูกค้าเป็นกุญแจสำคัญในการพัฒนาที่ประสบความสำเร็จ

แบบฟอร์มข้อเสนอแนะเป็นหน้าหรือบล็อกแยกต่างหาก (แผนก) ซึ่งประกอบด้วยหลายฟิลด์ของอินพุตข้อความและปุ่ม“ ส่ง” ตามกฎแล้วแบบฟอร์มมาตรฐานมีฟิลด์ต่อไปนี้:

• ชื่อเต็ม
• อีเมล (ที่อยู่อีเมล)
• หมายเลขโทรศัพท์
• ที่อยู่ของเว็บไซต์ของคุณ
• ฟิลด์สำหรับการป้อนข้อความ

อย่างไรก็ตามฟิลด์สามารถมากเท่าที่คุณต้องการและพวกเขาสามารถลงนามได้ตามที่คุณต้องการ ทุกอย่างขึ้นอยู่กับความต้องการและจินตนาการของคุณ

รูปที่ 2 แบบฟอร์มข้อเสนอแนะคืออะไรและทำไมจึงจำเป็น?

• นอกจากนี้เจ้าของบางคนเพิ่มการ์ด Google หรือ Yandex ลงในแบบฟอร์มข้อเสนอแนะแบบฟอร์มการเข้าสู่เว็บไซต์โดยใช้เครือข่ายสังคมออนไลน์“ Vkontakte”,“ Facebook”,“ Google+” และอื่น ๆ แต่เราจะพูดคุยเกี่ยวกับการสร้างรูปแบบการตอบรับที่ง่ายที่สุดซึ่งคุณจะต้องมีความรู้เฉพาะเกี่ยวกับพื้นฐานของภาษาการทำเครื่องหมาย HTML และไม่มีอะไรเพิ่มเติม

จะสร้างแบบฟอร์มข้อเสนอแนะที่ง่ายที่สุดสำหรับเว็บไซต์บน HTML และ PHP ได้อย่างไร

เพื่อที่จะไม่เปลี่ยนบทความให้เป็นตำราที่น่าเบื่อเต็มรูปแบบเราจะดำเนินการต่อจากความจริงที่ว่าคุณคุ้นเคยกับพื้นฐานของภาษาการทำเครื่องหมายแล้ว HTML และคุณมีความคิดทั่วไปเกี่ยวกับวิธีการทำงาน หากคุณไม่มีทักษะดังกล่าวก่อนที่จะสร้างแบบฟอร์มขอแนะนำอย่างยิ่งให้กระชับความรู้ของคุณเล็กน้อยในทรัพยากรฟรี htmlbook.ru. มิฉะนั้นคุณไม่เพียง แต่ละทิ้งกิจการนี้ แต่ยังทำลายรหัสของเว็บไซต์ของคุณ

ในการสร้างรูปแบบการตอบรับที่ทำงานใหม่คุณต้องมีองค์ประกอบสำคัญสามประการซึ่งหนึ่งในนั้นเป็นหน้าที่ของการทำเครื่องหมายและโครงสร้างของแบบฟอร์ม ( HTML) ที่สองสำหรับการออกแบบภายนอก ( CSS) และที่สามสำหรับการประมวลผลและการส่งข้อมูล ( PHP). เริ่มต้นกันเถอะ:

การเขียนรหัส HTML สำหรับข้อเสนอแนะ

• ขั้นตอนที่ 1. เพื่อระบุรูปแบบใน HTML ใช้แท็ก ‹ฟอร์ม› ‹/ฟอร์ม›. ข้างในจะมีการตั้งค่าขนาดสไตล์และคุณสมบัติที่สำคัญอื่น ๆ ของรูปแบบ เมื่อบันทึกแท็กตัวเองเขาต้องตั้งค่าคลาสเพื่อระบุซึ่งจะช่วยติดตั้งสำหรับแบบฟอร์มเพิ่มเติม CSS สไตล์

รูปที่ 1. วิธีการสร้างแบบฟอร์มข้อเสนอแนะที่ง่ายที่สุดสำหรับเว็บไซต์บน HTML และ PHP

• ขั้นตอนที่ 2. เพิ่มเติมเพื่อสร้างฟิลด์แรกของแบบฟอร์มของเราภายในแท็ก \u003cรูปร่าง\u003e คุณต้องเขียนแท็กบล็อก ‹P›ซึ่งรับผิดชอบในการสร้างบรรทัดใหม่

รูปที่ 2 วิธีสร้างแบบฟอร์มข้อเสนอแนะที่ง่ายที่สุดสำหรับเว็บไซต์บน HTML และ PHP

• ขั้นตอนที่ 3. แท็กด้านใน ‹P› จากบรรทัดใหม่เราป้อนแท็กต่อไปนี้: ‹ฉลากสำหรับ \u003d "ชื่อ"›ชื่อ \u003c/ฉลาก\u003e. เขารับผิดชอบชื่อของฟอร์มในอนาคต

รูปที่ 3 วิธีการสร้างแบบฟอร์มข้อเสนอแนะที่ง่ายที่สุดสำหรับเว็บไซต์บน HTML และ PHP

• ขั้นตอนที่ 4. ในบรรทัดใหม่ทุกอย่างอยู่ในแท็กเดียวกัน ‹P› เรากำหนดแท็กของการสร้างฟิลด์ด้วยค่าต่อไปนี้: ‹ประเภทอินพุต \u003d "text » name \u003d" name "placeholder \u003d"ใส่ชื่อของคุณ "ที่จำเป็น \\\u003e. พารามิเตอร์ " type \u003d "ข้อความ"" ตั้งค่าประเภทของฟิลด์ข้อความและพารามิเตอร์ " ตัวยึด \u003d "ใส่ชื่อของคุณ «» ตั้งค่าข้อความเริ่มต้นในฟิลด์ข้อความนี้มาก พารามิเตอร์ " ที่จำเป็น»มันทำให้ชัดเจนต่อผู้เยี่ยมชมไซต์ว่าฟิลด์นี้จำเป็นสำหรับการกรอกข้อมูล เป็นผลให้คุณควรได้รับแบบฟอร์มที่มีหนึ่งฟิลด์ดังที่แสดงในภาพหน้าจอด้านล่าง

รูปที่ 4. วิธีสร้างแบบฟอร์มข้อเสนอแนะที่ง่ายที่สุดสำหรับเว็บไซต์บน HTML และ PHP

• ขั้นตอนที่ 5. โดยตัวอย่างข้างต้นเพิ่มฟิลด์ที่เหลือที่คุณต้องการแต่ละครั้งเริ่มต้นจากแท็ก ‹P›. ในการติดตั้งฟิลด์ด้วยข้อความให้ใช้แท็ก ‹textarea name \u003d "message" cols \u003d "50″ rows \u003d" 6″ ต้องการ› ‹/textarea›. พารามิเตอร์ " cols" และ " แถว»รับผิดชอบความกว้างและความสูงของฟิลด์ข้อความ คุณสามารถตั้งค่าพารามิเตอร์ที่คุณชอบมากขึ้น คุณควรได้รับสิ่งที่แสดงในภาพหน้าจอด้านล่าง

รูปที่ 5. วิธีการสร้างแบบฟอร์มข้อเสนอแนะที่ง่ายที่สุดสำหรับเว็บไซต์บน HTML และ PHP

• ขั้นตอนที่ 6. เพื่อป้องกันตัวเองจากบอทซึ่งค่อนข้างมากบนอินเทอร์เน็ตในวันนี้สร้างอีกบรรทัดด้วยแท็ก ‹ชื่ออินพุต \u003d "bezspama" type \u003d "text » style \u003d" display: none "value \u003d" " /›. เนื่องจากพารามิเตอร์ " style \u003d "display: none"»ฟิลด์นี้จะไม่สามารถมองเห็นได้โดยมนุษย์ แต่บอทจะถูกเติมโดยอัตโนมัติ ดังนั้นคุณสามารถแยกแยะคนที่มีชีวิตออกจากโปรแกรมได้เสมอ

รูปที่ 6. วิธีการสร้างแบบฟอร์มข้อเสนอแนะที่ง่ายที่สุดสำหรับเว็บไซต์บน HTML และ PHP

• ขั้นตอนที่ 7. ขั้นตอนสุดท้ายของการทำเครื่องหมายคือการสร้างปุ่มส่ง แท็กใช้สำหรับสิ่งนี้ \u003cปุ่ม\u003e. สร้างบล็อกใหม่ ‹P› และข้างในให้ป้อนรหัสปุ่มด้วยพารามิเตอร์ต่อไปนี้: ‹button class \u003d "ส่ง" type \u003d "ส่ง"›ส่งข้อความ \u003c/ปุ่ม\u003e. ผลลัพธ์ที่คล้ายกันควรเปิดออกดังแสดงในภาพหน้าจอ

รูปที่ 7. จะสร้างแบบฟอร์มข้อเสนอแนะที่ง่ายที่สุดสำหรับเว็บไซต์บน HTML และ PHP ได้อย่างไร?

การทำงานกับรูปแบบการเรียงซ้อน (CSS)

• ดังที่คุณได้สังเกตเห็นแล้วในกระบวนการทำเครื่องหมายเราได้เปิดสิ่งบางอย่างที่คดเคี้ยวไม่น่าสนใจและน่าขยะแขยง เพื่อที่จะให้ข้อเสนอแนะแบบฟอร์มมีลักษณะที่เรียบร้อยมากหรือน้อยหนึ่งภาษา HTML มันจะไม่เพียงพอ เพื่อจุดประสงค์นี้คุณจะต้องหันไปใช้สไตล์ CSS.
• ในกรณีที่คุณใช้ประโยชน์จากคำแนะนำเพื่อกระชับทักษะพื้นฐานของคุณเกี่ยวกับทรัพยากร htmlbook.ruจากนั้นตั้งค่าพารามิเตอร์การออกแบบบางอย่างสำหรับทุกส่วนของแบบฟอร์มโดยใช้ CSS มันจะไม่ยากสำหรับคุณ หากคุณไม่มีความปรารถนาหรือเวลาที่จะยุ่งกับสิ่งเหล่านี้เราจะให้รหัสที่พร้อมทำและบอกวิธีเชื่อมต่อ

รูปที่ 8 จะสร้างแบบฟอร์มข้อเสนอแนะที่ง่ายที่สุดสำหรับเว็บไซต์บน HTML และ PHP ได้อย่างไร

เชื่อมต่อสไตล์ CSS ถึง HTML คุณสามารถสองวิธี:

• คัดลอกรหัสจากตารางการเรียงซ้อนของเราไปที่ด้านล่างของไฟล์ style.cssซึ่งมีอยู่ที่ไซต์โฮสติ้ง
• ย้ายไฟล์สไตล์ของเราไปยังโฮสติ้งของคุณและเชื่อมต่อ

ไฟล์ style.css เชื่อมต่อภายในแท็ก ‹หัว› ‹/head› ใช้สคริปต์ ‹link rel \u003d "stylesheet" media \u003d "หน้าจอ" href \u003d "style.css"›. ในกรณีที่ไฟล์ที่มีสไตล์ไม่ได้อยู่ในโฟลเดอร์เดียวกับไฟล์ HTML หลักคุณต้องระบุเส้นทางไป ในไฟล์ของเราที่มีสไตล์แต่ละองค์ประกอบมีการกำหนด หากคุณต้องการคุณสามารถเปลี่ยนพารามิเตอร์สำหรับตัวคุณเองได้รับคำแนะนำจากทักษะการเขียนโปรแกรมขั้นพื้นฐานเท่านั้น

การเชื่อมต่อไฟล์ PHP และการตั้งค่า

ดังที่ได้กล่าวไว้ก่อนหน้านี้สคริปต์ PHP รับผิดชอบการดำเนินการของแบบฟอร์มข้อเสนอแนะ อย่างไรก็ตามเพื่อที่จะเข้าใจหลักการของการทำงานภาษามากหรือน้อย PHPคุณต้องอ่านวรรณกรรมจำนวนมากและใช้เวลาในการฝึกฝนเป็นจำนวนชั่วโมง ดังนั้นในกรณีของ CSSเราจะให้ไฟล์สำเร็จรูปพร้อมสคริปต์ PHP ซึ่งจะต้องแนบกับเอกสารด้วยแบบฟอร์มเท่านั้น

ไม่เหมือนไฟล์ style.cssไฟล์ที่มีสคริปต์ PHP ถูกแนบมาในคุณสมบัติของแบบฟอร์มเอง เริ่มต้นกันเถอะ:

• ขั้นตอนที่ 1. เปิดรหัสที่เขียนก่อนหน้านี้และค้นหาบรรทัดที่มีแท็กแบบเปิด เพิ่มคุณสมบัติลงไป " action \u003d "contact-form.php"" และ " วิธี \u003d "โพสต์"". ดูตัวอย่างในภาพหน้าจอ

รูปที่ 9. จะสร้างแบบฟอร์มข้อเสนอแนะที่ง่ายที่สุดสำหรับเว็บไซต์บน HTML และ PHP ได้อย่างไร?

• ขั้นตอนที่ 2. ดาวน์โหลดไฟล์ PHP ของเราและวางไว้บนโฮสติ้งในโฟลเดอร์เดียวกันกับที่เอกสาร HTML อยู่ ดังนั้นไฟล์ PHP และ HTML จะโต้ตอบกัน

รูปที่ 10 จะสร้างแบบฟอร์มข้อเสนอแนะที่ง่ายที่สุดสำหรับเว็บไซต์บน HTML และ PHP ได้อย่างไร

• ขั้นตอนที่ 3. ถัดไปคุณต้องกำหนดค่าสคริปต์ด้วยตัวคุณเอง เปิดไฟล์และตั้งค่าตัวแปรโดยกำหนดชื่อเดียวกันกับในสคริปต์ HTML หากคุณเพิ่มฟิลด์เพิ่มเติมลงในแบบฟอร์มให้เพิ่มในสคริปต์ PHP ตามที่แสดงในภาพหน้าจอ

รูปที่ 11. จะสร้างแบบฟอร์มข้อเสนอแนะที่ง่ายที่สุดสำหรับเว็บไซต์บน HTML และ PHP ได้อย่างไร?

• ขั้นตอนที่ 4. ถัดไปคุณจะต้องเพิ่มตัวแปรอีกสองตัวพร้อมที่อยู่อีเมลของคุณและหัวข้อจดหมายที่จะแสดงในกล่องของคุณ ในบรรทัดที่มีตัวแปร " $ ที่อยู่"ระบุอีเมลและในบรรทัด" $ sub»ธีมของตัวอักษรจะแสดงในภาพหน้าจอ

รูปที่ 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 และ Joomlaพวกเขามีการตั้งค่าที่เรียบง่ายและเบาจากแผงควบคุมและยังเหมาะสำหรับเว็บไซต์ที่ไม่มีเครื่องยนต์

ดาวน์โหลดรูปแบบการตอบรับแบบฟอร์มการออกแบบสำหรับไซต์

วิดีโอ: Readpress Reframed ข้อเสนอแนะตอบรับข้อเสนอแนะ