Builder – Form

builder1

โดยหน้าการออกแบบฟอร์มนี้ จะมีรายละเอียดมากเป็นพิเศษ โดยจะแบ่งเป็นส่วน ๆ ดังนี้

แทบเมนูด้านบนซึ่งจะประกอบไปด้วย 5 ปุ่มดังนี้builder2

  • ปุ่มย้อนกลับไปยังหน้าฟอร์ม
  • ปุ่มบันทึกการออกแบบฟอร์ม
  • ปุ่มตัวเลือกแบบฟอร์ม
  • ปุ่มการออกแบบ
  • ปุ่มพรีวิวฟอร์ม
  • ปุ่มย้อนกลับไปยังหน้าฟอร์ม ระบบจะพาผู้ใช้ไปที่หน้าหลัก
  • ปุ่มบันทึกการออกแบบฟอร์ม คือ การบันทึกรูปแบบฟอร์ม ที่ได้ทำการตั้งค่าและตกแต่งไว้ โดยระบบจะทำการบันทึกให้อัตโนมัติ ทุก ๆ 30 วินาที
  • รายละเอียดของปุ่มตัวเลือกแบบฟอร์มมี ดังนี้
    • ทั่วไป
      • ในส่วนนี้จะมีการตั้งค่าของฟอร์มในส่วนที่ 1 คือ ผู้ใช้ต้องการส่งค่าทั้งหมดของฟอร์มเมื่อมีการตกลง หรือไม่ (ใช่ , ไม่ใช่) ค่าเดิมคือ : ใช่และในส่วนที่ 2 เป็นการตั้งค่าการออกแบบฟอร์ม หรือไม่ (ใช่ , ไม่ใช่) ค่าเดิมคือ : ใช่
    • อิเมลล์แจ้งเดือน
      • โดยในส่วนนี้จะแบ่งเป็น 2 พาแนลคือ วิธีการส่งอิเมล์ และ เพิ่มผู้รับอิเมล์ builder5
        • ในส่วนที่ 1 ก็ยังแบ่งออกเป็น อีก 2 พาแนล คือ
          • ส่งอิเมล์พื้นฐาน โดยจะมีช่องไว้เพื่อให้กรอก ชื่อผู้ส่ง และ อิเมล์ของผู้ส่ง เช่นbuilder6
          • ส่งอิเมล์โดยใช้ SMTP กรอกข้อมูลเช่น builder7
        • ในส่วนที่ 2 คือ เพิ่มอิเมล์ผู้รับ ในส่วนนี้จะมีช่องให้กรอก 2 ช่องคือ
          • ชื่อหัวเรื่องของอิเมล์ ที่ผู้ใช้จะส่งข้อมูลการกรอกแบบฟอร์มไปยังอิเมล์ผู้รับ ที่อยู่ด้านล่างนี้builder8
          • คือส่วนสำหรับการเพิ่มอิเมล์ผู้รับข้อมูลการยืนยันฟอร์มที่มาจากฟอร์มนี้ โดยการกรอกข้อมูลในรูปแบบอิเมล์ แล้วกด เพิ่ม ระบบจะทำการเพิ่มอิเมล์ และเพิ่มปุ่ม ส่งอิเมล์ทดสอบขึ้นมาให้ * โดยในส่วนนี้สามารถเพิ่ม อิเมล์ผู้รับได้ไม่เกิน 3 อิเมล์เท่านั้น หากเกินหรือรูปแบบอิเมล์ ไม่ถูกต้อง จะมีป๊อปอัพ แจ้งเตือนขึ้นมา ดังภาพ builder11
          • ส่งอิเมล์ทดสอบ การทดสอบการส่งอิเมลล์ โดยปุ่มนี้จะขึ้นมาต่อเมื่อมีการกรอกอิเมล์ผู้รับ อย่างน้อย 1 อิเมล์ ระบบจะทำการส่งอิเมล์ทดสอบไปยังอิเมล์ที่ผู้ใช้กรอกไว้ในด้านบนbuilder12
    • อิเมล์ตอบรับอัตโนมัติ

      • เป็นการตั้งค่าอิเมล์ตอบกลับอัตโนมัติ เมื่อทำการกรอกข้อมูล ในช่องข้อมูลประเภทอิเมล์ เมื่อมีการยืนยันฟอร์มนี้ ระบบจะทำการส่งเมล์ และข้อมูลในการตั้งค่าอิเมล์ตอบกลับอัตโนมัติจะถูกส่งไปยังอิเมล์ที่อยู่ฟอร์มนั้น 
      • หากต้องการพรีวิวดูข้อความนี้ ให้ผู้ใช้กดที่ปุ่ม ดู
        builder14
      • จะแสดงป๊อบอัพขึ้นมาเพื่อแสดงข้อความ นี้ ดังภาพbuilder15
      • ยกตัวอย่างการทำงานของอิเมล์ตอบรับอัตโนมัติ
        • หากผู้ใช้ต้องการที่จะใช้ระบบนี้ ในส่วนของฟอร์ม จะต้องมีช่องไว้สำหรับอิเมล์อย่างน้อย 1 ช่อง แล้วทำการ ตั้งค่า Option ( จะแสดงเมื่อคลิกที่ช่องกรอกข้อมูลนั้น ๆ ) > Email Input > ให้ผู้ใช้เลือกช่อง Send Autoreply to this Emailbuilder16
        • หลังจากที่ตั้งค่าแล้ว เมื่อมีการยืนยันฟอร์มนี้ ข้อมูลอิเมล์ที่อยู่ในฟอร์มนี้ ดังภาพ builder17
        • ข้อมูลที่อยู่ในการตั้งค่าอิเมล์ตอบรับอัตโนมัติจะถูกส่งไปยังอิเมล์ ดังกล่าว ทันที builder18
        • สังเกตุได้ว่า To max@socialintegrated.com ก็คือ ข้อมูลที่กรอกลงไปใน ช่องอิเมล์ ในฟอร์มนั่นเอง
        • ส่วน Reply-To max@socialintegrated.com นั่นมาจากการเลือก Option ( จะแสดงเมื่อคลิกที่ช่องกรอกข้อมูลนั้น ๆ ) > Email Input > Set this as “Reply-To” Address โดยระบบจะไปดึงข้อมูลอิเมล์ในการ Reply-To จาก การตั้งค่า อิเมล์แจ้งเดือนจาก ในช่องของผู้รับอิเมล์นั่นเองbuilder10
    • วิธีการใช้แบบฟอร์ม
      • ส่วนนี้จะเป็นการตั้งค่า ฟอร์มของผู้ใช้ว่าจะแสดง โลโก้ ลงไปบนฟอร์มด้วยหรือไม่ หากใส่ ให้ใส่ URL ของรูปภาพนั้นลงไป โดยการเลือก เปิดใช้งาน / ปิดใช้งานbuilder21
      • จะได้ผลลัพธ์ดังภาพbuilder22
    • ข้อความแบบฟอร์มผิดพลาด
      • แบ่งเป็น 9 หัวข้อหลัก ๆ ดังนี้builder24
        • ข้อความทั่วไป จะขึ้นต่อเมื่อ มีบางฟิลด์ที่จำเป็นต้องมีค่าแต่ยังคงเป็นค่าว่างอยู่
        • ข้อความสำหรับการอัพโหลดที่ชนิดของไฟล์ไม่ถูกต้อง
        • ข้อความอีเมล์ที่ไม่ถูกต้อง
        • ข้อความที่อยู่ URL ไม่ถูกต้อง
        • ข้อความรหัส Captcha ที่ไม่ถูกต้อง
        • ข้อความจำนวนเต็ฒเท่านั้น
        • ข้อความฟิลด์บังคับ
        • ข้อความจำนวนตัวอักษรขั้นต่ำ
        • ข้อความจำนวนตัวอักษรสูงสุด
    • ข้อความในการส่งแบบฟอร์มbuilder25
      • ข้อความที่ส่งแบบฟอร์มสำเร็จbuilder26
      • ข้อความที่ส่งแบบฟอร์มไม่สำเร็จbuilder27
      • ส่วนของการพาผู้ที่ทำการกรอกแบบฟอร์มไปยังหน้า URL ตามที่ผู้ใช้ได้กำหนดไว้ เมื่อทำการส่งแบบฟอร์มสำเร็จแล้ว เช่น ระบบจะพาไปยังหน้าแรกของ form คือ index นั่นเองbuilder28
    • ผู้ให้บริการอิเมล์ builder1
      • ในส่วนนี้จะสร้างขึ้นก็ต่อเมื่อผู้ใช้ได้ทำการ Connect ESP ( คือ Application อีก 1 ตัวของเรา )
        • โดยการ Connect จะทำได้โดยการเข้าไปที่หน้า Connect ESPbuilder2
      • ในส่วนของผู้ให้บริการอิเมล์นี้ จะแบ่งออกเป็น 2 ขั้นตอนดังนี้
        • ผู้ใช้จะเห็นว่า ระบบได้สร้าง รายการเพื่อให้ผู้ใช้เลือก โดยรายการทั้งหมด จะถูกสร้างจาก ESP นั่นเอง
        • เมื่อผู้ใช้ทำการเลือกแล้ว ระบบจะสร้างฟิลด์ขึ้นมาให้ ดังรูปbuilder3
        • โดยในส่วนนี้ ไม่แนะนำให้ผู้ใช้เปลี่ยนการตั้งค่าในส่วนของ Option Label เพราะฟิลด์ที่สร้างขึ้นมานั้น ได้เชื่อมต่อกับ ESP ไว้แล้วbuilder4
    • และในส่วนท้ายสุดของการตั้งค่าตัวเลือกแบบฟอร์มนั้น ก็คือเมนู สำหรับการส่งออกแบบฟอร์มนี้ออกไป เป็นไฟล์ .txt ที่เราสามารถนำไปใช้ นำเข้ามาเพื่อไว้สร้างแบบฟอร์มต่อไปในรูปแบบเดิมได้ทันที builder5
  • เมนูการออกแบบbuilder6
    • จะแบ่งเป็นเมนูหลัก ๆ 4 ส่วนด้วยกัน คือ
    • การออกแบบฟอร์มโดยรวมbuilder7
      • ในส่วนนี้มีการตั้งค่าอยู่หลายส่วนด้วยกันคือ
        • ความกว้างของฟอร์ม คือการตั้งค่าความกว้างของฟอร์มที่เรากำลังออกแบบอยู๋นั่นเอง โดยสามารถกำหนดหน่วยได้ทั้ง px และ % เช่น 480px หรือ จะตั้งเป็น 50% หรือปล่อยให้ว่างเปล่าก็ได้builder8
        • มุมโค้งมน คือความโค้งมนของกรอบของฟอร์ม ผู้ใช้สามารถเลื่อนเพื่อเลือกระดับความโค้งมนได้อย่างง่ายดายbuilder9
        • กรอบแบบฟอร์ม คือเส้นกรอบของแบบฟอร์ม ผู้ใช้สามารถเลือกว่า ใช้ หรือ ไม่ใช้ ได้builder10
        • เค้าโครงแบบฟอร์ม คือการเลือกรูปแบบของฟอร์มให้เป็นแบบ แนวตั้ง หรือ แนวนอน builder11
        • การจัดตำแหน่งของฟิลด์ คือการจัดวางช่องฟิลด์ว่าให้ชิดซ้าย ขวา หรือ กึ่งกลาง ของฟอร์มbuilder12
        • ทิศทาง คือการจัดวางทิศทางของฟิลด์ภายในแบบฟอร์มว่า จะให้เรียงจากซ้ายไปขวา หรือ ขวาไปซ้ายbuilder13
        • พื้นหลังแบบโปร่งใส คือการทำให้พื้นหลังของฟอร์มไม่มีสีหรือรูปภาพ ผู้ใช้สามารถเลือกว่าใช้ หรือ ไม่ใช้ได้builder14
        • พื้นหลังของฟอร์ม คือการเลือกพื้นหลังของฟอร์มโดยผู้ใช้สามารถเลือกได้จากการคลิกสีที่เห็นในภาพได้เลย หรือหากผู้ใช้ต้องการให้ไม่มีภาพในพื้นหลัง ก็ทำได้ง่ายโดยคลิกที่ภาพที่เขียนว่าไม่มีได้เลยbuilder15
        • พื้นหลังที่กำหนดเอง คือ การนำ URL ของรูปภาพที่ผู้ใช้ต้องการเข้ามาใส่ หากต้องการนอกเหนือจากที่ระบบได้เตรียมไว้ให้ เมื่อนำมาใส่แล้ว แบบฟอร์มจะมีพื้นหลังตามภาพที่ผู้ใช้ได้นำเข้ามาทันทีbuilder16
        • ชื่อฟอนท์ คือ การเลือกรูปแบบฟอนท์ที่ใช้ในแบบฟอร์มนี้builder17
    • ช่องกรอกข้อมูลbuilder18

      • ในส่วนนี้มีการตั้งค่าอยู่หลายส่วนด้วยกันคือ
        • ระยะห่างของฟิลด์ คือระยะห่างของช่องกรอกข้อมูลแต่ละอัน ว่าให้มีช่องว่างห่างกันเท่าไหร่ผู้ใช้สามารถเลือกได้จากการเลื่อนได้เลยbuilder19
        • ขนาดตัวอักษร คือการตั้งค่าขนาดของตัวอักษรที่อยู่ภายในฟิลด์กรอกข้อมูลในแบบฟอร์มนี้builder20
        • สีตัวอักษร คือการตั้งค่าสำของข้อความที่อยู่ภายในฟิลด์กรอกข้อมูลในแบบฟอร์มนี้builder21
        • คำนิยามความยาวเต็ม คือการทำให้คำนิยามมีความยาว 100% หรือกว้างสุดของขนาดแบบฟอร์มหรือไม่ หากผู้ใช้เลือกว่าใช่ ระบบจะเปลี่ยนการจัดวาง ให้ช่องสำหรับกรอกข้อมูลไปอยู่ด้านล่างของคำนิยามแทนการไปไว้ด้านข้างbuilder22
        • รูปแบบการตรวจสอบ คือการระบุตำแหน่งเครื่องหมาย (*) สำหรับฟิลด์ที่ต้องการข้อมูลว่าให้อยู่ด้าน บน หรือ ขวา ของคำนิยาม และผู้ใช้สามารถเลือกได้อีกว่า จะไม่ให้แสดงเครื่องหมายนี้หรือไม่ builder23
        • รูปแบบของช่องกรอกข้อมูล คือการเลือกรูปแบบของช่องกรอกข้อมูลว่าให้ไม่มีรูปแบบ (พื้นหลังจะเป็นสีขาว), ให้มีพื้นหลังแบบโปร่งใส หรือ กำหนดให้ขอบของช่องกรอกข้อมูลมีความโค้งมน builder24
    • คำนิยามและคำนิยามย่อยbuilder29
      • ในส่วนนี้สามารถตั้งค่าได้สามส่วนหลัก ๆ คือ
        • ตั้งค่าทั่วไป builder30
          • ตำแหน่งคำนิยาม ผู้ใช้สามารถเลือกได้ว่าจะให้ตำแหน่งของคำนิยามอยู่ส่วนไหนของฟิลด์กรอกข้อมูล โดยสามารถเลือกได้คือ ภายใน / ซ่อน หรือ ภายนอก
            • ภายใน / ซ่อน คือ ข้อความคำนิยามจะเข้าไปอยู่ในช่องกรอกข้อมูลเลย หรือ เรียกว่า Place Holder นั่นเอง
            • ภายนอก คือ ข้อความคำนิยามจะอยู่ภายนอกของช่องกรอกข้อมูล โดยตำแหน่งเราสามารถเลือกได้จากหัวข้อ การออกแบบฟอร์มโดยรวม ที่ผ่านมา
        • คำนิยามหลักbuilder31
          • ความกว้างของนิยามป้อนข้อมูล สามารถเลือกได้ 2 แบบคือ
            • คงที่ คือ ความกว้างของช่องคำนิยามจะไม่เปลี่ยนแปลง หากผู้ใช้ปรับขนาดของช่องกรอกข้อมูล โดยยึดติดตำแหน่งจากความกว้างจากการตั้งค่าที่มาจากหัวข้อ การออกแบบฟอร์มโดยรวม
            • สัมพันธ์ คือ ตำแหน่งของคำนิยามและช่องกรอกข้อมูลจะติดกัน หมายถึง ความกว้างของคำนิยามเท่าใด ขนาดของช่องคำนิยามก็จะกว้างเท่านั้น แล้วช่องกรอกข้อมูลจะมีตำแหน่งที่ติดกันในลำดับต่อไป
          • ขนาดตัวอักษร คือ ขนาดตัวอักษรของคำนิยาม
          • สีตัวอักษร คือ สีตัวอักษรของคำนิยาม
        • คำนิยามย่อยbuilder35
          • แสดงคำนิยามย่อย ? คือ การตั้งค่าว่าให้ในช่องฟิลด์กรอกข้อมูลนั้นจะมีคำนิยามย่อยหรือไม่ โดยเลือกได้ว่า ใช่ หรือ ไม่
          • ขนาดตัวอักษร คือ ขนาดตัวอักษรของคำนิยามย่อย
          • สีตัวอักษร คือ สีตัวอักษรของคำนิยามย่อย
    • CSS ที่กำหนดเอง
      • ในส่วนนี้จะเป็นการ ออกแบบ แบบฟอร์มโดยใช้ Code Html ในการตกแต่ง
  • พรีวิว คือการพรีวิวฟอร์มที่ได้สร้างไว้ รวมไปถึงสามารถทำการยืนยันฟอร์มได้เลย หมายถึง หากผู้ใช้ กดพรีวิว แล้วทำการกรอกข้อมูล พร้อมกับยืนยัน ระบบจะทำการบันทึกข้อมูลที่กรอกไว้ แล้วส่งไปยังระบบการส่งทันที

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

  • การป้อนข้อมูล จะแบ่งเมนูย่อยออกไปอีก 10 ส่วนดังนี้builder38
    • ข้อความหนึ่งบรรทัด คือ ช่องกรอกข้อมูลที่มีข้อมูลส่วนใหญ่ เพียง 1 บรรทัด เท่านั้น โดยที่มีการตั้งค่า ของช่องฟิลด์กรอกข้อมูล ทำได้โดยการคลิกที่พื้นที่ ของช่องฟิลด์กรอกข้อมูลนั้น ๆ builder40
    • รหัสผ่าน คือ ช่องกรอกข้อมูลในรูปแบบรหัสผ่าน builder25
    • ข้อความหลายบรรทัด คือ ช่องกรอกข้อมูลที่มีข้อมูลจำนวนมาก หรืออาจมากกว่า 1 บรรทัดbuilder26
    • แบบเลื่อนลง คือ ช่องสำหรับการเลือกข้อมูล ที่มีการแสดงผลในแบบ Dropdown (แบบเลื่อนลง) builder27
    • วันที่ป้อนข้อมูล คือ ช่องสำหรับการเลือกข้อมูลในรูปแบบปฎิทินหรือ Datepicker(วันที่ป้อนข้อมูล) builder28
    • อิเมล์ คือ ช่องสำหรับการกรอกข้อมูลในรูปแบบอิเมล์ หมายถึง ต้องกรอกข้อมูลในฟิลด์นี้ ในรูปแบบของอิเมล์เท่านั้น เช่น max@socialintegrated.combuilder29
    • เวลาเลือก 12 ชั่วโมง คือ การสร้างฟิลด์เพื่อเลือกข้อมูลในรูปแบบของเวลา โดยหน่วยที่ให้เลือกนั้นคือ ชั่วโมง นาที และช่วงเวลา ตัวอย่าง 01 : 49 : (AM หรือ PM)builder30
    • เวลาเลือก 24 ชั่วโมง คือ การสร้างฟิลด์เพื่อเลือกข้อมูลในรูปแบบของเวลา โดยหน่วยที่ให้เลือกนั้นคือ ชั่วโมง นาที ตัวอย่าง 23 : 49builder31
    • การป้อนที่อยู่ข้อมูล คือ ช่องกรอกข้อมูลสำหรับที่อยู่ โดยในส่วนนี้มีความพิเศษอยู่ที่เมื่อมีการกรอกข้อมูลนั้นระบบนี้จะทำการดึงข้อมูลที่อยู่ จากการกรอกขึ้นมาให้อัตโนมัติ ทำให้กรอกข้อมูลที่อยู่นั้นง่ายขึ้นbuilder32
    • ความรู้สึก คือ การกรอกข้อมูลในรูปแบบของการเลือกซึ่งในส่วนนี้แบ่งออกเป็น 3 รูปแบบดังนี้
    • จัดอันดับ คือ การกรอกข้อมูลในรูปแบบของการเลือกซึ่งในส่วนนี้แบ่งออกเป็น 4 รูปแบบดังนี้
    • ไฟล์ คือ การอัพโหลดไฟล์รูปภาพลงไปในระบบโดยผ่านการยืนยันแบบฟอร์มนี้builder42
    • ช่องทำเครื่องหมาย คือ ฟิลด์สำหรับกรอกข้อมูลในรูปแบบการเลือกโดยจะแบ่งเป็น 2 ประเภทคือ
    • เลื่อน คือ ฟิลด์สำหรับกรอกข้อมูลในรูปแบบการเลื่อนเพื่อเลือกค่าที่ต้องการโดยจะแบ่งเป็น 2 ประเภทคือ
      • แบบเลื่อน คือ การเลื่อนไปยังค่าที่ต้องการโดยการเลือกข้อมูลนั้นจะมีเพียงค่าเดียว builder41
      • แบบช่วง คือ การเลื่อนไปยังค่าที่ต้องการโดยการเลือกข้อมูลนั้นจะเป็นแบบช่วง หมายถึงการเลือกค่านั้นจะมีค่าเป็นระหว่างเท่าใดถึงเท่าใด เช่น 10 – 80builder42
    • ภาพ คือ ฟิลด์รูปภาพนี้จะแตกต่างจากส่วนอื่นคือ ไม่ได้มีไว้เพื่อรับข้อมูลแต่อาจจะเป็นการตกแต่งแบบฟอร์มก็ได้ และที่พิเศษคือฟิลด์นี้สามารถอยู่ตรงไหนของแบบฟอร์มก็ได้ ทำได้โดยการลากที่ฟิลด์นั้นนั่นเองbuilder43
    • การแบ่ง คือ ฟิลด์ที่ไว้สำหรับจัดการแบ่งสัดส่วนของแบบฟอร์มนี้ โดยไม่ได้มีไว้เพื่อรับข้อมูลbuilder44
    • ฟิลด์ที่ซ่อนอยู่ คือ ฟิลด์สำหรับผู้ใช้ที่ต้องการส่งข้อมูลไปนอกเหนือจากการกรอกข้อมูลของผู้ที่ยืนยันแบบฟอร์มนี้builder45
    • รหัส Captcha คือ รหัสที่เอาไว้ยืนยันตัวตนว่าไม่ใช่ระบบกรอกแบบฟอร์มอัตโนมัติ โดยระบบนี้จะสร้างฟิลด์นี้ขึ้นมาให้ในทุกกรณี เพื่อความปลอดภัยของแบบฟอร์มทุกแบบฟอร์มbuilder46
    • กำหนดเอง คือ ฟิลด์ที่ผู้ใช้สามารถสร้างข้อความได้ และยังสามารถเขียนในรูปแบบ Code Html ได้อีกด้วยbuilder47

Rate This Article

(58 out of 127 people found this article helpful)

Leave A Comment?