harvis
ទម្រង់

ទម្រង់ដែលដំណើរការដោយមិនចាំបាច់មាន backend

បន្ថែម attribute តែមួយទៅទម្រង់នៅលើគេហទំព័រ static របស់អ្នក នោះការបញ្ជូនទាំងអស់នឹងចូលមក dashboard របស់អ្នក។ មិនចាំបាច់ JavaScript មិនចាំបាច់ widget បង្កប់ មិនចាំបាច់សេវាកម្មភាគីទីបី ហើយអ្នកដែលបំពេញវាក៏មិនចាំបាច់ចុះឈ្មោះអ្វីដែរ។

ដាក់គេហទំព័រឱ្យដំណើរការSee a live example

Its markup, styles and deploy script are on GitHub — copy it, change the fields, redeploy.

index.html
<form harvis-form="contact">
  <input name="email" type="email" required>
  <textarea name="message"></textarea>
  <button>Send</button>
</form>
how it works

បីជំហាន ហើយមួយក្នុងចំណោមនោះគឺគ្រាន់តែដេប្លយម្តងទៀត

គ្មានកម្មវិធីបង្កើតទម្រង់ណាត្រូវរៀន ហើយក៏គ្មាន endpoint ណាត្រូវចម្លងដែរ។ Attribute នេះហើយជាការរៀបចំទាំងមូល។

  1. 01

    បន្ថែម attribute

    ដាក់ harvis-form លើទម្រង់ណាមួយក្នុង HTML របស់អ្នក។ ដាក់ឈ្មោះឱ្យវា បើគេហទំព័រមានទម្រង់លើសពីមួយ។ មិនបាច់ដាក់ action និង method ទេ — ពួកវានឹងត្រូវបំពេញនៅពេលទំព័រត្រូវបានបញ្ជូនចេញ។

  2. 02

    ដេប្លយម្តងទៀត

    អូសថតឯកសារចូលម្តងទៀត ឬដំណើរការ npx harvis។ គ្មានអ្វីត្រូវកំណត់ គ្មានកូនសោត្រូវបិទភ្ជាប់ គ្មានប៊ូតុងណាត្រូវបើកនៅក្នុង dashboard ជាមុនឡើយ។

  3. 03

    អានអ្វីដែលចូលមក

    ការបញ្ជូននឹងបង្ហាញនៅក្រោមគេហទំព័ររបស់អ្នកក្នុង dashboard ដោយថ្មីជាងគេនៅមុនគេ។ បើកជួរណាមួយដើម្បីអានទាំងស្រុង ឬយកទាំងអស់ជា CSV។

the markup

ទាំងអស់នេះគឺ attribute ពីរប៉ុណ្ណោះ

harvis សរសេរទម្រង់ឡើងវិញនៅពេលវាចេញពី server ដូច្នេះទំព័រដែលអ្នកសរសេរនៅតែជាទំព័រដែលអ្នកសរសេរ។

អ្វីដែលអ្នកសរសេរ
<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>

Attribute ទាំងពីរ

harvis-form
សម្គាល់ទម្រង់នេះថាជាទម្រង់ដែលត្រូវប្រមូល។ តម្លៃរបស់វាគឺជាឈ្មោះ ដូច្នេះទម្រង់ច្រើននៅលើគេហទំព័រតែមួយនៅតែដាច់ដោយឡែក។ បើមិនដាក់តម្លៃ វានឹងត្រូវប្រមូលក្រោមឈ្មោះ “default”។
data-harvis-redirect
ជាជម្រើស។ ទំព័រនៅលើគេហទំព័ររបស់អ្នកដែលត្រូវនាំមនុស្សទៅបន្ទាប់ពីពួកគេផ្ញើ។ អ្វីក៏ដោយដែលចង្អុលទៅក្រៅគេហទំព័ររបស់អ្នកនឹងត្រូវមិនអើពើ។
frameworks

ពេល JavaScript ជាអ្នកសាងទម្រង់ សូមសរសេរ endpoint ដោយខ្លួនឯង

