All right, everybody, this is going to be really, really fun.
We're going to create an actual contact page where users can submit contact information and enter a
message so that they can contact you online.
Now if we go to the quick start guide on Flask and we go to accessing request data.
This actually shows you how to handle it.
And right over here in the request object is the code for us to actually grab information from the browser.
Now there's even things like file uploads so we can get people to load their files and actually send
it to our server.
But for now, let's just focus on this.
I want to copy the code first and then we're going to talk about what's happening.
Let's go to our server.
Dot pie.
We have our basic roots right here.
And let's add a another one.
Like this.
Now, the only thing I care about right now is.
This part right here.
I want to create a new route that I'll name for now.
Submit form.
And this is something that will actually have to create.
It's going to have methods post and get and again this is just the default get means the browser wants
us to send information post simply means that the browser wants us to save information, but we won't
worry about that for now.
We also want to define a function called submit form.
And finally.
I want to just return for now.
A form submitted.
A.
Message.
So that's our submit form, end point.
But it's not doing anything right now.
We're never calling this on the front end on the browser.
So how can we get this to work?
Well, let's go to the contact HTML and figure out when we click the button, what happens?
And actually let's just search for it.
If I go to title page, you see that we have the send button.
So when we hit send, we ideally send some information to the server.
So let's command F and look for the send.
And look of that, it looks like it's over here.
Let's make this a little bit.
Bigger, just like that.
So we see what's going on.
We see that we have a button of type submit, and this is the button that we're clicking to send.
So it's on line 74.
Now at the top here, we see that we have something called form.
And with form, we have an action that we can take.
This is standard HTML.
When HTML was created, the idea was to display pages, but also using this form, be able to send data
to the server and we do that using this action attribute.
And in here we can put, post or get.
And if you remember, that's exactly what we have here.
This endpoint will be able to accept methods either get or post.
Now we don't need to get into the details of what get versus post is, but a good way of thinking about
it is we can send data with get by simply attaching the information to the URL.
Same here, but ideally we don't want to send people's emails and message in the URL.
Ideally, we want to send it in through some body of text that's not so clear and obvious.
So in our case we're going to use post and I'll show you how this works.
So we're going to have an action in here that it's post.
Now, the way this actually works is we will have to call the submit form, which by the way, is what
our endpoint is going to be.
So that with a form when I click.
Send over here.
It's going to run this URL.
Essentially submit form with a.
Method.
That is post.
So the action submit form will be posted when I click Send.
Let's save this and double check that it works.
So I'm going to say submit form here.
I'm going to save.
And for now, I'm just going to return.
Form submitted.
Hooray!
If we go back and just write some gibberish.
Let's actually refresh.
Make sure it's new.
If I click send.
Look at that.
I get form submitted.
Hooray.
And you see that the endpoint here is submit form.
This was the action that we added in the HTML file.
Again, if we go back, open up the developer tools.
Go to network here.
Let's make this a little smaller.
If I click send.
Look at that in my network, you see that we have the submit form.
If I click on it, I get the response which is for submitted hooray.
And if I go to headers, you see that I did a post method because that's what I said.
This is going to be me sending data to the server.
You see that the content type is application x, w, w w for URL encoded.
This is just a standard data type that we can send.
When we use.
The form tag in HTML, but we don't need to worry about that because we now have access to the data.
That the user sends.
So in the next video, we're going to try and capture the data that I sent to the server and actually
read it with our python code.
I'll see you in the next one.
Bye bye.