How to connect the custom html/liquid to newsletter subcriptions?
- recaptcha enable
Codes;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
/* General styles */
.footer-section {
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
line-height: 1.6;
}
.footer-column h4 {
font-size: 16px;
font-weight: bold; /* Headers are now bold */
text-transform: capitalize;
margin-bottom: 10px;
cursor: pointer;
position: relative;
}
.footer-column h4::after {
content: "+";
position: absolute;
right: 0;
top: 0;
font-weight: normal; /* Keep '-' sign not bold */
}
.footer-column ul {
list-style-type: none;
padding: 0;
margin: 0;
max-height: 1000px; /* Default to expanded */
overflow: hidden;
transition: max-height 0.5s ease-out;
}
.footer-column h4.active::after {
content: "-";
}
.footer-column a {
color: #000;
text-decoration: none;
}
.footer-column ul li {
margin-bottom: 8px; /* Adjusted spacing between items */
}
.newsletter-section {
text-align: left;
padding: 0px 0;
}
.newsletter-section h4 {
font-size: 27px;
font-weight: bold;
}
.social-media-icons {
margin: 10px 0 30px 0; /* Increased bottom margin */
display: flex;
justify-content: flex-start;
}
.social-media-icons a img {
width: 24px;
height: 24px;
margin-right: 20px;
}
.newsletter-section p {
font-size: 12px; /* Adjusted font size */
margin-top: 0px;
margin-bottom: 2px; /* Adjusted spacing */
}
.newsletter-section form {
margin-top: 20px; /* Added space above the form */
}
.newsletter-section .privacy-policy {
margin-bottom: 20px; /* Increased bottom margin */
}
.newsletter-section input[type="email"] {
padding: 10px;
font-size: 14px;
border: 1px solid #ddd;
}
.newsletter-section button {
padding: 10px 20px;
background-color: #000;
color: #fff;
border: none;
cursor: pointer;
}
@media (min-width: 769px) {
.footer-section {
display: flex;
justify-content: space-between;
}
.footer-column, .newsletter-section {
width: calc(25% - 10px);
}
.footer-column h4::after {
display: none;
}
.footer-column ul {
max-height: none;
}
}
@media (max-width: 768px) {
.footer-column h4.active + ul {
max-height: 0px;
transition: max-height 0.5s ease-in;
}
.footer-column {
margin-bottom: 20px;
}
.footer-column::after {
content: '';
display: block;
border-bottom: 1px solid #ccc;
margin-top: 20px;
margin-bottom: 20px;
}
.footer-column:last-child {
margin-bottom: 0;
}
.footer-column:last-child::after {
display: none;
}
.newsletter-section {
padding-top: 20px;
border-top: 1px solid #ccc;
}
.social-media-icons {
margin: 20px 0 30px 0; /* Further increased bottom margin */
}
}
</style>
</head>
<body>
<div class="footer-section">
<!-- Popular Links -->
<div class="footer-column">
<h4 class="active" onclick="toggleAccordion(this)">Popular Links</h4>
<ul>
<li><a href="/collections/sandals">Sandals</a></li>
<li><a href="/collections/sneakers">Sneakers</a></li>
<li><a href="/collections/loafers">Loafers</a></li>
<li><a href="/collections/oxfords">Oxfords</a></li>
<li><a href="/collections/new-arrivals">New Arrivals</a></li>
</ul>
</div>
<!-- My Account -->
<div class="footer-column">
<h4 class="active" onclick="toggleAccordion(this)">My Account</h4>
<ul>
<li><a href="/account">Shopping Cart</a></li>
<li><a href="/account/login">Sign In</a></li>
<li><a href="/account/register">Register</a></li>
</ul>
</div>
<!-- Customer Service -->
<div class="footer-column">
<h4 class="active" onclick="toggleAccordion(this)">Customer Service</h4>
<ul>
<li><a href="tel:1-866-699-7365">1-866-699-7365</a></li>
<li><a href="/contact">Contact Us</a></li>
<li><a href="/shipping">Shipping Information</a></li>
<li><a href="/returns">Returns</a></li>
<li><a href="/faq">FAQ</a></li>
</ul>
</div>
<!-- Newsletter Section -->
<div class="newsletter-section">
<h4 style="font-weight: strong; text-transform: none; font-size: 28px;">Join us on the bright side.</h4>
<div class="social-media-icons">
<!-- Social media icons unchanged -->
<a href="https://facebook.com" target="_blank"><img src="https://cdn.shopify.com/s/files/1/0513/4185/2862/files/Facebook_icon3.png?v=1714009426" alt="Facebook"></a>
<a href="https://instagram.com" target="_blank"><img src="https://cdn.shopify.com/s/files/1/0513/4185/2862/files/instagram_icon3.png?v=1714009528" alt="Instagram"></a>
<a href="https://tiktok.com" target="_blank"><img src="https://cdn.shopify.com/s/files/1/0513/4185/2862/files/tiktok_icon3.png?v=1714009599" alt="TikTok"></a>
</div>
<p style="font-weight: strong; text-transform: none; font-size: 16px;">Sign up for our email list.</p>
<p>You'll be the first to know about the latest styles and promotions.</p>
<p class="privacy-policy"><u><a href="/policies/privacy-policy">Privacy Policy</a></u></p>
<form id="newsletter-form">
<input type="email" name="contact[email]" placeholder="Enter your email address..." required>
<button type="submit">SUBMIT</button>
</form>
</div>
</div>
<script>
// Accordion functionality for mobile
document.addEventListener('DOMContentLoaded', function() {
var accordionToggles = document.querySelectorAll('.footer-column h4');
function toggleAccordion() {
var content = this.nextElementSibling;
if (!this.classList.contains('active')) {
// Close all other sections
accordionToggles.forEach(function(toggle) {
toggle.classList.remove('active');
toggle.nextElementSibling.style.maxHeight = '0';
});
// Expand the clicked section
this.classList.add('active');
content.style.maxHeight = '1000px';
} else {
// Minimize if clicked again
this.classList.remove('active');
content.style.maxHeight = '0';
}
}
accordionToggles.forEach(function(toggle) {
toggle.addEventListener('click', toggleAccordion);
});
// Initially expand all sections
accordionToggles.forEach(function(toggle) {
toggle.classList.add('active');
toggle.nextElementSibling.style.maxHeight = '1000px';
});
});
document.getElementById('newsletter-form').addEventListener('submit', function(e) {
e.preventDefault(); // Prevent the default form submission
var email = document.querySelector('input[name="contact[email]"]').value;
// Check if the email field is not empty
if(email) {
// Redirect to the challenge page
window.location.href = "/challenge#footer-signup_form?email=" + encodeURIComponent(email) + "&return_to=" + encodeURIComponent("/?customer_posted=true");
} else {
alert('Please enter your email address.');
}
});
</script>
</body>
</html>