harvis បំពេញ action នៅពេលទំព័រចាកចេញពីម៉ាស៊ីនមេ។ ទម្រង់ដែលកើតមានតែក្រោយពេល bundle របស់អ្នកដំណើរការ គឺមិនទាន់មាននៅក្នុងទំព័រនៅឡើយទេ ដូច្នេះគ្មានអ្វីត្រូវបំពេញ — អ្នកសរសេរនូវអ្វីដែលការសរសេរជំនួសនោះនឹងបានសរសេរ។ វានៅតែជា post HTML ធម្មតា ហើយអ្វីៗផ្សេងទៀតនៅទំព័រនេះនៅតែអនុវត្តបានដដែល។

  • React
  • Vue
  • Svelte
  • Angular
ContactForm.jsx
<form action="/__harvis/form/contact" method="post">
  <input name="email" type="email" required />
  <textarea name="message" />

  {/* optional — where to land after sending */}
  <input type="hidden" name="_harvis_redirect" value="/thanks" />

  {/* optional — the decoy harvis would have added */}
  <input
    type="text"
    name="_harvis_hp"
    tabIndex={-1}
    autoComplete="off"
    aria-hidden="true"
    style={{ position: "absolute", left: "-9999px", opacity: 0 }}
  />

  <button>Send</button>
</form>
action + method
គឺ endpoint ដែល harvis នឹងបានសរសេរ បូកនឹង post។ ផ្នែកចុងក្រោយគឺឈ្មោះទម្រង់ — អក្សរតូច លេខ និងសញ្ញាដាច់ ចំណែកអ្វីផ្សេងទៀតត្រូវប្រមូលនៅក្រោម “default”។
_harvis_redirect
មិនចាំបាច់ ហើយជាទម្រង់សរសេរដោយដៃនៃ data-harvis-redirect។ ត្រូវជាផ្លូវនៅលើគេហទំព័ររបស់អ្នកផ្ទាល់ អ្វីដែលចង្អុលចេញក្រៅត្រូវបានមិនអើពើ។
_harvis_hp
មិនចាំបាច់ ហើយជារបស់តែមួយគត់ដែលអ្នកបាត់បង់ពេលសរសេរទម្រង់ដោយខ្លួនឯង៖ នុយដែលចាប់ bot។ សូមរុញវាចេញក្រៅអេក្រង់ ជាជាងប្រើ display:none ហើយទុកឱ្យទទេ — អ្វីដែលបំពេញវានឹងត្រូវបោះចោល។
harvis-form
កុំដាក់វា។ attribute នេះគឺជាការស្នើឱ្យ harvis សរសេរ action ជំនួស ហើយអ្នកទើបតែសរសេរវាដោយខ្លួនឯងរួចហើយ។

ទុកឱ្យកម្មវិធីរុករកជាអ្នកផ្ញើ

គ្មាន preventDefault គ្មាន fetch។ ចម្លើយគឺជាការបញ្ជូនបន្តដែលកម្មវិធីរុករកដើរតាមដោយខ្លួនឯង ហើយនោះហើយជាអ្វីដែលរក្សាទម្រង់ឱ្យដំណើរការ ពេល script មិនដំណើរការ។

Prerender ក៏រាប់ជា JavaScript ដែរ

បើ build របស់អ្នកសរសេរទម្រង់ចូលក្នុង HTML រួចកម្មវិធីរបស់អ្នកទទួលយកវានៅក្នុងកម្មវិធីរុករក សូមសរសេរវាលទាំងនោះដដែល — វាលដែល harvis បញ្ចូលមិនមាននៅក្នុង component របស់អ្នកទេ ដូច្នេះ hydration អាចបោះវាចោល។

included

អ្វីដែលអ្នកទទួលបាន

