ホームページ > テクノロジー周辺機器 > IT業界 > Visual Studio Community 2015:電子メールと連絡先ページの追加

Visual Studio Community 2015:電子メールと連絡先ページの追加

Jennifer Aniston
リリース: 2025-02-20 12:58:09
オリジナル
432 人が閲覧しました

Visual Studio Community 2015:電子メールと連絡先ページの追加

キーテイクアウト

  • Visual Studio Community 2015を使用すると、ユーザーは電子メールサインアップフォーム、連絡先、およびサイトへのページについてのページを実装できます。メールサインアップフォームは、MailChimpのフォームを使用してホームページに配置できます。
  • UIは、ブートストラップを使用してフォームをフォーマットし、すべてを適切に整列させることができます。 Not-Bold、Transparent-Background、Soft-Border-RadiusなどのカスタムクラスをSite.cssで作成して、フォームの外観を変更できます。 「ありがとう」ページや「連絡先」のページなどの追加ページを作成するために、ユーザーとのやり取りを改善することができます。これらのページは、ホームページの配色とテーマに一致するように設計でき、サイト全体で一貫したユーザーエクスペリエンスを提供します。
  • この記事はMicrosoftが後援しました。 SitePointを可能にしてくれたスポンサーをサポートしてくれてありがとう。
  • MicrosoftのModern IDE:Visual Studio Community 2015を使用して、クライアント向けの魅力的で機能的なサイトを迅速に設計および構築する一連の記事にようこそ。前回の記事を逃した場合は、こちらをチェックしてください。

アンディがウェブサイトのフロントページを利用できるようになったので、彼はもう少しサイトを構築し始めることができます。これには、電子メールサインアップフォームの実装、連絡先、およびページについてです。 電子メールサインアップフォームから始めて、追加のページを作成するようになります。電子メールサインアップフォームは、ホームページの前面と中心になります。ジャンボトロンの右側に配置され、空のスペースがあります。 メールサインアップフォームの場合、MailChimpのフォームを使用します。 AndyはクライアントのMailChimpアカウントを使用しており、ホームページに既存のリストを使用します。ホームページでサインアップするすべての人がこのリストに入ります。

サインアップフォームは、次のようになるように設計されています:

MailChimpからコードを取得

>

MailChimpにログインしたら、追加するリストを選択します。 [サインアップ]フォームをクリックします。埋め込みフォームをクリックします。クラシックスタイルは大丈夫です。クライアントは、名とメールアドレスをキャプチャしたいと考えています。 MailChimpは実際にこれらをデフォルトとして持っているので、物事をそのまま残すことができます。 MailChimpの画面は次のように見えるはずです

HTMLをコピーします。これがジャンボトロンに貼り付けるものです。この線の下のジャンボトロンで:

Visual Studio Community 2015:電子メールと連絡先ページの追加MailChimpフォームコードを追加します。アプリを実行する場合、次のように見えます。

明らかに、これは私たちがそれをどのように見せたいかではありませんが、これは良い出発点です。ここから、ブートストラップを使用してフォームをフォーマットし、すべてを適切に調整します。ブートストラップを使用したサインアップフォームの変更

現在のフォーマットでは、レスポンシブデザインを失いました。サインアップフォームが右に進む間、サイトのタイトルを残す必要があります。また、同じ行にある必要があります。ブートストラップは、私たちが物事を整頓するのに役立ちます

いくつかの列を追加できます。 Jumbotronを

で、MailChimpコードをで囲みます。このフォーマットは、サイトのタイトルテキストがジャンボトロンの2/3を占めることを意味し、サインアップ形式は1/3を占めます。

あなたのコードは次のように見えるはずです:

覚えておいてください、ブートストラップは12グリッドシステムを使用しています。 8 4 = 12そして、これらの数字から2/3と1/3を取得する方法を見ることができます。 Visual Studio Community 2015:電子メールと連絡先ページの追加サイトを実行すると、2つの列があり、レスポンシブWebデザインが戻ってきます。

