Let me show you how to create a free landing page meant for your newsletter. You will be able to do anything you want with this landing page where you could ask for additional information. The one we're going to create today is going to request the user's email and how they even found us.
Google search X, LinkedIn, etc. So, by the end of this video, you are no longer going to need to pay for a website again. Sound good?
Let's jump in. Welcome back. On today's video, I want to show you how you can create a very simple newsletter landing page.
Today's video is sponsored by Zapier. hit me up and they said, Corbin, we got to do a cool video when it comes to using and leveraging Zapia's platform and giving free value. And I said, you know what?
I got an idea. And the idea I want to do in today's video will not only allow your user to subscribe to any of your email lists automatically. Eg.
The user comes to this landing page, they put in their email there, it's automatically subscribed, but I wanted to take it one step further and show you how powerful Zapier can be with other use cases like the ability to store that data in a Google sheet. So, let's go ahead and do it. Two major links in the description down below.
First one, Zapier. Check it out. Click a link.
Free account. proceed. Second one is going to be the entire free open source code of this web app we're going to create together.
All this code's free and you can simply download it. Corbin, I don't know how to download open source code. Well, I got you two-minute video in the description down below to show you how to download open source code and open it in a IDE like cursor.
Don't make it confusing. What is an IDE? This is just another application for us to look at this code and make it look all beautiful.
Let's begin. First thing we're going to do is create a zap. The zap trigger is going to be that web hook so we can communicate to our web app.
When I say web app, y'all, it is simply just a website. If you're watching this on YouTube right now, youtube. com, that's a web app.
Web hook. I'll then do a trigger of catch hook. Continue.
We don't need our child key. Continue. And then we haven't sent any data yet.
First thing we're going to want here is going to be the URL of this web hook. I'm going to hit copy. You have watched that two-minute video that I showed you how to download this code.
And now you found yourself here looking at the web app. First things first, you might be like, Corbin, how would you make it so you can actually see it and render it? Let me show you how.
You're going to come here to the top left. You're going to hit toggle panel. You're going to go to terminal here.
This command is going to look extremely confusing, but don't worry. It's just a one-shot go. Think of it like launching an application with a double click.
You're going to put in npm rundev. That's it. Hit enter.
Once you do that, you're going to notice this URL here. You're going to simply click this commandclick and it'll open up here. If you're wondering how I open up the browser here, you simply go to a chat here and click the browser tab that says open browser.
Absolutely beautiful. It is rendering now. But what do we do with that little web hook?
I'm going to need you to create a file. You're going to hit right click here. Here you're going to say new file.
In this new file you're going to call it A. EMV. If you've never coded in your entire life, I want you to think of this like a little password holder.
So you're going to create this. Menv. And then within the Menv, you are going to do this simple wording here.
It's going to be Vitz Zapier web hook URL. And you'll paste your URL. If you feel like I'm going fast, don't worry.
If you come back to that open source code repo I provided, repo repository. Think of it simply like this. This is a bunch of code in a folder that I put into the cloud, the internet for you to download for free.
If you want textbased instructions for how I'm doing this, simply come to the readme on the GitHub, scroll down here, and you will notice all the relevant commands you need to do. Notice how I provide the ENV file here as well. There's a bunch of other useful stuff I show here as well, such as how do you customize the color, how do you change the fonts, and everything you see here, you can simply copy and put into a chat over here and ask for relevant changes and we'll do something together.
Let's first see this working. Once you add your web hook, what you're going to need to do is you're going to type onto your keyboard control C. This is going to stop the rendering of your website on your computer.
You're then going to run the same exact command again of npm rundev. Why are we doing this, Corbin? Because we added a new variable here that is very locked up.
So for it to be able to read this effectively and you not to get errors, you need to restart your emulator, the matrix. So once you do that, we're going to put in a test email here of apple@gmail. com.
What an amazing email. We're going to select an option here of YouTube. How'd you find me?
YouTube. And then we're going to hit subscribe now and see if it works. Something went wrong.
If something goes wrong with the code you have or maybe your environment isn't set up correctly, all you need to do is come up here to toggle console. This little button right here, go to the console tab, copy the error, and then paste it up here. Hit enter.
We are in an age right now where you could genuinely have no idea how to code. You could be looking at this video right now and have and be extremely confused. But it doesn't matter because you simply paste the error here and let AI handle it.
Now AI and artificial intelligence has got to the point where it can genuinely think like a senior level engineer. So don't worry. Watch me fix this entire error very fast.
Keep subscribe now. You're on the list. If I come back over to our Zap year little automation here, I can simply hit test trigger here and our data is going to show up.
There it is. Look how beautiful that data is. With this data, you would notice that we got the relevant user's email and the source.
I'm going to show you how to add more fields pretty soon here and change the coloring and change it to your theme. But let's see a working Zap year automation. So I'm going say continue with selected record.
And before we actually continue y'all, let's rename this to email collector. So let's go down the workflow. First thing you may want to add is your newsletter provider.
So maybe you're using Mailchimp here. You would then choose an event here of add a subscriber. So for Mailchimp, it's add or update subscriber.
You would then select your account. With your account selected here, you would choose the audience. Then you would choose the relevant data provided from the form.
So I'd add here. Notice how in the web hook it's already really nice and pretty. So we do email here of apple@gmail.
com and then fill in the relevant other preferences that you care about. So do you want double opt-in true or false? Uh do you want to add different groups, language code, tags?
But you simply hit continue here, test this step, and then it would be able to add a new email to your specific audience list. Now the steps and practices I just showed you here could be applied to any newsletter that integrates with Zapier. And here is the best part.
Zapier is a massive ecosystem. I mean they don't just do automations now. They do their own website pages, landing pages, interfaces, they do tables, they do everything, y'all.
So, because Zapier is such a massive ecosystem, whatever your mail list is or audience list is, I almost can guarantee you that they integrate in Zapier to make this whole process extremely easy. Therefore, the only real lifting you have to do here is providing a web hook URL. In this video though, I want to show you how to take that data and also add it to a Google sheet.
So, I'm going to do Google Sheets here. So, before you actually complete that step, make sure you actually have a Google sheet. Makes sense, right?
Newsletter data up here in the top left. And we're going to email and find us. If you have more data points within that newsletter form, you would provide more columns here.
Now, everything I'm going to show you right now also works with a native integration on Zapier called Zapier Tables. Zap your tables. Think of it like Google Sheets over here, but a massive upgrade.
We can do more functionality within Zapier tables than we could alternatively with Google Sheets. I would encourage you to check out Zapier tables and see the extra levels we can do there. I got my sheet here though.
We're going to come back here and choose an action event for me. is create spreadsheet row. Choose a relevant account.
Find our spreadsheet. So for me, it's newsletter data. Choose the worksheet.
If you don't know what a worksheet is, come down to the top left here. I'm calling it sheet one, but you can call whatever you want. And look at this.
Notice how since we set up the columns already, it does email and find us. So I can simply connect the dots provided by the web hook. We've got the email there.
We have the find us here as well. So that is the relevant like how did you find us? For me, it was YouTube, the source.
And then what's even really cool here is I provided an additional data point within the web hook for y'all which is going to be the time stamp when it was submitted. And then if you want to get really data hungry the time zone as well # California San Francisco it's cold in the bay. With all that done I'd hit continue here.
Test the step and watch how the data gets pushed. Data I love me some data. So what we do now once we're satisfied with our workflow here is we're going to enable this automation.
So, I'm just going to go ahead and show you how to simply connect this with the Google sheet logic here, but the sets and processes can apply to everything else. I'm going to turn on this zap. So, I'm going to hit publish here.
It's going live. It is published. Now, with this publish here, what we can do is first off, retest.
Make sure it works. So, for example, I added some filters here for your landing page here. So, if someone tries to spam you with emails that don't make sense, it won't work.
There we go. Obviously, your email needs to have an at symbol. You can't give me dsa d.
That's not an email. So, for example, here, contact at webcafi. com.
How'd you find us? Um, I listen to your podcast. Subscribe.
You're on the list. Am I in the data point, though? I'm in the data point, though.
All automatically contact at webcafei. com podcast. All right, let's go ahead and adjust our landing page and make it look good.
You have downloaded the code. You watch that two-minute video that I show you how to download code like this and run the code. How do I adjust this, Corbin?
There really is multiple ways you can adjust this. But to make it extremely simple for y'all to understand a really easy workflow. Let me show you how.
Let's say you look at this landing page and you're like, Corbin, this is cool, but I hate this color orange yellow. I want you to simply screenshot this. I want you then to take that image that you just screenshotted and put it here.
Now, if you don't want to do that and you want to be even chiller or more of a vibe, come up here to these three ellipses, hit take screenshot. It will take a screenshot of the entire web page. And then maybe I'm like, you know what?
I don't like this font. I don't have 10,000 subscribers, and I don't like the color. Then I would simply just ask the AI model this.
Change the color to purple. Make the subscriber amount a thousand. And make the font more techno.
I love you, DM. Enter. And let the AI do its work.
I wanted to give you this template because now what you can do is I mean watch this first off. You're going to be like whoa AI has changed. It's changed y'all.
This is really next level stuff. So we updated to a th000 subscribers. Now we're updating our I like already like that font a lot better.
And then give me some purple. I want to see it purple. And what you'll notice there is that it finished but it didn't show me right away.
And all you need to do is come up here to this little reload. Hit reload. And look at that y'all.
The subscribe now is more techno. I like this font a lot better. Join a thousand subscribers.
You see the power of this? This is all free code. You don't have to pay for this at all.
Now, for other selling points here, such as weekly digest, zero spam, exclusive access. Of course, you can change these as well. You would simply go like this screenshot.
I would drag it in here and I would be like, I want my three selling points to be and then I would do one, two, three. AI news. I love coffee.
Make sure to leave a like. You see what I'm doing here? This is malleable.
This is like wet clay. I'm not giving you a pot that's been burned already in a furnace. You can do whatever you want.
Look at that. AI news. I love coffee.
Make sure to leave a like. Make sure to leave a like on the video. It's completely free.
Now, lastly, what I want to show you is how do I add more data points here? Corbin, I do like the fact that you said email and I do like the fact that you said how did I find you? It is simply doing this connect, dragging in here, and maybe I want the phone number.
Add phone number. Now, if you want to do other things like maybe some fields are required, some are not, simply ask the AI. Now, if you also add additional data points like adding a phone number, you need to make sure you come back to your Zapier web hook, hit edit zap, and then test trigger again for the new data that's coming in and then obviously go down the pipeline again and connecting the dots again.
You can now add your phone number to the subscribe form. Now, before I wrap up this video and we do our nice little outro, let me show you one last thing. A lot of you are going to get to the point where you're going to be like, Cory, this is amazing.
Uh, but I'm having an issue. How do I actually put this to a live website link like xyz. com so I can send it around, put it in my bio, and proceed?
Well, you are in luck. Scroll down here on the read me that I provide this little GitHub link. I'll put in the description down below.
Free newsletter website. I have a whole tutorial on how to do this. Deploy to a live website free.
You click this button. This video right here shows you how to exactly do that in 28 minutes. And we deploy it together.
I show all the code and I go the extra 20,000 yards here by providing you free Google Docs that show you step by step how to deploy to a live website link for completely free. By the end of that tutorial, the only cost will be the domain, like the $12 a year you usually pay. So that's $1 a month to run an active newsletter collector.
Good deal, right? So that just about does today's video. Make sure you leave a like.
It's completely free and as you already know these style of videos, I'll see you in the next. Did Corbin to show me a free way where I can start automating my entire top funnel with Zampier and the ability with this free open- source code type of video.
