Hide Newsletter Sign Up Email Form Upon Submission

Store Design
,
1

I just launched this site: https://financialalchemycoaching.com/

And am finding that the email sign up in Studio is creating some confusion.

  1. The confirmation message isn’t flashing long enough.

  2. The Email field doesn’t disappear AND stays filled in with the email address, which makes people think it didn’t submit.

I emailed Shopify about the duration issue and they are looking into it.

But The email field disappearing isn’t an option. Is there a CSS hack to make this happen?

Thanks!

2

Shopify doesn’t offer an option to hide the email field after submission, you can use CSS and a bit of JavaScript.
I can provide the codes you can try out and see if it works

3

Thank you. I’d love to see if it would work. Can you provide the CSS?

4

document.addEventListener(“DOMContentLoaded”, function () {
const form = document.querySelector(“form.newsletter-form”); // Adjust if needed
const emailField = document.querySelector(“input[type=‘email’]”);
const confirmationMessage = document.querySelector(“.newsletter__message”);

if (form) {
form.addEventListener(“submit”, function () {
setTimeout(function () {
if (confirmationMessage && confirmationMessage.textContent.trim() !== “”) {
emailField.style.display = “none”; // Hide the field after success
}
}, 500); // Delay to allow message to show
});
}
});

5

This should work for hiding the email field after submission.
Let me know if it works.

6

Hey there! I couldn’t get it to work, but I think it’s because somehow the email newsletter is requiring captcha, even though I’ve turned off that setting.

I’m still working through that. I’m hopeful for your code when I have that resolved.

Thank you for the help!