So in this lesson, we're finalizing our input, Ajax's input form, supplying some styling to it and
also just additional functionality.
So this is the form that we have so far and it's going to have the error messages here.
So name needs to be more than five.
I'll just do a quick refresh, not a valid email address.
So adding and make sure it's a valid email address.
And now it write sending one, sending the message and clear the form data.
So when I go over to my email there, I've got the message that was just sent to me and as well we're
tracking it into our spreadsheet.
So whatever data that we've got within the input field that's coming into the spreadsheet.
And then also we'll also clear out your default values of the form content.
So I just usually like to have them for testing.
So once it's ready and once your application is ready, just clear out all of the form information and
test it out a few times, make sure that it's working as expected.
So there's a name, hello, world to Hello, World three.
And here's our user.
How the world to in the message.
Hello, World three.
So everything is working as expected and we're returning back the submitting the form contents within
a JSON format and as well we're picking it up from the server side and then returning that information
right back.
So we've got our main contact form here and we can send content over to the server and that gets emailed
to our email account.
So let's do a quick test and you might want to test this through a few times just to make sure that
everything is working as expected and that you're getting the emails.
And if you're not getting the email saying you can go to sent and check to see if the emails are being
sent from the account.
And then as well, you can also go into all emails.
They might sometimes they do get flight spam and then automatically removed to spam.
So you want to make sure that the emails are actually coming in and you can then finalize the application.
So to add some styling to the input fields.
So for the input fields themselves, set it up as display and block so they each get their own line
of code and sit with to 80 percent.
And I'm actually going to apply for the main container.
And this one I'm going to set to with 80 percent and then center that main container so we don't have
to Sentara each one of the fields itself.
So at the margin to order so it automatically centers on.
And the input field with sort of to whatever.
One hundred percent of the available spaces and this is also applied to text area so that we get both
of them being applied there.
Let's also add some margin between them.
So top and bottom margin and that one can just be a regular font size.
One point he just makes it slightly larger and then also for the main container.
Woodside background.
So other states background color to it.
And also do some padding
and also do a border radius, so that's slightly rounded, save that.
And I'm also going to do a border radius to the fields and just a slight rounding of the fields.
And also maybe a little bit of padding, so it's spaced slightly, a little bit more for the button
itself, and that actually is going to be input type button.
So let's select the button directly.
So that's input type submit.
And you can always do a square bracket in order to the selection, and you can also use this with an
Querrey selector.
So this is selecting the button.
So maybe add a background color and I'll do a black and white type scheme
and set the color to be white, so there's their sun message button and when we hover over it, so do
the pseudo class.
And I usually like to set the opacity.
So there's that hover type effect to the button.
You could also update the background color and say, well, let's add the cursor to your pointer.
And we should also for the message area, so that's where we're getting any of the errors being output
into the output area.
So let's update the output area.
So this is where all of our error messages will go.
And let's do a background color of white and a bunch of padding to it.
Twenty five pics and text online so you can send her a line.
The text also to border.
And I'll do a solid black border or maybe we'll do a solid red border.
So there's our output field and also let's by default, we'll take output and apply the style.
Of display and set that to none and only when we want to output the message that we want to show it.
So just hide that and then we'll want to output a message.
And that's being done over here within the output.
So have the output display and turn it back to block.
So save that.
And so now if we get any content in there.
And Ford family, in addition, we can wrap this with Divx and then apply styling to the d'Hiv as well
and then close the diff so that way we can have some spacing between the ears so the output and any
device that are within output.
So just some margin.
So it shows up as the message there and you can customize this as needed.
So we also once we submit the form and we get a response back, we want to clear the form contents.
So just as we loop through all of the four elements, we can clear the contents contained within them.
And we'll just create a function in order to handle that.
So function clear form.
And that's just going to be selecting all of the form elements and the same way that we loop through
each one of these, we're just going to set the value.
So take the.
Elements with an index value of eye and value and clear all the values.
So run the function, if we're successfully returning back data, then we can clear the form.
So that clears out all of the form contents and the one that we actually don't want to clear out is
the one that's got the name of submit.
So if elements I name is not equal to submit and if it is, then we want to leave that content.
And actually, it should be a type of summit.
Because we don't have the.
So the same way as we did it before, where if the elements I.
Attribute type is not equal to submit.
Then we can clear the value, so that will clear out all the fields.
In addition, we're also going to reset the output and display that to none and within here when we
do submit the form.
So display it as block and then I would put in our HTML is going to say sending.
And then once we submit it and we want to do a display none, which is also clear the form here at this
point.
So once we get a valid email address, send the form it's sending and then that will all disappear.
So that will actually send the content over to the server side.
So whatever the input field information that we had and right now from the server, we're just responding
back with the same JSON object.
So we don't have to actually respond back or you don't have to output into the console.
So it's up to you what you do with the data that's being returned back.
So if you just want to do a post, then you don't actually need to wait for the response object and
you can just do fetch and do a method post to the endpoint.
And this way you can create and construct a form that's going to track to the data, to a spreadsheet.
In addition, it's going to actually send the emails to you from the input form and you can use this
on your websites as well.
And of course, style it as needed.
Final task for this lesson are to try out the application, make sure it's sending the data from the
input fields, from the form, and that you're able to receive the proper form information within the
spreadsheet or just within the email, depending on how you set it up.
Apply the styling to the web form as needed and also make sure that the user has the proper messaging
so that they know what is happening with the form and the data is being sent and the status information.