Komuniti Visual Studio 2015: Menambah Halaman E -mel dan Hubungi

Takeaways Key

Komuniti Visual Studio 2015 membolehkan pengguna melaksanakan borang pendaftaran e -mel, hubungi dan halaman ke laman web mereka. Borang pendaftaran e -mel boleh diletakkan di laman utama menggunakan borang dari MailChimp.
UI boleh digilap menggunakan bootstrap untuk memformat borang dan mendapatkan semuanya diselaraskan dengan betul. Kelas-kelas tersuai seperti tidak berani, telus-latar belakang, dan radius lembut sempadan boleh dibuat di site.css untuk mengubah suai penampilan borang.
Halaman tambahan seperti halaman 'Terima Kasih' dan halaman 'Hubungi' boleh dibuat untuk interaksi pengguna yang lebih baik. Halaman -halaman ini boleh direka untuk memadankan skema warna dan tema halaman utama, memberikan pengalaman pengguna yang konsisten di seluruh laman web.

Artikel ini ditaja oleh Microsoft. Terima kasih kerana menyokong penaja yang membuat SitePoint mungkin.

Selamat kembali ke siri artikel kami menggunakan Microsoft's Modern IDE: Visual Studio Community 2015 untuk dengan cepat merancang dan membina tapak yang menarik dan berfungsi untuk pelanggan. Sekiranya anda terlepas ansuran terakhir, periksa di sini.

Sekarang Andy mempunyai halaman depan laman web yang tersedia, dia boleh mula membina laman web ini sedikit lagi. Ini akan melibatkan pelaksanaan borang pendaftaran e -mel, serta hubungan dan halaman.

Kami akan bermula dengan borang pendaftaran e -mel kemudian bergerak ke dalam membuat beberapa halaman tambahan. Borang pendaftaran e -mel akan menjadi depan dan pusat di laman utama. Ia akan diletakkan di sebelah kanan Jumbotron, di mana terdapat beberapa ruang kosong yang tersedia.

Untuk borang pendaftaran e -mel, kami akan menggunakan borang dari MailChimp. Andy menggunakan akaun MailChimp pelanggannya dan akan menggunakan senarai sedia ada untuk laman utama. Semua orang yang mendaftar di laman utama akan masuk ke dalam senarai ini.

borang pendaftaran kami akan direka untuk kelihatan seperti ini:

mendapatkan kod dari mailchimp

Setelah log masuk ke MailChimp, pilih senarai yang anda mahu orang ditambahkan. Klik borang pendaftaran. Klik borang tertanam. Gaya klasik baik -baik saja. Pelanggan mahu menangkap nama pertama dan alamat e -mel. MailChimp sebenarnya mempunyai ini sebagai lalai supaya kita boleh meninggalkan perkara seperti mereka.

skrin anda di MailChimp sepatutnya kelihatan seperti berikut:

Salin HTML. Inilah yang akan kita tampal ke Jumbotron. Di Jumbotron di bawah baris ini:

<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>

Tambah kod borang MailChimp. Jika anda menjalankan aplikasinya, ia sepatutnya kelihatan seperti berikut:

Sudah tentu ini bukan apa yang kita mahu kelihatan seperti tetapi ini adalah titik permulaan yang baik. Dari sini, kami akan memformat borang menggunakan bootstrap dan mendapatkan semuanya diselaraskan dengan betul.

Mengubah borang pendaftaran dengan bootstrap

Dengan pemformatan semasa, kami telah kehilangan reka bentuk responsif kami. Tajuk tapak perlu ditinggalkan sementara borang pendaftaran pergi ke kanan. Mereka juga harus berada pada baris yang sama. Bootstrap akan membantu kita mendapatkan kembali perkara.

kita boleh menambah beberapa lajur. Kelilingi jumbotron dengan

dan kod mailchimp dengan a. Pemformatan ini bermakna teks tajuk tapak akan mengambil 2/3 dari Jumbotron manakala format pendaftaran mengambil 1/3.

Kod anda sepatutnya kelihatan seperti berikut:

Ingat, Bootstrap menggunakan sistem grid 12. 8 4 = 12 dan anda dapat melihat dari nombor ini bagaimana kita mendapat 2/3 dan 1/3.

Jika anda menjalankan laman web ini, anda akan melihat kami mempunyai dua lajur dan reka bentuk web responsif kami kembali.

Seterusnya, kami akan mula menggilap ui borang pendaftaran supaya ia lebih baik dengan laman web ini.

ui penggilap

Daripada melalui banyak langkah kecil, lebih mudah untuk memaparkan apa yang harus diubahsuai oleh MailChimp yang siap. Kemudian kita boleh melangkah. Ganti kod MailChimp semasa anda dengan yang berikut:

