Change "Subscribe" text in sign up form and button

Themes
1

I’d like to change the text on the standard subscription form from “Subscribe to” to “Sign up for” (followed by the publication name). I’d also like to change the text in the button on the form from “Subscribe” to “Sign up”.

Is it possible to do this by adding CSS to Code Injection? I’m using the Headlines theme, hosted on Ghost.org.

Thanks!

2

Hi,
You can try this, Ghost Admin → Code injection → Site footer → paste below js code.

<script>
  const init = () => {
    const siteTitle = document.title;
    document.querySelector('.gh-subscribe-title').textContent = `Sign up for ${siteTitle}`;
    document.querySelector('.gh-subscribe-btn').textContent = 'Sign up'; 
  }

  if (document.readyState = 'interactive') {
    document.addEventListener('DOMContentLoaded', () => {
      init();
    })
  } else {
    init();
  }
</script>

:grinning:

Allen

3

Boom. Perfect! Thanks so much - have a great day.

4

Hello! I tried to do this on Ghost 5.84.2 and was not able to get this to work. Either I misunderstand the context of this question, or something has changed.

I’d like to change some elements of the .gh-portal element that is loaded in the iframe - the one that shows after clicking the ‘Subscribe’ button in the lower right corner of the page. Specifically, the placeholder text on the Name and Email fields. When I try using variations of the script substituting any actual element on the page (e.g. “.gh-portal-main-title” for the H1 element on that signup form) I get "cannot set properties of null.

Is there a way to select these elements inside the iframe? Is the timing of the init() off?

(As an aside, it seems very silly that there are hard-coded values for the placeholder text in this form…we really should be able to update these through a Branding setting or something similar. If I’ve missed this setting somewhere, my apologies.)

1 Like