Hello! I’m interested in editing the HTML/CSS of my site from the plain ‘Subscribe now’ button to something more like this:
My limited front-end development knowledge tells me that I can use my browser’s inspect ability to look at the code, but I’ve no idea where’s the file that I should edit to get the same effect.
I apologise for this newbie’s question; I swear I’ve spent the past half an hour googling/looking through the docs but still couldn’t figure it out. Thanks!
What theme are you using?
Within Dawn theme, In partials > cover.hbs at line number 16 you will find the code for the “SUBSCRIBE NOW” button. Dawn/cover.hbs at 6bee5f0b295223d4551159f2db0f0d52630437e8 · TryGhost/Dawn · GitHub
In Casper (v3.1.2) theme within default.hbs file you will find the form in your screenshot at line number 64 which ends at line 79 Casper/default.hbs at 8fefeca41ba34da3d67d296c25062cb37599ab30 · TryGhost/Casper · GitHub
I think this will help you for what you are trying to achieve. Maybe you need some extra css, which you can add via code injection.
Yeah, I would do like GBJ recommends. You can change the styling in the code injection portion in your admin. You just need to find what HTML/CSS you need to change. So by using the inspector of your browser you can find what elements you need to change the styling too.
And do you want that form available to use in many different places or just one time? You could either add a form to your templates. Or you could create an HTML snippet so you can add it to your posts as you go.
For example, here is some form HTML that I use. And I made a snippet so I can add it to different parts of posts. And I have the styling in the code-injection of the main header.
<div class="subscribe-section">
<div class="subscribe-wrap">
<div class="subscribe-header">
<h3>Subscribe to our newsletter.</h3>
<form data-members-form="subscribe" class="subscribe-form">
<input data-members-email required type="email" name="email" placeholder="Your email address" aria-label="Your email address">
<button type="submit">Subscribe</button>
<small class="alert-loading">Processing your application</small>
<small class="alert-success">Great! Check your inbox and confirm your subscription</small>
<small class="alert-error">There was an error sending the email</small>
</form>
</div>
</div>
Hello, thanks for the response! As mentioned earlier I am trying to get a signup form like this page, I’m editing the hbs file that @GBJsolution has kindly directed me to.
I think I need HTML as well after using the browser inspector to look at other sites, and I tried copying and pasting this whole block of code after line 14 of this file:
<div style="background-color: #f8f8f8;padding: 30px;border-radius: 3px;text-align:center;">
<h2 style="margin:0 0 20px">Subscribe to the newsletter</h2>
<form class="subscribe-form" data-members-form="subscribe">
<div class="subscribe-form-fields">
<input class="tc" data-members-email="" placeholder="your@email.com" autocomplete="false" required>
<button type="submit">
<span style="">Subscribe</span>
</button>
</div>
<div class="message-success">
<strong>Great!</strong> Check your inbox (or spam folder) and click the link to confirm your subscription.
</div>
<div class="message-error">
Sorry, something went wrong. Please try again.
</div>
</form>
</div>
<style>
.subscribe-form.success .message-success {display:block}
.subscribe-form.success .subscribe-form-fields {display:none}
.subscribe-form.error .message-error {display:block}
</style>
Unfortunately, it seems like there’s no change, and I don’t see the code that I’ve added even when using the inspector. Do you mind giving me advice on what I’m doing wrong here? Thanks!
Have you restarted the Ghost and cleared every cache since making the changes?
That worked thank you! Apologies for the amateur mistake.
Can anyone tell me where the html/CSS for the subscribe buttons is in Edge theme? I can’t locate it anywhere. Thanks!