「Contact Form 7」で予約フォームがなんとか完成。

サイトづくり

できたー!

10時間くらいかけてできたよー!

全く同じものはネットで探せなかったので、イメージに近いやつを参考に試行錯誤。

なんとか納得できるやつができました。

 

できたのはこれ↑

さあ、つくってみましょう!

 

とりあえず「Contact Form 7」をインストール

Contact Form 7
お問い合わせフォームプラグイン。シンプル、でも柔軟。

まずはここから。

予約の日時をカレンダーから選びたかったので、「Contact Form 7 Datepicker」もインストール。

Contact Form 7 Datepicker
Easily add a date field using jQuery UI's datepicker to your CF7 forms. This plugin depends on Contact Form 7.

ここまでは簡単。

 

 

では、設定していきます。

参考にしたのはこちらのサイト↓

【WordPress】Contact Form 7の使い方と簡単なカスタマイズ方法のご紹介
Webサイトでよく見るお問い合わせフォームですが、WordPressのサイトでよく使われているのは「Contact Form 7」というプラグインを使った方法です。 今回はContact Form 7の基本的な設定方法か ...

わかりやすい!

ちなみにCSSコードはいじってません!

デフォルトです。

あと、送信ボタンを押した後に違うページに飛ぶ設定もできるようですが、しませんでした。

送信後に異なる URL にリダイレクトさせるには
まず、これから書こうとしている内容は 99.99% のユーザーにとって必要のないものであり、実際、使用を推奨し…

「そんなんいらん!」らしいです。

メリットは↓こちらに書いてある通り。

WordPress : ContactForm7に送信完了ページを作る
WordPressの「**ContactForm7**」プラグインは簡単にメール送信フォームが作れるスグレモノですが、プラグイン標準では送信完了ページの作成に対応していません。 ContactForm7で作られたフォームで送信後に送信完了ページへ移動する方法を紹介します。 ## 送信完了ページを作るメリット Conta...

うちのサイトには要らんかなあと。

 

 

トラブル発生

日時の設定がうまくいかない

なんかねえ、難しいんですよ。

なので、カレンダーでは日にちを選ぶだけ。

時間は別に、プルダウンのやつ作りましたよ。

「ドロップダウンメニュー」ですね。

こうやって用語をひとつひとつ理解していくだけで大変ですよね。

 

メールアドレスの再入力がミスってる時のエラーが出ない

WORDPRESS | Contact Form7 メールアドレスの再入力チェック | WORDPRESSすごいぜ!塾

これもこのサイトを参考にやってたつもりだったのですが、違うメールアドレスを入力しても、まったく「確認用メールアドレスが一致しません」が出てくれない。

もうええかな?

あきらめかけたその時、「_confirm」入れてなくない?

[your-mail]のあとに「_confirm」入れてなくない?

ちゃんとサイトにも説明をていねいに書いてくれているにもかかわらず、華麗にスルーしていた様子。

入れたらちゃんと出ました!

当然ですね。

よく読みましょう。

 

承諾確認のボックスを入れたいがために

プライバシーポリシーを作ろう!

これを機に、一気にやってしまう。

このお話はまた別の機会にでも。

 

 

おわりに

いや~大変でしたね~。

その分達成感がすごい。

コピペで対応できないと、試行錯誤で時間をとられる。

これでできるようになったつもりでも、もう一回ってなったらまた一からになるんだろうな~

全部忘れてて。

それもつらいな~。

コメント