ตัวอย่างการสร้างแบบฟอร์ม “แบบฟอร์มข้อมูลติดต่อ”

ขั้นตอนการสร้างแบบฟอร์มข้อมูลติดต่อ ใน ZFrom มีดังนี้

คลิกที่ “HEADING” เพื่อสร้างหัวข้อ

 

เมื่อคลิกที่ HEADING แล้วให้ทำการเปลี่ยนชื่อหัวข้อโดยการ คลิกที่กรอบ HEADING ที่เราสร้าง

จะปรากฏ Field สำหรับการแก้ไขเครื่องมือ ให้เราไปที่ Heading text เพื่อเปลี่ยนชื่อหัวข้อ

เมื่อเปลี่ยนชื่อแล้ว ให้คลิกที่ “ONE LINE INPUT” เพื่อสร้างกร่องข้อความสำหรับใส่ ชื่อ เมื่อคลิกแล้วจะได้กล่องใส่ข้อความตามหมายเลข 2

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

ต่อไปจะเป็นการสร้างกล่องสำหรับใส่ Email โดยไปที่ “Email INPUT” เมื่อคลิกแล้วจะได้ กล่องสำหรับใส่อีเมล ดังหมายเลข 2

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

ต่อไปให้คลิกที่ “TEXTAREA” สำหรับใส่ข้อความแบบยาวๆ เมื่อคลิกแล้วจะได้กล่องใส่ข้อความมา ดังหมายเลข 2

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

ต่อไป ให้คลิกที่ “ONE LINE INPUT” เพื่อสร้างกร่องข้อความสำหรับใส่ หมายเลขโทรศัพท์ เมื่อคลิกแล้วจะได้กล่องใส่ข้อความตามหมายเลข 2

 

ให้เปลี่ยนชื่อที่กรอบ Label และลบข้อความออกที่กรอบ Sub Label และใส่ 000-000-0000 ในช่อง Input Mask เพื่อเวลาใส่ตัวเลขจะมีขีดขั้นตามที่ใส่ขีดไว้

ต่อไปให้คลิกที่ “TEXTAREA” สำหรับใส่ข้อความแบบยาวๆ เพื่อสร้างกล่องแสดงความคิดเห็น เมื่อคลิกแล้วจะได้กล่องใส่ข้อความมา ดังหมายเลข 2

ให้เปลี่ยนชื่อที่กรอบ Label และลบข้อความออกที่กรอบ Sub Label และใส่เลข 1 ในช่อง Rows เพื่อลดขนาดของกล่องข้อความ

ขั้นตอนต่อไปจะเป็นการสร้างปุ่มส่ง โดยคลิกที่ “SUBMIT” เพื่อสร้างปุ่มส่งขึ้นมา

จากนั้นให้คลิกที่ปุ่ม SUBMIT หน้าต่าง Field จะขึ้นมา ให้เปลี่ยนชื่อที่กรอบ Label

เราสามารถปรับความกว้างของฟอร์ม โดยการที่ไปเปลี่ยนตัวเลขตรง “WIDTH” เพื่อเปลี่ยนความกว้างของฟอร์ม

เสร็จแล้วให้คลิกที่ “Save” เพื่อบันทึกฟอรืมที่เราทำไว้ หรือ กด “PREVIEW” เพื่อดูตัวอย่างของแบบฟอร์มก่อนเซฟก็ได้

 

 

 

 

Was this article helpful?

Related Articles