Creating Subscribe Page using Shopify Forms

[paulson1]

Hi,

We are planning to create a Page where users can Sign Up using Shopify Forms so that we can automate an email with a Discount Code.

We are planning to give a code in the Additional Scripts section like

<a href="Subscription Page">Visit W3Schools</a>

This new page will have the email field and subcribe button.

Thanks

[Mosfequr111]

Follow these steps to create a sign-up page using Shopify Forms to collect user emails and automate the sending of a discount code.

1. Create the Form

<form id="signup-form" method="post" action="/contact#signup-form">
  <label for="customer_email">Sign Up for a Discount:</label>
  <input type="email" name="contact[email]" id="customer_email" required placeholder="Enter your email">
  <button type="submit">Subscribe</button>
</form>

2. Add Custom Script to Handle Email Submission

<script>
document.addEventListener('DOMContentLoaded', function() {
const form = document.getElementById('signup-form');
form.addEventListener('submit', function(event) {
event.preventDefault(); // Prevent the default form submission
// Collect form data from input field
const email = document.getElementById('customer_email').value;
// If you want to add any form validation logic
// Perform AJAX request or redirection here (can use Shopify API)
alert('Thank you for signing up! Your discount code will be emailed to you.');
// Optionally, redirect after submission
window.location.href = "/thank-you";
});
});
</script>

Or you can use Shopify Apps for Advanced Form Handling
1. If you require more customization and advanced behavior for sign-ups (like conditional discounts, customized welcome emails, etc.), consider using apps like Klaviyo, Privy, or Shopify Forms for extended features.
2. These apps often come with built-in integration options and simplified automation flows, making it easier to manage discount email campaigns.