Form Submission

[00:00:00]
>> What if I wanna use this newsletter form on a different page? Do I have to make that page pre render or server rendered as well? The answer is no. And this is why I love this hybrid rendering so much. So why don't we just go ahead and add this to our homepage now.

[00:00:16]
So the first thing I need is we're gonna add a newsletter image so we can go back up into our workshop assets. We've got this newsletter.jpg, so copy that, and then come down to your images and paste it in here. And I think that might be the end of the workshop assets.

[00:00:35]
We're in the homestretch here. We're gonna get this running and then we're off to the races with Astro. So the next thing I wanna do, I'm gonna close all these down and let's make that big again and I'm gonna open up our home page. So let's add a newsletter to our home page.

[00:00:51]
So to do that I'm gonna come up to import our newsletter image from images and newsletter.jpeg. And then down here, we wanna add one more section. And this one has a class of block and then newsletter. Inside, we're going to add our image as a source of newsletter image.

[00:01:20]
The newsletter image, give an Alt, civil say bag with the word sandwich superimposed on it and that's everything for that image. So then we're gonna set up some copies so we'll give a class of copy. So this is the nudge for somebody why they would join this newsletter.

[00:01:49]
So for ours, we're gonna say, prefer your sandwiches to go? Can you tell that I wanted to be a copywriter also? And then we're gonna say, get the sandwich newsletter to hear what else qualifies as a sandwich first. All right, and then we're gonna drop in that form again.

[00:02:20]
So we can get the same form that we had here. With one small difference which is that we are not going to include this class list, we actually don't need the class at all. We do want a class we're gonna change it back to a regular class and give it a class of newsletter-form.

[00:02:48]
The way that forms work as a reminder to myself is, so we set the method and then we gave it a class but we didn't tell it where to submit to, so it's submit to itself. All right, so we have to give it an action to tell it where to submit to.

[00:03:02]
And we built that newsletter page to handle form submissions. So we add this action of newsletter, and that now is going to send it to the right place. So let's try that one more time. Subscribe, there we go. We're on this. We're on the newsletter page. It did a server render, it handled that post submission.

[00:03:24]
And it shows us that we did in fact, subscribe. Now does this one work without JavaScript enabled? Let's find out. It does, right? So this, this is, I think, a good example of like. Some of the things that we think are really complicated, they're complicated because we're compensating for things that were made harder by tools that were made to compensate for challenges, right?

[00:04:00]
And so by by taking a step back and looking at what does the browser do, what does the platform do? We can skip some of that really complicated stuff of capturing the form submission event and then managing it. We don't have to do that on the server side.

[00:04:14]
We don't have to do that on the client side. We can just say, was this form submitted? Great. Do some stuff with it. This is very similar to what we used to do in PHP. This is very similar to what you would have done in any back-end language if you were working in really whatever, since the dawn of the Web.

[00:04:31]
If a form gets submitted, you grab the body out of the post and do some stuff with it, right? So very familiar from a server standpoint. And we didn't have to compensate for like, the way that frameworks have changed events or the way that something makes it all client side.

[00:04:49]
And now we're trying to figure out how to do the same things that we would do on the server on the client side. It just allows us to really take the idea through the platform to production in a very short span of time. And, to that end, let me turn JavaScript back on before I forget, because otherwise I'm gonna be really confused later.

[00:05:14]
So, we just built a very complicated website in the span of features, right? We've got a homepage with Hero components. We've got previews of different data that's loaded from third-party API's. We've got form submissions being handled. We've got a full on E-commerce store, including a shopping cart that's actually running.

[00:05:40]
You can add things up and go with that. We've got a blog including like content collections and RSS feed individual blog pages with URLs. We're writing in Markdown where it makes sense to write in Markdown and all of that was built in the span of what half a day, right?

[00:06:00]
These are the types of frameworks that when I get the chance to work with them, I'm so excited because not once today did I have to think, how do I get my tool to do the thing that I wanted to do? I got to say, how does the browser do that?

[00:06:15]
And then I did it, right? And so I think that to me, I get so excited because it means that what I'm spending my mental energy on and what I'm spending my time on is building the idea on building the feature. Building the thing that I was either hired to build or that I'm excited to build as a hobby project.

[00:06:32]
I don't get to do that very often. I feel like I spend a lot of time wrestling tools. I spend a lot of time trying to figure out how to get the thing that is in production, to stop doing the special things so it can just do the thing I want it to do.

[00:06:46]
And I love that Astro doesn't take that stance. They very much are like let's get this framework out of the way. Use the platform and let people just ship their ideas, get stuff out of their heads and into production in a few hours, right?