WordPressで自作の予約フォームを作ってみた（初心者用）
Contact Form 7とContact Form 7 Datepickerで簡単予約フォーム
初心者でも作れるインターネット予約ページを作ってみました。
Contact Form 7とContact Form 7 Datepickerのプラグインをインストール、有効化して、お問い合わせのコンタクトフォームを利用しました。
追記
大変便利なContact Form 7 Datepickerですが、2020/04/01よりセキュリティが理由で開発・公開中止になっていました。2021/03/21の時点でも、インストール可能で使用できたのですが、上記理由のため使用を中止します。
代替として、Date Time Picker for Contact Form 7を使用することにしました。有料のPro版も用意されていますが、無料版でも十分な機能を有しており問題ありませんでした。
かなり大変な作業になると思っていたのですが、ググってみると素人の私でも意外と簡単に作ることができました。
興味のある方は、Contact Form 7と予約フォームで検索してみてください。
今回、予約システムの構造はできるだけ単純にして、フォームに記載された予約内容をメールで管理者に送るだけとしました。なにぶん素人ですから・・・
作っていると、Contact Form 7がとても使いやすくて優秀であることがわかります。
必要な項目を配置するだけで、項目に入力された内容を簡単にメールで送ることができます。
必須項目の設定も簡単にできます。
また、Contact Form 7 Datepickerを併用することで、予約日をカレンダーからピックアップすることまで可能です。
本当に優れたプラグインなのですが、一つうまく行かずに悩んだことがあったので備忘録として書いておきます。
Contact Form 7 Datepickerとカスタムされた表の相性が悪い
ただ単に私のスキルが不足しているせいで、Contact Form 7 Datepickerが悪いわけでは決してありません。
クリニックのホームページなどでは、診療時間を表示するカスタマイズされた表を使うことが多いと思います。
こんなやつです。
これは通常のHTMLに、CSSを使って見た目よくしています。
そのCSSの内容が、Contact Form 7 Datepickerのカレンダーにも影響を及ぼしてしまい、
カレンダーの表示が乱れてしまいます。
CSSが同じページ内に配置されている全ての表に効果が出るためです。
今回の場合は、診療時間の表の記述にクラスを設定して、CSSの効果を限局することにしました。
<table class="ta1"診療時間の表に”ta1″というクラスを与えて、CSSの記載もそれに合わせて手直しすることでうまくいきました。
素人なので、こんな方法くらいしか思いつきませんでしたが結果オーライです。
まだ改善の余地はありますが、とりあえず必要な機能は実装できましたので、僕には上出来でした。
Contact Form 7さいこーです。