次に、サインアップフォームUIの研磨を開始して、サイトとより良く融合します。

ui研磨

Visual Studio Community 2015:電子メールと連絡先ページの追加多くの小さなステップを通過するのではなく、完成したMailChimpの変更がどのように見えるかを表示する方が簡単になります。その後、ステップスルーできます。現在のMailChimpコードを次のものに置き換えます

ディスカッションのためにフォームを分割するのに役立つために、コードに数行のスペースを追加しました。

作成するカスタムクラスがいくつかあります。これには、boldではない、透明な帯域群、ソフトボーダーラジウスが含まれます。これらのクラスをsite.css。

で定義します

MailChimpコードのほとんどはMailChimpからコピーしたものと同じであるため、これらのカスタムクラスで何が起こっているのかを話し合いましょう。
<span title="&">&amp;lt;p&amp;gt;&amp;lt;a class=&amp;quot;btn btn-primary btn-lg&amp;quot; href=&amp;quot;#&amp;quot; role=&amp;quot;button&amp;quot;&amp;gt;Learn more &amp;amp;raquo;&amp;lt;/a&amp;gt;&amp;lt;/p&amp;gt;</span>
ログイン後にコピー
ログイン後にコピー
ログイン後にコピー
not-boldは次のように定義されています

大胆な文字を削除するだけです。これは、フォームフィールドラベルの強調を非強調するために使用されます。 私たちの行動への呼びかけは太字です。フォームフィールドラベルも太字である場合、目はどこに焦点を合わせるかを少し把握するのに少し苦労します。さらに悪いケースシナリオ:人々は単に私たちのサインアップフォームをあきらめてバイパスします。

以下のスクリーンショットは、.not-bold

の使用を示しています

透明バックグラウンドは、フォームのバックグラウンドと入力フィールドに半透明性を提供し、デザインにもう少し深みを帯びます。次のように定義されています

rgbaは、単に赤、緑、青、アルファを意味します。アルファは不透明度を設定します。この値が低いほど、透明性が高くなります。値は0〜1の範囲です
<span title="&">&amp;lt;!-- Begin MailChimp Signup Form --&amp;gt;
</span><span title="&">&amp;lt;link href=&amp;quot;//cdn-images.mailchimp.com/embedcode/classic-081711.css&amp;quot; rel=&amp;quot;stylesheet&amp;quot; type=&amp;quot;text/css&amp;quot;&amp;gt;
</span><span title="&">&amp;lt;div id=&amp;quot;mc_embed_signup&amp;quot; class=&amp;quot;transparent-background soft-border-radius&amp;quot;&amp;gt;
</span><span title="&">&amp;lt;form action=&amp;quot;#&amp;quot; method=&amp;quot;post&amp;quot; id=&amp;quot;mc-embedded-subscribe-form&amp;quot; name=&amp;quot;mc-embedded-subscribe-form&amp;quot; class=&amp;quot;validate&amp;quot; target=&amp;quot;_blank&amp;quot; novalidate&amp;gt;
</span>  <span title="&">&amp;lt;div id=&amp;quot;mc_embed_signup_scroll&amp;quot;&amp;gt;
</span>  <span title="&">&amp;lt;h3&amp;gt;Enter your name and email for&amp;lt;br /&amp;gt; your first FREE lesson!&amp;lt;/h3&amp;gt;
</span>
  <span title="&">&amp;lt;div class=&amp;quot;mc-field-group&amp;quot;&amp;gt;
