Zenn
📮

Wordpress でフォームを試す

2021/02/16に公開
JavaScript
PHP
WordPress
tech

Wordpressにフォームを付ける

Wordpress にフォームを付けなければいけなくなった。ちょっとググったけど、あんまりわからないので自分で検証してみる。

要件

問い合わせと注文のフォームを２つサイト内に作りたい。

  • 複数のフォームを作成
  • 自由度の高い入力項目
  • Ajaxでのフォーム内容の送信
  • メール転送
  • フォームの内容を管理画面から閲覧

複数のフォームを作成

１サイトに２つ以上のフォームが作成できること。

自由度の高い入力項目

メールアドレスと氏名と問い合わせ内容以外にも任意の項目を追加できること。
郵便番号や住所の様に任意の項目を追加したい。

Ajaxでのフォーム内容の送信

Ajaxでフォーム内容が送信できること。
注文内容のように項目数が増減するUIを実装したいので、必要になる。

以下のような入力フォーム

メール転送

フォームが送信されたタイミングで、管理者と入力者両方にメールを転送してほしい。

管理画面でフォームの送信内容を確認

トラブル対応と業務フローとしてもWordPressの管理画面から入力内容を確認したい。

調査

さらっとググってみると2つプラグインが出てきた。基本的にはプラグインでやってしまいたい。引き継ぎやすさもあるし、WordPressのDBとのつなぎ込みの知見がないので専門家たちの知識をそのままもらいたい。

Contact Form 7

Contact Form 7 は複数のコンタクトフォームを管理できてその上フォームとメールの内容を簡単なマークアップで柔軟にカスタマイズしたりもできます。Ajax によるフォーム送信、CAPTCHA、Akismet スパムフィルタリング等々サポートしています。

要件をしっかり満たしてくれそう。 Ajax によるフォーム送信ができれば、自由度が高まる。

Flamingo

Flamingo は、元々は Contact Form 7 (単体では送信されたメッセージを保存する機能を持ちません) のために作成されたメッセージ保存プラグインです。

複数のプラグインを入れないと行けないのは気持ちが悪いけど、フォームの作成とデータの保存を切り分けるのは綺麗な方とだとも思う。

MW WP Form

MW WP Form はショートコードを使って確認画面付きのメールフォームを作成することができるプラグインです。
Form created using shortcodes
確認画面が表示可能
同一URL・個別URLでの画面変遷が可能
豊富なバリデーションルール
問い合わせデータを保存可能
保存した問い合わせデータをグラフ可能

確認画面は別にいらないし、データをグラフにしてくれなくてもいいかな。昨日たっぷりで思い印象。

検証

Contact Form 7 + Flamingo で意図したフォームができるかを試す。

WordPress の環境構築

まずは WordPress が動作する環境を作る。

PHP と MySQL

PHP と MySQL のバージョン

% mysql --version
mysql  Ver 8.0.22 for osx10.16 on x86_64 (Homebrew)
% php --version
PHP 7.3.26 (cli) (built: Jan  5 2021 14:23:37) ( NTS )
Copyright (c) 1997-2018 The PHP Group
Zend Engine v3.3.26, Copyright (c) 1998-2018 Zend Technologies
    with Zend OPcache v7.3.26, Copyright (c) 1999-2018, by Zend Technologies

WordPress のセットアップ

WordPress を入手　からzipをダウンロードする。
バージョンは WordPress 5.6.1

起動

% cd ~/Downloads/wordpress
% php -S localhost:8000
PHP 7.3.26 Development Server started at Mon Feb 15 21:15:41 2021
Listening on http://localhost:8000
Document root is /Users/user/Downloads/wordpress
Press Ctrl-C to quit.

確認

起動した。画面に、したがってセットアップを進める。

設定

データベースを作って

