Logo
  • About
  • Services
  • Blog
  • Resources
  • Contact
ActOut
Gumroad Subscribe Form
Gumroad Subscribe Form

Gumroad Subscribe Form

AMEtech Solutions
AMEtech Solutions

Subscribe to my Gumroad Store!

Prerequisites

🟠
Intermediate skill level

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.

Script to enable custom embeds from code blocks | Super Community

UPDATE: There is a new version of this script in the comments below or here in our help articles site. Cam.  Hey Super crew - I just threw together some quick and dirty code so that I could drive custom embeds straight from Notion code blocks, and thou...

community.super.so

Step 1

🟡
Easy

Go to the Gumroad link below to get the code for your Gumroad Subscribe Form embed code.

Gumroad

app.gumroad.com

Gumroad

Click on “Copy embed code” on the code in the ‘Subscribe form’ widget info.

image

Step 2

🟡
Easy

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.

I can’t include it in the code block below without converting it into the subscribe form!
I can’t include it in the code block below without converting it into the subscribe form!

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.

image

Step 3 (Optional)

🔴
Advanced

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!

If you have any questions about CSS you can refer to my free Notion template available on Gumroad!

Products

Listed Products

2 views

Listed Products

Free Products

Notion Website TemplateNotion Website Template
Notion Website Template
$27.00
Podcast Booking & Episode CalendarPodcast Booking & Episode Calendar
Podcast Booking & Episode Calendar
$17.00
2022 Elected Officials2022 Elected Officials
2022 Elected Officials
$17.00
2023 Election Tracker2023 Election Tracker
2023 Election Tracker
$27.00
2023 Florida Politics2023 Florida Politics
☀️
2023 Florida Politics
$47.00
2023 Tennessee Politics2023 Tennessee Politics
📢
2023 Tennessee Politics
$47.00
Etsy Shop PlannerEtsy Shop Planner
Etsy Shop Planner
$1.00
CSS Resources & Tools

While working on my first Notion + Super site, AMEtech.solutions, I found myself constantly searching for CSS properties and various code in order to tweak my site. It was only after the long journey to learn CSS and build a new, custom site that Super implemented their AWESOME No-Code Design Platform.These days 99% of my time is directed towards developing content and consulting and maybe 1% tweaking CSS.

ametech.gumroad.com

CSS Resources & Tools
🟦
Hope this was helpful!
ℹ️
Justin Russell
https://ametech.solutions/directory/people/justin-russell
https://www.credly.com/badges/782dd145-e896-437f-8a27-80b701e031b7/public_url

"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!

Need more help? Contact me!

SuperSuper
TwitterTwitter
GumroadGumroad
CalendlyCalendly
Buy Me A CoffeeBuy Me A Coffee
E-mailE-mail
Logo

About

Services

Blog

Resources

Contact

© AMEtech.solutions 2022

XGitHubYouTubeRedditDiscord
<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>