ทำไม Contact Form 7 ถึงใช้งานไม่ได้บน Static Sites

เมื่อคุณส่งออก (export) เว็บไซต์ WordPress ของคุณเป็น static HTML แล้วฟอร์มติดต่อของคุณก็หยุดทำงาน และคุณจะเห็นข้อผิดพลาด 404 ใน console

Contact Form 7 จำเป็นต้องใช้ PHP โดยมันจะใช้ REST API ในการประมวลผลข้อมูล แต่ static sites ไม่มี PHP และเมื่อไม่มี PHP ก็จะไม่มี REST API

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

หากคุณใช้ Simply Static Pro ให้ตรวจสอบสิทธิ์การเข้าถึงไฟล์ (file permissions) การที่ไฟล์ JS หายไปอาจเป็นสาเหตุของข้อผิดพลาดนี้ ให้รันคำสั่งนี้:

chmod 644 /var/www/html/wp-content/plugins/simply-static-pro/assets/ssp-form-webhook-public.js

จากนั้นให้ลองรันการ export อีกครั้ง

วิธีแก้ไขมี 2 วิธี:

  • เก็บ WordPress ไว้บน subdomain และใช้เป็น API ของคุณ พร้อมทั้งเพิ่ม CORS headers ลงในไฟล์ .htaccess
  • ใช้บริการ static form service เช่น Formspree หรือ Netlify Forms

วิธีการ Debug:

  • เข้าไปที่ URL ของ WordPress ของคุณแล้วตามด้วย /wp-json/ หากคุณเห็น 404 แสดงว่า backend ของคุณออฟไลน์อยู่
  • เปิด DevTools ลองส่งฟอร์ม แล้วมองหาข้อผิดพลาด 404 หรือ CORS
  • ตรวจสอบไฟล์ forms.json ของคุณ ตรวจสอบให้แน่ใจว่า endpoint ชี้ไปยังโดเมน WordPress ของคุณ

เลิกแก้ปัญหาที่ปลายเหตุ แล้วหันมาแก้ไขที่โครงสร้าง (architecture) ของคุณ

Source: https://dev.to/rahul_sharma_15bd129bc69e/why-contact-form-7-breaks-on-static-sites-and-what-to-do-about-it-jg5