How to connect the custom html/liquid to newsletter subcriptions?

smsigroup
Explorer
55 0 16

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>

 

Replies 0 (0)