webコンテンツを徹底強化!WordPressサイト制作とプラグイン&テーマ情報・メンテ/エラー対応から、PHP/CSS/javascript、動画・音・イラスト等制作まで扱うコラム
マルチメディアコンテンツ制作読んどけ☆コラム

googleカレンダーとメールフォームで、予約受付ってできるの?iframeレスポンシブに気をつけて

      2020/09/18

今回は、取引先のスクールの担当者といろいろ話していて思いついたアイデア、googleカレンダーとメールフォームで、予約受付ページを作ってみます。席数が多い飲食店や、広いヘアサロン・複数学科で生徒が多いスクールなどは、専用の予約システムが便利です。しかし、そこまで大きいシステムが必要でない場合、googleカレンダーとメールフォームを使って営業案内&予約受付ができるのでしょうか?作り方や管理人が作ってみた例・メリット・デメリットまでをまとめていきます。

まずはgoogleカレンダーの設定をしよう

新しいカレンダーを追加(ページ用)

googleカレンダーのページにアクセスしましょう。(googleアカウントがない方は、事前に登録してください) 上のほうにある、ねじみたいなアイコンをクリック。

カレンダーを追加』というのがあるので、ここで新しいものをつくります。プライベート用すでに使っていて、それとは別にしたい場合は。

タイトルは合うものをつけます。管理人の場合は『wpサイトコンサル予約』としました。『一般公開して利用できるようにする』にチェックをつけることで、サイト上に公開してユーザーが見ることができるようになります。 この場合『個人情報は書かない(○○さまご予約など)』『まちがってプライベート用などにチェックをつけない(公開されます)』という点に気をつけます。

googleカレンダーをサイトに貼り付けるときのコードは?

上記のページを下にスクロールしていくと『iframe src』で始まるコードが出ています。このコードを表示したい場所に貼り付けると、カレンダーがサイト上で表示されます。

しかし、このコードが曲者なんですよかなり。詳細は後のほうで。

あとは受付できる日を書いていく!○△×を使うと見やすいよ

表示されたとき大丈夫なように、受付できる日をカレンダーに書いていきます。スマホの小さい画面でも分かりやすいよう『○△×』を使ってもokです。定休日には×をつけておくのも忘れずに!

googleカレンダーのレスポンシブ対応について(CSS)

レスポンシブ対応しないと??

iframeの枠だけデバイスにあわせて、中身はレイアウトにあわせないというのが発生しました。その場合、写真のようにカレンダーがつぶれて、文字が見えなくなります。これではどこをタップしてよいかわかりません。

また、この場合はiframeの枠だけレスポンシブでしたが、iframeの指定がなんもない場合は『カレンダーがそのままの大きさで表示されて、スマホだと火曜日あたりまでしか見れない』というのもあるようです。

googleカレンダーのレスポンシブ対応するCSSはある

検索してみたところ、3061.jp @FUJIDENKIさんという方のサイトで、カレンダーをレスポンシブにするCSSがありました。 https://3061.jp/google-calender-responsive-code/

検索するといろいろCSSが出てくるので『キーワード:googleカレンダーレスポンシブ』状況に応じて、使いやすいものを選んでください。

上記のCSSを入れても、googleカレンダーのレスポンシブがエラーになる場合

管理人の環境では、上記のようなCSSをいれても、googleカレンダーのレスポンシブがエラーになりました(縦サイズはつぶれたまま)。 理由はワードプレスのテーマで『iframe(youtubeなど)指定している部分が既にあり、干渉していた』という点です

上記の干渉しているCSSをカットすることにより、スマートフォンでタップして表示できる広さになりました。

この場合youtubeは、『埋め込むときは320サイズ固定にする』『カレンダー・youtube個別にCSS指定』『問い合わせのページだけ、対応できるCSSを出力』などの対策が考えられます。

googleカレンダーとメールフォームでつくった予約ページ例

PC版予約受付ページ

メールフォームを埋め込んで、同じページ内でカレンダーを見ながら問い合わせメールが送れるようにしたページです。文面とかは工夫の余地があります。

スマートフォン版予約受付ページ