</span>  <span title="&">&amp;lt;label for=&amp;quot;mce-FNAME&amp;quot; class=&amp;quot;not-bold&amp;quot;&amp;gt;First Name &amp;lt;/label&amp;gt;
</span>  <span title="&">&amp;lt;input type=&amp;quot;text&amp;quot; value=&amp;quot;&amp;quot; name=&amp;quot;FNAME&amp;quot; class=&amp;quot;transparent-background soft-border-radius&amp;quot; id=&amp;quot;mce-FNAME&amp;quot;&amp;gt;
</span>  <span title="&">&amp;lt;/div&amp;gt;
</span>  <span title="&">&amp;lt;div class=&amp;quot;mc-field-group&amp;quot;&amp;gt;
</span>  <span title="&">&amp;lt;label for=&amp;quot;mce-EMAIL&amp;quot; class=&amp;quot;not-bold&amp;quot;&amp;gt;Email &amp;lt;/label&amp;gt;
</span>  <span title="&">&amp;lt;input type=&amp;quot;email&amp;quot; value=&amp;quot;&amp;quot; name=&amp;quot;EMAIL&amp;quot; class=&amp;quot;required email transparent-background soft-border-radius&amp;quot; id=&amp;quot;mce-EMAIL&amp;quot;&amp;gt;
</span>  <span title="&">&amp;lt;/div&amp;gt;
</span>

  <span title="&">&amp;lt;div id=&amp;quot;mce-responses&amp;quot; class=&amp;quot;clear&amp;quot;&amp;gt;
</span>  <span title="&">&amp;lt;div class=&amp;quot;response&amp;quot; id=&amp;quot;mce-error-response&amp;quot; style=&amp;quot;display:none&amp;quot;&amp;gt;&amp;lt;/div&amp;gt;
</span>  <span title="&">&amp;lt;div class=&amp;quot;response&amp;quot; id=&amp;quot;mce-success-response&amp;quot; style=&amp;quot;display:none&amp;quot;&amp;gt;&amp;lt;/div&amp;gt;
</span>  <span title="&">&amp;lt;/div&amp;gt;    
</span>  <span title="&">&amp;lt;!-- real people should not fill this in and expect good things - do not remove this or risk form bot signups--&amp;gt;
</span>  <span title="&">&amp;lt;div style=&amp;quot;position: absolute; left: -5000px;&amp;quot;&amp;gt;&amp;lt;input type=&amp;quot;text&amp;quot; name=&amp;quot;b_f27f671242f9376d66eb9034e_a5f924c1e8&amp;quot; tabindex=&amp;quot;-1&amp;quot; value=&amp;quot;&amp;quot;&amp;gt;&amp;lt;/div&amp;gt;
</span>
  <span title="&">&amp;lt;input type=&amp;quot;submit&amp;quot; class=&amp;quot;btn btn-primary btn-lg&amp;quot; value=&amp;quot;Subscribe&amp;quot; name=&amp;quot;subscribe&amp;quot; /&amp;gt;
</span>
  <span title="&">&amp;lt;/div&amp;gt;
</span>  <span title="&">&amp;lt;/form&amp;gt;
</span><span title="&">&amp;lt;/div&amp;gt;
</span><span title="&">&amp;lt;!--End mc_embed_signup--&amp;gt;</span>
ログイン後にコピー
ログイン後にコピー
ログイン後にコピー
Soft-Border-Radiusは、フォームと入力フィールドに丸みを帯びた角で少しエレガントなディテールを表現します。このクラスは、次のように定義されています

最後に、全幅の青色のボタンがあります。 .max-widthはここで私たちを助けます。青は素晴らしいコントラストを提供し、目を右にもたらすだけでなく、大きいサイズがクリックするのに魅力的になります。 .max-widthは次のように定義されています
<span title="&">&amp;lt;p&amp;gt;&amp;lt;a class=&amp;quot;btn btn-primary btn-lg&amp;quot; href=&amp;quot;#&amp;quot; role=&amp;quot;button&amp;quot;&amp;gt;Learn more &amp;amp;raquo;&amp;lt;/a&amp;gt;&amp;lt;/p&amp;gt;</span>
ログイン後にコピー
ログイン後にコピー
ログイン後にコピー
上記のクラスをsite.cssに追加し、上記のフォームコードで貼り付けて、上記と同じサインアップ形式になるはずです。

>

ありがとうページ

