Sticky Newsletter

Sticky Newsletter allows you to engage your visitors and make the newsletter registration form easy.

// The following functionality works via API Spreadsheets (https://www.apispreadsheets.com/).
// It is necessary to connect your spreadsheet to API Spreadsheets and acquire an API URL
// (e.g. https://api.apispreadsheets.com/data/1234/)
// It is crucial that columns in the spreadsheet match the names of input fields. Otherwise data will not go through.
//
//-----------------------------------------------------------------------------------------------------------
//
// pick the main color of the banner
let customColor = "green";
// pick the color of text of the banner
let textColor = "black";
// pick the color of the input field on focus
let onFocusColor = "orange";
// select the color of the submit button
let submitButtonColor = "white";
// select the text of the submit button
let submitButtonText = "Submit";
// insert your link to API Spreadsheets
let apiSpreadsheet = "https://api.apispreadsheets.com/data/8527/";
// Pick what fields are required
let requiredFields = ["Email"];
//
// Adjust the position of the icon
let iconPosition = `
bottom: 40%;
left: 30px;
`;
//
//-----------------------------------------------------------------------------------------------------------
//
//
//
//
//
//
//
//
// Start of functionality

.newsletter-container {
width: 680px !important;
max-width: 100% !important;
text-align: center !important;
}

.form {
display: -webkit-box !important;
display: -webkit-flex !important;
display: -ms-flexbox !important;
display: flex !important;
}

.newsletter-form-field {
width: 100% !important;
height: 50px !important;
margin-right: 18px !important;
margin-bottom: 0px !important;
padding-right: 24px !important;
padding-left: 24px !important;
border: 1px none #000 !important;
border-radius: 8px !important;
background-color: #eee !important;
}

.newsletter-form-field::-webkit-input-placeholder {
color: #292929 !important;
}

.newsletter-form-field:-ms-input-placeholder {
color: #292929 !important;
}

.newsletter-form-field::-ms-input-placeholder {
color: #292929 !important;
}

.newsletter-form-field::placeholder {
color: #292929 !important;
}

.newsletter-form-submit {
width: initial !important;
height: initial !important;
font-size: 14px !important;
min-height: 50px !important;
min-width: 125px !important;
padding-right: 24px !important;
padding-left: 24px !important;
padding-top: 0 !important;
padding-bottom: 0 !important;
border-radius: 8px !important;
background-color: #007f65 !important;
}

.newsletter-form-submit:hover {
background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 0.12)), to(rgba(0, 0, 0, 0.12)));
background-image: linear-gradient(180deg, rgba(0, 0, 0, 0.12), rgba(0, 0, 0, 0.12));
}

.newsletter-title {
margin-bottom: 24px !important;
font-size: 28px !important;
line-height: 32px !important;
font-weight: 700 !important;
}

.close-btn {
position: absolute !important;
left: auto !important;
top: 24px !important;
right: 24px !important;
bottom: auto !important;
opacity: 0.29 !important;
cursor: pointer !important;
}

.close-btn:hover {
opacity: 0.42 !important;
}

.success-message {
padding: 18px !important;
border-radius: 8px !important;
background-color: #d4edda !important;
color: #155724 !important;
}

.error-message {
padding: 18px !important;
border-radius: 8px !important;
background-color: #f8d7da !important;
color: #721c24 !important;
}

@media screen and (max-width: 991px) {
body {
font-family: Arial, 'Helvetica Neue', Helvetica, sans-serif !important;
}
}

@media screen and (max-width: 767px) {
.newsletter-container {
text-align: left !important;
}

.close-btn {
-webkit-transform: translate(0px, -2px) !important;
-ms-transform: translate(0px, -2px) !important;
transform: translate(0px, -2px) !important;
text-align: right !important;
}
}

