How do you make a subscribe form?

I have a subscribe page that hasn’t been working in a long time (it worked in a previous version of ghost).

I think it’s because of changes in ghost.

The theme page looks like this:

{{!< default}}

{{> header}}
<main>
    <article class="post-full">
        <header class="post-full-header">
            <h1 class="post-full-title"><a href={{url}}>Subscribe</a></h1>
        </header>
        {{^if success}}
        <div class="subscribe-box">
            <header>
                <h3>Donate your inbox to me</h3>
            </header>

            {{subscribe_form
                                    form_class="gh-signin"
                                    input_class="gh-input"
                                    button_class="gh-btn gh-btn-blue gh-btn-block"
                                    placeholder="Your email address"
                                    autofocus="true"
                                }}

        </div>
        {{else}}
        <div class="subscribe-box">
            <header>
                <h3>Subscribed.</h3>
            </header>

            <p>
                You've successfully subscribed </em>
                with the email address <em>{{email}}</em>.
            </p>
            <p>
                Thank you very much for subscribing, looking forward to writing to you soon.
            </p>
        </div>
        {{/if}}
        <section class="post-full-content">
            <div class="post-content">
                <p>You know how at the end of a conversation, its normal to feel like you had more to say?</p>
                <p>I feel like that all the time.</p>
                <p>Please subscribe and allow me to send you a weekly email with what I have been thinking about that
                    week.</p>
                <p>You will also receive updates whenever I have a new piece written up on the site.</p>
                <div class="buttons-box-inline">
                    <a class="button-special" href="/letters">
                        <h3>Read past letters here</h3>
                        <i class="fas fa-envelope-open"></i>
                    </a>
                </div>
            </div>
        </section>
        </div>
        <section class="post-full-content">
            <div class="post-content">
                <hr>
                <p>In case you clicked the envelope icon wanting to email me, <a href="mailto:hello@sashinexists.com">
                        click here</a>.</p>
            </div>
        </section>
    </article>
</main>

For custom membership flows, check out the docs here:

To the best I can tell, it simply doesn’t work. Nothing happens when I hit submit.

<div class="subscription-box" style="--color-accent: #cc60e3;">
  <h3 class="subscription-form-title">Donate your inbox to me</h3>
  <form class="subscription-form" data-members-form> 


    
    <div class="subscribe-box">
      <input data-members-email type="email" placeholder="Your email address" required="true"/> 
      <button class="btn" type="submit">Signup</button>
    </div>
    <div class="success-message">Great! Check your inbox and click the link.</div> 
    <div class="error-message">Sorry, something went wrong. Please try again.</div> 
  </form>
</div>


Is anything obviously wrong here?

Looks good to me! The subscription form on your website also worked for me.

For success and other state messages, you can configure those with CSS. The relevant class is added to the form element, then, e.g., you can show your success message like this:

.success-message {
  display: none;
}

.success .success-message {
  display: block;
}

Did you actually receive an email though?

Yep:
CleanShot 2023-05-01 at 15.36.22

Interesting! I tried with a temp email just now and it seemed to work.

It didn’t work with a gmail that I had access to for some reason.

Does this make any sense to you?

With gmail, did you check your spam folder?

I didn’t get a 500 error, but this references Cloudflare. Do you have CF configured with Ghost?

Is there a way that I should configure cloudflare with ghost? I’ve configured it to work with my website, I can’t remember how. Maybe through digital ocean maybe just by setting the DNS

It looks like I’ve already got these two rules, any more rules that would make sense for me to add?

I did check my spam folder, also

Are you able to check your CF logs? Maybe there’s something there. Otherwise, I don’t see anything amiss, and I’ve been successfully able to sign up via your form.

1 Like

I see you, it looks like everything worked fine on your end. I’m wondering if it has something to do with gmail.

I don’t think I can see individually logged events on cf

I think the culprit is likely CF. Are you able to turn off the non-essential services you’re using with it and test the gmail address again?

Will give it a shot, I’m also not able to use my own domain’s non gmail addresses interestingly enough

1 Like

I turned cloudflare to development mode.

I still can’t get it working with my gmail addresses or the addresses at my domain (sashinexists.com)

It worked with a temp email.

When it fails the CSS around the form gets this class error:

What exactly triggers this?

I am getting this error and cloudflare is completely turned off:

XHRPOST
https://sashinexists.com/members/api/send-magic-link/
[HTTP/2 500 Internal Server Error 1212ms]

	
POST
	https://sashinexists.com/members/api/send-magic-link/
ステータス
500
Internal Server Error
バージョンHTTP/2
転送量746 バイト (332 バイト サイズ)
リファラーポリシーno-referrer-when-downgrade
要求優先度Highest

    	
    access-control-allow-origin
    	*
    cache-control
    	no-cache, private, no-store, must-revalidate, max-stale=0, post-check=0, pre-check=0
    content-length
    	332
    content-type
    	application/json; charset=utf-8
    date
    	Mon, 15 May 2023 02:26:15 GMT
    etag
    	W/"14c-s9F7FNX81ka192gCEI2FZ6pABe4"
    server
    	nginx/1.18.0 (Ubuntu)
    vary
    	Accept-Encoding
    X-Firefox-Spdy
    	h2
    x-powered-by
    	Express
    	
    Accept
    	*/*
    Accept-Encoding
    	gzip, deflate, br
    Accept-Language
    	en-AU,en-US;q=0.7,en;q=0.3
    Connection
    	keep-alive
    Content-Length
    	213
    Content-Type
    	application/json
    Cookie
    	__stripe_mid=b7ae9a78-f0d4-43d6-8f9b-f6d05249e1e6f0cbd7; __stripe_sid=06de5c85-5e34-4b0c-ba80-0bf8da5fb711b37ccc
    DNT
    	1
    Host
    	sashinexists.com
    Origin
    	https://sashinexists.com
    Referer
    	https://sashinexists.com/subscribe/
    Sec-Fetch-Dest
    	empty
    Sec-Fetch-Mode
    	cors
    Sec-Fetch-Site
    	same-origin
    TE
    	trailers
    User-Agent
    	Mozilla/5.0 (X11; Linux x86_64; rv:109.0) Gecko/20100101 Firefox/113.0

It works with some email addresses but not others? Sounds like maybe gmail is blocking your mail server as possible spam. Google can be a pain - you may need to set up dkim, dmarc, and spf records for your DNS, if you don’t have them already.

This post about adding a webform on Ghost unintentionally became a post about mail servers and dns settings: How I finally got Google to accept my contact form mail

1 Like

I just resolved this. It was my config.production.json that wasn’t configured correctly Configuration - Adapt your publication to suit your needs