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をコピーします。これがジャンボトロンに貼り付けるものです。この線の下のジャンボトロンで:

明らかに、これは私たちがそれをどのように見せたいかではありませんが、これは良い出発点です。ここから、ブートストラップを使用してフォームをフォーマットし、すべてを適切に調整します。ブートストラップを使用したサインアップフォームの変更
現在のフォーマットでは、レスポンシブデザインを失いました。サインアップフォームが右に進む間、サイトのタイトルを残す必要があります。また、同じ行にある必要があります。ブートストラップは、私たちが物事を整頓するのに役立ちます
いくつかの列を追加できます。 Jumbotronを
で、MailChimpコードをで囲みます。このフォーマットは、サイトのタイトルテキストがジャンボトロンの2/3を占めることを意味し、サインアップ形式は1/3を占めます。
あなたのコードは次のように見えるはずです:
覚えておいてください、ブートストラップは12グリッドシステムを使用しています。 8 4 = 12そして、これらの数字から2/3と1/3を取得する方法を見ることができます。

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

ディスカッションのためにフォームを分割するのに役立つために、コードに数行のスペースを追加しました。
作成するカスタムクラスがいくつかあります。これには、boldではない、透明な帯域群、ソフトボーダーラジウスが含まれます。これらのクラスをsite.css。
で定義します
MailChimpコードのほとんどはMailChimpからコピーしたものと同じであるため、これらのカスタムクラスで何が起こっているのかを話し合いましょう。<span title="&">&lt;p&gt;&lt;a class=&quot;btn btn-primary btn-lg&quot; href=&quot;#&quot; role=&quot;button&quot;&gt;Learn more &amp;raquo;&lt;/a&gt;&lt;/p&gt;</span>
大胆な文字を削除するだけです。これは、フォームフィールドラベルの強調を非強調するために使用されます。 私たちの行動への呼びかけは太字です。フォームフィールドラベルも太字である場合、目はどこに焦点を合わせるかを少し把握するのに少し苦労します。さらに悪いケースシナリオ:人々は単に私たちのサインアップフォームをあきらめてバイパスします。
以下のスクリーンショットは、.not-bold
の使用を示しています透明バックグラウンドは、フォームのバックグラウンドと入力フィールドに半透明性を提供し、デザインにもう少し深みを帯びます。次のように定義されています
rgbaは、単に赤、緑、青、アルファを意味します。アルファは不透明度を設定します。この値が低いほど、透明性が高くなります。値は0〜1の範囲です
<span title="&">&lt;!-- Begin MailChimp Signup Form --&gt; </span><span title="&">&lt;link href=&quot;//cdn-images.mailchimp.com/embedcode/classic-081711.css&quot; rel=&quot;stylesheet&quot; type=&quot;text/css&quot;&gt; </span><span title="&">&lt;div id=&quot;mc_embed_signup&quot; class=&quot;transparent-background soft-border-radius&quot;&gt; </span><span title="&">&lt;form action=&quot;#&quot; method=&quot;post&quot; id=&quot;mc-embedded-subscribe-form&quot; name=&quot;mc-embedded-subscribe-form&quot; class=&quot;validate&quot; target=&quot;_blank&quot; novalidate&gt; </span> <span title="&">&lt;div id=&quot;mc_embed_signup_scroll&quot;&gt; </span> <span title="&">&lt;h3&gt;Enter your name and email for&lt;br /&gt; your first FREE lesson!&lt;/h3&gt; </span> <span title="&">&lt;div class=&quot;mc-field-group&quot;&gt; </span> <span title="&">&lt;label for=&quot;mce-FNAME&quot; class=&quot;not-bold&quot;&gt;First Name &lt;/label&gt; </span> <span title="&">&lt;input type=&quot;text&quot; value=&quot;&quot; name=&quot;FNAME&quot; class=&quot;transparent-background soft-border-radius&quot; id=&quot;mce-FNAME&quot;&gt; </span> <span title="&">&lt;/div&gt; </span> <span title="&">&lt;div class=&quot;mc-field-group&quot;&gt; </span> <span title="&">&lt;label for=&quot;mce-EMAIL&quot; class=&quot;not-bold&quot;&gt;Email &lt;/label&gt; </span> <span title="&">&lt;input type=&quot;email&quot; value=&quot;&quot; name=&quot;EMAIL&quot; class=&quot;required email transparent-background soft-border-radius&quot; id=&quot;mce-EMAIL&quot;&gt; </span> <span title="&">&lt;/div&gt; </span> <span title="&">&lt;div id=&quot;mce-responses&quot; class=&quot;clear&quot;&gt; </span> <span title="&">&lt;div class=&quot;response&quot; id=&quot;mce-error-response&quot; style=&quot;display:none&quot;&gt;&lt;/div&gt; </span> <span title="&">&lt;div class=&quot;response&quot; id=&quot;mce-success-response&quot; style=&quot;display:none&quot;&gt;&lt;/div&gt; </span> <span title="&">&lt;/div&gt; </span> <span title="&">&lt;!-- real people should not fill this in and expect good things - do not remove this or risk form bot signups--&gt; </span> <span title="&">&lt;div style=&quot;position: absolute; left: -5000px;&quot;&gt;&lt;input type=&quot;text&quot; name=&quot;b_f27f671242f9376d66eb9034e_a5f924c1e8&quot; tabindex=&quot;-1&quot; value=&quot;&quot;&gt;&lt;/div&gt; </span> <span title="&">&lt;input type=&quot;submit&quot; class=&quot;btn btn-primary btn-lg&quot; value=&quot;Subscribe&quot; name=&quot;subscribe&quot; /&gt; </span> <span title="&">&lt;/div&gt; </span> <span title="&">&lt;/form&gt; </span><span title="&">&lt;/div&gt; </span><span title="&">&lt;!--End mc_embed_signup--&gt;</span>
最後に、全幅の青色のボタンがあります。 .max-widthはここで私たちを助けます。青は素晴らしいコントラストを提供し、目を右にもたらすだけでなく、大きいサイズがクリックするのに魅力的になります。 .max-widthは次のように定義されています
<span title="&">&lt;p&gt;&lt;a class=&quot;btn btn-primary btn-lg&quot; href=&quot;#&quot; role=&quot;button&quot;&gt;Learn more &amp;raquo;&lt;/a&gt;&lt;/p&gt;</span>
>
ありがとうページユーザーがサインアップすると、すべてがうまくいったことを知らせるための確認ページを提供するのは通常素晴らしいことです。非常に想像力に欠けていないありがとうページに迎えられるためだけに、誰かのリストに何回登録しましたか?
アンディは、彼のクライアントが真のアーティストであり、余分な距離を作りたいと思っています。これは、Stock You Pageを使用してスキップしないことを意味します。ただし、ホームページの同じ配色とテーマを使用することにより、物事を一貫性を保ちます。
ありがとうページを作成するには、Open Controllers/homeController.csを作成します。以下を追加します:
これはMVCアプリであるため、誰かが /home /thankyouに入力すると、上記の方法にヒットします。もちろん、これはクライアントのメールリストにサインアップすることからの確認として作成されるため、誰もが感謝のページに入力することを期待していません。
<span title="&">&lt;!-- Begin MailChimp Signup Form --&gt; </span><span title="&">&lt;link href=&quot;//cdn-images.mailchimp.com/embedcode/classic-081711.css&quot; rel=&quot;stylesheet&quot; type=&quot;text/css&quot;&gt; </span><span title="&">&lt;div id=&quot;mc_embed_signup&quot; class=&quot;transparent-background soft-border-radius&quot;&gt; </span><span title="&">&lt;form action=&quot;#&quot; method=&quot;post&quot; id=&quot;mc-embedded-subscribe-form&quot; name=&quot;mc-embedded-subscribe-form&quot; class=&quot;validate&quot; target=&quot;_blank&quot; novalidate&gt; </span> <span title="&">&lt;div id=&quot;mc_embed_signup_scroll&quot;&gt; </span> <span title="&">&lt;h3&gt;Enter your name and email for&lt;br /&gt; your first FREE lesson!&lt;/h3&gt; </span> <span title="&">&lt;div class=&quot;mc-field-group&quot;&gt; </span> <span title="&">&lt;label for=&quot;mce-FNAME&quot; class=&quot;not-bold&quot;&gt;First Name &lt;/label&gt; </span> <span title="&">&lt;input type=&quot;text&quot; value=&quot;&quot; name=&quot;FNAME&quot; class=&quot;transparent-background soft-border-radius&quot; id=&quot;mce-FNAME&quot;&gt; </span> <span title="&">&lt;/div&gt; </span> <span title="&">&lt;div class=&quot;mc-field-group&quot;&gt; </span> <span title="&">&lt;label for=&quot;mce-EMAIL&quot; class=&quot;not-bold&quot;&gt;Email &lt;/label&gt; </span> <span title="&">&lt;input type=&quot;email&quot; value=&quot;&quot; name=&quot;EMAIL&quot; class=&quot;required email transparent-background soft-border-radius&quot; id=&quot;mce-EMAIL&quot;&gt; </span> <span title="&">&lt;/div&gt; </span> <span title="&">&lt;div id=&quot;mce-responses&quot; class=&quot;clear&quot;&gt; </span> <span title="&">&lt;div class=&quot;response&quot; id=&quot;mce-error-response&quot; style=&quot;display:none&quot;&gt;&lt;/div&gt; </span> <span title="&">&lt;div class=&quot;response&quot; id=&quot;mce-success-response&quot; style=&quot;display:none&quot;&gt;&lt;/div&gt; </span> <span title="&">&lt;/div&gt; </span> <span title="&">&lt;!-- real people should not fill this in and expect good things - do not remove this or risk form bot signups--&gt; </span> <span title="&">&lt;div style=&quot;position: absolute; left: -5000px;&quot;&gt;&lt;input type=&quot;text&quot; name=&quot;b_f27f671242f9376d66eb9034e_a5f924c1e8&quot; tabindex=&quot;-1&quot; value=&quot;&quot;&gt;&lt;/div&gt; </span> <span title="&">&lt;input type=&quot;submit&quot; class=&quot;btn btn-primary btn-lg&quot; value=&quot;Subscribe&quot; name=&quot;subscribe&quot; /&gt; </span> <span title="&">&lt;/div&gt; </span> <span title="&">&lt;/form&gt; </span><span title="&">&lt;/div&gt; </span><span title="&">&lt;!--End mc_embed_signup--&gt;</span>
私たちのありがとうページは基本的にホームページのジャンボトロンになります。 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>