ちょっと文字が小さいですが、レスポンシブ対応をかけたので、文字がタップできるようになります。左側に『○△×』があったほうが、お客さんが選びやすいでしょう。ホットペッパーグルメとかも、予約ページに行くとカレンダーに○×が出るので、この形式に慣れている人は多いと思われます。

メールフォームは、カレンダーと同じページにおいたほうが良いの?

メールフォームは、ワードプレスのショートコードをつかって、『カレンダーと同じページ内』に入れました。カレンダーとメールフォームが別々だと、PCタブブラウザならあまり気になりませんが、スマホで確認するたびにページ移動が発生するので、非常に操作が大変になります

このやり方でおこなう場合は、『同じページ内に埋め込める』メールフォームがあると、非常に有利です。しかし、デフォルトでは、『メールフォームの内容をカレンダーが受け取れない』という難点があるため、ガッツリやりたい人はプログラム組む羽目になります(涙)

googleカレンダーとメールフォームのメリット・デメリットは?

メリットは、制限がなく、コストもかからない

通常、予約フォームASPですと、『無制限受付&管理機能 月20000円』『無料プランは、月5~10通まで受け付け可能』のように、制限がかかっているところが多いです。しかしこの方法だと、googleアカウント・フォーム&カレンダーを載せるスペースさえあれば無制限受付可能です。

デメリットは予約・顧客管理など

デフォルトだと『フォーム入力した値が、カレンダーに渡らない』ので、予約・顧客管理は手作業になりそう。予約件数が多い場合は、この点がデメリットになります。 スクリプトを組んで値をわたすほか、一からそういう予約システムを作るのも大変(発注しても高い)なので、WordPress&予約・顧客管理プラグイン(場合によっては独自フィールドなどカスタマイズ)あたりは、選択肢に入りそうです。

あとがき・まとめ

とりあえず、レスポンシブさえどうにかすれば、そこそこ形にはなります。カレンダーを埋めるときも、スマホでgoogleカレンダーにアクセスして行えるので、新しく難しいツールを覚えたりしなくてよいのはメリットかと思いました。

キャパが小さめな『スクール/教室/出張コンサル・サロン・飲食店』などまでは、活用しだいで対応できます。宿泊施設などは、複数の部屋から選ばなければならないので、このシステムでは対応できません。また、データベースと連動したりするわけでないので、数が増えてくると管理が大変になるかもしれません。

後ほど、ワードプレスプラグインでの予約システムもやってみたいと思います。


【カテゴリ】 - webメディア制作運用, スクール・コンサル・サロン等サイト制作
【タグ】 -

  関連記事

WordPressで車販売サイトが作れる『Car Dealer, Classifieds & Listing』・英語なのでネックも

今回は、もはや何でもある感じのWordPressプラグインで、『 ...

cssフレームワーク利用サイトで、意図しないpaddingなどを消すには?→同クラス上書き(例:bootstrap)

今回は、CSSフレームワークなどを使ってサイトを構築していると、 ...

WPカスタムフィールドを使って、soundcloudみたいに記事一覧でオーディオ再生できるサイトを作る方法

今回は、管理人が持っている著作権フリー曲サイトに、『カスタムフィ ...

【CSSエディット】『 』みたいな空白スペース・改行タグでレイアウト調整が良くない理由

今回は、管理人がこのサイト(よんどけコラム)のCSSを調整してい ...

【WPカスタムフィールド】音楽サイトにBPM(数値)のフィールド作成&管理画面記事一覧に表示

今回は、WPのカスタムフィールドを、実践的に取り扱ってみます。ま ...

【WordPressテーマ改造】カスタマイザープレビューが表示されなくなった件の対応(ファンクション名変更・twenty seventeen)

WordPress・twenty seventeenテーマ改造で、ファンクション名変更と整理・ファイル削減などを行っていたら出たエラー(カスタマイザープレビューが表示されなくなった)に対処。

【WordPress2019公式テーマ】Twenty Nineteenってどう?→文字デカすぎ&PCも1カラムは難点・ブロックエディタとの親和性はok

今回は、WordPressバージョン5以上に更新したら勝手につい ...