<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>

Saya telah menambahkan beberapa baris ruang dalam kod untuk lebih baik membantu memecahkan borang untuk perbincangan.

Terdapat beberapa kelas tersuai yang akan kami buat, termasuk tidak berani, telus-belakang, dan radius lembut. Kami mentakrifkan kelas -kelas ini di site.css.

Oleh kerana kebanyakan kod MailChimp adalah sama dengan apa yang kita disalin dari MailChimp, mari kita bincangkan apa yang berlaku dengan kelas -kelas tersuai ini.

tidak berani ditakrifkan seperti berikut:

<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>

Ia hanya menghilangkan huruf tebal. Ini digunakan untuk menekankan label medan bentuk. Panggilan kami untuk bertindak berani. Jika label medan bentuk juga berani, mata akan berjuang sedikit untuk mengetahui di mana untuk memberi tumpuan. Senario kes yang lebih buruk: Orang ramai hanya berputus asa dan memintas borang pendaftaran kami.

tangkapan skrin di bawah menunjukkan penggunaan .not-bold

Background Transparan menyediakan ketelusan separuh ke medan latar belakang dan input bentuk, memberikan sedikit lebih mendalam kepada reka bentuk kami. Ia ditakrifkan sebagai:

<span><span>.not-bold</span> {
</span>    <span>font-weight:normal;
</span><span>}</span>

RGBA hanya bermaksud merah, hijau, biru dan alpha. Alpha menetapkan kelegapan. Semakin rendah nilai ini, semakin telus. Nilai boleh berkisar antara 0 hingga 1.

Radius lembut-sempadan menjadikan medan bentuk dan input kami menyatakan sedikit terperinci elegan dengan sudut bulat. Kelas ini ditakrifkan sebagai:

<span><span>.transparent-background</span> {
</span>   <span>background-color: <span>rgba(0, 0, 0, 0.25)</span>
</span><span>}</span>

Akhirnya, kami mempunyai butang biru lebar lebar. .Max-width membantu kami di sini. Bukan sahaja biru memberikan kontras yang hebat dan membawa mata haknya, tetapi saiz yang besar menjadikannya tidak dapat ditarik untuk mengklik. .max-lebar ditakrifkan sebagai:

<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>

Menambah kelas di atas ke site.css dan menampal dalam kod bentuk di atas harus menghasilkan borang pendaftaran yang sama seperti yang ditunjukkan di atas.

Terima kasih halaman

Apabila pengguna mendaftar, biasanya bagus untuk memberikan halaman pengesahan untuk memberitahu mereka semuanya berjalan lancar. Berapa kali anda mendaftar ke senarai seseorang hanya untuk disambut oleh halaman terima kasih yang sangat tidak imajinatif?

Andy tahu kliennya adalah seorang artis yang benar dan mahu pergi lebih jauh. Ini bermakna tidak bersemangat dengan menggunakan beberapa halaman terima kasih. Walau bagaimanapun, kami akan menyimpan perkara yang konsisten dengan menggunakan skema warna dan tema yang sama dari halaman rumah.

Untuk membuat halaman terima kasih, buka pengawal/homecontroller.cs. Tambah yang berikut:

<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>

Kerana ini adalah aplikasi MVC, apabila seseorang menaip /rumah /terima kasih, ia akan memukul kaedah di atas. Sudah tentu, kami tidak mengharapkan sesiapa sahaja untuk menaip halaman terima kasih kerana ini akan dihasilkan sebagai pengesahan daripada mendaftar ke senarai e -mel pelanggan kami.

kita memerlukan pandangan untuk kaedah ini untuk disajikan. Buka folder pandangan/rumah dan buat salinan contact.cshtml. Namakan semula fail yang disalin ke Thankyou.cshtml.

Halaman terima kasih kami pada dasarnya akan menjadi jumbotron dari halaman rumah. Kosongkan kod dalam terima kasih.cshtml, hanya meninggalkan kod viewbag di bahagian atas. Tampal dalam perkara berikut:

<span><span>.not-bold</span> {
</span>    <span>font-weight:normal;
</span><span>}</span>

Membuat salinan halaman kenalan membolehkan kami memanfaatkan sepenuhnya struktur halaman yang ada. Kami akan mempunyai navigasi dan footer yang biasa tanpa perlu melakukan apa -apa.

Anda mungkin melihat kelas Jumbotron-tinggi kelas. Ini adalah kelas baru, yang menambah ketinggian tambahan ke halaman terima kasih. Jika tidak, kami akan berakhir dengan jalur yang agak singkat yang berjalan di bahagian atas. Ia tidak akan terlalu mengagumkan.

imej yang lebih besar kelihatan hebat dan memberikan masa udara tambahan kepada artis kami (iaitu pelanggan).

