Redirect from successful subscriber

In development of a Ghost site. Other than a basic commercial theme, no changes to templates.

When an email is entered in the subscriber form it successfully saves in the subscriber list and the integration with MailChimp works great. However, on submission the form redirects to the /subscriber/ page, which is fine, except that it reloads the form with the email pre-populuated. To the user it appears that the submission failed.

I would either (a) like to show a thank you message and hide the form, or (b) redirect to another thank you page. I don’t see an obvious way to accomplish either of those results. I’m also open to options I’m not considering.

Hey there! You could use the JavaScript submit event to check when the form is submitted and replace the form with a thank you message? The MDN docs have some more information on this event:

Something like:

const form = document.getElementById('form');

function logSubmit(event) {
  event.preventDefault();
  
  const thankYouMessage = document.createElement('p')
  thankYouMessage.innerHTML = 'Thanks for your submission!';

  form.style.display = 'none';
  form.after(thankYouMessage);
}

form.addEventListener('submit', logSubmit);

I’ve created a demo as well for reference:
https://codepen.io/daviddarnes/pen/BXmEoR?editors=1010

David, thank you so much for thorough reply, code sample, and documentation link. It is clear that I know nothing about js so I appreciate the help. Of course, both samples (yours and Mozilla’s) work perfectly in their environments, but not on my Ghost site. I get a TypeError: null is not an object (evaluating ‘form.addEventListener’).

While I haven’t found an answer on StackOverflow yet, I’m sure I will. Thanks for pointing me in the right direction.

1 Like

You’re very welcome! Do you have a link to your site or subscribe form? I’m pretty sure I know what the problem is, I just need to know the value of something on the site you’re doing it on

Hi David,

Yes, if you have a minute, I would appreciate your insight. I’ve turned off the private login. Here is the URL: legalrisk.training.

You can see the form at the bottom of the page. I left your code inside tags in the Code Injection > Header area.

Thanks,
Mark

Hey @mark.l, I’ve amended my code with the right reference now. You might be able to see what I’ve changed if you compare the code:

const form = document.getElementById('subscribe-form');

function logSubmit(event) {
  event.preventDefault();
  
  const thankYouMessage = document.createElement('p')
  thankYouMessage.innerHTML = 'Thanks for your submission!';

  form.style.display = 'none';
  form.after(thankYouMessage);
}

form.addEventListener('submit', logSubmit);

Hi @DavidDarnes, thanks again for the help. I had also tested changing the elementID to subscribe-form. Still doesn’t work. There error is still there.

I assumed it was because the code was executing before the form appears, so I wrapped your code in:

window.onload = () => {…}

That caused the message to display on submission and the error to display. BUT, now the data isn’t saved?! When I go to subscribers on the backend, the email submission is not there. I’m quite certain that I am just missing something obvious.

Thanks!

Strange, did it all work without wrapping it in window.onload? The form should be there when the page loads, so wrapping it in that won’t help I think. Try putting it in the footer code injection section, the page will have completely loaded by then

I think it’s because you’re preventing the form submission :thinking: I might be thinking in the wrong context, but from what I see, the subscriber submits the form and is immediately told thanks without the submission being sent?

I was wondering that with the event.preventDefault(); but I would’ve thought the submit event has happened if I’m listening for the submit event?

From what I remember, the submit event occurs when the form is submitted by the user. One of the biggest use cases for this is to submit the submission via fetch to prevent the page reloading

I don’t think there’s an after-submit method, since the page probably destroyed as part of the submission

So maybe something like this, if jQuery is present on the page:

$('#subscribe-form').submit( function(event) {
    event.preventDefault();
    $.ajax({
        url: '/subscribe/',
        type: 'post',
        data: event.target.serialize(),
        success: function() {
            event.target.replaceWith( "<p>Thanks for your submission!</p>" );
        }
    });
}