@media screen and (max-width: 479px) {
.form {
-webkit-box-orient: vertical !important;
-webkit-box-direction: normal !important;
-webkit-flex-direction: column !important;
-ms-flex-direction: column !important;
flex-direction: column !important;
}
.newsletter-form-submit {
font-size: 16px !important;
}

.newsletter-form-field {
margin-right: 0px !important;
margin-bottom: 12px !important;
}

.newsletter-title {
padding-right: 48px !important;
}
}
.customLoader {
color: #000000 !important;
font-size: 20px !important;
text-indent: -9999em !important;
overflow: hidden !important;
width: 1em !important;
height: 1em !important;
border-radius: 50% !important;
margin: 7px auto !important;
position: relative !important;
-webkit-transform: translateZ(0) !important;
-ms-transform: translateZ(0) !important;
transform: translateZ(0) !important;
-webkit-animation: load6 1.7s infinite ease, round 1.7s infinite ease !important;
animation: load6 1.7s infinite ease, round 1.7s infinite ease !important;
}
@-webkit-keyframes load6 {
0% {
box-shadow: 0 -0.83em 0 -0.4em, 0 -0.83em 0 -0.42em, 0 -0.83em 0 -0.44em, 0 -0.83em 0 -0.46em, 0 -0.83em 0 -0.477em;
}
5%,
95% {
box-shadow: 0 -0.83em 0 -0.4em, 0 -0.83em 0 -0.42em, 0 -0.83em 0 -0.44em, 0 -0.83em 0 -0.46em, 0 -0.83em 0 -0.477em;
}
10%,
59% {
box-shadow: 0 -0.83em 0 -0.4em, -0.087em -0.825em 0 -0.42em, -0.173em -0.812em 0 -0.44em, -0.256em -0.789em 0 -0.46em, -0.297em -0.775em 0 -0.477em;
}
20% {
box-shadow: 0 -0.83em 0 -0.4em, -0.338em -0.758em 0 -0.42em, -0.555em -0.617em 0 -0.44em, -0.671em -0.488em 0 -0.46em, -0.749em -0.34em 0 -0.477em;
}
38% {
box-shadow: 0 -0.83em 0 -0.4em, -0.377em -0.74em 0 -0.42em, -0.645em -0.522em 0 -0.44em, -0.775em -0.297em 0 -0.46em, -0.82em -0.09em 0 -0.477em;
}
100% {
box-shadow: 0 -0.83em 0 -0.4em, 0 -0.83em 0 -0.42em, 0 -0.83em 0 -0.44em, 0 -0.83em 0 -0.46em, 0 -0.83em 0 -0.477em;
}
}
@keyframes load6 {
0% {
box-shadow: 0 -0.83em 0 -0.4em, 0 -0.83em 0 -0.42em, 0 -0.83em 0 -0.44em, 0 -0.83em 0 -0.46em, 0 -0.83em 0 -0.477em;
}
5%,
95% {
box-shadow: 0 -0.83em 0 -0.4em, 0 -0.83em 0 -0.42em, 0 -0.83em 0 -0.44em, 0 -0.83em 0 -0.46em, 0 -0.83em 0 -0.477em;
}
10%,
59% {
box-shadow: 0 -0.83em 0 -0.4em, -0.087em -0.825em 0 -0.42em, -0.173em -0.812em 0 -0.44em, -0.256em -0.789em 0 -0.46em, -0.297em -0.775em 0 -0.477em;
}
20% {
box-shadow: 0 -0.83em 0 -0.4em, -0.338em -0.758em 0 -0.42em, -0.555em -0.617em 0 -0.44em, -0.671em -0.488em 0 -0.46em, -0.749em -0.34em 0 -0.477em;
}
38% {
box-shadow: 0 -0.83em 0 -0.4em, -0.377em -0.74em 0 -0.42em, -0.645em -0.522em 0 -0.44em, -0.775em -0.297em 0 -0.46em, -0.82em -0.09em 0 -0.477em;
}
100% {
box-shadow: 0 -0.83em 0 -0.4em, 0 -0.83em 0 -0.42em, 0 -0.83em 0 -0.44em, 0 -0.83em 0 -0.46em, 0 -0.83em 0 -0.477em;
}
}
@-webkit-keyframes round {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
@keyframes round {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}

`
);
//Elements
$("body").append(
`
<div class="bookmark-container">
<div class="bookmark-icon">

.st0 {
fill: #FFF !important;
}

</div>
</div>
`
);
$("body").append(`
<div>
<div></div>
</div>
`);
$(".nwsltr").html(`
<div class="newsletter-bar">
<div class="newsletter-container">
<div class="close-btn w-embed"></div>
<div class="newsletter-title">Subscribe to our newsletter</div>
<div class="w-form">
<div class="success-message w-form-done">
<div>You have successfully subscribed to the newsletter</div>
</div>
<div class="error-message w-form-fail">
<div>Oops! Something went wrong while submitting the form.</div>
</div>
</div>
</div>
</div>
`);

// create submission event listener; collects data, sends it asynchronously and executes success or error javascript
let loadingSpinner = document.createElement("div");
let success = document.querySelector(".w-form-done");
let error = document.querySelector(".w-form-fail");
$("form#email-form").submit((e) => {
e.preventDefault();
let formData = {};
for (field of document.querySelectorAll(".w-input")) {
formData[field.name] = field.value;
console.log(field.value);
loadingSpinner.style.display = "block";
loadingSpinner.innerHTML =
'
<div class="customLoader"></div>
Loading...

';
let title = document.querySelector(".newsletter-title");
title.appendChild(loadingSpinner);
document.head.insertAdjacentHTML(
"beforeend",
`

#email-form {
display: none !important;
}
`
);
}
fetch(`${apiSpreadsheet}`, {
method: "POST",
body: JSON.stringify({ data: formData }),
}).then((res) => {
if (res.status === 201) {
// SUCCESS
loadingSpinner.style.display = "none";
success.style.display = "block";
setTimeout(() => {
$(".newsletter-bar").animate({
bottom: "-610px",
});
setTimeout(() => {
success.style.display = "none";
document.querySelector("#remove-newsletter-style").remove();
for (field of document.querySelectorAll(".w-input")) {
field.value = "";
}
}, 500);
}, 2000);
$(".newsletter-bar").removeClass("toggledOn");
} else {
// ERROR
loadingSpinner.style.display = "none";
error.style.display = "block";
setTimeout(() => {
$(".newsletter-bar").animate({
bottom: "-610px",
});
setTimeout(() => {
error.style.display = "none";
document.querySelector("#remove-newsletter-style").remove();
for (field of document.querySelectorAll(".w-input")) {
field.value = "";
}
}, 500);
}, 2000);
$(".newsletter-bar").removeClass("toggledOn");
}
});
});

let heighForm = document.querySelector("#email-form");
let heighFormStyles = window.getComputedStyle(heighForm);
success.style.height = heighFormStyles.height;
error.style.height = heighFormStyles.height;
success.style.marginBottom = heighFormStyles.marginBottom;
error.style.marginBottom = heighFormStyles.marginBottom;

//Actions
// open/close
$(".bookmark-container").click(function () {
if ($(".newsletter-bar").hasClass("toggledOn")) {
$(".newsletter-bar").removeClass("toggledOn");
$(".newsletter-bar").animate({
bottom: "-610px",
});
} else {
$(".newsletter-bar").addClass("toggledOn");
$(".newsletter-bar").animate({
bottom: "0px",
});
}
});

// close
$(".close-btn.w-embed").click(function () {
$(".newsletter-bar").animate({
bottom: "-610px",
});
});
// adding required to input fields
for (field of document.querySelectorAll(".w-input")) {
if (requiredFields.includes(field.name)) {
field.setAttribute("required", "");
}
}
};
document.getElementsByTagName("head")[0].appendChild(script);