Jumbotron-tinggi ditakrifkan sebagai:

<span><span>.transparent-background</span> {
</span>   <span>background-color: <span>rgba(0, 0, 0, 0.25)</span>
</span><span>}</span>

Halaman terima kasih terakhir anda sepatutnya kelihatan seperti berikut:

Halaman kenalan

Kami ingin memberi peluang kepada pelanggan yang berpotensi untuk menghubungi pelanggan kami secara langsung melalui laman webnya. Di sinilah halaman kenalan akan datang. Kami akan mengikuti garis asas seperti di atas untuk membuat halaman kenalan. Halaman akhir kami akan kelihatan seperti berikut:

Buka pandangan/rumah dan anda akan melihat sudah ada contact.cshtml. Sama seperti yang kami lakukan sebelum ini dengan halaman terima kasih, jelaskan segala -galanya kecuali kod viewbag atas. Kami akan menggunakan Jumbotron sekali lagi. Kami akan menggunakan dua lajur seperti sebelumnya kecuali sebelah kanan akan kosong. Ini membolehkan borang hubungan kami menyelaraskan lebih banyak ke kiri.

Terdapat beberapa kelas CSS baru yang akan kami memperkenalkan yang juga akan memberi kesan kepada laman web kami. Kelas pertama ialah:

<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>

Ini khusus untuk butang biru di bahagian bawah borang. Menambah kelas ini akan membuat butang yang lebih luas dan menambah sedikit ruang di antara bahagian atas butang dan bahagian bawah kotak komen. Kami juga boleh memohon kelas ini ke butang laman utama kami.

Seterusnya adalah pengubahsuaian kepada kelas yang sedia ada:

<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>

Untuk borang ini, kami akan menggunakan struktur yang serupa dengan kod borang MailChimp. Tetapi kami tidak akan menggunakan CSS MailChimp kerana kami tidak menggunakan borang pendaftaran mereka.

Satu perkara CSS MailChimp yang disediakan adalah sempadan yang lebih gelap di sekitar medan input. Yang kini hilang. Untuk mengimbangi, kami menambah sempadan di dalam radius lembut sempadan, yang akan mempunyai kesan yang sama.

Dalam borang hubungan, kami telah menambah kotak Textarea Comment. Kotak ini boleh mempunyai scrollbars, yang secara lalai akan agak putih. Warna yang lebih cerah ini akan mewujudkan kontras yang besar dengan warna yang lebih gelap. Untuk membantu menggabungkan scrollbars dengan lebih baik, kita perlu mengubahsuai Textarea:

<span><span>.not-bold</span> {
</span>    <span>font-weight:normal;
</span><span>}</span>

Perhatikan warna fffad5, yang mengubah teks medan komen kami dari hitam hingga kuning yang lebih cerah. Kami melakukan perkara yang sama untuk medan input:

<span><span>.transparent-background</span> {
</span>   <span>background-color: <span>rgba(0, 0, 0, 0.25)</span>
</span><span>}</span>

semua kelas CSS di atas pergi ke tapak.css.

sekarang kita boleh beralih ke kod borang.

<span><span>.soft-border-radius</span> {
</span>  <span>border-radius: 10px;
</span><span>}</span>

Anda mungkin melihat beberapa persamaan dengan borang MailChimp. Ini sebenarnya versi yang diubah suai dari borang itu. Borang hubungan terletak di lajur kiri, iaitu lebar Col-MD-8. Ini mewujudkan lajur lebar 2/3 sejak lajur kanan kami adalah COL-MD-4. Ingat, 8 4 = 12, iaitu bilangan lajur yang membentuk grid 12 lajur kami dalam bootstrap.

Ringkasan

pelanggan Andy kini mempunyai bentuk pendaftaran yang hebat yang pasti menarik pendaftaran. Dia juga menambah borang hubungan yang menggabungkan dengan baik dengan tema keseluruhan laman web ini. Pada ketika ini, pelanggan Andy menjadi permulaan yang hebat.

datang seterusnya, kami akan menambah cara untuk pelanggan membeli pelajaran. Pelanggan Andy mengakui bahawa mudah alih adalah sebahagian besar dari web sekarang. Dia mahu memastikan tapak mudah alih menyediakan pengalaman pengguna yang hebat. Salah satu bahagian ini adalah menghantar pemberitahuan setelah pelajaran baru tersedia.

Andy mempunyai beberapa ciri menarik untuk dibina untuk laman web. Kami akan terus mengikuti dan mengawasi bahunya kerana segala -galanya bersatu.

Atas ialah kandungan terperinci Komuniti Visual Studio 2015: Menambah Halaman E -mel dan Hubungi. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!