WordPressで自作の予約フォームを作ってみた（初心者用）

Contact Form 7とContact Form 7 Datepickerで簡単予約フォーム

初心者でも作れるインターネット予約ページを作ってみました。

Contact Form 7とContact Form 7 Datepickerのプラグインをインストール、有効化して、お問い合わせのコンタクトフォームを利用しました。

かなり大変な作業になると思っていたのですが、ググってみると素人の私でも意外と簡単に作ることができました。

興味のある方は、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さいこーです。