Добавянето на изскачащ прозорец на формуляр, базиран на бисквитки, към вашия уебсайт може да бъде страхотен инструмент за генериране на потенциални клиенти. Въпреки това изскачащият прозорец на формуляра трябва да бъде внимателно внедрен, за да може да добави стойност към уеб страницата, вместо да я отклони.
Тази статия ви предоставя кода, от който се нуждаете, за да добавите изскачащ прозорец на формуляр, базиран на бисквитки, който може да бъде настроен да се показва след определен интервал от време и също така да се скрива, когато потребителят се върне на вашия уебсайт чрез проследяване на бисквитки. Можете да използвате формуляра за всичко и да го промените, за да отговаря на вашите нужди.
По-долу са кодът и стилът, от които се нуждаете, за да внедрите базиран на бисквитки изскачащ формуляр на вашия уебсайт.
Етап 1
Добавете HTML кода по-долу към долния колонтитул на вашата начална страница
<div id="popup-container">
<div id="popup-window">
<div class="modal-content">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<a href="/bg#" class="your-class"></a>
<div>
<div class="row text-center">
<img src="https://www.solodev.com/core/fileparse.php/257/urlt/logo.png" />
</div>
<div class="row text-center">
<h1>Newsletter Signup</h1>
<p>Fill out the form below to signup for our weekly newsletter.</p>
</div>
<form action="" method="post" id="footer-form">
<div class="row">
<div class="col-md-6">
<label>First Name</label>
<input class="form-control" name="first_name" id="first_name" required>
</div>
<div class="col-md-6">
<label>Last Name</label>
<input class="form-control" name="last_name" id="last_name" required>
</div>
</div>
<br>
<div class="row">
<div class="col-md-6">
<label>Email</label>
<input class="form-control" name="email" id="email" required>
</div>
<div class="col-md-6">
<label>Phone</label>
<input class="form-control" name="phone" id="phone">
<br>
</div>
</div>
<input type="submit" class="btn btn-primary" value="Submit">
</form>
<br><br>
</div>
</div>
</div>
</div>
Стъпка 2
Добавете CSS по-долу към листа със стилове на вашия уебсайт
#popup-container {
margin-top: 20px;
margin-right: 20px;
margin-left: 20px;
width: 990px;
margin: 0 auto;
}
.modal-content {
background-color: rgba(38, 38, 40, 0.92);
color: #fff;
padding: 20px 40px;
}
.modal-content input {
height: 57px;
border-radius: 0px;
}
.modal-content .btn-primary {
width: 100%;
background-color: #ef9919;
border: 0px;
}
.modal-content .btn-primary:hover {
background-color: #0073b7;
border: 0px;
}
.modal-content .logorow {
text-align: center;
}
.close {
margin-right: 10px;
margin-top: 5px;
color: #fff;
opacity: .8;
}
.close:hover {
color: #efefef;
}
Стъпка 3
Добавете следните включвания към заглавката на началната си страница
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-cookie/1.4.1/jquery.cookie.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.3/modernizr.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script> <link href="/bghttps://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
Първоначално публикувано тук в блога за уеб дизайн на Solodev.
Предоставено ви от екипа на Солодев. Solodev е базирана на облак уеб система за управление на съдържание, която дава на потребителите свободата да вдъхнат живот на невероятни уеб дизайни.
