So we were able to submit our form.
And ideally now we have a way to capture that data that the user sends to the server.
Once again, if I submit some sort of data and click send, I get form submitted.
Hooray.
Now if I open up the developer tools and refresh that, you'll see that we have a few errors that we
have to take care of.
One is this form submitted.
So if I scroll all the way down, there's actually one thing I need to fix in order for my server to
be able to read this data.
We have to go into our contacts HTML and we just have to make sure that all our inputs, that is email,
text and the text area have a name attribute.
And this is so we can actually grab the data on the back end.
I'll show you what I mean.
So let's have name here as.
Email.
Name here as the subject.
And then name here.
As the message.
So that if I save this now.
And I go back.
To my contacts.
And submit this again.
Well, we'll have to refresh it first.
So let's refresh.
Since a messages.
And if I click submit now.
And we go to submit form.
You'll see that if I scroll all the way down, I have a form data field.
We now have email, subject and message that we actually send all the way back.
To our flask application.
Because we now gave that these name attributes.
It knows what to send.
So this is just a quick gotcha is just an HTML form standard that we'll just have to add ourselves.
Now, if we go to the flask documentation, we can access these values using the request dot form.
So if we go back.
And we go to server pie.
We can do something like they say in the documentation.
I can say if request and this request is something that will have to import in which I already have
done from flask.
So if request method, which is if we said that the method is going to be post, which if we looked
at contact dot html.
We have the method as a post.
So if that's the case.
Then I want you to grab that data by doing request dot form and I can access different values like email
or message like this.
Now, an easy way for us to grab this information is actually to do a method called to dict, which
is turning something the form data into a dictionary.
So we're going to get everything as a dictionary.
And then finally, to make sure that we get this data, let's just print data and we just have to return
something.
So let's say return.
And I want you to return form submitted.
For now.
Otherwise.
We'll just return.
Something went wrong.
Try again.
If we save this.
Let's open up our terminal and let's go back to the form.
Let's refresh.
I'm going to close this for now and just submit our regular information.
If I click Send Form a submitted, I have some errors here that we're going to have to fix soon.
But if I scroll a little bit up.
Look at that.
We have email, subject and message.
As a dictionary.
On our back end, we just transferred data to our Python app.
How cool is that?
Now the reason we get this error at the bottom.
Is because right now when I submit a form, I'm still requesting the fab icon icon.
Now, if we go back to our application, you'll notice that any time we visit a new area, our fab icon
is not showing.
Well, if we go back to our page, let's go to index HTML.
We'll see that in the link over here.
We're looking for our five icon icon in static assets.
But if you remember, we have our bolt icon right in the static folder here.
So all we have to do is just either rename some of those files or in our case, we can just move this
call it fab, icon, icon and move it into the static assets folder.
Now, if I refresh the page, you'll see that I have my new bolt, the icon.
Finally, I want to actually do something more interesting once a user submits a form.
I want to have a little thank you message.
Now there's many ways of doing this, but the easiest way we're going to do is we're going to copy this
entire file.
So I'm just going to say duplicate and call it thank you dot html.
Now.
Thank you.
HTML will be the exact same thing as the contact page that we created.
Except instead of the form that we have.
So let's grab.
This form information.
So instead of having this form.
Perhaps it will simply say thank you.
I will get in touch with you shortly.
Just like that.
Now, the cool thing that we can do here is that we can now redirect to the thank you page after they
submit the contact form.
And the way we can do that is in the server pie we can import.
Let's make this a little bit smaller and we'll import the redirect.
Module.
And all we have to do here, instead of saying form submit, it is we can say redirect to what route?
Well, we'll redirect to.
Thank you.
Dot html.
Like this.
Again because thank you.
HTML is in our templates and because our roots are set up to change dynamically, we should be able
to redirect to.
Thank you.
HTML.
If I save.
And let's say refresh.
Submit some data in here.
Click Send.
Look that.
Thank you.
I will get in touch with you shortly.
How cool is that?
And there's many cool things that we can do here.
Right?
Using the.
Curly brackets like this.
If, let's say we ask somebody to submit their username or name, we can say thank you with perhaps
their actual name that they submitted.
So something like Thank you, Bob, or thank you, Ann.
But that's something we've already talked about.
For now, that looks pretty nice.
So I'm able.
To now submit a contact form.
Make sure that we don't get any errors.
So if I click.
On send.
Look at that.
Ishmael even tells me, hey, this has to be an email.
Let's send.
And there we go.
Everything is working.
There are no errors.
We're submitting the form with all our data and we're receiving all that information.
Right over here.
How cool is that?
So we now have our server dot pie set up to actually accept information and now we have our website
that's able to well, hopefully allow us to have clients message you.
But we need to do something with this data to store it somewhere because now this is in memory.
Any time I close the server, this information is lost.
Ideally, we persist it somewhere, or ideally we store it somewhere so that in the future we can go
back maybe a week later and see who has submitted a form on our website.
Let's do that in the next video.