web関連 WordPress

【WordPress】 ContactForm7 セレクトボックスの項目を自動生成する

更新日:

バンドやミュージシャン、音楽活動をする人のホームページに特化したWordPressテーマ「zousanrecords」を作りました!
販売ページは→こちら

PHP初心者の自分がこのWordPressテーマを構築していく上でつまずいたとこ、苦戦したところを備忘録として残しておこうと思います。

今回はライブ予約フォームで使ったContactForm7について。

やりたいこと

ライブ予約フォームを作ったのですが、日程と会場をお客さんに手動で入力してもらうのが煩わしい。
そこで、ライブ情報を更新すると自動的にライブ予約フォームの「日程・会場」に項目が追加されて選択できるようにしたいと思います。

先に見せると完成形はこう↓

「今日」以降の日程と会場名が自動的に選択肢に追加されます。また、ライブの日が過ぎると自動的に消えます。

jQueryで実装可能

調べたらありました。こちらの記事を参考にさせていただきました。jQueryで実装可能とのこと。

参考:ContactForm7+jQueryでセレクトボックスを動的に生成する

「今日」以降の情報のみ追加するというのは以前書いた【WordPress】Advanced custom fieldsのデイトピッカーで表示を分岐するを応用します。

ContactForm7の設定

ContactForm7の設定の設定画面で「日程・会場」をドロップダウンメニューで作成、オプションは空白のままでidを「select-live」としました。

実装するページのコード

jQueryは予め実装するページに読み込んでおきます。

実装する固定ページに書いたコード↓

これで実装できました。

サンプルページは→こちら

音楽活動をしている人のためのホームページテンプレート

バンドやミュージシャン、音楽活動をする人のホームページに特化したWordPressテーマ「zousanrecords」を作りました!
自分で簡単に更新できるホームページを作りたい人へ。

サンプルページは→こちら

-web関連, WordPress
-,

Copyright© ヒダリのヒ , 2019 All Rights Reserved Powered by STINGER.