% mysql -u root![](https://storage.googleapis.com/zenn-user-upload/fersl8c9vfwut2a2qabjf05c1mjp)
mysql> create database wordpress_form;
Query OK, 1 row affected (0.02 sec)

セットアップ完了

無事ログインできた。

プラグインのインストール

2つをインストール


問い合わせページを作る

以下の設定でフォームを作成した。

<label> 氏名
    [text* your-name] </label>

<label> メールアドレス
    [email* your-email] </label>

<label> 題名
    [text* your-subject] </label>

<label> メッセージ本文 (任意)
    [textarea your-message] </label>

[submit "送信"]


<label> 注文内容
    [textarea* orders] </label>

<label> 氏名
    [text* user-name] </label>

<label> メールアドレス
    [email* user-email] </label>

<label> 電話番号
    [tel* user-tel] </label>

<label> 住所
    [text* user-address] </label>

<label> 補足
    [textarea your-message] </label>

[submit "注文"]

メールの設定

細かくは省略するけど、入力された内容を使ってメールを組み立てられる。

以下の内容で注文を受け取りました。

注文内容:
[orders]

氏名:
[user-name]

メールアドレス:
[user-email]

電話番号:
[user-tel]

住所:
[user-address]

補足:
[user-message]

-- 
このメールは [_site_title] ([_site_url]) の注文フォームから送信されました

固定ページに埋め込む

固定ページを作成して、ショートコードを貼り付けると以下の通り反映される。


動作確認

送信され他フォームの内容はFlamingoによって wp_posts に挿入されていた。
フォームの内容が post_content に組み込まれていた。

バナナ
M
3
--
リンゴ
S
12
ぐちもん
guchimon99@gmail.com
000-0000-0000
ギリシャのどこか
この内容みえてますか？
2
127.0.0.1
Mozilla/5.0 (Macintosh; Intel Mac OS X 11_2_1) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/88.0.4324.150 Safari/537.36
http://localhost:8000/?page_id=14
2021年2月16日
4:09 PM
14
%e6%b3%a8%e6%96%87
注文
http://localhost:8000/?page_id=14
admin
admin@example.com
フォームのテスト
Just another WordPress site
http://localhost:8000
admin@example.com

また、wp_postmetaにもデータは挿入されていた。
こちらの方がいずれの項目に入力されたかの対応があるので、本体なのかもしれない。

どちらの内容にも項目に一意のIDがなく、name がIDとなっているようだ。

Ajax での送信

デフォルトのフォームの挙動を確認する

特筆すべき点は multipart/form-data であることかな？

レスポンスは単純なJSONだった。

{
	into: "#wpcf7-f13-p14-o1"
	message: "ありがとうございます。メッセージは送信されました。"
	posted_data_hash: "b04a5901cca1907c1c110e119628c9cf"
	status: "mail_sent"
}

フォームの作成

何も考えずに作ってみる。
今回はカスタムHTMLウィジェットで作成する。

<form id="orderForm">
  <div>
    <label>注文内容</label>
    <textarea name="orders" rows="10">バナナ 100</textarea>
  </div>
  <div>
    <label>氏名</label>
    <input name="user-name" type="text" value="Tanaka Taro" />
  </div>
  <div>
    <label>メールアドレス</label>
    <input name="user-email" type="email" value="taro@tanaka.jp" />
  </div>
  <div>
    <label>電話番号</label>
    <input name="user-tel" type="tel" value="00-0000-0000"  />
  </div>
  <div>
    <label>住所</label>
    <input name="user-address" type="text" value="Japan" />
  </div>
  <div>
    <label>補足</label>
    <textarea name="message" rows="10">なし</textarea>
  </div>
  <div>
    <button type="submit">注文する</button>
  </div>
</form>

(() => {
  var endpoint = '/index.php?rest_route=/contact-form-7/v1/contact-forms/13/feedback'

  async function submitHandler(event) {
    event.preventDefault()
    var body = new FormData()
    body.append("orders",  document.querySelector('#orderForm [name="orders"]').value)
    body.append("user-name",  document.querySelector('#orderForm [name="user-name"]').value)
    body.append("user-email",  document.querySelector('#orderForm [name="user-email"]').value)
    body.append("user-tel",  document.querySelector('#orderForm [name="user-tel"]').value)
    body.append("user-address",  document.querySelector('#orderForm [name="user-address"]').value)
    body.append("message",  document.querySelector('#orderForm [name="message"]').value)      
    var res = await fetch(endpoint,{ method: "POST", body })
  }
  window.addEventListener("load", () => orderForm.addEventListener("submit", submitHandler))
})()

動作確認

正常に動作した。

リクエスト

レスポンス

{
  "into":"#",
  "status":"mail_sent",
  "message":"\u3042\u308a\u304c\u3068\u3046\u3054\u3056\u3044\u307e\u3059\u3002\u30e1\u30c3\u30bb\u30fc\u30b8\u306f\u9001\u4fe1\u3055\u308c\u307e\u3057\u305f\u3002",
  "posted_data_hash":"c3e96d4074522e621d5385e78e2f7924"
}

DB

Flamingoも正常に受け取ってくれてた。

メールが送信されない

メールが正常に送信されていないことに気づく。
いろいろググったけど、正確なことがわからないので後日検証する。

最後に

メールの部分はうまく動作確認できなかったが、それ以外の部分で必要な検証はできた。

Discussion