【EC-CUBE4】WordPressのContact Form 7とVue.jsを使ってお問合せフォームを作る方法

WordPressのContact Form 7とVue.jsを使ってEC-CUBE4でお問合せフォームを作る方法です。

WordPressにContact Form 7をインストールしてお問合せフォームを作成

WordPressにContact Form 7というプラグインをインストールして、コンタクトフォームを新規作成して下さい。

コンタクトフォームを作成すると以下のようなショートコードが発行されます。

EC-CUBE4でお問合せフォームを作るときにショートコードのidを使用しますのでメモしておいて下さい。

EC-CUBE4のページ管理でお問い合わせページを作成

フォーム送信はContact Form 7のREST APIを使って行います。

EC-CUBE4のページ管理でお問合せフォーム用のページを作成して、以下のコードを貼り付けて下さい。

formIdにはContact Form 7で発行したショートコードのidを設定して下さい。

POST送信するときのドメインをコンタクトフォームを作成したWordPressのドメインに変更して下さい。

送信後やエラー時のメッセージの編集

送信後やエラー時のメッセージ編集はContact Form 7の編集画面で行えば反映されます。

注意

Contact Form 7のインテグレーションでreCAPTCHAを設定した場合、送信時にspam判定されてしまい送信出来ませんので、reCAPTCHAを設定している場合は解除する必要があります。

コメントを残す

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください