How To Add The HEY World Newsletter Sign Up Form To Your Website

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.

The reason it took me so long to use HEY World as my newsletter system was not being 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

Stay up to date, get the newsletter

Alex Medick: Full-Stack Marketer

About Alex

Alex Medick is an entrepreneur, marketer, and occasional investor from Las Vegas, Nevada.

If you want to jam about startups, marketing, product, Bitcoin, punk rock, or surfing – he’s your guy.(more)

Get my newsletter

GET ON MY EMAIL LIST ⚡️

Sign up for my newsletter where I talk about the sh*t I dig - like life, product, growth, tech, and entrepreneurship. ↓


ps- I'll never spam you. Spam sucks.