8、お問合わせページ 解説

それではここからお問合わせページの解説をしていきます。サイトマップから「お問合わせ」と書いてあるページをダブルクリックして下さい。下の画像の赤い丸で囲った部分です。

お問合わせページ

解説 TOP

Loading the page...

Google Map挿入

コンタクトフォーム

挿入

9、Privacy Policy

 ページ解説へ

コンタクトフォーム

設定/カスタム

 

何か追加・変更したら「プレビュー」

で必ず確認!!!

 

「ファイル」

「サイトを保存」

も必ず忘れずに!!!

最初に「お問合わせ」のテキストを入れます。挿入の仕方は省略しますね。

 

※フッダーにあるFacebookのいいねボタンは気にしないで下さい。

Google Mapの挿入をします。Google Mapにアクセスし表示地点を出します。

今回は東京スカイツリーにしてみました。

表示したい地点が出てきたら、下の画像の①部分をクリック、右側に赤い四角で囲った部分が出てきますので、「埋め込み地図のカスタマイズとプレビュー」をクリックして下さい。

クリックすると下の画像の画面が出てきます。①のカスタムにチェックを入れて幅と高さの数字を入力します。今回は600と400です。プレビューが出たら②の部分にあるコードを全てドラッグし右クリックでコピーを選択します。(もちろんショートカットキーでもなんでもOKです)

コピーしたままで、お問合わせページに戻ります。

「オブジェクト」→「HTMLを挿入」と進んで下さい。

進みますと下の画像の画面になります。赤い四角で囲った部分へ、先程コピーしてきたものを貼付けます。貼付けましたらOKボタンを押して下さい。

OKボタンを押すと下の画像のようにGooge Mapが貼付けられました。もちろん、選択したまま配置したい場所まで移動する事も可能ですよ。

挿入されたGooge Mapの脇にテキストを入れていきます。こちらは省略します。

次にコンタクトフォームを挿入していきます。

「ウィジェットライブラリー」→「フォーム」→「シンプルなコンタクト」と進み、ドラッグ&ドロップでページ中央まで持ってきて下さい。

コンタクトフォームが挿入されました。

次にコンタクトフォームの設定をみていきましょう。

コンタクトフォームの右上角にある青い三角マークをクリックすると設定画面が開きます。

フォーム名やメールの宛先、送信後についてなど設定が出来ます。ここに入力したアドレスにコンタクトフォームで送信されたものが届きます。

また、+マークがありその隣に「単一行テキスト」と「複数行テキスト」とありますが、コンタクトフォームでの入力項目が他にも必要であればいつでも追加できます。

下の画像は単一行を追加したものですが、カスタムという項目が増えています。例えばここを「件名」などとして使ってもよいでしょう。

コンタクトフォームは全体だけでなく、それぞれの項目を動かす事も、大きさの変更も、その他テキストや色の変更までも可能です。

大きさや配置を変更して完成したものが下の画像になります。

テストサイト「simple corporate」

http://muse-logsimplecorporate.businesscatalyst.com

© muse-log.com all rights reserved.