harvis
ฟอร์ม

ฟอร์มที่ใช้งานได้โดยไม่ต้องมีแบ็กเอนด์

เติมแอตทริบิวต์เดียวลงในฟอร์มบนเว็บไซต์ static ของคุณ แล้วทุกการส่งจะเข้ามาที่แดชบอร์ด ไม่ต้องใช้ JavaScript ไม่ต้องฝังวิดเจ็ต ไม่ต้องพึ่งบริการเจ้าอื่น และคนที่กรอกก็ไม่ต้องสมัครอะไรทั้งนั้น

เอาไซต์ขึ้นออนไลน์
index.html
<form harvis-form="contact">
  <input name="email" type="email" required>
  <textarea name="message"></textarea>
  <button>Send</button>
</form>
how it works

สามขั้นตอน และหนึ่งในนั้นคือดีพลอยใหม่

ไม่มีตัวสร้างฟอร์มให้ต้องเรียนรู้ ไม่มี endpoint ให้ต้องคัดลอก แอตทริบิวต์นี้คือการตั้งค่าทั้งหมด

  1. 01

    เติมแอตทริบิวต์

    ใส่ harvis-form ลงในฟอร์มไหนก็ได้ใน HTML ของคุณ ตั้งชื่อให้มันถ้าไซต์มีฟอร์มมากกว่าหนึ่ง ส่วน action กับ method ไม่ต้องใส่ — เดี๋ยวจะถูกเติมให้ตอนหน้าเว็บถูกส่งออกไป

  2. 02

    ดีพลอยใหม่

    ลากโฟลเดอร์เข้ามาอีกครั้ง หรือรัน npx harvis ไม่มีอะไรต้องตั้งค่า ไม่มีคีย์ให้วาง ไม่มีสวิตช์ในแดชบอร์ดที่ต้องไปเปิดก่อน

  3. 03

    อ่านสิ่งที่เข้ามา

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

the markup

ทั้งหมดคือสองแอตทริบิวต์

harvis เขียนฟอร์มใหม่ตอนมันออกจากเซิร์ฟเวอร์ หน้าเว็บที่คุณเขียนจึงยังเป็นหน้าเว็บที่คุณเขียนอยู่เหมือนเดิม

สิ่งที่คุณเขียน
<form harvis-form="contact"
      data-harvis-redirect="/thanks.html">
  <input name="email" type="email" required>
  <button>Send</button>
</form>
สิ่งที่ผู้เข้าชมได้รับ
<form harvis-form="contact"
      data-harvis-redirect="/thanks.html"
      action="/__harvis/form/contact" method="post">
  <input type="hidden" name="_harvis_redirect" value="/thanks.html">
  <input type="text" name="_harvis_hp" tabindex="-1" aria-hidden="true" style="…">
  <input name="email" type="email" required>
  <button>Send</button>
</form>

สองแอตทริบิวต์นั้น

harvis-form
ทำเครื่องหมายว่าฟอร์มนี้เป็นฟอร์มที่ต้องเก็บข้อมูล ค่าของมันคือชื่อ ฟอร์มหลายอันบนไซต์เดียวจึงไม่ปนกัน ถ้าไม่ใส่ค่า ข้อมูลจะถูกเก็บไว้ใต้ชื่อ “default”
data-harvis-redirect
ไม่บังคับ หน้าบนไซต์ของคุณที่จะพาคนไปหลังจากกดส่ง อะไรก็ตามที่ชี้ออกไปนอกไซต์ของคุณจะถูกละเว้น
included

สิ่งที่คุณจะได้

ทุกอย่างข้างล่างนี้เปิดใช้งานให้อยู่แล้ว และไม่มีหน้าตั้งค่าให้ปรับสักอย่าง

  • ไม่ต้องใช้ JavaScript

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

  • กรองสแปมให้

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

  • มีกี่ฟอร์มก็ได้

    ตั้งชื่อให้มันซะ — ฟอร์มติดต่อกับฟอร์มสมัครบนไซต์เดียวกันจะมีรายการของตัวเองแยกกัน และคุณกรองกับส่งออกแยกกันได้

  • หน้าขอบคุณของคุณเอง

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

  • ส่งออกเมื่อไหร่ก็ได้

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

  • ไม่มีอะไรตามติดใคร

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

limits

ข้อจำกัด

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

ฟิลด์ต่อหนึ่งรายการ
30
ความยาวของหนึ่งฟิลด์
5,000 ตัวอักษร
ขนาดของหนึ่งรายการ
64 KB
จำนวนที่ส่งได้ต่อไซต์
60 ต่อชั่วโมง
จำนวนที่ส่งได้ต่อผู้เข้าชม
20 ต่อชั่วโมง
เก็บไว้ต่อไซต์
1,000 รายการ ใหม่สุดขึ้นก่อน
faq

คำถาม

สิ่งที่คนถามกันก่อนจะเอาฟอร์มไปใส่ในเว็บไซต์ static

ฟอร์มแบบ static คืออะไร?

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

ต้องเขียนโค้ดเป็นไหม?

แค่เติมคำเดียวลงใน HTML หนึ่งบรรทัดได้ก็พอ ถ้าเว็บของคุณเขียนโดย AI ก็บอกให้มันเติมแอตทริบิวต์ harvis-form ลงในฟอร์ม — มันรู้วิธี เพราะคำแนะนำที่ harvis เผยแพร่ให้ผู้ช่วย AI บอกไว้แบบนั้น

ปิด JavaScript แล้วยังใช้ได้ไหม?

ได้ นั่นแหละคือเหตุผลที่มันถูกสร้างมาแบบนี้ ฟอร์มทำการ post แบบ HTML ธรรมดา แล้วเบราว์เซอร์ก็ตามการรีไดเรกต์ต่อ เหมือนที่ฟอร์มทำงานกันมาตั้งแต่ก่อนจะมี JavaScript

ยังใช้ endpoint ของตัวเองหรือบริการฟอร์มเจ้าอื่นต่อได้ไหม?

ได้ — แค่อย่าเติมแอตทริบิวต์เข้าไป ฟอร์มที่ไม่มี harvis-form จะถูกส่งออกไปตรงตามที่คุณเขียน รวมถึง action ด้วย ส่วนฟอร์มที่มีแอตทริบิวต์นี้ harvis จะแทนที่ action ให้ เพราะการเติมแอตทริบิวต์คือวิธีบอกว่าข้อมูลควรไปที่ไหน

คนแนบไฟล์ได้ไหม?

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

ถ้าลบไซต์ ข้อมูลที่ส่งเข้ามาจะเป็นยังไง?

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

เอาไซต์ขึ้นออนไลน์แล้วลองดู

เผยแพร่ได้ฟรีและใช้เวลาราวสองวินาที เติมแอตทริบิวต์ลงในฟอร์ม ดีพลอยใหม่ แล้วส่งข้อความทดสอบหาตัวเอง

เอาไซต์ขึ้นออนไลน์