10 ตัวอย่างโค้ดสำหรับสร้างแบบฟอร์มที่สวยงาม

ทุกเว็บไซต์มักต้องการแบบฟอร์ม ไม่ว่าจะเป็นหน้าชำระเงินหรือหน้าติดต่อทั่วไป

สิ่งสำคัญคือต้องตรวจสอบให้แน่ใจว่าแบบฟอร์มของคุณใช้งานได้ ดังนั้นการใช้งานจึงเป็นที่ 1 แต่ความสวยงามก็มีความสำคัญเช่นกัน เนื่องจากการออกแบบที่น่าเชื่อถือนั้นมีส่วนร่วมมากกว่าเสมอ

หากคุณติดอยู่กับแนวคิดการออกแบบ คอลเล็กชันนี้อาจช่วยคุณได้ เป็นคอลเลกชันของการออกแบบแบบฟอร์ม 10 แบบพร้อมซอร์สโค้ดฟรี คุณจะพบกับชุดสี รูปแบบช่องป้อนข้อมูล สไตล์การพิมพ์ และอื่นๆ อีกมากมาย

นอกจากนี้ ทั้งหมดนี้โฮสต์ฟรีเพื่อให้คุณสามารถคัดลอกและเล่นรอบ ๆ ด้วยรหัสตามที่คุณต้องการ

1. การออกแบบวัสดุ

ทุกคนรู้เกี่ยวกับภาษาการออกแบบวัสดุของ Google ในช่วงหลายปีที่ผ่านมา แนวคิดการออกแบบ Material มุ่งเป้าไปที่แอป Android แต่แพร่กระจายอย่างรวดเร็วบนเว็บ

หากคุณชอบสไตล์มินิมอลของ Material UI ของ Google ให้ลองดูรูปแบบเนื้อหาที่สร้างโดย Jon Uhlmann

มันทำงานบน Sass และ Pug สำหรับการประมวลผลล่วงหน้า CSS/HTML นอกจากนี้ยังเป็นรูปแบบที่ค่อนข้างเบาและองค์ประกอบการออกแบบวัสดุควรแสดงผลเหมือนกันในทุกเบราว์เซอร์

เป็นแรงบันดาลใจอย่างแท้จริงสำหรับนักออกแบบวัสดุทุกท่าน

2. ใต้ท้องทะเล

ออกเดินทางไปยังมหาสมุทรในรูปแบบสัมผัสที่ไม่เหมือนใครซึ่งสร้างขึ้นด้วยรูปแบบทางน้ำ

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

นอกจากนี้ เมื่อใดก็ตามที่คุณเลือกช่องป้อนข้อมูล ปลาหมึกที่เป็นมิตรจะปรากฏขึ้นเพื่อทักทาย แปลกตาแค่ไหน!

3. Bootstrap 3 แบบฟอร์ม

สไตล์ Bootstrap เริ่มต้นนั้นค่อนข้างน่าเบื่อและตอนนี้ก็คุ้นเคยกันดี เมื่อใดก็ตามที่ฉันเห็นไซต์ Bootstrap ที่มีรูปแบบทั่วไปเหมือนกัน ฉันสามารถจินตนาการได้ว่านักออกแบบขี้เกียจเกินกว่าจะปรับแต่งหรือจดจ่อกับประสบการณ์ที่จะดูแล

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

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

4. การติดต่อที่หรูหรา

ด้วยไอคอน Font Awesome และรูปแบบการตอบสนองขั้นพื้นฐาน แบบฟอร์มการติดต่อนี้มีเอกลักษณ์เฉพาะตัว

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

ไอคอนง่ายๆ เหล่านี้จะเพิ่มการชี้นำให้กับแต่ละฟิลด์ ดังนั้นจึงง่ายต่อการบอกได้อย่างรวดเร็วว่าข้อมูลประเภทใดที่จำเป็น

และถ้าคุณกำลังมองหาบางอย่างที่แปลกใหม่ ลองเพิ่ม iconfont อื่นเข้าไปในมิกซ์

5. ล็อกอินจิ๋ว

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

วิชาการพิมพ์มีขนาดใหญ่มากด้วยการออกแบบแบบฟอร์ม และฉันมักชอบแบบอักษรที่เล็กกว่าในช่องเข้าสู่ระบบ ขึ้นอยู่กับเว็บไซต์จริง ๆ และข้อความที่เล็กกว่าจะรวมเข้ากับเลย์เอาต์ได้ดีเพียงใด

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

6. เข้าสู่ระบบ & สมัครสมาชิก Combo

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

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

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

7. กระดานดำติดต่อ

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

แถมขอบไม้ยังช่วยขายของชิ้นนี้ของจริงอีกด้วย

ผู้สร้าง Greg Sweet ยังใช้แบบอักษรเว็บแบบกำหนดเองที่ดูเหมือนลายมือมนุษย์ทั่วไป เหมาะอย่างยิ่งสำหรับการเพิ่มสัมผัสสุดท้ายลงในแบบฟอร์ม เพื่อให้รู้สึกเหมือนได้กลับไปโรงเรียนอีกครั้ง

8. ชำระเงินด้วยบัตรเครดิต

ฉันเคยเห็นรูปแบบการชำระเงินจำนวนมาก แต่การออกแบบโดย Fabio Ottaviani นี้อาจจะดีที่สุดที่ฉันเคยเจอมา

มันใช้ JavaScript เพื่อจัดการการตรวจสอบความถูกต้องของฟิลด์อินพุต แต่บัตรเครดิตเป็น CSS ทั้งหมด โดยจะเคลื่อนไหวตามตัวเลขที่คุณเจาะลงในแบบฟอร์ม และแม้กระทั่งหมุนไปด้านหลังเมื่อคุณพิมพ์หมายเลข CVV ของบัตรเครดิต

9. ลงทะเบียนแบบกำหนดเอง

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

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

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

นี่เป็นเอฟเฟกต์ที่ค่อนข้างซับซ้อนในการสร้าง CSS ล้วนๆ แต่นักพัฒนา Jose Carneiro ทำให้มันเกิดขึ้น

10. ป้ายชื่อลอย

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

ดูแบบฟอร์มป้ายกำกับแบบลอยที่ทำงานบน CSS3 และ Compass

ผู้สร้าง Anton Simanov ใช้ jQuery สำหรับป้ายกำกับ แต่ทั้งหมดนี้เป็นรหัสที่กำหนดเองโดยไม่มีปลั๊กอิน ไม่ต้องพูดถึงโซลูชันของเขาใช้ได้กับรูปแบบการป้อนข้อมูลทั่วไปทั้งหมด รวมทั้งพื้นที่ข้อความและเมนูเลือก

ไม่ว่าคุณจะเลือกรูปแบบใด ฉันหวังว่าแกลเลอรีนี้สามารถให้แนวคิดและตัวอย่างข้อมูลเพื่อก้าวต่อไปได้

ยิ่งคุณศึกษารูปแบบการออกแบบมากเท่าไหร่ คุณก็ยิ่งต้องสร้างแนวคิดมากขึ้นสำหรับโครงการของคุณเอง และ CodePen ก็เป็นไซต์ที่ยอดเยี่ยมสำหรับการรวบรวมแนวคิดเหล่านั้น