ユーザーがサインアップすると、すべてがうまくいったことを知らせるための確認ページを提供するのは通常素晴らしいことです。非常に想像力に欠けていないありがとうページに迎えられるためだけに、誰かのリストに何回登録しましたか?

アンディは、彼のクライアントが真のアーティストであり、余分な距離を作りたいと思っています。これは、Stock You Pageを使用してスキップしないことを意味します。ただし、ホームページの同じ配色とテーマを使用することにより、物事を一貫性を保ちます。

ありがとうページを作成するには、Open Controllers/homeController.csを作成します。以下を追加します:

これはMVCアプリであるため、誰かが /home /thankyouに入力すると、上記の方法にヒットします。もちろん、これはクライアントのメールリストにサインアップすることからの確認として作成されるため、誰もが感謝のページに入力することを期待していません。
<span title="&">&amp;lt;!-- Begin MailChimp Signup Form --&amp;gt;
</span><span title="&">&amp;lt;link href=&amp;quot;//cdn-images.mailchimp.com/embedcode/classic-081711.css&amp;quot; rel=&amp;quot;stylesheet&amp;quot; type=&amp;quot;text/css&amp;quot;&amp;gt;
</span><span title="&">&amp;lt;div id=&amp;quot;mc_embed_signup&amp;quot; class=&amp;quot;transparent-background soft-border-radius&amp;quot;&amp;gt;
</span><span title="&">&amp;lt;form action=&amp;quot;#&amp;quot; method=&amp;quot;post&amp;quot; id=&amp;quot;mc-embedded-subscribe-form&amp;quot; name=&amp;quot;mc-embedded-subscribe-form&amp;quot; class=&amp;quot;validate&amp;quot; target=&amp;quot;_blank&amp;quot; novalidate&amp;gt;
</span>  <span title="&">&amp;lt;div id=&amp;quot;mc_embed_signup_scroll&amp;quot;&amp;gt;
</span>  <span title="&">&amp;lt;h3&amp;gt;Enter your name and email for&amp;lt;br /&amp;gt; your first FREE lesson!&amp;lt;/h3&amp;gt;
</span>
  <span title="&">&amp;lt;div class=&amp;quot;mc-field-group&amp;quot;&amp;gt;
</span>  <span title="&">&amp;lt;label for=&amp;quot;mce-FNAME&amp;quot; class=&amp;quot;not-bold&amp;quot;&amp;gt;First Name &amp;lt;/label&amp;gt;
</span>  <span title="&">&amp;lt;input type=&amp;quot;text&amp;quot; value=&amp;quot;&amp;quot; name=&amp;quot;FNAME&amp;quot; class=&amp;quot;transparent-background soft-border-radius&amp;quot; id=&amp;quot;mce-FNAME&amp;quot;&amp;gt;
</span>  <span title="&">&amp;lt;/div&amp;gt;
</span>  <span title="&">&amp;lt;div class=&amp;quot;mc-field-group&amp;quot;&amp;gt;
</span>  <span title="&">&amp;lt;label for=&amp;quot;mce-EMAIL&amp;quot; class=&amp;quot;not-bold&amp;quot;&amp;gt;Email &amp;lt;/label&amp;gt;
</span>  <span title="&">&amp;lt;input type=&amp;quot;email&amp;quot; value=&amp;quot;&amp;quot; name=&amp;quot;EMAIL&amp;quot; class=&amp;quot;required email transparent-background soft-border-radius&amp;quot; id=&amp;quot;mce-EMAIL&amp;quot;&amp;gt;
</span>  <span title="&">&amp;lt;/div&amp;gt;
</span>

  <span title="&">&amp;lt;div id=&amp;quot;mce-responses&amp;quot; class=&amp;quot;clear&amp;quot;&amp;gt;
