Thiết kế website giá rẻ

Question

Good day!

How to connect/integrate shopify custom html/liquid for the newsletter footer?

i created shopify custom html/liquid for the newsletter subscription
im getting an error “Sorry, the page you requested does not exist.” when i click the submit button

https://ynzhpl06ht50dhyz-51341852862.shopifypreview.com

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;
    text-transform: capitalize;
    margin-bottom: 10px;
    cursor: pointer;
    position: relative;
  }
  .footer-column h4::after {
    content: "+";
    position: absolute;
    right: 0;
    top: 0;
    font-weight: normal;
  }
  .footer-column ul {
    list-style-type: none;
    padding: 0;
    margin: 0;
    max-height: 1000px;
    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;
  }
  .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;
    display: flex;
    justify-content: flex-start;
  }
  .social-media-icons a img {
    width: 24px;
    height: 24px;
    margin-right: 20px;
  }
  .newsletter-section p {
    font-size: 12px;
    margin-top: 0px;
    margin-bottom: 2px;
  }
  .newsletter-section form {
    margin-top: 20px;
  }
  .newsletter-section .privacy-policy {
    margin-bottom: 20px;
  }
  .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;
    }
  }
</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">
      <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>
  document.addEventListener('DOMContentLoaded', function() {
    var accordionToggles = document.querySelectorAll('.footer-column h4');

    function toggleAccordion() {
      var content = this.nextElementSibling;
      if (!this.classList.contains('active')) {
        accordionToggles.forEach(function(toggle) {
          toggle.classList.remove('active');
          toggle.nextElementSibling.style.maxHeight = '0';
        });
        this.classList.add('active');
        content.style.maxHeight = '1000px';
      } else {
        this.classList.remove('active');
        content.style.maxHeight = '0';
      }
    }

    accordionToggles.forEach(function(toggle) {
      toggle.addEventListener('click', toggleAccordion);
    });

    accordionToggles.forEach(function(toggle) {
      toggle.classList.add('active');
      toggle.nextElementSibling.style.maxHeight = '1000px';
    });

    var newsletterForm = document.getElementById('newsletter-form');
    newsletterForm.addEventListener('submit', function(e) {
      e.preventDefault();
      var emailInput = document.querySelector('input[type="email"]').value;

      if (emailInput) {
        var challengeUrl = "/challenge#footer-signup_form";
        var returnUrl = "/?customer_posted=true";
        var encodedEmail = encodeURIComponent(emailInput);
        var fullUrl = `${challengeUrl}?email=${encodedEmail}&return_to=${encodeURIComponent(returnUrl)}`;
        window.location.href = fullUrl;
      } else {
        alert('Please enter your email address.');
      }
    });
  });
</script>
</body>
</html>

different browser
check other shopify forum sites for solutions
when the customer input email address
then click the submit button -> challenge page (recaptcha) -> submit
Thank you for subscribing!

Thiết kế website giá rẻ

Danh mục

How to connect/integrate shopify custom html/liquid for newsletter footer