How to Add a Ghost Signup Form to Another Site

After migrating my newsletter from Revue to Ghost, I needed to modify my Astro blog here to allow people to subscribe. You can embed the default floating portal form easily with some js, but I wanted a custom signup form. Here I’ll show you how to do both.

Get an Integration Key

First of all you’ll need to go ahead and add a new custom integration under settings to your Ghost site that will give you a “Content API Key”.

Then, when you include the portal script for ghost you add data-key attribute that includes it like so:

<script defer src="https://unpkg.com/@tryghost/portal@latest/umd/portal.min.js" data-ghost="https://newsletter.ianwootten.co.uk" data-api="https://newsletter.ianwootten.co.uk/ghost/api/content/" data-key="{YOUR_CONTENT_API_KEY}"></script>

This will add the default button and you should see it appearing on pages you include the script on.

Create a Custom Form

You can then create a custom signup form using the data-members-form and data-members-email attributes like so:

<form data-members-form>
  <input data-members-email type="email" required="true"/>
  <button type="submit">Continue</button>
</form>

You can read more about the data attributes for portal here over on the ghost site and npm.

If you don’t want the floating portal button to display on certain pages, you’ll either need to disable it completely in ghost, or add some custom css to hide it.

#ghost-portal-root {
	display: none;
}

You’ll also need to add custom css to display a message once the email has been sent. Portal will add some extra classes to your form once the email is sent which you can use for this.

In my case, this sits neatly in my astro subscribe component which is shown below. Subscribe below to test it out for yourself 😉

<section class="relative">
	<div class="max-w-6xl mx-auto px-4 sm:px-6">
		<div class="py-12 md:py-20">
			<div class="max-w-3xl mx-auto text-center p-6 rounded-md shadow-xl dark:shadow-none">
				<h2 class="text-4xl md:text-4xl font-bold leading-tighter tracking-tighter mb-4 font-heading">
					Subscribe for more
				</h2>
				<p class="text-xl text-gray-600 dark:text-slate-400">
					My monthly newsletter is stuffed with helpful articles, tools and code. No spam, unsubscribe any time. 
				</p>

				<div class="mt-6">
					<script defer src="https://unpkg.com/@tryghost/portal@latest/umd/portal.min.js" data-ghost="https://newsletter.ianwootten.co.uk" data-api="https://newsletter.ianwootten.co.uk/ghost/api/content/" data-key="{YOUR_CONTENT_API_KEY}"></script>
					<form class="text-right" data-members-form>
					<input class="mt-1 block w-full px-3 py-2 bg-white border border-slate-300 rounded-md text-sm shadow-sm dark:placeholder-slate-700 dark:text-slate-900
					focus:outline-none focus:border-sky-500 focus:ring-1 focus:ring-sky-500" placeholder="Your email address..." type="email" required data-members-email>
					<button class="mt-3 btn text-white bg-primary-600 hover:bg-primary-800 mb-4 sm:mb-0" type="submit">Subscribe</button>
					<strong class="feedback">Thanks so much! Check your inbox for an activation link.</strong>
					</form>
				</div>
			</div>
		</div>
	</div>
</section>

<style>

form .feedback {
	display: none;
}

form.success input, form.success button {
	display: none !important;
}

form.success .feedback {
	display: unset;
}
</style>

Source: https://forum.ghost.org/t/is-there-an-embeddable-signup-form/26428