【Adobe Muse】コードを書かずにコンタクトフォームを作る

コードがよくわからない、苦手…な方でも、簡単にwebサイトが作れてしまうAdobe Muse


Museの便利な機能「ウィジェット」を実際に使用した作成例を、何回かにわけてご紹介します。


今回は「コンタクトフォームの作り方」です。


完成図2


 




 


ウィジェットから基本のフォームを作る


挿入1 挿入2


まずはここから。


パネルからウィジェットライブラリ>フォーム>「シンプルなコンタクト」を選択し、ページにドラッグ。

または、オブジェクトメニューからウィジェットを挿入>フォーム>「シンプルなコンタクト」で基本のフォームを作成します。


初期


完成!


…といきたいことろですが、あまりにもシンプルなので

ここから項目を足したり、装飾を加えていきます。


項目を増やす


フォームを選択すると表れる右上の矢印をクリックし、オプションを表示。

※museでの編集作業は、基本的にこのようにオプションを表示させて編集をして…というのを繰り返していく形になります。


項目をチェックし追加しました。


項目を追加


通常の入力欄の他にも「チェックボックス」や「画像認証」も、最近サポートされるようになりました。


「必須項目」の表示も欲しいので、項目を選択しオプションで「入力必須」「メッセージテキスト」にチェックを入れます。


入力必須


項目の並べ替え


項目の順番を変えていきます。


フォームをクリックし選択した後、編集したい項目をクリックして選択し、ドラッグして移動させます。


項目の入替


Illustrator感覚で、直接位置をドラッグで動かせます!


その他、項目のタイトルや送信ボタンの位置、各項目の間隔なども同様の手順で変更します。


フォントを変更する


テキスト部分を選択し、文字パネルから変更します。

デフォルトの明朝体からゴシック体に変更。

ここでカラーも変更します。


フォントの選択


ボックスの装飾


上部にあるステータスバーから色、線、角の編集をしていきます。


線塗り角丸


まずはボックスを角丸に。

クリックを繰り返し、ボックスのみを選択した状態で③のパネルから角の半径を変更します。

※4つの角の半径を別々に編集することも可能です。


色の変更


「入力なし」「ロールオーバー」「入力あり」「入力エラー」それぞれのステータスで、異なる表示を設定することができます。フォームエリアステート


左上のステータスバー、または右の「ステートパネル」からステータスを変更し、編集します。

※フォームのオプションで「編集を全てに適用」にデフォルトでチェックが入っていますので、項目ごとに表示を変えたい場合ははずしましょう。


完成しました


編集を繰り返して完成したのがこちらです。


完成図2


こちらで、実際に動く様子が確認できます。


基本的なフォームはこれでも十分なのですが


ラジオボタン

セレクトボックス

入力形式の指定(半角や、メールアドレスの表記など)

スマートフォン用のUI

送信内容の確認ページ


このあたりが今後サポートされると、さらにいろいろなパターンに対応できますね!


 


Museを使用されている方、これからMuseを試してみようと考えている方

そんな方の参考になれば幸いです。


コメントを残す

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