แบบฟอร์มการจองเว็บไซต์

หากต้องการเริ่มใช้แบบฟอร์มการจองบนเว็บไซต์ของคุณ คุณต้องค้นหาหมายเลขทางเทคนิคพิเศษของบริษัทของคุณ (โทเค็น) ในการดำเนินการนี้ คุณต้องไปที่โปรไฟล์บริษัทบนแท็บบริษัท จากนั้นคุณจะพบบรรทัดโทเค็น API หากต้องการคัดลอกโทเค็น คุณต้องคลิกที่โทเค็น จากนั้นโทเค็นจะถูกคัดลอก  หลังจากได้รับหมายเลขแล้ว คุณจะต้องแทรกเพียงไม่กี่บรรทัดลงในโค้ดของไซต์ของคุณ

ต้องแทรกรหัสนี้ระหว่างแท็ก <head>

<link href="https://rentprog-b5205.web.app/css/app.css" rel="stylesheet"/>

ต้องแทรกโค้ดนี้ก่อนแท็กปิด </body>

<script src="https://rentprog-b5205.web.app/js/app.js"></script>

นี่คือโค้ดของแอปพลิเคชัน ซึ่งจะต้องแทรกระหว่างแท็ก <body> ในตำแหน่งที่คุณต้องการ

<rentprog-widget 
      token="token" 
      locale="th" 
      show_all_cars='true' 
      hidden_car_year='false'
      places='[{"place":"Office","price":0},{"place":"Delivery within the city","price":30},{"place":"Airport","price":80}]'
      equipment='[{"item":"Roof rack","price":40, "daily": true},{"item":"GPS Navigator","price":15, "daily": false}]'
      middlename_required="false"
      agreement='{"text": ", and also accept ", "link_text": "rental terms", "link": "https://rentprog.ru/public/agreement.html"}'
      button_classes="text-4xl lg:text-lg h-14 lg:h-10 bg-blue-500 flex justify-center items-center w-full text-white px-4 py-3 mt-2 rounded-md focus:outline-none"
      icon_classes="h-14 w-14 bg-yellow-200 rounded-full flex flex-shrink-0 justify-center items-center text-yellow-500 text-2xl font-mono"
      form_container="py-8 text-base leading-6 space-y-4 text-gray-700 sm:text-lg lg:text-base"
      container_classes="relative px-2 py-4 lg:px-10 lg:py-10 bg-white lg:mx-8 mx-0 shadow"
      title_container_classes="block pl-2 font-semibold text-xl self-start text-gray-700"
      title_classes="lg:leading-relaxed sm:text-4xl text-xl"
      show_email="false"
      show_phone="false"
      show_middlename="false"
      show_birthday="false"
      show_passport="false"
      show_driver_license="false"
      rental_object="Choose a boat"
    >
    </rentprog-widget>

token - คุณต้องใส่โทเค็น API ของคุณ สามารถพบได้ในโปรไฟล์บริษัท แท็บบริษัท คุณต้องคลิกที่มันและโทเค็นจะถูกคัดลอกไปยังคลิปบอร์ด

locale - ภาษาในรูปแบบ ต้องใส่ en - สำหรับภาษาอังกฤษ, de - สำหรับภาษาเยอรมัน, fr - สำหรับภาษาฝรั่งเศส, pt - สำหรับโปรตุเกส, es - สำหรับภาษาสเปน, hi - สำหรับภาษาฮินดี, sr - สำหรับเซอร์เบีย tr - สำหรับตุรกี th - สำหรับไทย มัน - สำหรับอิตาลี id - สำหรับอินโดนีเซีย

show_all_cars - แสดงรถทั้งหมด; โดยค่าเริ่มต้น จะแสดงเฉพาะวันที่ว่างที่ระบุเท่านั้น โดยคำนึงถึงช่วงเวลาระหว่างการจองที่ระบุในการตั้งค่า

show_email - แสดงช่องป้อนข้อมูลอีเมลหรือไม่ หากค่าเป็น "จริง" ฟิลด์นี้จะแสดงขึ้นมา หากค่าเป็น "false" ฟิลด์นั้นจะถูกซ่อน

show_phone - แสดงช่องป้อนข้อมูลของโทรศัพท์หรือไม่ หากค่าเป็น "จริง" ฟิลด์นี้จะแสดงขึ้นมา หากค่าเป็น "false" ฟิลด์นั้นจะถูกซ่อน

show_middlename - แสดงฟิลด์สำหรับการป้อนชื่อกลางหรือไม่ หากค่าเป็น "จริง" ฟิลด์นี้จะแสดงขึ้นมา หากค่าเป็น "false" ฟิลด์นั้นจะถูกซ่อน

show_birthday - แสดงช่องให้กรอกวันเกิดหรือไม่ หากค่าเป็น "จริง" ฟิลด์นี้จะแสดงขึ้นมา หากค่าเป็น "false" ฟิลด์นั้นจะถูกซ่อน

show_passport - แสดงช่องกรอกข้อมูลหนังสือเดินทางหรือไม่ หากค่าเป็น "จริง" ฟิลด์นี้จะแสดงขึ้นมา หากค่าเป็น "false" ฟิลด์นั้นจะถูกซ่อน

