5【初心者のためのWEBSITE DIY】トップページの仕上げとコンタクトフォーム7の設定

【初心者のためのWEBSITE DIY】トップページまとめとExUnit設定

ネットで集客カテゴリ【初心者でも出来る!WEBサイト作り第5弾】。
トップページをひとまず完成させて、メールフォーム(コンタクトフォーム7)の設定をしていきます。

スマホやタブレットで見ることを前提に、ほぼ全ての情報を見られてメールフォームへたどり着けるようなトップページを作るので、必要なのは・・・

  • どんな人が
  • 誰に向かって何を提供し
  • 結果ユーザーは何を手に入れるのか
  • 何処で・幾らで(料金表)
  • 抜粋O&A
  • アクセス情報
  • コレって私が探してたサービスだ。ヨーシ予約取るぞ!(メールフォーム)

プロフィールやサービス概要までは前回終わりましたので、今回は下の4つを作っていきます。

【初心者のためのWEBSITE DIYその5】トップページまとめとコンタクトフォーム7の設定

ちなみに、ワタクシのサイトの途中結果です⇛ https://takarasagasi.jp
下の画像にもリンクを張りましたのでクリックしてみてください。

全体のバランスを見て【PR Blocks】と【PR Content】【画像】【段落】のブロックを使い分けてみました。 WordPressともLightningとも随分長い付き合いなので、我ながら扱いがうまくなってきたものだと感心。
皆さんの環境と全く同じですから、どうやっているのか知りたいところがあったら直接おたずねください。

メニュー&料金

簡潔なサービス内容と料金を【表】のブロックを使って表示してみます。【フロー】ブロックを使って施術の流れなども解説してあげると不安解消に繋がるはずです。

フローブロックで施術の流れを解説

フローブロックはVK Blocksの中にあります。

フローブロックで施術の流れを解説

こんな感じで大まかな流れをフロー形式で解説してあげると良いでしょう。

【表】ブロックはフォーマットの中にあります。

表のブロックで料金表を表示

列と行の数を指定したら【表を作成】をクリック。

右の設定画面の【表の設定】でセルの幅を固定できますが、各種デバイスに柔軟に対応するためにはいじらない方が良いかも知れません。

よくある質問

よくある質問の中から代表的なものを1つ2つトップに表示しておきます。【Q&A】ブロックはVK Blocks の中にあります。

Q&Aブロック

ブロックを選んだらテキスト打つだけ。
沢山の質問には別の固定ページ(Q&A専用のページ)を作って答えておくと良いでしょう。「よくある質問をもっと見る」などのテキストを反転させてリンクをクリック。Q&AページのURLをペーストすればリンクできます。

詳細なプロフィールとか手技の詳細、自分が思う整体論なども、別の固定ページで思う存分展開します。トップページでは重要な点だけ抜粋しておけばOK。あまり深堀りするとノイズになりますからね。

アクセス情報

訪問スタイル以外の方は施術スペースまでのアクセス情報も掲載しておきましょう。訪問の方もできれば事務所として公開できる住所がある方が少し安心感があるかもしれません。

テキストで住所や電話番号など表記するのはもちろんですが、この際グーグルマップも埋め込んできます。(近いうちにグーグルビジネスへも登録しましょうね!)

グーグルマップを埋め込む

グーグルマップを開いて表示させたい住所を検索。共有をクリック。

グーグルマップを埋め込む

地図を埋め込むタブへ行ってHTMLをコピー。
ページの幅に合わせるなら【中】ってところをクリックしてサイズ指定します。

グーグルマップを埋め込む

サイドメニュー無し全画面表示なので横幅は【1400px】でピッタリです。
自分のサイトの編集画面へ戻って【カスタムHTML】ブロックを追加、コピーしてきたソースを貼り付けます。

グーグルマップの埋め込み

住所や電話番号も表記。最寄り駅からの行き方などテキストも入れておくとベターでしょう。
手書きの地図などでセンス良くするのもアリですけど『わかりやすさ』が大事です。

最後のひと押し+メールフォーム

ここまでスクロールしてもらえたらあとは最後のひと押し。ちょっとだけ深夜の通販に習って二者択一を迫ったり緊急性をアピールしたりしつつ、オファーを提示してメールフォームへ導きます

「現状●●でお困りではありませんか?」
「そのままではこんなことになります!」
「今すぐコレで問題解決!」
洗剤にしろ運動器具にしろ、海外通販だと大体こんな感じで二者択一を迫ります。

「24時間以内にお申し込みいただけた方にはなんと!同じものをもうひとつ!」
「限定100台!すでに残り35台となっております」

などなど、緊急性を煽って今すぐ申し込みしてもらうためのひと押しをメールフォームのすぐ前に入れ込みましょう。

ではメールフォーム【 Contact Form 7 】の設定をしていきます。
(前々回既にインストールしてあるはずですが、まだの方はこのページの下の方「追加するプラグイン」を参考にインストールしてください)

インストールして【有効化】すると、左メニューに【お問い合わせ】項目が表示されます。

コンタクトフォームの設定

デフォルトでひとつ基本的なフォームが用意されているので【コンタクトフォーム】をクリックして編集していきます。内容の違うフォームを新しく作りたいときは【新規追加】です。