</span>  <span title="&">&amp;lt;div class=&amp;quot;response&amp;quot; id=&amp;quot;mce-error-response&amp;quot; style=&amp;quot;display:none&amp;quot;&amp;gt;&amp;lt;/div&amp;gt;
</span>  <span title="&">&amp;lt;div class=&amp;quot;response&amp;quot; id=&amp;quot;mce-success-response&amp;quot; style=&amp;quot;display:none&amp;quot;&amp;gt;&amp;lt;/div&amp;gt;
</span>  <span title="&">&amp;lt;/div&amp;gt;    
</span>  <span title="&">&amp;lt;!-- real people should not fill this in and expect good things - do not remove this or risk form bot signups--&amp;gt;
</span>  <span title="&">&amp;lt;div style=&amp;quot;position: absolute; left: -5000px;&amp;quot;&amp;gt;&amp;lt;input type=&amp;quot;text&amp;quot; name=&amp;quot;b_f27f671242f9376d66eb9034e_a5f924c1e8&amp;quot; tabindex=&amp;quot;-1&amp;quot; value=&amp;quot;&amp;quot;&amp;gt;&amp;lt;/div&amp;gt;
</span>
  <span title="&">&amp;lt;input type=&amp;quot;submit&amp;quot; class=&amp;quot;btn btn-primary btn-lg&amp;quot; value=&amp;quot;Subscribe&amp;quot; name=&amp;quot;subscribe&amp;quot; /&amp;gt;
</span>
  <span title="&">&amp;lt;/div&amp;gt;
</span>  <span title="&">&amp;lt;/form&amp;gt;
</span><span title="&">&amp;lt;/div&amp;gt;
</span><span title="&">&amp;lt;!--End mc_embed_signup--&amp;gt;</span>
ログイン後にコピー
ログイン後にコピー
ログイン後にコピー
この方法を提供するには、ビューが必要です。ビュー/ホームフォルダーを開き、contact.cshtmlのコピーを作成します。コピーされたファイルの名前をnyntyou.cshtmlに変更します。

私たちのありがとうページは基本的にホームページのジャンボトロンになります。 Thankyou.cshtmlのコードをクリアし、上部にViewBagコードのみを残します。以下に貼り付けます:

連絡先ページのコピーを作成すると、既存のページ構造を最大限に活用できます。何もする必要なく、おなじみのナビゲーションとフッターがあります。

おそらく、クラスのジャンボトロントールに気づいたでしょう。これは新しいクラスであり、感謝のページに余分な高さを追加します。それ以外の場合は、トップを横切ってかなり短いストリップが走ることになります。それほど印象的ではなかったでしょう。
<span><span>.not-bold</span> {
</span>    <span>font-weight:normal;
</span><span>}</span>
ログイン後にコピー
ログイン後にコピー

大きな画像は見栄えが良く、アーティスト(クライアント)に追加の放送時間を与えます。

Jumbotron-tallは次のように定義されています

あなたの最後のありがとうページは次のようになります:

ページに連絡します

<span><span>.transparent-background</span> {
</span>   <span>background-color: <span>rgba(0, 0, 0, 0.25)</span>
</span><span>}</span>
ログイン後にコピー
ログイン後にコピー
潜在的な顧客に、彼のサイトを通じてクライアントに直接連絡する機会を与えたいと考えています。これは、連絡先ページが来る場所です。上記のように基本アウトラインに従って、連絡先ページを作成します。私たちの最終ページは次のようになります:

Visual Studio Community 2015:電子メールと連絡先ページの追加ビュー/ホームを開くと、contact.cshtmlが既にあることに気付くでしょう。先ほど感謝したページで行ったように、Top ViewBagコード以外のすべてをクリアしてください。もう一度Jumbotronを使用します。右側が空になることを除いて、前と同様に2つの列を使用します。これにより、連絡先フォームが左にさらに調整できます。

ホームページにも影響を与える新しいCSSクラスがいくつかあります。最初のクラスは次のとおりです
<span title="&">&amp;lt;p&amp;gt;&amp;lt;a class=&amp;quot;btn btn-primary btn-lg&amp;quot; href=&amp;quot;#&amp;quot; role=&amp;quot;button&amp;quot;&amp;gt;Learn more &amp;amp;raquo;&amp;lt;/a&amp;gt;&amp;lt;/p&amp;gt;</span>
ログイン後にコピー
ログイン後にコピー
ログイン後にコピー

