はじめに
JetAppointment + JetFormBuilder + WooCommerce で予約フォームを構築していたところ、
「フォーム送信時に致命的エラー」や「金額が¥10で固定される」など、いくつかの問題に直面しました。
本記事では、WooCommerce決済とJetAppointmentの連携に成功するまでの道のりを時系列でまとめます。
使用構成
- WordPress 6.x
- JetAppointment（Crocoblock）
- JetFormBuilder
- WooCommerce
- Elementor Pro
問題①：フォーム送信時に致命的エラー（500 Internal Server Error）
原因
Insert Appointmentのアクション内で、「Provider ID」や「Date」などの必須フィールド設定ミス- 特に「Calculated Field」など使ってはいけないフィールドタイプを使用していたから⭐️
解決方法
Appointment ProviderとAppointment Dateブロックを使って、正しいフィールドをフォームに設置Insert Appointmentアクション内でそれぞれを正しく割り当てる
| 項目 | 正しいフィールド |
|---|---|
| SERVICE ID FIELD | 投稿ID または任意 |
| PROVIDER ID FIELD | provider（Appointment Providerブロック） |
| APPOINTMENT DATE FIELD | schedule（Appointment Dateブロック） |
| USER EMAIL FIELD | user_email |
実装流れ
1. JetFormBuilderで予約フォーム作成
- Appointment Provider
- Appointment Date
- Price (ラジオボタン)
2. Insert Appointment の設定
- Service ID Field:
lesson_id - Provider ID Field:
provider（Appointment Provider blockから使用） - Appointment Date Field:
schedule（Appointment Date blockから使用） - WooCommerce Price Field:
PLAN- VALUE = 計算する金額 (79200, 64900 など)
- WooCommerce Order Details:
- Service name
- Provider name
- Date
- (その他の情報が必要なら追加)
3. Add to Cart & Redirect to Checkout は削除
- Insert AppointmentでWooCommerceに自動連携されるので不要
注意点
Provider ID Field
- Calculated field は使ってはだめ
- Appointment Provider blockの値を使うこと
WooCommerce Price
- PLAN (ラジオボタン)の VALUE に稼働金額を入れる
- 79200 や 64900 などを直接値として設定
- [OK]
LABEL: プラン名 VALUE: 79200
Date の表示形式
- WooCommerce Order Details > Date block
- DATE FORMAT は
Y年n月j日などを指定- 2025年3月28日 と表示させたい場合
Y年n月j日- ISO形式で表示したい場合:
Y-m-d
Provider name
- WooCommerce Order Details >
Provider nameを追加することで、Remi Takenaka などが正しく載る
確認点
決済画面
正しく次のように表示される:
- 金額: PLAN の VALUE が正確
- 日付:
2025年3月28日や2025/03/28 - 担当者: taro yamada のように名前表示
トラブル時
Submit failed / 500 Internal Server Error になる場合
- Provider ID field に別の計算フィールドを使っていないか
- WooCommerce Price field が空になっていないか
- Debug mode を JetFormBuilder 設定 > Debug から有効にして詳細を確認