Muse (2015) 基本講座

コンタクトフォームの追加

全334コースを10日間無料で

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
サイトを見たユーザーがメッセージを送信できるコンタクトフォームの設置と、細かなカスタマイズ方法を解説します。
講師:
10:09

字幕

このレッスンではコンタクトフォームの作成を行います。それではサイトにアクセスした人がこちらにコンタクトできるようにコンタクトフォームを設置しましょう。それでは Contact Us のページを開けます。まだ何もないですね。そうしたら「ウィジェットライブラリ」を開けます。そして、その中のフォームこの中を開けると「シンプルなコンタクト」「詳細なコンタクト」という2つのフォームが入っています。では「詳細なコンタクト」ですね。これをドラッグアンドドロップで持ってきてみましょう。そうすると、このような形で名前メールアドレス、会社名とかですねたくさんの項目が入ってるフォームが設置されます。そして下の方にはこうした送信ボタンも設置されており特に難しい設定を行わなくてもすぐにフォームとして使えるようになっています。今回は、これちょっと項目が多いのでデリートしてしまって「シンプルなコンタクト」こちらを使ってみましょう。「シンプルなコンタクト」をドラッグ アンド ドロップで持ってきてこのような内容となっています。ではこれを中央に配置してそしてフォームが選ばれている状態でここの部分をクリックするとオプションを表示できます。 では、中身を見ていきましょう。まずフォーム名、今1個しかないのでこの名前でもいいですがフォームに名前を付けることができます。そしてメールアドレスちょっと飛ばして「標準フィールド」っていうところですね。ここで項目を設定できます。最初このシンプルなフォームだと名前とメールとメッセージしかないんですが後からこうしたものも追加することができます。そしてさらに最初から設定されている項目だけではなくてカスタムフィールドという形でテキストであるとかチェックボックスラジオボタンといったものを自由に追加することができます。これを確認したうえでここの部分を確認してみましょう。「送信後」という所ですが「現在ページにとどまる」となっています。つまり送信を行った後もこのページが出続けるというわけですが送信を明らかに行ったよと分かりやすくするためにこのような手法があります。では1回こちらのプランの画面に移動してそして Contact Us に子ページを1個作ります。ここの名前は「Thanks」としておきましょう。そしてこちらを開きます。このページ上にテキストを追加します。ではテキストエリアを作って例えばこんな内容ですね。 Thanks. We've receivedyour message.こんな内容を入れておきます。そして文字がもっと目立つようにサイズをアップしたりThanks はもっと目立つようにさらに大きな文字にしておきます。メッセージの後にピリオドも入れておきましょう。送信した後にこのようなものが表示されることで明らかに送信できたなとユーザーに安心感を与えることができます。このままでもいいんですが更にこういったページの場合こうした形のボタンでホームに戻るとかですねそういったボタンがあると便利です。ではホームにあるこのLearn More のボタンですねこれをコピーして使いましょう。ではこの部分を選択してCommand もしくは Ctrl+C を押してコピーします。そして Thanks のページに来てCommand もしくは Ctrl+Vを押して貼り付けを行います。そうしたら今 Learn More になっているテキストですね。ここを改めてReturn としておきましょう。そしてボタンを中央に配置してテキストもそれに合わせてある所にしておきます。そうしたらボタンはHome のページですね。こちらにリンクするようにしておきます。 そしたら Contact Us ページに戻ってHome のオプションですね。ここから送信後は「現在のページに留まる」ではなくてContact Us の子ページであるThanks これですね。ここにリンクするようにします。これでフォームを送るとこちらが出てくるという仕組みができあがりました。それではフォームをもう少し細かく設定していきましょう。この項目なんですがもう1個だけ加えておこうと思います。加える項目「キャプチャ」というものですね。これなんですが、例えば BC キャプチャというものを選んでみましょう。するとこのような項目が追加されます。見たことある方も多いと思いますがフォームを送るときにこのテキストを入れてあげなければ送信できないというものです。インターネット上でロボットと呼ばれる一種のプログラムが動いていてそれが悪意があるものだといたずらでフォームを送ってしまうそんなロボットもあるんですね。そういった場合にこうした人間でないと読めないようなあいまいな文字を表示しておいてこの内容を入力しないとフォームを送信できないようにしておけばそうしたロボットのいたずらを防ぐことができます。ではさらに細かく設定しましょう。 これらのテキストの部分ですね。これらにスタイルを適用してみましょう。段落スタイルを開けてSubhead 1 dark というのがあるのでこれを選びます。そうするとまとめて全部の見出しにかかりました。では大きくなった分埋もれてしまったのでそれぞれのテキストの所を2回クリックしてさらにもう1回クリックするとこのようなハンドルが出てくるのでこれで見えるところに動かしてやります。こちらも2回クリックしてもう1回クリックすることで出てきます。こちらはまとめて下に持っていきたいのでまず2回クリックして選んだらShift キーを押しながらSubmit のボタンをクリックしてこちらもクリックしてそしてドラッグするとまとめて動かせます。そうしたら改めてこの隠れているテキストを出してきます。そうしたら次にこの Submit のボタンですがせっかくなので他のボタンのスタイルに合わせようと思います。ではまず他のボタンをクリックすると塗りの所に色が適用されるのでこのカラーコードですねここを選んでCommand もしくは Ctrl+C でコピーします。そうしたら Contact Us に戻ってSubmit のボタンを2回クリックすると直接選べます。 そうしたら塗りの部分を開けてカラーコードの所にさっきのものをペーストします。Command もしくはCtrl+V を押して Enter します。そして角丸の設定ですね。これも設定すると角丸になって他のスタイルと合致します。さらにこの文字も段落スタイルでメニューとしたうえでテキストの項目を開けてカラーを白にします。そして今下の方になっているので行送りをやってやると、このように位置を変更することができます。このような形でフォームをカスタマイズすることができました。では実際にプレビューしてみましょう。このような形ですね。クリックすると内容を入れることができます。これなんですが最終的にサーバー上に上げた時にちゃんとフォームが送れるかテストする必要があります。それを忘れずに行ってください。コンタクトフォームはページを見た人がメッセージを送りたい時に使用する大切なツールなのでぜひとも設置してください。

Muse (2015) 基本講座

WebデザインソフトMuseを使うと、HTMLのコードを使わずにデザイン性に溢れるWebページを簡単に作ることが可能です。このコースではマスターページの作成やコンテンツの追加、テキストの追加や色の設定、ウィジェットや拡張機能の活用、レスポンシブなレイアウトの設定やデータをアップロードしてウェブ上に公開する手順などMuseの操作をひと通り学ぶことができます。

4時間01分 (39 ビデオ)
現在、カスタマーレビューはありません…
 
ソフトウェア・トピック
価格: 3,990
発売日:2016年07月02日

このコースは、「オンデマンド」でご利用可能であり、ダウンロードすることもオンラインで見ることもできます。

ダウンロードすると、オフラインでコースを使用し、豊富なインターフェースをフルに活用できます。複数のデバイスを使用したり、 一度に全コースをダウンロードしたくない場合は、アカントにログインして、ストリーミング・ビデオとしてコースのレッスンを視聴してください。

ビデオトレーニングをお楽しみいただけますように! お問い合わせは、cs-jp@lynda.com宛までご連絡ください。