អ្វីៗខាងក្រោមនេះបើកជាស្រេចតាំងពីដំបូង។ គ្មានទំព័រការកំណត់សម្រាប់មួយណាឡើយ។

  • មិនចាំបាច់ JavaScript

    ទម្រង់បញ្ជូនតាមរបៀបដែល HTML បញ្ជូនតាំងពីដើមមក។ វានៅតែដំណើរការទោះបី script ត្រូវបានទប់ស្កាត់ លើទូរស័ព្ទយឺត និងក្នុងកម្មវិធីរុករកដែលបង្ហាញបានតែអក្សរ។

  • សារឥតបានការត្រូវបានច្រោះ

    គ្រប់ទម្រង់ត្រូវបានបញ្ជូនចេញជាមួយវាលបញ្ឆោតមួយដែលមនុស្សមើលមិនឃើញ ហើយអ្វីដែលបំពេញវានឹងត្រូវបោះចោលដោយស្ងៀមស្ងាត់។ ដែនកំណត់អត្រាកំណត់ថាអ្នកចូលមើលម្នាក់ និងគេហទំព័រមួយ អាចផ្ញើបានប៉ុន្មានក្នុងមួយម៉ោង។

  • ទម្រង់ប៉ុន្មានក៏បានតាមចិត្ត

    ដាក់ឈ្មោះឱ្យពួកវា — ទម្រង់ទំនាក់ទំនង និងទម្រង់ចុះឈ្មោះនៅលើគេហទំព័រតែមួយ មានបញ្ជីរៀងៗខ្លួន ហើយអ្នកអាចច្រោះ និងនាំចេញពួកវាដាច់ដោយឡែកបាន។

  • ទំព័រអរគុណផ្ទាល់ខ្លួនរបស់អ្នក

    ចង្អុលទម្រង់ទៅទំព័រដែលអ្នកសរសេរផ្ទាល់ នោះមនុស្សនឹងទៅដល់ទីនោះបន្ទាប់ពីផ្ញើ។ បើមិនដាក់ ពួកគេនឹងឃើញទំព័របញ្ជាក់ធម្មតាមួយជំនួសវិញ។

  • នាំចេញពេលណាក៏បាន

    ប៊ូតុងតែមួយផ្តល់ឱ្យអ្នកនូវ CSV ដែលមានជួរឈរសម្រាប់គ្រប់វាលដែលធ្លាប់មានអ្នកណាបញ្ជូនចូល ដូច្នេះទម្រង់ដែលបានបន្ថែមសំណួរនៅពាក់កណ្តាលផ្លូវ ក៏នៅតែបើកចេញជាតារាងតែមួយដដែល។

  • គ្មានអ្វីតាមដានអ្នកណាទេ

    គ្មាន script តាមដាន គ្មាន cookie គ្មានភាគីទីបីនៅក្នុងទំព័រ។ អាសយដ្ឋានរបស់អ្នកចូលមើលត្រូវបាន hash មុនពេលរក្សាទុក ហើយធ្វើដូច្នេះក៏គ្រាន់តែដើម្បីឱ្យដែនកំណត់អត្រាអាចបែងចែកការបញ្ជូនពីរបានប៉ុណ្ណោះ។

limits

ដែនកំណត់

ធូរធារសម្រាប់ទម្រង់ទំនាក់ទំនង ប៉ុន្តែតឹងល្មមមិនឱ្យ script ដែលតម្រង់មកគេហទំព័ររបស់អ្នកបំពេញប្រអប់សំបុត្ររបស់អ្នកបាន។

វាលក្នុងមួយការបញ្ជូន
៣០
ប្រវែងវាលមួយ
៥,០០០ តួអក្សរ
ទំហំការបញ្ជូនមួយ
៦៤ KB
ការបញ្ជូនក្នុងមួយគេហទំព័រ
៦០ ក្នុងមួយម៉ោង
ការបញ្ជូនក្នុងមួយអ្នកចូលមើល
២០ ក្នុងមួយម៉ោង
រក្សាទុកក្នុងមួយគេហទំព័រ
១,០០០ ថ្មីជាងគេនៅមុនគេ
faq

សំណួរ

អ្វីដែលមនុស្សសួរ មុនពេលដាក់ទម្រង់លើគេហទំព័រ static។

តើទម្រង់ static ជាអ្វី?

គឺទម្រង់នៅលើគេហទំព័រដែលគ្មាន server ផ្ទាល់ខ្លួន។ ជាធម្មតា នោះមានន័យថាទម្រង់គ្មានកន្លែងណាត្រូវផ្ញើទៅទេ ដែលជាមូលហេតុធ្វើឱ្យគេហទំព័រ static ភាគច្រើនត្រូវខ្ចីសេវាកម្មទម្រង់របស់ភាគីទីបី។ harvis បញ្ជូនគ្រប់ទំព័រនៃគេហទំព័ររបស់អ្នករួចជាស្រេចហើយ ដូច្នេះវាអាចទទួលការបញ្ជូននៅតាមផ្លូវបានតែម្តង។