show_address - แสดงช่องป้อนที่อยู่หรือไม่ หากค่าเป็น "จริง" ฟิลด์นี้จะแสดงขึ้นมา หากค่าเป็น "false" ฟิลด์นั้นจะถูกซ่อน

show_driver_license - แสดงช่องกรอกข้อมูลใบขับขี่หรือไม่ หากค่าเป็น "จริง" ฟิลด์นี้จะแสดงขึ้นมา หากค่าเป็น "false" ฟิลด์นั้นจะถูกซ่อน

rental_object - พารามิเตอร์ที่แทนที่บรรทัด "เลือกรถยนต์" ด้วยค่าที่ป้อน เช่น "เลือกเรือ"

hidden_car_year - ซ่อนปีที่ผลิตรถยนต์หากตั้งค่าเป็น "จริง" ปีนั้นจะถูกซ่อนหากตั้งค่าเป็น "เท็จ" หรือพารามิเตอร์หายไปจากนั้น ปีจะแสดง

passport_required - ช่องข้อมูลหนังสือเดินทาง หากตั้งค่าเป็น "true" ช่องดังกล่าวจะกลายเป็นช่องบังคับ

driver_license_required - ช่องข้อมูลใบขับขี่ หากค่าเป็น "true" ช่องต่างๆ จะกลายเป็นช่องบังคับ หากเป็น "false" ก็จะเป็นทางเลือก

birthday_required - ฟิลด์วันเกิด หากเป็น "จริง" ช่องจะกลายเป็นช่องบังคับ หากเป็น "เท็จ" ก็เป็นทางเลือก

email_required - ฟิลด์อีเมล หากเป็น "จริง" ช่องจะกลายเป็นฟิลด์บังคับ หากเป็น "เท็จ" ฟิลด์เหล่านั้นจะเป็นทางเลือก

phone_required - ช่องป้อนข้อมูลโทรศัพท์ หากเป็น "true" ช่องดังกล่าวจะกลายเป็นช่องบังคับ หาก "false" แสดงว่าเป็นทางเลือก

middlename_required - ช่องป้อนชื่อกลาง หากเป็น "จริง" ช่องจะกลายเป็นช่องบังคับ หากเป็น "เท็จ" ก็จะเป็นทางเลือก

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

equipment - รายการอุปกรณ์เพิ่มเติม daily - ชำระรายวันหรือตลอดระยะเวลาเช่า price - ราคา หากคุณไม่ต้องการฟิลด์นี้ เพียงลบพารามิเตอร์นี้ออก

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

boosters - เก้าอี้เด็กที่ไม่มีพนักพิง (ที่นั่ง) การตั้งค่าจะเหมือนกัน หากคุณไม่ต้องการฟิลด์เหล่านี้ ให้ลบพารามิเตอร์นี้

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

หากไม่จำเป็นต้องใช้เก้าอี้ บูสเตอร์ อุปกรณ์ พารามิเตอร์ข้อตกลง เพียงลบออกจากโค้ด

การออกแบบภาพ

ไลบรารี Tailwind v2 ใช้สำหรับการออกแบบ รายละเอียดเพิ่มเติมที่นี่ เพื่อเร่งความเร็วในการโหลดแบบฟอร์ม จึงไม่ได้ใช้ทุกคลาส เฉพาะคลาสที่ใช้แล้วในแบบฟอร์มเท่านั้น รวมถึงคลาสสีพื้นหลังและข้อความทั้งหมด (bg-... และ text-...) หากคุณต้องการชั้นเรียนเพิ่มเติมจริงๆ โปรดเขียนถึงฝ่ายสนับสนุนแล้วเราจะเพิ่มชั้นเรียนให้ หากคุณต้องการเปลี่ยนแปลง ให้ใช้ตัวแปรด้านล่าง วิธีที่ดีที่สุดคือปล่อยให้คลาสเริ่มต้นที่รับผิดชอบการเยื้อง ฯลฯ และเปลี่ยนเฉพาะคลาสที่รับผิดชอบสีพื้นหลังและข้อความ แต่การเปลี่ยนแปลงการเยื้อง ฯลฯ ก็สามารถทำได้เช่นกัน แต่อาจส่งผลต่อการแสดงผลบนอุปกรณ์ต่าง ๆ โปรดใช้ความระมัดระวัง คุณสามารถดูค่าเริ่มต้นได้ในตัวอย่างด้านบน รวมถึงในรูปแบบที่สร้างขึ้นบนเว็บไซต์ของคุณ การใช้ตัวแปรด้านล่างเป็นทางเลือก หากไม่ได้กรอก ระบบจะใช้ค่าเริ่มต้น

button_classes - คลาส CSS ที่ควบคุมการแสดงภาพของปุ่ม

icon_classes - คลาส CSS ที่ควบคุมการแสดงภาพของไอคอนทางด้านซ้าย

container_classes - คลาส CSS ที่ควบคุมการแสดงภาพของคอนเทนเนอร์

form_container - คลาส CSS ที่ควบคุมการแสดงภาพของคอนเทนเนอร์ฟอร์ม

title_container_classes - คลาส CSS ที่ควบคุมการแสดงภาพของคอนเทนเนอร์ส่วนหัว

title_classes - คลาส CSS ที่ควบคุมการแสดงภาพของส่วนหัว