「画像投票」を一日一回制限つきで実現したいだけなのに
waveboxみたいに、画像をポチッと押すだけのフォームを作りたいなと思って作り始めました。どうしても広告が苦手＆有料サーバーを使ってるんだから作れるはずだという思いがあったので…
先に結論から言うと、WPFormsで「画像付き投票フォーム」を作成し、JavaScriptとCookieを使って「一日に1回だけ投票可能」に制限することに成功しました。
ただしそこに辿り着くまでいろいろなことを試しました。
YOP Polls：やりたいことに一致しなかった
まずChatGPTに相談し、初めに試したのが「YOP Polls」でした。
古くからあるプラグインらしく、一日に1回の投票制限もあり、基本的な機能は揃っているのですが…
画像が表示されない！これではやりたいことがまったくできないので他を検索することに。既存の絵文字を載せたいだけならこれがいいのかも。
（投票結果がプラグイン内で統計できたり、投票後に結果が見えたり、ちょっとTwitterのアンケートみたいで色々楽しそうではあった）
Formidable Forms：デザイン自由度高いが…
再度ChatGPTに相談し、提案してくれた「Formidable Forms」というプラグインで画像付きラジオボタンの表示に成功！泣
YOP Pollで画像が出ない出ないと苦しんだので画像がポンッと出てきただけで泣きそう。
トップページのデザインと会うように黄色の枠や、中央揃えなどもCSSでカスタマイズができてニコニコ。
てがろぐに「設置できた！」とご機嫌で投稿した。
しかしめちゃくちゃ致命的なことに、
- ユーザーが送信したこと自体はメールでわかるが何が投票されたのかがどこでも確認できない
という問題が発生。
せっかく送ってくれてるのにそれが見れないって意味がわからないと思い、一時は諦めようかと思いました。
WPForms + 画像選択形式の実現
だけどやっぱりこんなに頑張ったのにという気持ちがあったので、すでに他のページで使ってる「WPForms」は？と思って試してみた。
画像での多項目選択はむしろ推奨しているのか？と思うくらい簡単で、画像の登録に四苦八苦してた最初の頃が嘘のようにあっという間に画像登録完了。
今回みたいに小さい画像を並べる場合は画像の余白を削除したりラベルを非表示にした方が良いと思います。公式に方法が書いてあったので、追加CSSで修正。
公式が充実していて、他にCSSでカスタマイズできることをたくさん教えてくれる。助かる〜。
https://wpforms.com/ja/developers/how-to-remove-whitespace-from-around-image-choices
あとは送信ボタンを変更。
div.wpforms-container-full .wpforms-form .wpforms-submit-container {
text-align: center !important;
}
div.wpforms-container-full .wpforms-form button[type=submit] {
color: black !important;
background: yellow !important;
border-color: black !important;
padding: 10px 15px; /* Distance between text and border */
}
トップページのスタイルに馴染むように枠などを修正。 （wpforms-form-5039 のIDを自分のIDに変更してください）
/* フォーム全体の中央寄せ・枠デザイン */
#wpforms-form-5039 {
text-align: center;
border: 3px solid #ffcc00 !important;
border-radius: 10px;
padding: 20px;
max-width: fit-content;
margin: 2em auto;
background-color: #fff;
}JavaScript + Cookie で「1日一回」投票制限
最後の闘いは、投票制限。
WPForms自体はこの機能を持たないため、次のようなJavaScriptをfooterに追加。 （wpforms-form-5039 のIDを自分のIDに変更してください）
<script>
document.addEventListener("DOMContentLoaded", function () {
const formId = "wpforms-form-5039";
const today = new Date().toISOString().split("T")[0];
const cookieName = "wpforms_voted_" + today;
const form = document.getElementById(formId);
if (document.cookie.includes(cookieName)) {
if (form) {
form.style.display = "none";
const msg = document.createElement("div");
msg.textContent = "今日はすでに投票済みです。";
msg.classList.add("voted-message-box");
form.parentNode.insertBefore(msg, form);
}
}
const submitButton = form?.querySelector("button[type='submit'], input[type='submit']");
if (submitButton) {
submitButton.addEventListener("click", function () {
const midnight = new Date();
midnight.setHours(23, 59, 59, 999);
document.cookie = `${cookieName}=1; expires=${midnight.toUTCString()}; path=/`;
});
}
});
</script>
これにより、同じ日の投票は一度のみに！ChatGPTすごい。
現在の制度と展望
現在は、WPFormsを使って
- 画像が狭い感覚で綺麗に並ぶ
- レスポンシブなスタイリング
- 1日一回のCookie制限
- 送信されたらメールで受信
と、欲しかった機能をほぼ完成させられました。
不満は現在これのみ…
- 投票結果がプラグイン内でカウントされない
ただ、メールで受信できるので一旦良しとしようと思いました。
おわりに
「ただ画像をポチっと押してほしい」だけのことなのに、ここまで困難するとは思いませんでした。
ただ今回のアレやこれやを通して、
- いろいろなプラグインを知れた
- WordPressのフォームの自由度
- CSSでどうデザインは変わるか
- JavaScript + Cookieの影響力
を楽しみながら学べた経験でもありました。
同じことを考えている方に参考になれば幸いです！！
