If you're reading this, there's a good chance you're a user of HEY email. Welcome to the club! HEY, from the rad people at Basecamp, is a great email service that actually makes your inbox calm.
A calm inbox? Yeah, I know. It sounds insane. But it can happen. After using HEY, it's hard to go back to other email services. Life just isn't the same after you experience the glory that is the Imbox (no, that's not a typo).
Anyway, one cool feature of HEY is the HEY World blog and newsletter system.
In fact, I use HEY World as my newsletter system. Because HEY is a privacy focused platform, I never see my open or click rates; just the total number of subscribers. I think that's pretty rad.
But hell, you're here looking how to embed the HEY World form onto your website, so you don't need a whole speech from me about how great the product is.
It took me A while to use HEY World as my newsletter system because I wasn't able to embed the sign up form on my website.
But now that the code has been cracked, I'm going to share it with ya'll so you don't go through the nonsense that I went through.
Alright, let's get to the good stuff!
One more thing: Massive shout out to Kia Kamagar for helping me solve this code 🙏
A calm inbox? Yeah, I know. It sounds insane. But it can happen. After using HEY, it's hard to go back to other email services. Life just isn't the same after you experience the glory that is the Imbox (no, that's not a typo).
Anyway, one cool feature of HEY is the HEY World blog and newsletter system.
In fact, I use HEY World as my newsletter system. Because HEY is a privacy focused platform, I never see my open or click rates; just the total number of subscribers. I think that's pretty rad.
But hell, you're here looking how to embed the HEY World form onto your website, so you don't need a whole speech from me about how great the product is.
It took me A while to use HEY World as my newsletter system because I wasn't able to embed the sign up form on my website.
But now that the code has been cracked, I'm going to share it with ya'll so you don't go through the nonsense that I went through.
Alright, let's get to the good stuff!
One more thing: Massive shout out to Kia Kamagar for helping me solve this code 🙏
What It Looks Like On My Site
And for the mobile view...
I use WordPress as my CMS. So all I did was drop an HTML widget in there and used the following code (feel free to just copy and paste - but don't forget to use your own username, as highlighted below).
The HTML Form
<form class="form-inline" action="https://world.hey.com/ajm/subscribers" accept-charset="UTF-8" data-remote="true" method="post" target="_blank"> <input type="email" name="subscriber[email_address]" id="subscriber_email_address" placeholder="Email…" required=""> <button type="submit" value="Subscribe" data-wait="Please wait...">SUBSCRIBE</button> </form>
Be sure to change the URL to your username -- https//world.hey.com/YOUR-NAME/subscribers
The CSS Style Guide
Now comes the styling. To make your form look like mine, go the Themes -> Customize -> CSS and paste in the following code. I have the form stacked on mobile because it just looked better to me, but it's your site, so design it however you want.
.form-inline {
display: flex;
flex-flow: row;
align-items: center;
}
.form-inline label {
margin: 5px 5px 5px 0;
}
.form-inline input {
vertical-align: middle;
width: 50%;
padding: 8px;
background-color: #fff;
border: 1px solid #020202;
border-radius: 30px 0px 00px 30px;
}
.form-inline button {
padding: 8px 20px;
background-color: black;
border: 1px solid #020202;
color: white;
cursor: pointer;
border-radius: 0px 30px 30px 0px;
font-weight: bold;
}
.form-inline button:hover {
background-color: #4b5320;
}
@media (max-width: 800px) {
.form-inline input {
margin: 10px 0;
width: 100%;
border-radius: 3px;
}
.form-inline button {
border-radius: 3px;
}
.form-inline {
flex-direction: column;
align-items: stretch;
}
}Alright, good luck and if you have any questions, email me at ajm@hey.com
Until next time ✌️
-AJM
Web | Twitter | Inside | Email