Visual Studio Community 2015: добавление электронной почты и контактных страниц

 .soft-border-radius {
border-radius: 10px;
border: 1px solid #999
}

Это специально для синей кнопки в нижней части формы. Добавление этого класса создаст более широкую кнопку и добавит небольшое пространство между верхней частью кнопки и нижней частью поля для комментариев. Мы также можем применить этот класс к нашей домашней странице.

Далее идет модификация существующего класса:

 textarea

Для этой формы мы будем использовать структуру, аналогичную коду формы MailChimp. Но мы не собираемся использовать CSS MailChimp, так как мы не используем их форму регистрации.

Одна вещь, которую предоставил MailChimp CSS, была более темные границы вокруг полей ввода. Это сейчас прошло. Чтобы компенсировать это, мы добавляем границу внутри soft-border-radius, что будет иметь тот же эффект.

В контактную форму мы добавили поле для комментариев. Это поле может иметь полосы прокрутки, которые по умолчанию будут довольно белыми. Этот более яркий цвет создаст большой контраст с нашими более темными цветами. Чтобы лучше сочетать полосы прокрутки, нам нужно изменить textarea

 textarea {
scrollbar-arrow-color:#333;
scrollbar-base-color:#333;
scrollbar-darkshadow-color:#333;
scrollbar-shadow-color:#333;
color:#fffad5;
}

Обратите внимание на цвет fffad5 Мы делаем то же самое для поля ввода:

 input {
color:#fffad5;
}

Все вышеперечисленные CSS-классы идут в site.css

Теперь мы можем перейти к коду формы.

 <div class="jumbotron">
<div class="container">
 <div class="row">
 <div class="col-md-8">
   <div class="transparent-background soft-border-radius">
   <form action="#" method="post" class="form-format" target="_blank" novalidate>
   <div>
   <h2>Please enter in your message below.</h2>

   <div>
   <label for="FNAME">First Name </label><br />
   <input type="text" value="" name="FNAME" class="transparent-background soft-border-radius" id="FNAME">
   </div>
   <div>
   <label for="EMAIL">Email </label><br />
   <input type="email" value="" name="EMAIL" class="transparent-background soft-border-radius" id="EMAIL">
   </div>

   <div>
   <label for="COMMENT">Comment </label><br />
   <textarea value="" cols="30" rows="3" name="comment" class="transparent-background soft-border-radius" id="COMMENT">  </textarea>
   </div>
   <div>
   <input type="submit" class="btn btn-primary btn-lg button-xl" value="Submit" name="submit" />
   </div>
   </div>
   </form>
   </div>
   </div>

 <div class="col-md-4">
 </div>
 </div>
 </div>
</div>

Вы можете заметить некоторые сходства с формой MailChimp. Это на самом деле модифицированная версия этой формы. Контактная форма находится в левой колонке шириной col-md-8 Это создает столбец шириной 2/3, так как наш правый столбец — col-md-4. Помните, 8 + 4 = 12, это количество столбцов, составляющих нашу сетку из 12 столбцов в Bootstrap.

Резюме

Клиент Энди теперь имеет великолепную форму регистрации, которая обязательно привлечет регистрацию. Он также добавил контактную форму, которая хорошо вписывается в общую тему сайта. На данный момент клиент Энди отлично стартует.

Далее мы добавим возможность покупателям приобретать уроки. Клиент Энди признает, что мобильный сейчас является большой частью Интернета. Он хочет убедиться, что мобильный сайт обеспечивает отличное взаимодействие с пользователем. Одна часть этого — отправка уведомлений, как только новый урок доступен.

У Энди есть несколько интересных функций для веб-сайта. Мы будем продолжать следовать за ним и смотреть через его плечо, как все собирается вместе.