Subscribe to my Gumroad Store!
Prerequisites
Itās simple to get all kinds of widgets like this on your site with Custom Embed Code.
Go to the Super Community page below and take the code snippet from Cam Incollās comment (the link should take you there directly) and paste it into the HEAD of your Code section in the Super App. It took me maybe ten minutes to get everything set up and working and that was with testing.
Step 1
Go to the Gumroad link below to get the code for your Gumroad Subscribe Form embed code.
Click on āCopy embed codeā on the code in the āSubscribe formā widget info.
Step 2
Create a code block on the Notion page where you want your Gumroad Subscribe form located. Do that by typing /code and then insert the custom code snippet into your code block.
IMPORTANT Make sure super-embed: is the first thing in the code block.
You shouldnāt have to do anything else to get a custom Gumroad Subscribe Form widget in your Notion pages! If you want the code on multiple pages I suggest you create turn your code block into a synced block click the six dots next to the code block like this.
Step 3 (Optional)
Iāve included all of the CSS from my Gumroad Subscribe form and laid it out in an easy to view manner so you can customize the code embed as you want. Have fun and experiment!
<style>
#gumroad-follow-form-embed {
margin: 0px;
padding: 0px;
box-sizing: border-box;
min-width: 0px;
display: grid;
grid-auto-flow: column;
gap: 0.75rem;
grid-template-columns: 1fr;
grid-auto-columns: max-content;
align-items: center;
}
#gumroad-follow-form-embed-button {
margin: 0px;
padding: 0px;
box-sizing: border-box;
min-width: 0px;
background: transparent;
font-size: 1rem;
line-height: 1.5;
--line-height: 1.5rem;
padding: 0.75rem 1rem;
border: 0.0625rem solid rgb(0, 0, 0);
color: rgb(0, 0, 0);
border-radius: 0.25rem;
font-family: "Mabry Pro", sans-serif;
grid-auto-flow: column;
grid-auto-columns: minmax(0px, max-content);
display: inline-grid;
align-items: center;
justify-content: center;
gap: 0.5rem;
cursor: pointer;
text-decoration: none;
transition: all 0.14s ease-out 0s;
background-color: rgb(0, 0, 0);
color: rgb(255, 255, 255);
}
#gumroad-follow-form-embed-button:hover {
transform: translate(-0.25rem, -0.25rem);
box-shadow: rgb(0, 0, 0) 0.25rem 0.25rem;
background-color: var(--accent);
color: var(--contrast-accent);
}
#gumroad-follow-form-embed-input {
margin: 0px;
padding: 0px;
box-sizing: border-box;
min-width: 0px;
outline: thick ridge #FD95E2 !important;
font-family: "Mabry Pro", sans-serif;
padding: 0.75rem 1rem;
font-size: 1rem;
line-height: 1.5;
--line-height: 1.5rem;
border: 0.0625rem solid rgb(0, 0, 0);
border-radius: 0.25rem;
display: block;
width: 100%;
background-color: rgb(255, 255, 255);
color: #000;
--active-bg: #000;
}
#gumroad-follow-form-embed-input::placeholder {
color: rgb(168, 162, 158);
}
#gumroad-follow-form-embed-input:focus-within {
outline: rgb(255, 144, 232) solid 0.125rem;
}
#gumroad-follow-form-embed-input:disabled {
cursor: not-allowed; opacity: 0.3;
}
#gumroad-follow-form-embed-input:read-only {
background-color: rgb(244, 244, 240);
color: rgb(0, 0, 0);
}
</style>
<form class="input-with-button" action="https://app.gumroad.com/follow_from_embed_form" method="post" style="--accent:var(--accent);--contrast-accent:var(--contrast-accent)" id="gumroad-follow-form-embed">
<input type="hidden" name="seller_id" value="6023991977115"/>
<input id="gumroad-follow-form-embed-input" type="email" placeholder="Your email address" name="email" value=""/>
<button id="gumroad-follow-form-embed-button" class="primary" type="submit">Follow</button>
</form>If you have any questions about CSS you can refer to my free Notion template available on Gumroad!
"Hello! I'm here to help you overcome any challenges you might be facing in regards to Notion + Super websites.
If you have any questions or need guidance, feel free to reach out to me. You can DM me on Twitter, connect with me on Super or use the links below to reach out!
I'm dedicated to providing valuable support to individuals like you. My goal is to ensure your website's success, so don't hesitate to get in touch. Looking forward to helping you achieve your goals!
If you are happy with this page please consider Buying me a Coffee!
