Увеличивайте количество регистраций с помощью стильных форм нижнего колонтитула

Увеличьте конверсию регистрации на своем веб-сайте, разместив форму регистрации на каждой странице вашего веб-сайта. Пользователи на 31% чаще регистрируются на ваш продукт или услугу, если на каждой странице вашего веб-сайта есть простая в использовании форма для регистрации, а не отдельная страница, на которую им необходимо перейти.

Ниже приведены HTML, CSS и файлы, необходимые для добавления стильной формы регистрации на ваш сайт.

Шаг 1

Добавьте приведенный ниже HTML-код в конце содержимого веб-страницы.

<section class="form-section">
   <div class="container">
      <div class="row">
         <div class="col-md-10 col-md-offset-1">
            <h3>
               Sign up for WebCorpCo Today!
            </h3>
            <form action="" method="post" id="footer-form">
               <div class="col-md-3 video-form-fields">
                  <div class="form-group has-error has-danger">
                     <label for="your_email" class="sr-only">What is your email?</label> <input type="email" name="member_email" class="form-control" id="member_email2" placeholder="Work Email" required>
                  </div>
               </div>
               <div class="col-md-3 video-form-fields">
                  <div class="form-group has-error has-danger">
                     <label for="visitor_company" class="sr-only">What company do you work for?</label> <input type="text" class="form-control" name="member_company" id="visitor_company" placeholder="Company" required>
                  </div>
               </div>
               <div class="col-md-3 video-form-fields">
                  <div class="form-group has-error has-danger">
                     <label for="visitor_company" class="sr-only">What is your job title?</label> <input type="text" class="form-control" name="member_company" id="visitor_company" placeholder="Job Title" required>
                  </div>
               </div>
               <div class="col-md-3 video-form-fields">
                  <input type="hidden" name="mode" value="saveVisitor" id="mode"> <button type="submit" id="Submit2" class="btn btn-primary btn-solodev">Get Started</button>
               </div>
            </form>
         </div>
         <div class="clearfix"></div>
         <p class="small-text">
            By clicking "Get Started" I agree to WebCorpCo's <a href="">Terms of Service.</a>
         </p>
      </div>
   </div>
   <div class="clearfix"></div>
</section>
<footer class="ct-footer text-center-sm text-center-xs">
   <div class="container">
      <div class="row ct-u-paddingBottom40">
         <div class="col-md-3 col-sm-6 col-xs-12">
            <div class="ct-footer-header">
               Services
            </div>
            <ul class="ct-footer-list list-unstyled">
               <li>
                  <a href="#">Design</a>
               </li>
               <li>
                  <a href="#">Marketing</a>
               </li>
               <li>
                  <a href="#">Sales</a>
               </li>
            </ul>
         </div>
         <div class="col-md-3 col-sm-6 col-xs-12">
            <div class="ct-footer-header">
               Learn More
            </div>
            <ul class="ct-footer-list list-unstyled">
               <li>
                  <a href="#">Company</a>
               </li>
               <li>
                  <a href="#">Clients</a>
               </li>
               <li>
                  <a href="#">News</a>
               </li>
            </ul>
         </div>
                 <div class="col-md-3 col-sm-6 col-xs-12">
            <div class="ct-footer-header">
               Join Us
            </div>
            <ul class="ct-footer-list list-unstyled">
               <li>
                  <a href="#">Facebook</a>
               </li>
               <li>
                  <a href="#">LinkedIn</a>
               </li>
               <li>
                  <a href="#">Twitter</a>
               </li>
            </ul>
         </div>
         <div class="col-md-3 col-sm-6 col-xs-12">
                          <div class="ct-footer-header">
                                 Get in Touch
                          </div>
                          <div class="address">
                                 <strong>Headquarters</strong><span>123 Easy Street</span><span>Orlando, FL 32801</span>
                          </div>
         </div>
      </div>
   </div>
   <div class="ct-post_footer">
      <div class="container">
         <div class="row">
            <div class="col-sm-6 col-md-4 text-center ct-u-paddingTop10">
               <p>
                  &copy; 2016 WebCorpCo. All Rights Reserved.
               </p>
            </div>
            <div class="col-sm-6 col-md-4 text-center ct-u-paddingTop10">
               <ul class="list-unstyled list-inline">
                  <li>
                     <a href="#">Site Map</a>
                  </li>
                  <li>
                     <a href="#">Privacy Policy</a>
                  </li>
                  <li>
                     <a href="#">Contact Us</a>
                  </li>
               </ul>
            </div>
            <div class="col-sm-12 col-md-4 text-center ct-u-paddingTop10">
               <p>
                  Powered by <a href="//www.webcorpco.com" target="_blank">WebCorpCo</a>
               </p>
            </div>
         </div>
      </div>
   </div>