コンタクトフォーム貼り付け

まず試しに何もいじらずフォームのショートコードをコピーして、編集中のトップページに貼り付けてみましょう。

コンタクトフォームの貼り付け

ウィジェット内の【ショートコード】か、フォーマット内の【カスタムHTML】どちらかのブロックを選択してコピーしたショートコードを貼り付けたら、プレビューで確認してみてください。

表示されましたか?けど何だかちょっと物足りないですよね。小さし、項目も少ないし。

ってことで、続いてフォームの入力項目の設定をしていきます。ついでにデザインも少しだけいじって全幅表示にします。

コンタクトフォームの設定

各種メニューのご予約やお問い合わせなど複数の件名から選んで入力できるよう、フォームタブで【ドロップダウンメニュー】をクリック。
必須にチェックを入れてオプションのところに一行ずつ件名項目を入れます。
空の項目にチェックを入れてタグ挿入をクリック。

コンタクトフォームの設定

こんな感じでタグが挿入されます。
ただしこのままでは表示が上手くないので少しだけタグを直接手打ちします。

<p><b>件名(必須)</b>
[select* menu-698 include_blank "初回【宝探し】のご予約" "継続のお申し込み" "ご相談"]</p>

ショートコードを挟むように
<p><b>ショートコード</b></p>としているだけです。簡単ですね。あ、ちなみにタグは全部半角小文字です。
ついでに他の部分も同様の表記にしてみましょう。<label></label>を<p></p>に置き換え、それぞれのタイトルを<b></b>で囲みます。
(pは段落、bは太文字を意味します)

プレビューしてみてください。どうですか?全幅表示になりましたよね?

コンタクトフォーム7の設定

あ、件名をドロップダウンメニューで作ったので、【題名】は要らないですね。他に、緊急連絡用(メールが返信できない時など)の電話番号や性別、年齢などの項目も付け足しましょう。
ちなみにワタクシはこの様にしてみました↓

<p><b>件名(必須)</b>
[select* menu-698 include_blank "初回【宝探し】のご予約" "継続のお申し込み" "ご相談"]</p>

<p> <b>お名前 (必須)</b>
    [text* your-name] </p>

<p> <b>メールアドレス (必須)</b>
    [email* your-email] </p>

<p><b>性別</b>
[radio radio-906 label_first default:1 "男" "女"] </p>

<p><b>年齢</b>
[select* menu-688 include_blank "10代" "20代" "30代" "40代" "50代" "60代" "以上"] </p>

<p><b>電話番号(緊急の場合以外使いません)</b>
[tel* tel-788] </p>

<p><b>ご希望の日時(候補日を3日分ほどお願いします)<b>
[textarea* textarea-461] </p>

<p><b>現在の状況、解消後の目的、ご相談など添えてください。</b>
    [textarea your-message] </p>

[submit "送信"]

続いて【メール】のタブへ移動。自分へ届くメールと自動返信メールの設定をします。

コンタクトフォーム7のメール設定
  1. WordPressに設定したメールアドレスが表示されていると思います 。そのままでも良いし自分に届きやすいメールアドレスに変えてもいいです。
  2. サイト管理用のメールアドレス。サイトと同一ドメインのものが理想です。別ドメインだと警告がでます。(が、使えます)
  3. 題名に設定したドロップダウンメニューと同様のショートコードを入れます。
  4. 本分も同様に、フォームのタブで設定したショートコードが上に表示されているので、コピペして見やすいように並べます。

【保存】したらフォームからメールを送信してテストしてみてください。メール届きましたか?

続けて【メール2】の設定。もうひとつメールを送れる機能を使って送信者へ自動返信するようにします。

コンタクトフォーム7のメール2設定
  1. 自動返信先
  2. 運営者のメールアドレス
  3. 件名を設定したドロップダウンメニューのショートコード
  4. 本分はメール1からコピーしてくればOKですが、自動返信である旨と返信不要を付け加えておきましょう。

忘れずに保存したら、トップページに戻って実際にフォームからメールを送信してみて下さい。送信先・送信元、双方のアドレスにメール届いたらOKです。

最後に、メールを送信する際の注意点などフォームの直前に表記してトップページは一応完成!パチパチパチ!!お疲れさまでした。

メールフォーム直前に表記したいこと

ワタクシのトップページはこんな感じになりました。

  1. オファーの提示
  2. 背中を押す一言
  3. メール送信の注意点

あとはメールを待つだけ!ではありません。
ウェブサイトは畑と同じ。現時点でようやく草刈りと耕し作業が終わったくらいですw

他に最低限必要なページ(特定商取引法表示、プライバイシーポリシー)などは、ここまでやってきた記述方法を駆使しつつ、手力整体塾のサイトを参考に作っておいて下さい。

次回は、SNSや各種表示の設定に便利なExUnitの設定をしてゆきます。お疲れさまでした!

無料体験受付中

身体を知り動きを知れば自分の身体がどんどん変わる。だから自然と誰かに教えたくなる。そんな手力整体です。

伝えたいのは痛みのとり方ではなく、身体の凄さ、整体の面白さ!

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください