Contact form 7で数字のみ入力できるアンケートを作る方法

2022年11月22日

こんにちは、ウィルです。

実は最近サイト制作の依頼がありました！具体的には「生徒が名前と数字を投票できるシステムをサイトに導入して欲しい」とのこと。

色々と調べた結果Contact form 7を使った投票箱のシステムを作りました！

具体的に必要なのは以下の通り

本来Contact form 7は問い合わせフォームを作るのに使うが、今回は可能な限り機能を端折って名前と数字（しかも上限と下限付き）を入力できるような問い合わせページを作った。

あまり機械が得意ではない方も手軽に参加できるようにデザインをとてもシンプルにした。またFlamingoを使うことでメールを正しく設定しなくても、Excelファイルで一括管理できるようにしました。

目次（クリック可能）

Contact form 7 での設定

Contact form 7の使い方については他に綺麗にまとめている方がたくさんいるので、こちらでは省略します。

具体的にはこちらのような記事を確認して頂ければ良いかと。

Contact form 7でフォームが作れるようになり、記事内に設置できるようになったら次の手順に移る。

Contact formに入力するのは以下のような内容で、入力項目は可能な限り少なくして欲しいとのことだったので、以下の通りにした。

<label> 生徒のお名前
    [text* your-name] </label>

<label> あなたの答え
（1~300の半角数字のみで答えてください）
[number* number-525 min:1 max:300]

[submit "送信"]

このコードをそのままコピってContact formに突っ込めば名前と数字だけ記録するシステムの完成！

ちなみにメール側はこんな感じで設定してあります。

確認用にevent@[サイトのURL]に送信しているだけで、メインの作業はFlamingoを使って行う。詳細記事はこちら。

このメールの設定はFlamingoが誤作動を起こした時のためにメールでもログを残しておこうという考え。

よかったらシェアしてね！