これは、フォームの下部にある青いボタン用に特別です。このクラスを追加すると、より広いボタンが作成され、ボタンの上部とコメントボックスの下部の間に小さなスペースが追加されます。このクラスをホームページボタンに適用することもできます。

次は、既存のクラスの変更です:

このフォームの場合、MailChimpフォームコードに似た構造を使用します。しかし、サインアップフォームを使用していないため、MailChimpのCSSを使用することはありません。
<span title="&">&amp;lt;!-- Begin MailChimp Signup Form --&amp;gt;
</span><span title="&">&amp;lt;link href=&amp;quot;//cdn-images.mailchimp.com/embedcode/classic-081711.css&amp;quot; rel=&amp;quot;stylesheet&amp;quot; type=&amp;quot;text/css&amp;quot;&amp;gt;
</span><span title="&">&amp;lt;div id=&amp;quot;mc_embed_signup&amp;quot; class=&amp;quot;transparent-background soft-border-radius&amp;quot;&amp;gt;
</span><span title="&">&amp;lt;form action=&amp;quot;#&amp;quot; method=&amp;quot;post&amp;quot; id=&amp;quot;mc-embedded-subscribe-form&amp;quot; name=&amp;quot;mc-embedded-subscribe-form&amp;quot; class=&amp;quot;validate&amp;quot; target=&amp;quot;_blank&amp;quot; novalidate&amp;gt;
</span>  <span title="&">&amp;lt;div id=&amp;quot;mc_embed_signup_scroll&amp;quot;&amp;gt;
</span>  <span title="&">&amp;lt;h3&amp;gt;Enter your name and email for&amp;lt;br /&amp;gt; your first FREE lesson!&amp;lt;/h3&amp;gt;
</span>
  <span title="&">&amp;lt;div class=&amp;quot;mc-field-group&amp;quot;&amp;gt;
</span>  <span title="&">&amp;lt;label for=&amp;quot;mce-FNAME&amp;quot; class=&amp;quot;not-bold&amp;quot;&amp;gt;First Name &amp;lt;/label&amp;gt;
</span>  <span title="&">&amp;lt;input type=&amp;quot;text&amp;quot; value=&amp;quot;&amp;quot; name=&amp;quot;FNAME&amp;quot; class=&amp;quot;transparent-background soft-border-radius&amp;quot; id=&amp;quot;mce-FNAME&amp;quot;&amp;gt;
</span>  <span title="&">&amp;lt;/div&amp;gt;
</span>  <span title="&">&amp;lt;div class=&amp;quot;mc-field-group&amp;quot;&amp;gt;
</span>  <span title="&">&amp;lt;label for=&amp;quot;mce-EMAIL&amp;quot; class=&amp;quot;not-bold&amp;quot;&amp;gt;Email &amp;lt;/label&amp;gt;
</span>  <span title="&">&amp;lt;input type=&amp;quot;email&amp;quot; value=&amp;quot;&amp;quot; name=&amp;quot;EMAIL&amp;quot; class=&amp;quot;required email transparent-background soft-border-radius&amp;quot; id=&amp;quot;mce-EMAIL&amp;quot;&amp;gt;
</span>  <span title="&">&amp;lt;/div&amp;gt;
</span>

  <span title="&">&amp;lt;div id=&amp;quot;mce-responses&amp;quot; class=&amp;quot;clear&amp;quot;&amp;gt;