ホームページにも影響を与える新しいCSSクラスがいくつかあります。最初のクラスは次のとおりです
<span title="&">&lt;p&gt;&lt;a class=&quot;btn btn-primary btn-lg&quot; href=&quot;#&quot; role=&quot;button&quot;&gt;Learn more &amp;raquo;&lt;/a&gt;&lt;/p&gt;</span>
これは、フォームの下部にある青いボタン用に特別です。このクラスを追加すると、より広いボタンが作成され、ボタンの上部とコメントボックスの下部の間に小さなスペースが追加されます。このクラスをホームページボタンに適用することもできます。
次は、既存のクラスの変更です:このフォームの場合、MailChimpフォームコードに似た構造を使用します。しかし、サインアップフォームを使用していないため、MailChimpのCSSを使用することはありません。
<span title="&">&lt;!-- Begin MailChimp Signup Form --&gt; </span><span title="&">&lt;link href=&quot;//cdn-images.mailchimp.com/embedcode/classic-081711.css&quot; rel=&quot;stylesheet&quot; type=&quot;text/css&quot;&gt; </span><span title="&">&lt;div id=&quot;mc_embed_signup&quot; class=&quot;transparent-background soft-border-radius&quot;&gt; </span><span title="&">&lt;form action=&quot;#&quot; method=&quot;post&quot; id=&quot;mc-embedded-subscribe-form&quot; name=&quot;mc-embedded-subscribe-form&quot; class=&quot;validate&quot; target=&quot;_blank&quot; novalidate&gt; </span> <span title="&">&lt;div id=&quot;mc_embed_signup_scroll&quot;&gt; </span> <span title="&">&lt;h3&gt;Enter your name and email for&lt;br /&gt; your first FREE lesson!&lt;/h3&gt; </span> <span title="&">&lt;div class=&quot;mc-field-group&quot;&gt; </span> <span title="&">&lt;label for=&quot;mce-FNAME&quot; class=&quot;not-bold&quot;&gt;First Name &lt;/label&gt; </span> <span title="&">&lt;input type=&quot;text&quot; value=&quot;&quot; name=&quot;FNAME&quot; class=&quot;transparent-background soft-border-radius&quot; id=&quot;mce-FNAME&quot;&gt; </span> <span title="&">&lt;/div&gt; </span> <span title="&">&lt;div class=&quot;mc-field-group&quot;&gt; </span> <span title="&">&lt;label for=&quot;mce-EMAIL&quot; class=&quot;not-bold&quot;&gt;Email &lt;/label&gt; </span> <span title="&">&lt;input type=&quot;email&quot; value=&quot;&quot; name=&quot;EMAIL&quot; class=&quot;required email transparent-background soft-border-radius&quot; id=&quot;mce-EMAIL&quot;&gt; </span> <span title="&">&lt;/div&gt; </span> <span title="&">&lt;div id=&quot;mce-responses&quot; class=&quot;clear&quot;&gt; </span> <span title="&">&lt;div class=&quot;response&quot; id=&quot;mce-error-response&quot; style=&quot;display:none&quot;&gt;&lt;/div&gt; </span> <span title="&">&lt;div class=&quot;response&quot; id=&quot;mce-success-response&quot; style=&quot;display:none&quot;&gt;&lt;/div&gt; </span> <span title="&">&lt;/div&gt; </span> <span title="&">&lt;!-- real people should not fill this in and expect good things - do not remove this or risk form bot signups--&gt; </span> <span title="&">&lt;div style=&quot;position: absolute; left: -5000px;&quot;&gt;&lt;input type=&quot;text&quot; name=&quot;b_f27f671242f9376d66eb9034e_a5f924c1e8&quot; tabindex=&quot;-1&quot; value=&quot;&quot;&gt;&lt;/div&gt; </span> <span title="&">&lt;input type=&quot;submit&quot; class=&quot;btn btn-primary btn-lg&quot; value=&quot;Subscribe&quot; name=&quot;subscribe&quot; /&gt; </span> <span title="&">&lt;/div&gt; </span> <span title="&">&lt;/form&gt; </span><span title="&">&lt;/div&gt; </span><span title="&">&lt;!--End mc_embed_signup--&gt;</span>
連絡先フォームに、コメント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>
要約
Andyのクライアントには、サインアップを引き付けることができる素晴らしい見た目のサインアップフォームがあります。彼はまた、サイトの全体的なテーマとよく溶け込む連絡フォームを追加しました。この時点で、アンディのクライアントは素晴らしいスタートを切っています。
次に来ると、顧客がレッスンを購入する方法を追加します。 Andyのクライアントは、モバイルが現在Webの大部分であることを認識しています。彼は、モバイルサイトが優れたユーザーエクスペリエンスを提供するようにしたいと考えています。これの一部は、新しいレッスンが利用可能になったら通知を送信することです。<span><span>.soft-border-radius</span> { </span> <span>border-radius: 10px; </span><span>}</span>
以上がVisual Studio Community 2015:電子メールと連絡先ページの追加の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

