デザイナーのためのCreative Cloud活用術

コンタクトフォームを作成

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
ユーザーからの問い合わせ等を受け付けるコンタクトフォームを設置し、項目なフォントなどのカスタマイズを行います。
講師:
05:32

字幕

このレッスンでは、コンタクトフォームの追加について解説します。それでは、このトップページ CARNET のページですね。ここの開いてる部分にコンタクトフォームを追加してみましょう。それでは「ウィジェットライブラリ」の中に「フォーム」という項目があります。ここですね、「シンプルなコンタクト」という項目がちょっとだけあるもの、そして「詳細なコンタクト」ずらっと並んでいますね。2種類が入ってます。では「シンプルなコンタクト」の方ですね。これをドラッグ&ドロップでここに持ってきます。そうすると、この様なフォームが設置されます。名前とかメールアドレスを入れて送信できるものですね。これでサイトからのお問い合わせなんかに使えます。ではオプションの設定をします。選択していると右上に、この様な三角がでてくるのでクリックすると、こうした項目がでてきます。例えばこういう電子メールの宛先等ですね。例えばお問い合わせ先のメールアドレスですね、こういったものを入れておきます。そして「標準フィールド」という中には様々な項目、追加できるものがありますので例えば携帯電話の番号も入れてほしいという時にはこのように追加を行います。 こうやってカスタマイズできるんですが、今、追加した電話番号がメッセージより後になっていますね。ちょっとこれは格好悪いので入れ替えてみましょう。このフォームなんですが、1回クリックすると全体が選ばれるんですけど、2回クリックすると、この項目ごとに別々に扱うことができます。では、全体をもう少し下の方に持って行って、そうしたら次ですね、このメッセージの部分、これをちょっと下に持ってきて、そして電話番号をメールアドレスの下に入れましょう。今でてますけど、間の部分14px 14px と一緒になっていますね。この様に揃うと表示されるので、デザインを崩さないままで入れ替えることができます。では、メッセージの部分も改めて上に持ってきます。そして、「送信」のボタンですね。そしてもう一個あるこのホームメッセージというのは、ホームが送られた後にユーザーに表示されるメッセージです。これを選んでいる状態でこの「ステート」のパネルを見てみると、それぞれ送信がどんな状態の時にどんなメッセージが表示されるといったことも見ることもできます。では、こんな感じでフォームができて、項目が今、これ日本語版の環境で使っているので日本語になってるので、内容を打ち変えてみましょう。 クリックしていくと、この様に打ち変えができるので、これは Name とかですね。E-mail であるとか、電話ですね、Phone とか、Messageそしてこの様に項目を変えることができます。そしてこの部分もフォントを全体と統一したいので、改めてフォントの所でSource Sans Pro の Light を選びましょう。そうするとフォントが変更されて、他の部分とデザインが揃った状態となります。ではこれを「プレビュー」をクリックしてみましょう。そうすると、この様にページの上にユーザーからお問い合わせを受け付けるフォームが設置されます。このフォームなんですが、このプレビューの段階ではテストできません。何か項目を入れて送信したとしても、これは実際の Website に上げた後でないと動作しなくなっています。なので、とりあえずデザインだけ完成させておいて、最終的にユーザーが見られるようにWebsite にアップロードした後に必ずテストを行ってください。特にビジネス関連のWeb ページであればお客様からの問い合わせを受け付けるのは必須なので、是非この部分を覚えておいて下さい。

デザイナーのためのCreative Cloud活用術

Creative Cloudに備わっているさまざまなツールを使うと、デザインに関する作業をひと通り行うことができます。このコースではIllustratorによるロゴデザインやCreative Cloudを使った素材の共有、ロゴを効果的に見せるPhotoshopでの写真加工やInDesignを使った名刺デザイン、MuseでのWebサイトの構築などを解説します。

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

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

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

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