</footer>

Шаг 2

Добавьте приведенный ниже CSS в основную таблицу стилей вашего веб-сайта.

section.form-section {
    background-color: #0489b7;
    padding: 40px 15px;
}
section.form-section h3 {
    color: #fff;
    font-size: 40px;
    text-align: center;
    font-weight: 400;
    margin: 20px 0 35px;
    text-transform: capitalize;
}
section.form-section input {
    height: 55px;
    width: 100%;
    color: #a1a1a1;
    margin-bottom: 20px;
    padding-left: 20px;
    font-size: 16px;
    background-color: rgb(18, 89, 113);
    border-color: rgb(0, 189, 255);
}
section.form-section a {
  color: #fff;
  text-decoration: underline;
}
.form-section .selectResponse {
    display: inline-block;
    width: 100%;
    min-width: 100%;
    vertical-align: middle;
    margin: 0;
}
.selectResponse {
    margin-top: 4px;
    display: inline-block;
    min-width: 350px;
    vertical-align: middle;
    font-family: "proxima-nova", sans-serif;
    font-weight: 600;
}
.selectize-control.single .selectize-input, .selectize-control.single .selectize-input input {
    cursor: pointer;
}
section.form-section .selectize-input {
    color: #fff;
    margin-bottom: 20px;
}
section.form-section .selectize-input {
    padding-left: 20px;
}
section.video-section .video-form input, section.video-section .video-form .selectize-input, section.form-section .selectize-input {
    width: 100% !important;
    height: 55px !important;
    padding: 0 0 0 20px;
    border-radius: 0;
    font-size: 15px;
    line-height: 54px;
    text-align: left;
    color: #a1a1a1;
    background-color: #125971;
    border-color: #00bdff;
}
.form-section .selectize-input, .form-section .selectize-control.single .selectize-input.input-active {
    background: #073444;
    border-color: rgb(0, 189, 255);
}
section.form-section #Submit2 {
    font-size: 20px;
    text-transform: none;
    background-color: #ef9919;
    color: #fff;
    border: none;
    width: 100%;
    height: 55px;
    margin-right: 20px;
}
ol, ul {
    margin-top: 0px;
    margin-bottom: 10px;
    font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
}
section.form-section p.small-text {
    text-align: center;
    font-weight: 400;
    text-transform: capitalize;
    font-size: 14px;
}
section.form-section p {
    color: #fff;
    text-transform: uppercase;
    padding: 10px 0 20px 15px;
    font-weight: bold;
}
/* ================================
  # Footer styles
================================= */
.ct-footer-header {
  font-family: 'Open Sans Condensed', sans-serif;
}
.address {
  font-size: 14px;
  font-size: 1.4rem;
}
.address strong {
  font-weight: 700;
  display: block;
}
.address span.footer-form {
  color: #0079c2;
}
.address a {
  font-size: 19px;
  font-size: 1.9rem;
  font-weight: 600;
  display: block;
  padding-bottom: 20px;
  padding-bottom: 2rem;
}
.address a:hover {
  text-decoration: underline;
}
.address span {
  display: block;
  margin-top: 5px;
  margin-top: 0.5rem;
}
.address .address-disclaimer {
  font-size: 14px;
  font-size: 1.4rem;
  font-weight: 600;
}
.ct-select .selectize-input {
  line-height: .7;
}
.ct-footer {
background-color: #111;
color: #cbc9c9;
padding-top: 40px;
padding-top: 4rem;
}
.ct-footer p {
font-size: 14px;
font-size: 1.4rem;
color: #f9f9f9;
}
.ct-footer-header {
color: #00bff3;
text-transform: uppercase;
font-size: 20px;
font-size: 2rem;
font-weight: 700;
padding: 30px 0 25px;
padding: 3rem 0 2.5rem;
}
.ct-footer-list li a {
font-size: 14px;
font-size: 1.4rem;
color: #cbc9c9;
}
.ct-footer-list li a:hover {
text-decoration: underline;
}
.ct-footer-list li + li {
margin-top: 5px;
margin-top: 0.5rem;
}
.ct-footer .ct-post_footer {
background-color: #252525;
color: #fff;
padding: 20px 0;
padding: 2rem 0;
font-family: 'Arial';
font-size: 13px;
font-size: 1.3rem;
margin-top: 40px;
margin-top: 4rem;
}
.ct-footer .ct-post_footer ul.list-inline {
  font-size: 1.2rem;
}
.ct-footer .ct-post_footer a:hover {
text-decoration: underline;
}
.ct-footer .ct-post_footer p {
margin: 0;
margin: 0;
font-size: inherit;
}
.ct-footer .ct-post_footer ul li {
position: relative;
}
.ct-footer .ct-post_footer ul li + li {
padding-left: 17px;
padding-left: 1.7rem;
margin-left: 5px;
margin-left: 0.5rem;
}
.ct-footer .ct-post_footer ul li + li:before {
content: '';
position: absolute;
top: 20%;
left: 0;
height: 60%;
width: 1px;
width: 0.1rem;
background: #fff;
}
address {
font-size: 14px;
font-size: 1.4rem;
}
address b {
font-size: inherit;
text-transform: uppercase;
}
address span {
display: block;
margin-top: 5px;
margin-top: 0.5rem;
}
/* ================================
  # Media Queries
================================= */
@media screen and (max-width: 768px) {
        .col-xs-12 {
                text-align: center;
        }
}