</span>  <span title="&">&amp;lt;div class=&amp;quot;response&amp;quot; id=&amp;quot;mce-error-response&amp;quot; style=&amp;quot;display:none&amp;quot;&amp;gt;&amp;lt;/div&amp;gt;
</span>  <span title="&">&amp;lt;div class=&amp;quot;response&amp;quot; id=&amp;quot;mce-success-response&amp;quot; style=&amp;quot;display:none&amp;quot;&amp;gt;&amp;lt;/div&amp;gt;
</span>  <span title="&">&amp;lt;/div&amp;gt;    
</span>  <span title="&">&amp;lt;!-- real people should not fill this in and expect good things - do not remove this or risk form bot signups--&amp;gt;
</span>  <span title="&">&amp;lt;div style=&amp;quot;position: absolute; left: -5000px;&amp;quot;&amp;gt;&amp;lt;input type=&amp;quot;text&amp;quot; name=&amp;quot;b_f27f671242f9376d66eb9034e_a5f924c1e8&amp;quot; tabindex=&amp;quot;-1&amp;quot; value=&amp;quot;&amp;quot;&amp;gt;&amp;lt;/div&amp;gt;
</span>
  <span title="&">&amp;lt;input type=&amp;quot;submit&amp;quot; class=&amp;quot;btn btn-primary btn-lg&amp;quot; value=&amp;quot;Subscribe&amp;quot; name=&amp;quot;subscribe&amp;quot; /&amp;gt;
</span>
  <span title="&">&amp;lt;/div&amp;gt;
</span>  <span title="&">&amp;lt;/form&amp;gt;
</span><span title="&">&amp;lt;/div&amp;gt;
</span><span title="&">&amp;lt;!--End mc_embed_signup--&amp;gt;</span>
ログイン後にコピー
ログイン後にコピー
ログイン後にコピー
MailChimp CSSが提供したことの1つは、入力フィールドの周りの暗い境界線でした。それは今消えています。補償するために、ソフトボーダーラジウス内に境界線を追加していますが、これは同じ効果があります。

連絡先フォームに、コメントTextareaボックスを追加しました。このボックスにはスクロールバーがありますが、デフォルトではかなり白くなります。この明るい色は、私たちの暗い色と大きなコントラストを生み出します。スクロールバーがより良く溶け込むのを助けるには、Textareaを変更する必要があります。

FFFAD5の色に注目してください。これにより、コメントフィールドテキストが黒から明るい黄色に変更されます。入力フィールドについても同じことをしています:

上記のすべてのCSSクラスはすべてsite.css。

に移動します
<span><span>.not-bold</span> {
</span>    <span>font-weight:normal;
</span><span>}</span>
ログイン後にコピー
ログイン後にコピー
フォームコードに進むことができます。

<span><span>.transparent-background</span> {
</span>   <span>background-color: <span>rgba(0, 0, 0, 0.25)</span>
</span><span>}</span>
ログイン後にコピー
ログイン後にコピー
MailChimpフォームとの類似点に気付くかもしれません。これは実際にはそのフォームの変更されたバージョンです。連絡先フォームは、左列にあります。これはcol-MD-8幅です。右の列はCOL-MD-4であるため、これにより2/3幅の列が作成されます。覚えておいてください、8 4 = 12、これはブートストラップで12列グリッドを構成する列の数です。

要約

Andyのクライアントには、サインアップを引き付けることができる素晴らしい見た目のサインアップフォームがあります。彼はまた、サイトの全体的なテーマとよく溶け込む連絡フォームを追加しました。この時点で、アンディのクライアントは素晴らしいスタートを切っています。

次に来ると、顧客がレッスンを購入する方法を追加します。 Andyのクライアントは、モバイルが現在Webの大部分であることを認識しています。彼は、モバイルサイトが優れたユーザーエクスペリエンスを提供するようにしたいと考えています。これの一部は、新しいレッスンが利用可能になったら通知を送信することです。
<span><span>.soft-border-radius</span> {
</span>  <span>border-radius: 10px;
</span><span>}</span>
ログイン後にコピー
Andyには、Webサイト用に構築するエキサイティングな機能がいくつかあります。私たちは、すべてが一緒になっている間、彼の肩越しに続き続けます。

以上がVisual Studio Community 2015:電子メールと連絡先ページの追加の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
著者別の最新記事
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート