Custom subscriber signup input fields

Developer help
1

Hey everyone,

First time Ghost user here. I have a custom use case that I’m looking to see if it’s been solved already.

When someone comes to my site, I want to create a custom input field to gather and store off information about them once they submit their email.

It would theoretically look something like this:

image

Is this possible with Ghost? This information will be important for me to collect for future tailored newsletters, blogposts, and product offerings.

I’m using version 4.32.3, don’t have much of anything set up yet. Before I got too far in, I needed to confirm if this was possible.

Thanks for your help!

2

Hi @Daniel_Bracken

You could use member labels for this:

For some practical examples you can check out this post:

3

This is just what I was looking for! Thanks so much!

4

Biron quick question for you:

I added the code that you outline in your article for checkboxes and member labels. For some reason, I don’t get clean checkbox that you show in your post.

I’m using ‘Edition’ theme, version 1.0.0

I edited the cover.hbs file to include the code below. I removed ‘checked’ as you suggested in your post:

            <h5>What role(s) are you seizing the day in? Select all that apply</h5>

            <label><input data-members-label type="checkbox" onChange="this.toggleAttribute('data-members-label')" value="Parent"><span>Parent</span></label>

            <label><input data-members-label type="checkbox" onChange="this.toggleAttribute('data-members-label')" value="Student"><span>Student</span></label>

            <label><input data-members-label type="checkbox" onChange="this.toggleAttribute('data-members-label')" value="Entrepreneur"><span>Entrepreneur</span></label>

            <label><input data-members-label type="checkbox" onChange="this.toggleAttribute('data-members-label')" value="Professional"><span>Professional</span></label>

The result that I’ve been getting is this:

image
image934×835 29.6 KB

My site is https://sundaynightlight.com for reference.

Any suggestions you might be able to make as to why this is happening? Really appreciate the help here Biron!

5

You have some CSS that is overwriting the browser style, you can add this to have the default browser rendering:

input[type="checkbox"] { appearance: auto; }

From there you can style it adjust the CSS, you can find a lot of resources online on styling checkboxes.