Шаг 3

Добавьте указанные ниже элементы на веб-страницы, на которых будут размещены ваши регистрационные формы.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">

Демо на JSFiddle

Скачать с GitHub

Первоначально опубликовано здесь, в блоге веб-дизайна Solodev.

Предоставлено вам командой Solodev. Solodev — это облачная система управления веб-контентом, которая дает пользователям свободу воплощать в жизнь удивительные веб-дизайны.

смотрите также:

Новые материалы

Как проанализировать работу вашего классификатора?

Не всегда просто знать, какие показатели использовать С развитием глубокого обучения все больше и больше людей учатся обучать свой первый классификатор. Но как только вы закончите..

Работа с цепями Маркова, часть 4 (Машинное обучение)

Нелинейные цепи Маркова с агрегатором и их приложения (arXiv) Автор : Бар Лайт Аннотация: Изучаются свойства подкласса случайных процессов, называемых дискретными нелинейными цепями Маркова..

Crazy Laravel Livewire упростил мне создание электронной коммерции (панель администратора и API) [Часть 3]

Как вы сегодня, ребята? В этой части мы создадим CRUD для данных о продукте. Думаю, в этой части я не буду слишком много делиться теорией, но чаще буду делиться своим кодом. Потому что..

Использование машинного обучения и Python для классификации 1000 сезонов новичков MLB Hitter

Чему может научиться машина, глядя на сезоны новичков 1000 игроков MLB? Это то, что исследует это приложение. В этом процессе мы будем использовать неконтролируемое обучение, чтобы..

Учебные заметки: создание моего первого пакета Node.js

Это мои обучающие заметки, когда я научился создавать свой самый первый пакет Node.js, распространяемый через npm. Оглавление Глоссарий I. Новый пакет 1.1 советы по инициализации..

Забудьте о Matplotlib: улучшите визуализацию данных с помощью умопомрачительных функций Seaborn!

Примечание. Эта запись в блоге предполагает базовое знакомство с Python и концепциями анализа данных. Привет, энтузиасты данных! Добро пожаловать в мой блог, где я расскажу о невероятных..

ИИ в аэрокосмической отрасли

Каждый полет – это шаг вперед к великой мечте. Чтобы это происходило в их собственном темпе, необходима команда астронавтов для погони за космосом и команда технического обслуживания..

Метки

Machine Learning JavaScript Data Science Artificial Intelligence Software Development Python Web Development Coding Deep Learning AI React Software Engineering Nodejs Java Front End Development Typescript Computer Science Data Algorithms Development NLP Tech Programming Languages CSS ChatGPT HTML Python Programming Javascript Tips Angular Computer Vision Data Visualization Neural Networks Startup Tutorial Statistics Productivity Reactjs Learning