ホットAIツール

Undresser.AI Undress
リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover
写真から衣服を削除するオンライン AI ツール。

Undress AI Tool
脱衣画像を無料で

Clothoff.io
AI衣類リムーバー

Video Face Swap
完全無料の AI 顔交換ツールを使用して、あらゆるビデオの顔を簡単に交換できます。

人気の記事

ホットツール

メモ帳++7.3.1
使いやすく無料のコードエディター

SublimeText3 中国語版
中国語版、とても使いやすい

ゼンドスタジオ 13.0.1
強力な PHP 統合開発環境

ドリームウィーバー CS6
ビジュアル Web 開発ツール

SublimeText3 Mac版
神レベルのコード編集ソフト(SublimeText3)

ホットトピック











このGOベースのネットワーク脆弱性スキャナーは、潜在的なセキュリティの弱点を効率的に識別します。 Goの同時機能機能を速度で活用し、サービスの検出と脆弱性のマッチングが含まれます。その能力と倫理を探りましょう

このパイロットプログラム、CNCF(クラウドネイティブコンピューティングファンデーション)、アンペアコンピューティング、Equinix Metal、およびActuatedのコラボレーションであるCNCF GithubプロジェクトのARM64 CI/CDが合理化されます。 このイニシアチブは、セキュリティの懸念とパフォーマンスリムに対処します

このチュートリアルは、AWSサービスを使用してサーバーレスイメージ処理パイプラインを構築することをガイドします。 APIゲートウェイ、Lambda関数、S3バケット、およびDynamoDBと対話するECS Fargateクラスターに展開されたnext.jsフロントエンドを作成します。 th

これらのトップ開発者ニュースレターを使用して、最新のハイテクトレンドについてお知らせください! このキュレーションされたリストは、AI愛好家からベテランのバックエンドやフロントエンド開発者まで、すべての人に何かを提供します。 お気に入りを選択し、Relを検索する時間を節約してください
