コンタクトフォームの設置から色変更まで簡単操作で完了! - Adobe Muse体験記(11) (1) コンタクトフォームの設置
■これまでの記事
【レポート】駆け出しクリエイター、"コードを書かない"Webサイト作りに体当たりで挑戦! - Adobe Muse体験記(1)
【レポート】4ステップでWebサイトが完成! 駆け出しクリエイターがコードを書かないWeb制作の概要を解説 - Adobe Muse体験(2)
【レポート】Webサイトの構成がボタンひとつで完成! 自分のサイトの「プラン」を作る - Adobe Muse体験記(3)
【レポート】コード記述不要の直感的な操作! Webサイトにアイコンをレイアウトする - Adobe Muse体験記(4)
【レポート】カンタン操作でpsdファイルをそのままレイアウト! Webサイトに画像を配置する - Adobe Muse体験記(5)
【レポート】ページ間リンクからパブリッシュまでサクサク進行! サイトの形を整えてみた - Adobe Muse体験記(6)
【レポート】色指定はスポイトツールで! Webサイトを"絵"のようにデザインする - Adobe Muse体験記(7)
【レポート】写真やイラストを魅力的に見せる「Lightbox」をコードを書かずにラクラク設置! - Adobe Muse体験記(8)
【レポート】マウスオーバーの効果も手軽に設定! 画像をキレイに見せる「Lightbox」を設置する - Adobe Muse体験記(9)
【レポート】GoogleマップやTwitterボタンが約5分で設置可能!各種ウィジェットを手軽に導入する - Adobe Muse体験記(10)
仕事の新規依頼の問い合わせ窓口として、または作品を見てくれた人からのメッセージを受け取る場として、ポートフォリオサイトに欠かせないのがコンタクトフォームだ。Museなら、プラグインやPHPプログラムといった知識がない初心者でも、ワンタッチでコンタクトフォームが設置できるという。筆者のポートフォリオサイトも、あとはコンタクトページを作成すれば一通り完成といったところまで来ている。今回はコンタクトフォームの設置に挑戦し、その様子を紹介したいと思う。
○コンタクトフォームを設置する
Museのコンタクトフォームは、Adobeの運営するホスティングサービス「Business Catalyst」を通じてサイトを公開している場合に利用できるサービスとなっている。他のホスティングサービスを介する場合は使用できないので、まずその点だけは注意しよう。
まずは前準備として、プランページでコンタクトフォーム設置用のページを用意しておく。新規作成したページに「contact」と名前をつけ、既に用意されているBマスターのデザインを適用した。用意ができたら、早速ページアイコンをクリックして詳細のデザイン画面へと進む。
コンタクトフォームを設置するには、画面右側に表示されている「ウィジェットライブラリ」をクリックする。その中に「フォーム」というメニューがあるので、そこから「シンプルなコンタクト」「詳細なコンタクト」のいずれかを選び、画面上へとドラッグ&ドロップする。
ドロップすると、画面中央にコンタクトフォームが現れるので、「整列パネル」などで位置を調整する。ここまでの操作手順は、前回紹介したGoogleマップウィジェットの設置方法と同じである。
先ほど、「シンプルなコンタクト」と「詳細なコンタクト」の2種があると触れたが、これはフォームの内容の違いになってくる。
「シンプルなコンタクト」は個人ホームページ向け、そして「詳細なコンタクト」はどちらかというとビジネス向けの仕様になっている。今回は個人のポートフォリオサイトであるため、「シンプルなコンタクト」を選択した。
●コンタクトフォームのカラー変更も!
○コンタクトフォームを編集する
コンタクトフォームで表示されている文章部分は、テキストをクリックすることで自由に編集できるようになっている。例えばここでは、デフォルトでは「名前」「電子メールアドレス」となっていた部分を「Name」「E-mail」と変更してみた。
また、フォーマットの設定もオプション画面でカスタマイズが可能だ。フォームを送信した際に情報を受け取るメールアドレスや、送信後にどのページにリンクを飛ばすかなどの設定ができる。
オプション画面では、「BC CAPTCHA」（セキュリティ用の画像認証）もワンタッチで設置できるようになっていて驚いた。このような高度な機能も手軽に利用できるのがMuseの強みである。
○ステータスメッセージを編集する
次に、ステータスごとのフォームの見え方をカスタマイズしていく。画面上部にあるステータスバーをクリックすると、コンタクトフォームの状態を「通常」、「送信を実行中」、「送信成功」、「送信エラー」の4つの状態ごとに切り替えて表示できるのだ。
ここで、フォーム送信中に表示されるメッセージや、送信に失敗した場合に出るアラートの内容を編集することができる。筆者の場合は、エラーが起きた場合は直接メールアドレスに送信してもらえるよう、アドレスを入力してメッセージを編集してみた。
○フォームの色を変更する
コンタクトフォームも、ページ全体のデザインに合わせてお洒落にカスタマイズしたいと思う人は多いはずだ。そのような、デザインにこだわる人にとって、Museは最も力になってくれるWeb制作ツールだ。Museでは、IllustratorやPhotoshopのようにオブジェクトの塗りと線の色をツールパレットで設定することができる。
操作は、欄を1段だけクリックで選択し、右側にある塗りパネルで色を選ぶだけ。
このとき、コンタクトフォームのオプションで「編集をすべてに適用」を選択しておくと、1段の色を変えたものが他の2段にも同様に適用されるので手間が省ける。逆に、フォームを一段ずつ違う色に設定したい場合は、このチェックボックスをオフにしておけばよい。
また、この色設定に関しても、「入力なし」、「入力あり」、「ロールオーバー」、「フォーカス」、「エラー」の5種のステータスごとに、細かに指定することができるようになっている。例えば、記入漏れがあった場合にエラーであることが一目で分かるよう赤い枠線に変更したり、記入中は文字が見やすいよう白バックに設定したりといったことが可能なのだ。デザインモードで設定をしたら、プレビューモードに切り替えてテストをしてみよう。ステータスごとに実際に正しく色指示ができているかをチェックすることができる。
以上でコンタクトフォームの作成が完了した。上部に案内のメッセージ文を付け足して、このようなページに仕上がった。
このフォームは、テストページでも実際に見ることができる。
他のウィジェットツールと同様の操作方法で設置ができるため、迷う部分もなく、かなりスムーズに作業ができた。見た目のカスタマイズの自由度も高く優れているので、ホスティングにBusiness Catalystを使用する場合は、ぜひこのコンタクトフォームを活かしてみてほしい。
これで筆者のポートフォリオサイトは、一通りの内容を完成させることができた。全くの素人としてスタートしたMuseでのWebサイト作成だったが、その使い勝手のよさについては、操作するたびに驚かされていた気がする。ここでPC用のサイトは完成となるが、まだまだMuseを使ってやってみたいことは尽きない。
次回は、このサイトをモバイル向けページに変更することにチャレンジしてみたいと思う。マイペースな体験記ではあるが、もう少しお付き合い頂けたらと思う。
この記事もおすすめ
提供：