តើខ្ញុំត្រូវចេះសរសេរកូដទេ?

អ្នកគ្រាន់តែត្រូវបន្ថែមពាក្យមួយទៅក្នុង HTML មួយបន្ទាត់ប៉ុណ្ណោះ។ បើ AI ជាអ្នកសរសេរគេហទំព័ររបស់អ្នក សូមប្រាប់វាឱ្យបន្ថែម attribute harvis-form ទៅទម្រង់ — វាដឹងវិធីរួចហើយ ព្រោះការណែនាំដែល harvis ចេញផ្សាយសម្រាប់ជំនួយការ AI បាននិយាយដូច្នេះ។

តើវាដំណើរការទេ បើបិទ JavaScript?

ដំណើរការ។ នោះហើយជាមូលហេតុដែលវាត្រូវបានសាងសង់បែបនេះ។ ទម្រង់ធ្វើការ post HTML ធម្មតា ហើយកម្មវិធីរុករកតាមការបញ្ជូនបន្តបន្ទាប់ពីនោះ ដូចគ្នាបេះបិទនឹងរបៀបដែលទម្រង់ដំណើរការមុនពេលមាន JavaScript។

តើខ្ញុំអាចបន្តប្រើ endpoint ផ្ទាល់ខ្លួន ឬសេវាកម្មទម្រង់ផ្សេងបានទេ?

បាន — គ្រាន់តែកុំបន្ថែម attribute នេះ។ ទម្រង់ដែលគ្មាន harvis-form ត្រូវបានបញ្ជូនចេញដូចអ្នកសរសេរបេះបិទ រួមទាំង action ផង។ ចំពោះទម្រង់ដែលមានវា harvis នឹងជំនួស action ព្រោះការបន្ថែម attribute នេះជារបៀបដែលអ្នកប្រាប់ថាការបញ្ជូនគួរទៅណា។

តើវាដំណើរការជាមួយ React, Vue ឬ Svelte ទេ?

ដំណើរការ ដោយមានជំហានបន្ថែមមួយ។ បើទម្រង់មាននៅក្នុង HTML ដែល build របស់អ្នកបង្កើត នោះ attribute មួយគ្រប់គ្រាន់ហើយ។ បើវាលេចឡើងតែក្រោយពេល JavaScript ដំណើរការ សូមសរសេរ action="/__harvis/form/contact" និង method="post" ចូលក្នុង component វិញ — endpoint ដដែល dashboard ដដែល ហើយកម្មវិធីរុករកនៅតែជាអ្នកផ្ញើដដែល។

តើមនុស្សអាចភ្ជាប់ឯកសារបានទេ?

មិនទាន់ទេ។ វាលឯកសារនៅលើទម្រង់ដែលត្រូវប្រមូល នៅតែដំណើរការសម្រាប់អ្នកចូលមើល ប៉ុន្តែឯកសារនោះមិនត្រូវបានរក្សាទុកទេ — មានតែវាលអក្សរប៉ុណ្ណោះដែលត្រូវរក្សាទុក។

តើការបញ្ជូននឹងទៅជាយ៉ាងណា បើខ្ញុំលុបគេហទំព័រ?

ពួកវានឹងបាត់ទៅជាមួយ។ ការបញ្ជូនជាកម្មសិទ្ធិរបស់គេហទំព័រ មិនមែនរបស់ការដេប្លយណាមួយទេ ដូច្នេះការដេប្លយម្តងទៀតរក្សាពួកវាទុក ចំណែកការលុបគេហទំព័រវិញលុបពួកវាចោលជារៀងរហូត។ សូមនាំចេញជា CSV ជាមុនសិន បើអ្នកចង់រក្សាទុកពួកវា។

ដាក់គេហទំព័រឱ្យដំណើរការ រួចសាកល្បងមើល

ការផ្សព្វផ្សាយគឺឥតគិតថ្លៃ ហើយចំណាយពេលប្រហែលពីរវិនាទី។ បន្ថែម attribute ទៅទម្រង់មួយ ដេប្លយម្តងទៀត រួចផ្ញើសារសាកល្បងទៅខ្លួនឯង។

ដាក់គេហទំព័រឱ្យដំណើរការ