Дизайн блока подписки на рассылку


HTML:

<div class="sidebar subscription">
    <div class="subscription-inner">
        <h5>Рассылка</h5>
        <p><strong>1429</strong> <b>подписчиков</b> уже получают периодическую рассылку о новостях из мира инфографики: тренды, новинки, инструменты, важные события и конференции</p>
        <form novalidate="" target="_blank" class="validate" name="mc-embedded-subscribe-form" id="mc-embedded-subscribe-form" method="post" action="http://123.com">
            <input type="text" placeholder="Введите e-mail" class="subscription-input" name="EMAIL">
            <input type="submit" class="subscription-button" value="Подписаться" name="subscribe">
        </form>
    </div>
</div>

и стили CSS:

.sidebar.subscription {
    background: url("http://infogra.ru/wp-content/themes/infogra/assets/images/subscription-background.png") repeat scroll 0 0 rgba(0, 0, 0, 0);
    display: block;
    height: 280px;
    margin: -8px -8px 20px;
    padding: 8px;
    text-align: center;
    width: 280px;
}
.sidebar.subscription .subscription-inner {
    background: none repeat scroll 0 0 #f5f5f5;
    height: 280px;
    width: 280px;
}
.sidebar.subscription .subscription-inner h5 {
    display: block;
    font-size: 22px;
    font-weight: bold;
    padding: 17px 0 16px;
    text-transform: uppercase;
}
.sidebar.subscription .subscription-inner p {
    color: #262626;
    display: block;
    font-size: 15px;
    line-height: 18px;
    padding: 0 18px 24px;
    text-align: left;
}
.sidebar.subscription .subscription-inner p strong {
    text-transform: uppercase;
}
.sidebar.subscription .subscription-input {
    background: none repeat scroll 0 0 #fff;
    border: 1px solid #7f8c9c;
    display: block;
    font-size: 15px;
    height: 28px;
    line-height: 28px;
    margin: 0 auto;
    text-align: center;
    width: 207px;
}
.sidebar.subscription .subscription-button {
    background: none repeat scroll 0 0 #72bb72;
    border: medium none;
    color: #fff;
    cursor: pointer;
    display: block;
    font-size: 16px;
    height: 33px;
    line-height: 33px;
    margin: 19px auto 0;
    text-align: center;
    text-transform: uppercase;
    width: 182px;
}

оформление было подмечено тут

ПОЛЕЗНО  Кликабельный телефон для iPhone

и на всякий случай картинка бэкграунда:

Дизайн блока подписки на рассылку